shishantbiswas/JustAnime
1
0
Fork 0
mirror of https://github.com/JustAnimeCore/JustAnime.git synced 2026-04-18 06:11: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

2
src/App.css
View File

@@ -14,8 +14,6 @@ body,
display: flex;
flex-direction: column;
min-height: 100vh;
max-width: 2048px;
margin-inline: auto;
}
.content {
width: 100%;

4
src/App.jsx
View File

@@ -29,8 +29,8 @@ function App() {
return (
<HomeInfoProvider>
<div className="app-container">
<main className="content">
<div className="app-container px-4 lg:px-10">
<main className="content max-w-[2048px] mx-auto w-full">
{!isSplashScreen && <Navbar />}
<Routes>
<Route path="/" element={<SplashScreen />} />

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;

26
src/components/splashscreen/SplashScreen.css
View File

@@ -98,18 +98,23 @@ body {
/* Enter button */
.enter-button {
background: white;
background: rgba(255, 255, 255, 0.9);
color: black;
padding: 12px 24px;
padding: 14px 28px;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
margin: 8px 0 60px;
transition: background-color 0.2s;
transition: all 0.2s ease;
backdrop-filter: blur(8px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.enter-button:hover {
background: #ffbade;
background: white;
transform: translateY(-1px);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
}
/* FAQ Section */
@@ -133,10 +138,11 @@ body {
}
.faq-item {
background: #141414;
background: rgba(255, 255, 255, 0.03);
border-radius: 12px;
overflow: hidden;
border: 1px solid #1a1a1a;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px);
}
.faq-question {
@@ -155,18 +161,18 @@ body {
}
.faq-question:hover {
background: #1a1a1a;
background: rgba(255, 255, 255, 0.05);
}
.faq-toggle {
font-size: 16px;
color: white;
opacity: 0.8;
transition: transform 0.2s ease;
color: rgba(255, 255, 255, 0.7);
transition: all 0.2s ease;
}
.faq-toggle.rotate {
transform: rotate(180deg);
color: white;
}
.faq-answer {

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

@@ -13,56 +13,99 @@
}
.button-prev,
.button-next {
width: 40px;
height: 40px;
color: white;
background-color: #383747;
border-radius: 7px;
display: flex;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px);
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease-out;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.button-prev:hover,
.button-next:hover {
background-color: #ffbade;
color: #383747;
background-color: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-1px);
}
.button-prev::after,
.button-next::after {
content: '';
width: 7px;
height: 7px;
border: 1.5px solid rgba(255, 255, 255, 0.8);
border-left: 0;
border-bottom: 0;
}
.button-prev::after {
font-family: "Font Awesome 5 Free";
content: "\f053";
font-weight: 900;
font-size: 14px;
transform: rotate(-135deg);
margin-left: 3px;
}
.button-next::after {
font-family: "Font Awesome 5 Free";
content: "\f054";
font-weight: 900;
font-size: 14px;
transform: rotate(45deg);
margin-right: 3px;
}
.swiper-horizontal > .swiper-pagination-bullets {
display: none;
bottom: 20px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: auto !important;
display: flex !important;
gap: 8px;
align-items: center;
justify-content: center;
}
.swiper-pagination-bullet {
width: 8px !important;
height: 8px !important;
border-radius: 50% !important;
background-color: rgba(255, 255, 255, 0.5) !important;
opacity: 1 !important;
}
.swiper-pagination-bullet-active {
background-color: rgb(239, 213, 22) !important;
background-color: #ffbade !important;
width: 24px !important;
border-radius: 12px !important;
}
.swiper-pagination {
bottom: 15px !important;
}
.swiper-pagination-bullet {
background: white !important;
opacity: 0.5;
}
.swiper-pagination-bullet-active {
opacity: 1;
}
@media only screen and (max-width: 575px) {
.swiper-horizontal > .swiper-pagination-bullets {
/* bottom: var(--swiper-pagination-bottom, 8px); */
bottom: 0;
right: 10px !important ;
left: auto !important;
width: 20px !important;
bottom: 5px !important;
bottom: 10px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: auto !important;
display: flex !important;
gap: 18px;
gap: 6px;
align-items: center;
justify-content: center;
height: 80%;
flex-direction: column;
flex-direction: row !important;
height: auto !important;
}
}
.button-prev,
.button-next {
display: none;
}
}

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

@@ -1,18 +1,19 @@
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Autoplay } from "swiper/modules";
import { Navigation, Autoplay, Pagination } from "swiper/modules";
import "swiper/css";
import "swiper/css/autoplay";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "./Spotlight.css";
import Banner from "../banner/Banner";
const Spotlight = ({ spotlights }) => {
return (
<>
<div className="relative h-[600px] max-[1390px]:h-[530px] max-[1300px]:h-[500px] max-md:h-[420px]">
<div className="absolute right-[10px] bottom-0 flex flex-col space-y-2 z-10 max-[575px]:hidden">
<div className="button-next"></div>
<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]:hidden">
<div className="button-prev"></div>
<div className="button-next"></div>
</div>
{spotlights && spotlights.length > 0 ? (
<>
@@ -25,14 +26,18 @@ const Spotlight = ({ spotlights }) => {
nextEl: ".button-next",
prevEl: ".button-prev",
}}
pagination={{
clickable: true,
dynamicBullets: false,
}}
autoplay={{
delay: 3000,
disableOnInteraction: false,
}}
modules={[Navigation, Autoplay]}
className="h-[600px] max-[1390px]:h-full"
modules={[Navigation, Autoplay, Pagination]}
className="h-[450px] max-[1390px]:h-full"
style={{
"--swiper-pagination-bullet-inactive-color": "#ffffff",
"--swiper-pagination-bullet-inactive-color": "rgba(255, 255, 255, 0.5)",
"--swiper-pagination-bullet-inactive-opacity": "1",
}}
>
@@ -51,4 +56,4 @@ const Spotlight = ({ spotlights }) => {
);
};
export default Spotlight;
export default Spotlight;