shishantbiswas/JustAnime
1
0
Fork 0
mirror of https://github.com/JustAnimeCore/JustAnime.git synced 2026-04-17 22:01:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed Carousal

Browse Source
This commit is contained in:
Tejas Panchal
2025-07-27 12:49:52 +05:30
parent 6e55237581
commit 9322ac33fc
8 changed files with 218 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/components/banner/Banner.css
View File

@@ -12,28 +12,28 @@
bottom:0;
background: radial-gradient(
circle at 130% center,
rgba(32, 31, 49, 0) 50%,
rgba(32, 31, 49, 0.5) 60%,
rgba(32, 31, 49, 1) 80%,
rgba(32, 31, 49, 1) 100%
rgba(10, 10, 10, 0) 50%,
rgba(10, 10, 10, 0.5) 60%,
rgba(10, 10, 10, 1) 80%,
rgba(10, 10, 10, 1) 100%
),
linear-gradient(
to top,
rgba(32, 31, 49, 1) 0%,
rgba(32, 31, 49, 0) 20%,
rgba(32, 31, 49, 0) 100%
rgba(10, 10, 10, 1) 0%,
rgba(10, 10, 10, 0) 20%,
rgba(10, 10, 10, 0) 100%
),
linear-gradient(
to left,
rgba(32, 31, 49, 1) 0%,
rgba(32, 31, 49, 0) 20%,
rgba(32, 31, 49, 0) 100%
rgba(10, 10, 10, 1) 0%,
rgba(10, 10, 10, 0) 20%,
rgba(10, 10, 10, 0) 100%
),
linear-gradient(
to bottom,
rgba(32, 31, 49, 1) 0%,
rgba(32, 31, 49, 0) 20%,
rgba(32, 31, 49, 0) 100%
to bottom,m
rgba(10, 10, 10, 1) 0%,
rgba(10, 10, 10, 0) 20%,
rgba(10, 10, 10, 0) 100%
);
z-index: 1;
@@ -42,28 +42,28 @@
.spotlight-overlay {
background: radial-gradient(
circle at 130% center,
rgba(32, 31, 49, 0) 50%,
rgba(32, 31, 49, 0.5) 60%,
rgba(32, 31, 49, 1) 80%,
rgba(32, 31, 49, 1) 100%
rgba(10, 10, 10, 0) 50%,
rgba(10, 10, 10, 0.5) 60%,
rgba(10, 10, 10, 1) 80%,
rgba(10, 10, 10, 1) 100%
),
linear-gradient(
to top,
rgba(32, 31, 49, 1) 0%,
rgba(32, 31, 49, 0) 20%,
rgba(32, 31, 49, 0) 100%
rgba(10, 10, 10, 1) 0%,
rgba(10, 10, 10, 0) 20%,
rgba(10, 10, 10, 0) 100%
),
linear-gradient(
to left,
rgba(32, 31, 49, 1) 0%,
rgba(32, 31, 49, 0) 20%,
rgba(32, 31, 49, 0) 100%
rgba(10, 10, 10, 1) 0%,
rgba(10, 10, 10, 0) 20%,
rgba(10, 10, 10, 0) 100%
),
linear-gradient(
to bottom,
rgba(32, 31, 49, 1) 0%,
rgba(32, 31, 49, 0) 50%,
rgba(32, 31, 49, 0) 100%
rgba(10, 10, 10, 1) 0%,
rgba(10, 10, 10, 0) 50%,
rgba(10, 10, 10, 0) 100%
);
}
}
@@ -71,28 +71,28 @@
.spotlight-overlay {
background: radial-gradient(
circle at 100% center,
rgba(32, 31, 49, 0) 50%,
rgba(32, 31, 49, 0.5) 60%,
rgba(32, 31, 49, 1) 95%,
rgba(32, 31, 49, 1) 100%
rgba(10, 10, 10, 0) 50%,
rgba(10, 10, 10, 0.5) 60%,
rgba(10, 10, 10, 1) 95%,
rgba(10, 10, 10, 1) 100%
),
linear-gradient(
to top,
rgba(32, 31, 49, 1) 0%,
rgba(32, 31, 49, 0) 20%,
rgba(32, 31, 49, 0) 100%
rgba(10, 10, 10, 1) 0%,
rgba(10, 10, 10, 0) 20%,
rgba(10, 10, 10, 0) 100%
),
linear-gradient(
to left,
rgba(32, 31, 49, 1) 0%,
rgba(32, 31, 49, 0) 20%,
rgba(32, 31, 49, 0) 100%
rgba(10, 10, 10, 1) 0%,
rgba(10, 10, 10, 0) 20%,
rgba(10, 10, 10, 0) 100%
),
linear-gradient(
to bottom,
rgba(32, 31, 49, 1) 0%,
rgba(32, 31, 49, 0) 70%,
rgba(32, 31, 49, 0) 100%
rgba(10, 10, 10, 1) 0%,
rgba(10, 10, 10, 0) 70%,
rgba(10, 10, 10, 0) 100%
);
}
}
@@ -100,34 +100,34 @@
.spotlight-overlay {
background: radial-gradient(
circle at 60% center,
rgba(32, 31, 49, 0) 50%,
rgba(32, 31, 49, 0.5) 85%,
rgba(32, 31, 49, 1) 95%,
rgba(32, 31, 49, 1) 100%
rgba(10, 10, 10, 0) 50%,
rgba(10, 10, 10, 0.5) 85%,
rgba(10, 10, 10, 1) 95%,
rgba(10, 10, 10, 1) 100%
),
linear-gradient(
to top,
rgba(32, 31, 49, 1) 0%,
rgba(32, 31, 49, 0) 70%,
rgba(32, 31, 49, 0) 100%
rgba(10, 10, 10, 1) 0%,
rgba(10, 10, 10, 0) 70%,
rgba(10, 10, 10, 0) 100%
),
linear-gradient(
to left,
rgba(32, 31, 49, 1) 0%,
rgba(32, 31, 49, 0) 20%,
rgba(32, 31, 49, 0) 100%
rgba(10, 10, 10, 1) 0%,
rgba(10, 10, 10, 0) 20%,
rgba(10, 10, 10, 0) 100%
),
linear-gradient(
to bottom,
rgba(32, 31, 49, 1) 0%,
rgba(32, 31, 49, 0) 70%,
rgba(32, 31, 49, 0) 100%
rgba(10, 10, 10, 1) 0%,
rgba(10, 10, 10, 0) 70%,
rgba(10, 10, 10, 0) 100%
),
linear-gradient(
to right,
rgba(32, 31, 49, 1) 0%,
rgba(32, 31, 49, 0) 15%,
rgba(32, 31, 49, 0) 100%
rgba(10, 10, 10, 1) 0%,
rgba(10, 10, 10, 0) 15%,
rgba(10, 10, 10, 0) 100%
);
}
}
}

