mirror of
https://github.com/JustAnimeCore/JustAnime.git
synced 2026-04-18 06:11:45 +00:00
more seasons
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user