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 layout

Browse Source
This commit is contained in:
Tejas Panchal
2025-07-27 18:09:53 +05:30
parent 55062e42bd
commit d6af291cde
4 changed files with 66 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,126 +6,68 @@
} }
.spotlight-overlay { .spotlight-overlay {
background: radial-gradient( background: linear-gradient(
circle at 130% center, 90deg,
rgba(10, 10, 10, 0) 50%, #0a0a0a 0%,
rgba(10, 10, 10, 0.5) 60%, rgba(10, 10, 10, 0.7) 35%,
rgba(10, 10, 10, 1) 80%, rgba(10, 10, 10, 0) 65%
rgba(10, 10, 10, 1) 100%
), ),
linear-gradient( linear-gradient(
to top, to top,
rgba(10, 10, 10, 1) 0%, #0a0a0a 0%,
rgba(10, 10, 10, 0) 20%, rgba(10, 10, 10, 0.7) 20%,
rgba(10, 10, 10, 0) 100% rgba(10, 10, 10, 0) 50%
),
linear-gradient(
to left,
rgba(10, 10, 10, 1) 0%,
rgba(10, 10, 10, 0) 20%,
rgba(10, 10, 10, 0) 100%
),
linear-gradient(
to bottom,
rgba(10, 10, 10, 1) 0%,
rgba(10, 10, 10, 0) 20%,
rgba(10, 10, 10, 0) 100%
); );
pointer-events: none; pointer-events: none;
} }
@media only screen and (max-width: 1300px) { @media only screen and (max-width: 1300px) {
.spotlight-overlay { .spotlight-overlay {
background: radial-gradient( background: linear-gradient(
circle at 130% center, 90deg,
rgba(10, 10, 10, 0) 50%, #0a0a0a 0%,
rgba(10, 10, 10, 0.5) 60%, rgba(10, 10, 10, 0.7) 35%,
rgba(10, 10, 10, 1) 80%, rgba(10, 10, 10, 0) 65%
rgba(10, 10, 10, 1) 100%
), ),
linear-gradient( linear-gradient(
to top, to top,
rgba(10, 10, 10, 1) 0%, #0a0a0a 0%,
rgba(10, 10, 10, 0) 20%, rgba(10, 10, 10, 0.7) 20%,
rgba(10, 10, 10, 0) 100% rgba(10, 10, 10, 0) 50%
),
linear-gradient(
to left,
rgba(10, 10, 10, 1) 0%,
rgba(10, 10, 10, 0) 20%,
rgba(10, 10, 10, 0) 100%
),
linear-gradient(
to bottom,
rgba(10, 10, 10, 1) 0%,
rgba(10, 10, 10, 0) 50%,
rgba(10, 10, 10, 0) 100%
); );
} }
} }
@media only screen and (max-width: 1200px) { @media only screen and (max-width: 1200px) {
.spotlight-overlay { .spotlight-overlay {
background: radial-gradient( background: linear-gradient(
circle at 100% center, 90deg,
rgba(10, 10, 10, 0) 50%, #0a0a0a 0%,
rgba(10, 10, 10, 0.5) 60%, rgba(10, 10, 10, 0.7) 35%,
rgba(10, 10, 10, 1) 95%, rgba(10, 10, 10, 0) 65%
rgba(10, 10, 10, 1) 100%
), ),
linear-gradient( linear-gradient(
to top, to top,
rgba(10, 10, 10, 1) 0%, #0a0a0a 0%,
rgba(10, 10, 10, 0) 20%, rgba(10, 10, 10, 0.7) 20%,
rgba(10, 10, 10, 0) 100% rgba(10, 10, 10, 0) 50%
),
linear-gradient(
to left,
rgba(10, 10, 10, 1) 0%,
rgba(10, 10, 10, 0) 20%,
rgba(10, 10, 10, 0) 100%
),
linear-gradient(
to bottom,
rgba(10, 10, 10, 1) 0%,
rgba(10, 10, 10, 0) 70%,
rgba(10, 10, 10, 0) 100%
); );
} }
} }
@media only screen and (max-width: 900px) { @media only screen and (max-width: 900px) {
.spotlight-overlay { .spotlight-overlay {
background: radial-gradient( background: linear-gradient(
circle at 60% center, 90deg,
rgba(10, 10, 10, 0) 50%, #0a0a0a 0%,
rgba(10, 10, 10, 0.5) 85%, rgba(10, 10, 10, 0.7) 35%,
rgba(10, 10, 10, 1) 95%, rgba(10, 10, 10, 0) 65%
rgba(10, 10, 10, 1) 100%
), ),
linear-gradient( linear-gradient(
to top, to top,
rgba(10, 10, 10, 1) 0%, #0a0a0a 0%,
rgba(10, 10, 10, 0) 70%, rgba(10, 10, 10, 0.7) 20%,
rgba(10, 10, 10, 0) 100% rgba(10, 10, 10, 0) 50%
),
linear-gradient(
to left,
rgba(10, 10, 10, 1) 0%,
rgba(10, 10, 10, 0) 20%,
rgba(10, 10, 10, 0) 100%
),
linear-gradient(
to bottom,
rgba(10, 10, 10, 1) 0%,
rgba(10, 10, 10, 0) 70%,
rgba(10, 10, 10, 0) 100%
),
linear-gradient(
to right,
rgba(10, 10, 10, 1) 0%,
rgba(10, 10, 10, 0) 15%,
rgba(10, 10, 10, 0) 100%
); );
} }
} }

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