82
src/components/banner/Banner.jsx
View File

@@ -6,7 +6,6 @@ import {
faCalendar,
faClock,
} from "@fortawesome/free-solid-svg-icons";
import { FaChevronRight } from "react-icons/fa";
import { Link } from "react-router-dom";
import { useLanguage } from "@/src/context/LanguageContext";
import "./Banner.css";
@@ -14,30 +13,30 @@ import "./Banner.css";
function Banner({ item, index }) {
const { language } = useLanguage();
return (
<section className="spotlight w-full h-full">
<section className="spotlight w-full h-full relative">
<img
src={`${item.poster}`}
alt={item.title}
className="absolute right-0 object-cover h-full w-[80%] bg-auto max-[1200px]:w-full max-[1200px]:bottom-0"
/>
<div className="spotlight-overlay"></div>
<div className="absolute flex flex-col left-0 bottom-[50px] w-[55%] p-4 z-10 max-[1390px]:w-[45%] max-[1390px]:bottom-[10px] max-[1300px]:w-[600px] max-[1120px]:w-[60%] max-md:w-[90%] max-[300px]:w-full">
<p className="text-[#ffbade] font-semibold text-[20px] w-fit max-[1300px]:text-[15px]">
<div className="absolute flex flex-col left-0 bottom-[50px] w-[55%] p-4 z-10 max-[1390px]:w-[45%] max-[1390px]:bottom-[40px] max-[1300px]:w-[600px] max-[1120px]:w-[60%] max-md:w-[90%] max-md:bottom-[50px] max-[300px]:w-full">
<p className="text-transparent bg-clip-text bg-gradient-to-r from-[#ffbade] to-[#ff90c5] font-semibold text-[20px] w-fit max-[1300px]:text-[15px]">
#{index + 1} Spotlight
</p>
<h3 className="text-white line-clamp-2 text-5xl font-bold mt-6 text-left max-[1390px]:text-[45px] max-[1300px]:text-3xl max-[1300px]:mt-4 max-md:text-2xl max-md:mt-1 max-[575px]:text-[22px] max-sm:leading-6 max-sm:w-[80%] max-[320px]:w-full ">
<h3 className="text-white line-clamp-2 text-5xl font-bold mt-4 text-left max-[1390px]:text-[45px] max-[1300px]:text-3xl max-[1300px]:mt-3 max-md:text-2xl max-md:mt-1 max-[575px]:text-[22px] max-sm:leading-6 max-sm:w-[80%] max-[320px]:w-full ">
{language === "EN" ? item.title : item.japanese_title}
</h3>
<div className="flex h-fit justify-center items-center w-fit space-x-5 mt-8 max-[1300px]:mt-6 max-md:hidden">
<div className="flex h-fit justify-start items-center w-fit space-x-5 mt-5 max-[1300px]:mt-4 max-md:hidden">
{item.tvInfo && (
<>
{item.tvInfo.showType && (
<div className="flex space-x-1 justify-center items-center">
<FontAwesomeIcon
icon={faPlay}
className="text-[8px] bg-white px-[4px] py-[3px] rounded-full"
className="text-[8px] bg-white/10 text-white px-[4px] py-[3px] rounded-full"
/>
<p className="text-white text-[16px]">
<p className="text-white/70 text-[16px]">
{item.tvInfo.showType}
</p>
</div>
@@ -47,9 +46,9 @@ function Banner({ item, index }) {
<div className="flex space-x-1 justify-center items-center">
<FontAwesomeIcon
icon={faClock}
className="text-white text-[14px]"
className="text-white/70 text-[14px]"
/>
<p className="text-white text-[17px]">
<p className="text-white/70 text-[17px]">
{item.tvInfo.duration}
</p>
</div>
@@ -59,9 +58,9 @@ function Banner({ item, index }) {
<div className="flex space-x-1 justify-center items-center">
<FontAwesomeIcon
icon={faCalendar}
className="text-white text-[14px]"
className="text-white/70 text-[14px]"
/>
<p className="text-white text-[16px]">
<p className="text-white/70 text-[16px]">
{item.tvInfo.releaseDate}
</p>
</div>
@@ -69,30 +68,30 @@ function Banner({ item, index }) {
<div className="flex space-x-3 w-fit">
{item.tvInfo.quality && (
<div className="bg-[#ffbade] py-[1px] px-[6px] rounded-md w-fit text-[11px] font-bold h-fit">
<div className="bg-white/10 py-[1px] px-[6px] rounded-md w-fit text-[11px] font-bold h-fit text-white">
{item.tvInfo.quality}
</div>
)}
<div className="flex space-x-[1px] rounded-r-[5px] rounded-l-[5px] w-fit py-[1px] overflow-hidden">
{item.tvInfo.episodeInfo?.sub && (
<div className="flex space-x-1 justify-center items-center bg-[#B0E3AF] px-[4px]">
<div className="flex space-x-1 justify-center items-center bg-white/10 px-[4px]">
<FontAwesomeIcon
icon={faClosedCaptioning}
className="text-[12px]"
className="text-[12px] text-white"
/>
<p className="text-[12px] font-bold">
<p className="text-[12px] font-bold text-white">
{item.tvInfo.episodeInfo.sub}
</p>
</div>
)}
{item.tvInfo.episodeInfo?.dub && (
<div className="flex space-x-1 justify-center items-center bg-[#B9E7FF] px-[4px]">
<div className="flex space-x-1 justify-center items-center bg-white/20 px-[4px]">
<FontAwesomeIcon
icon={faMicrophone}
className="text-[12px]"
className="text-[12px] text-white"
/>
<p className="text-[12px] font-semibold">
<p className="text-[12px] font-semibold text-white">
{item.tvInfo.episodeInfo.dub}
</p>
</div>
@@ -102,35 +101,30 @@ function Banner({ item, index }) {
</>
)}
</div>
<p className="text-white text-[17px] font-sm mt-6 text-left line-clamp-3 max-[1200px]:line-clamp-2 max-[1300px]:w-[500px] max-[1120px]:w-[90%] max-md:hidden">
<p className="text-white/70 text-[17px] font-sm mt-4 text-left line-clamp-3 max-[1200px]:line-clamp-2 max-[1300px]:w-[500px] max-[1120px]:w-[90%] max-md:hidden">
{item.description}
</p>
<div className="flex gap-x-5 mt-10 max-md:mt-6 max-sm:w-full max-[320px]:flex-col max-[320px]:space-y-3">
<button className="flex justify-center items-center bg-[#ffbade] px-4 py-2 rounded-3xl gap-x-2 max-[320px]:w-fit ">
<FontAwesomeIcon
icon={faPlay}
className="text-[8px] bg-[#000000] px-[6px] py-[6px] rounded-full text-[#ffbade] max-[320px]:text-[6px]"
/>
<Link
to={`/watch/${item.id}`}
className="max-[1000px]:text-[15px] font-semibold max-[320px]:text-[12px]"
>
Watch Now
</Link>
</button>
<Link
to={`/${item.id}`}
className="flex bg-[#3B3A52] justify-center items-center px-4 py-2 rounded-3xl gap-x-2 max-[320px]:w-fit max-[320px]:px-3"
>
<p className="text-white max-[1000px]:text-[15px] font-semibold max-[320px]:text-[12px]">
Detail
</p>
<FaChevronRight className="text-white max-[320px]:text-[10px]" />
</Link>
</div>
</div>
<div className="absolute bottom-[50px] right-[40px] flex gap-x-5 z-10 max-md:mt-6 max-sm:w-fit max-[320px]:flex-col max-[320px]:space-y-3">
<Link
to={`/watch/${item.id}`}
className="bg-white/90 hover:bg-white text-black font-medium px-7 py-3 rounded-lg transition-all duration-200 flex items-center gap-x-2.5 shadow-lg shadow-black/10 backdrop-blur-sm hover:translate-y-[-1px]"
>
<FontAwesomeIcon
icon={faPlay}
className="text-[10px]"
/>
<span>Watch Now</span>
</Link>
<Link
to={`/${item.id}`}
className="bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/20 text-white font-medium px-7 py-3 rounded-lg transition-all duration-200 flex items-center gap-x-2.5 backdrop-blur-sm hover:translate-y-[-1px]"
>
<span>Details</span>
</Link>
</div>
</section>
);
}
export default Banner;
export default Banner;