more seasons

This commit is contained in:
Tejas Panchal
2025-07-29 18:40:32 +05:30
parent 20fce020c2
commit dc6f37da0c
5 changed files with 48 additions and 54 deletions

View File

@@ -317,24 +317,47 @@ function AnimeInfo({ random = false }) {
{seasons?.length > 0 && (
<div className="container mx-auto px-4 py-12">
<h2 className="text-2xl font-bold mb-8">More Seasons</h2>
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{seasons.map((season, index) => (
<Link
to={`/${season.id}`}
key={index}
className={`relative aspect-video rounded-xl overflow-hidden group ${
className={`relative w-full aspect-[3/1] rounded-lg overflow-hidden cursor-pointer group ${
currentId === String(season.id)
? "ring-2 ring-white/20"
? "ring-2 ring-white/40 shadow-lg shadow-white/10"
: ""
}`}
>
<img
src={season.season_poster}
alt={season.season}
className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
className={`w-full h-full object-cover scale-150 ${
currentId === String(season.id)
? "opacity-50"
: "opacity-40"
}`}
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent flex items-end p-4">
<p className="text-sm font-medium line-clamp-2">
{/* Dots Pattern Overlay */}
<div
className="absolute inset-0 z-10"
style={{
backgroundImage: `url('data:image/svg+xml,<svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="1.5" cy="1.5" r="0.5" fill="white" fill-opacity="0.25"/></svg>')`,
backgroundSize: '3px 3px'
}}
/>
{/* Dark Gradient Overlay */}
<div className={`absolute inset-0 z-20 bg-gradient-to-r ${
currentId === String(season.id)
? "from-black/50 to-transparent"
: "from-black/40 to-transparent"
}`} />
{/* Title Container */}
<div className="absolute inset-0 z-30 flex items-center justify-center">
<p className={`text-[18px] font-bold text-center px-4 transition-colors duration-300 ${
currentId === String(season.id)
? "text-white"
: "text-white/90 group-hover:text-white"
}`}>
{season.season}
</p>
</div>