@@ -13,16 +13,16 @@ import "./Banner.css";
function Banner({ item, index }) { function Banner({ item, index }) {
const { language } = useLanguage(); const { language } = useLanguage();
return ( return (
<section className="spotlight w-full h-full relative"> <section className="spotlight w-full h-full relative rounded-2xl overflow-hidden">
<img <img
src={`${item.poster}`} src={`${item.poster}`}
alt={item.title} alt={item.title}
className="absolute right-0 object-cover h-full w-[80%] bg-auto max-[1200px]:w-full max-[1200px]:bottom-0" className="absolute inset-0 object-cover w-full h-full rounded-2xl"
/> />
<div className="spotlight-overlay absolute inset-0 z-[1]"></div> <div className="spotlight-overlay absolute inset-0 z-[1] rounded-2xl"></div>
<div className="absolute flex flex-col left-0 bottom-[50px] w-[55%] p-4 z-[2] max-[1390px]:w-[45%] max-[1390px]:bottom-[40px] max-[1300px]:w-[600px] max-[1120px]:w-[60%] max-md:w-[90%] max-md:bottom-[20px] max-[300px]:w-full"> <div className="absolute flex flex-col left-0 bottom-[40px] w-[55%] p-4 z-[2] max-[1390px]:w-[45%] max-[1390px]:bottom-[40px] max-[1300px]:w-[600px] max-[1120px]:w-[60%] max-md:w-[90%] max-md:bottom-[20px] 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]"> <p className="text-[#ffbade] font-semibold text-[20px] w-fit max-[1300px]:text-[15px]">
#{index + 1} Spotlight #{index + 1} Spotlight
</p> </p>
<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"> <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">

36
src/components/spotlight/Spotlight.css
View File

@@ -13,11 +13,9 @@
} }
.button-prev, .button-prev,
.button-next { .button-next {
width: 32px; width: 36px;
height: 32px; height: 36px;
background-color: rgba(255, 255, 255, 0.05); background-color: #1a1a1a;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px);
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@@ -28,17 +26,15 @@
.button-prev:hover, .button-prev:hover,
.button-next:hover { .button-next:hover {
background-color: rgba(255, 255, 255, 0.1); background-color: #2a2a2a;
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-1px);
} }
.button-prev::after, .button-prev::after,
.button-next::after { .button-next::after {
content: ''; content: '';
width: 7px; width: 9px;
height: 7px; height: 9px;
border: 1.5px solid rgba(255, 255, 255, 0.8); border: 2px solid #ffffff;
border-left: 0; border-left: 0;
border-bottom: 0; border-bottom: 0;
} }
@@ -79,7 +75,7 @@
} }
.swiper-pagination { .swiper-pagination {
bottom: 15px !important; bottom: 20px !important;
} }
.swiper-pagination-bullet { .swiper-pagination-bullet {
@@ -93,12 +89,12 @@
@media only screen and (max-width: 575px) { @media only screen and (max-width: 575px) {
.swiper-horizontal > .swiper-pagination-bullets { .swiper-horizontal > .swiper-pagination-bullets {
bottom: 10px !important; bottom: 20px !important;
left: 50% !important; left: 50% !important;
transform: translateX(-50%) !important; transform: translateX(-50%) !important;
width: auto !important; width: auto !important;
display: flex !important; display: flex !important;
gap: 6px; gap: 4px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: row !important; flex-direction: row !important;
@@ -106,7 +102,15 @@
} }
.button-prev, .button-prev,
.button-next { .button-next {
width: 28px; width: 32px;
height: 28px; height: 32px;
}
.swiper-pagination-bullet {
width: 6px !important;
height: 6px !important;
}
.swiper-pagination-bullet-active {
width: 16px !important;
border-radius: 8px !important;
} }
} }

10
src/components/spotlight/Spotlight.jsx
View File

@@ -11,10 +11,6 @@ const Spotlight = ({ spotlights }) => {
return ( return (
<> <>
<div className="relative h-[450px] max-[1390px]:h-[400px] max-[1300px]:h-[350px] max-md:h-[300px] pt-[20px]"> <div className="relative h-[450px] max-[1390px]:h-[400px] max-[1300px]:h-[350px] max-md:h-[300px] pt-[20px]">
<div className="absolute right-[10px] top-[30px] flex space-x-2 z-10 max-[575px]:top-[10px] max-[575px]:right-[10px]">
<div className="button-prev"></div>
<div className="button-next"></div>
</div>
{spotlights && spotlights.length > 0 ? ( {spotlights && spotlights.length > 0 ? (
<> <>
<Swiper <Swiper
@@ -35,12 +31,16 @@ const Spotlight = ({ spotlights }) => {
disableOnInteraction: false, disableOnInteraction: false,
}} }}
modules={[Navigation, Autoplay, Pagination]} modules={[Navigation, Autoplay, Pagination]}
className="h-[450px] max-[1390px]:h-full" className="h-[450px] max-[1390px]:h-full rounded-2xl overflow-hidden relative"
style={{ style={{
"--swiper-pagination-bullet-inactive-color": "rgba(255, 255, 255, 0.5)", "--swiper-pagination-bullet-inactive-color": "rgba(255, 255, 255, 0.5)",
"--swiper-pagination-bullet-inactive-opacity": "1", "--swiper-pagination-bullet-inactive-opacity": "1",
}} }}
> >
<div className="absolute right-[20px] top-[20px] flex space-x-1.5 z-[5]">
<div className="button-prev"></div>
<div className="button-next"></div>
</div>
{spotlights.map((item, index) => ( {spotlights.map((item, index) => (
<SwiperSlide className="text-black relative" key={index}> <SwiperSlide className="text-black relative" key={index}>
<Banner item={item} index={index} /> <Banner item={item} index={index} />