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 2

Browse Source
This commit is contained in:
Tejas Panchal
2025-07-27 12:54:12 +05:30
parent 9322ac33fc
commit 503d935fc6
2 changed files with 11 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,15 +1,11 @@
.spotlight { .spotlight {
overflow: hidden; overflow: hidden;
position: relative;
width: 100%;
height: 100%;
} }
.spotlight-overlay { .spotlight-overlay {
width: 100.1%;
height: 100.1%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom:0;
background: radial-gradient( background: radial-gradient(
circle at 130% center, circle at 130% center,
rgba(10, 10, 10, 0) 50%, rgba(10, 10, 10, 0) 50%,
@@ -30,14 +26,14 @@
rgba(10, 10, 10, 0) 100% rgba(10, 10, 10, 0) 100%
), ),
linear-gradient( linear-gradient(
to bottom,m to bottom,
rgba(10, 10, 10, 1) 0%, rgba(10, 10, 10, 1) 0%,
rgba(10, 10, 10, 0) 20%, rgba(10, 10, 10, 0) 20%,
rgba(10, 10, 10, 0) 100% rgba(10, 10, 10, 0) 100%
); );
pointer-events: none;
z-index: 1;
} }
@media only screen and (max-width: 1300px) { @media only screen and (max-width: 1300px) {
.spotlight-overlay { .spotlight-overlay {
background: radial-gradient( background: radial-gradient(
@@ -67,6 +63,7 @@
); );
} }
} }
@media only screen and (max-width: 1200px) { @media only screen and (max-width: 1200px) {
.spotlight-overlay { .spotlight-overlay {
background: radial-gradient( background: radial-gradient(
@@ -96,6 +93,7 @@
); );
} }
} }
@media only screen and (max-width: 900px) { @media only screen and (max-width: 900px) {
.spotlight-overlay { .spotlight-overlay {
background: radial-gradient( background: radial-gradient(

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

@@ -19,8 +19,8 @@ function Banner({ item, index }) {
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 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="spotlight-overlay absolute inset-0 z-[1]"></div>
<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"> <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-[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]"> <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 #{index + 1} Spotlight
</p> </p>
@@ -105,7 +105,7 @@ function Banner({ item, index }) {
{item.description} {item.description}
</p> </p>
</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"> <div className="absolute bottom-[50px] right-[40px] flex gap-x-5 z-[2] max-md:mt-6 max-sm:w-fit max-[320px]:flex-col max-[320px]:space-y-3">
<Link <Link
to={`/watch/${item.id}`} 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]" 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]"