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

39
README.md
View File

@@ -1,22 +1,22 @@
<p align="center"> <p align="center">
<div align="center"> <div align="center">
<a href="https://zenime.site/"> <a href="https://justanime.vercel.app">
<img alt="AnimeHi" src="https://raw.githubusercontent.com/itzzzme/zenime/refs/heads/main/public/logo.png" width="220"/> <img alt="JustAnime" src="https://raw.githubusercontent.com/tejaspanchall/JustAnime/refs/heads/main/public/logo.png" width="220"/>
</a> </a>
</div> </div>
<h3 align="center">Zenime - Ad free anime streaming platform</h3> <h3 align="center">JustAnime - Ad free anime streaming platform</h3>
<p align="center"> <p align="center">
<a href="https://github.com/itzzzme/zenime"> <a href="https://github.com/tejaspanchall/JustAnime">
<img src="https://img.shields.io/github/stars/itzzzme/zenime" alt="Github Stars"> <img src="https://img.shields.io/github/stars/tejaspanchall/JustAnime" alt="Github Stars">
</a> </a>
<img src="https://img.shields.io/github/issues/itzzzme/zenime" alt="Github Issues"> <img src="https://img.shields.io/github/issues/tejaspanchall/JustAnime" alt="Github Issues">
<a href="https://github.com/itzzzme/zenime"> <a href="https://github.com/tejaspanchall/JustAnime">
<img src="https://img.shields.io/github/forks/itzzzme/zenime" alt="Github Forks" /> <img src="https://img.shields.io/github/forks/tejaspanchall/JustAnime" alt="Github Forks" />
</a> </a>
</p> </p>
</p> </p>
<p align="center"> <p align="center">
<a href="https://zenime.site">Zenime</a> is an open-source anime streaming service that uses <a href="https://github.com/itzzzme/anime-api">custom</a> API, built using ReactJS with javascript and Tailwind CSS. It lets you easily find any anime with intuitive search & suggestion feature and stream without any ads. <a href="https://justanime.vercel.app">JustAnime</a> is an open-source anime streaming service that uses <a href="https://github.com/itzzzme/anime-api">ANIME</a> API, built using ReactJS with javascript and Tailwind CSS. It lets you easily find any anime with intuitive search & suggestion feature and stream without any ads.
</p> </p>
<details> <details>
@@ -47,21 +47,21 @@
## Previews ## Previews
<div style="text-align: left;"> <div style="text-align: left;">
<img src="https://raw.githubusercontent.com/itzzzme/zenime/refs/heads/main/public/homepage.webp" alt="Home Page" style="max-width: 80%;" > <img src="" alt="Home Page" style="max-width: 80%;" >
<details> <details>
<summary style="margin-top:10px">View more screenshots</summary> <summary style="margin-top:10px">View more screenshots</summary>
<br/> <br/>
AnimeInfo Page AnimeInfo Page
<img style="margin-top:10px" src="https://raw.githubusercontent.com/itzzzme/zenime/refs/heads/main/public/animeinfo.webp" alt="AnimeInfo Page" style="max-width: 80%;"> <img style="margin-top:10px" src="" alt="AnimeInfo Page" style="max-width: 80%;">
<br/> <br/>
Searchbar Searchbar
<img style="margin-top:10px" src="https://raw.githubusercontent.com/itzzzme/zenime/refs/heads/main/public/searchbar.webp" alt="Searchbar" style="max-width: 50%;"> <img style="margin-top:10px" src="" alt="Searchbar" style="max-width: 50%;">
<br/> <br/>
Character & Voice Actors Character & Voice Actors
<img style="margin-top:10px" src="https://raw.githubusercontent.com/itzzzme/zenime/refs/heads/main/public/voiceactors.webp" alt="Character & Voice Actors" style="max-width: 80%;"> <img style="margin-top:10px" src="" alt="Character & Voice Actors" style="max-width: 80%;">
<br/> <br/>
Watch Page Watch Page
<img style="margin-top:10px" src="https://raw.githubusercontent.com/itzzzme/zenime/refs/heads/main/public/watchpage.webp" alt="Watch Page" style="max-width: 80%;"> <img style="margin-top:10px" src="" alt="Watch Page" style="max-width: 80%;">
<br/> <br/>
</details> </details>
</div> </div>
@@ -73,8 +73,8 @@
### 2. Run the following code to clone the repository and install all required dependencies ### 2. Run the following code to clone the repository and install all required dependencies
```bash ```bash
git clone https://github.com/itzzzme/zenime.git git clone https://github.com/tejaspanchall/JustAnime.git
cd zenime cd JustAnime
npm install # or yarn npm install # or yarn
``` ```
@@ -89,13 +89,13 @@ npm start # or npm run dev (to run develepment server)
### Vercel ### Vercel
Host your own instance of <a href="https://zenime.site">Zenime</a> on vercel Host your own instance of <a href="https://justanime.vercel.app">JustAnime</a> on vercel
[![Deploy to Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/itzzzme/zenime) [![Deploy to Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/itzzzme/zenime)
### Render ### Render
Host your own instance of <a href="https://zenime.site">Zenime</a> on Render. Host your own instance of <a href="https://justanime.vercel.app">JustAnime</a> on Render.
[![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/itzzzme/zenime) [![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/itzzzme/zenime)
@@ -114,6 +114,3 @@ If you discover any issues or have suggestions for improvement, please open an i
### Support ### Support
If you like the project feel free to drop a star ✨. Your appreciation means a lot. If you like the project feel free to drop a star ✨. Your appreciation means a lot.
<p align="center" style="text-decoration: none;">Made by <a href="https://github.com/itzzzme" tarGET="_blank">itzzzme
</a>🫰</p>

2
src/App.css
View File

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

4
src/App.jsx
View File

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

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

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

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

@@ -6,7 +6,6 @@ import {
faCalendar, faCalendar,
faClock, faClock,
} from "@fortawesome/free-solid-svg-icons"; } from "@fortawesome/free-solid-svg-icons";
import { FaChevronRight } from "react-icons/fa";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { useLanguage } from "@/src/context/LanguageContext"; import { useLanguage } from "@/src/context/LanguageContext";
import "./Banner.css"; import "./Banner.css";
@@ -14,30 +13,30 @@ 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"> <section className="spotlight w-full h-full relative">
<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 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"></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"> <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-[#ffbade] 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>
<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} {language === "EN" ? item.title : item.japanese_title}
</h3> </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 && (
<> <>
{item.tvInfo.showType && ( {item.tvInfo.showType && (
<div className="flex space-x-1 justify-center items-center"> <div className="flex space-x-1 justify-center items-center">
<FontAwesomeIcon <FontAwesomeIcon
icon={faPlay} 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} {item.tvInfo.showType}
</p> </p>
</div> </div>
@@ -47,9 +46,9 @@ function Banner({ item, index }) {
<div className="flex space-x-1 justify-center items-center"> <div className="flex space-x-1 justify-center items-center">
<FontAwesomeIcon <FontAwesomeIcon
icon={faClock} 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} {item.tvInfo.duration}
</p> </p>
</div> </div>
@@ -59,9 +58,9 @@ function Banner({ item, index }) {
<div className="flex space-x-1 justify-center items-center"> <div className="flex space-x-1 justify-center items-center">
<FontAwesomeIcon <FontAwesomeIcon
icon={faCalendar} 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} {item.tvInfo.releaseDate}
</p> </p>
</div> </div>
@@ -69,30 +68,30 @@ function Banner({ item, index }) {
<div className="flex space-x-3 w-fit"> <div className="flex space-x-3 w-fit">
{item.tvInfo.quality && ( {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} {item.tvInfo.quality}
</div> </div>
)} )}
<div className="flex space-x-[1px] rounded-r-[5px] rounded-l-[5px] w-fit py-[1px] overflow-hidden"> <div className="flex space-x-[1px] rounded-r-[5px] rounded-l-[5px] w-fit py-[1px] overflow-hidden">
{item.tvInfo.episodeInfo?.sub && ( {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 <FontAwesomeIcon
icon={faClosedCaptioning} 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} {item.tvInfo.episodeInfo.sub}
</p> </p>
</div> </div>
)} )}
{item.tvInfo.episodeInfo?.dub && ( {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 <FontAwesomeIcon
icon={faMicrophone} 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} {item.tvInfo.episodeInfo.dub}
</p> </p>
</div> </div>
@@ -102,33 +101,28 @@ function Banner({ item, index }) {
</> </>
)} )}
</div> </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} {item.description}
</p> </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"> </div>
<button className="flex justify-center items-center bg-[#ffbade] px-4 py-2 rounded-3xl gap-x-2 max-[320px]:w-fit "> <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">
<FontAwesomeIcon
icon={faPlay}
className="text-[8px] bg-[#000000] px-[6px] py-[6px] rounded-full text-[#ffbade] max-[320px]:text-[6px]"
/>
<Link <Link
to={`/watch/${item.id}`} to={`/watch/${item.id}`}
className="max-[1000px]:text-[15px] font-semibold max-[320px]:text-[12px]" 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]"
> >
Watch Now <FontAwesomeIcon
icon={faPlay}
className="text-[10px]"
/>
<span>Watch Now</span>
</Link> </Link>
</button>
<Link <Link
to={`/${item.id}`} 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" 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]"
> >
<p className="text-white max-[1000px]:text-[15px] font-semibold max-[320px]:text-[12px]"> <span>Details</span>
Detail
</p>
<FaChevronRight className="text-white max-[320px]:text-[10px]" />
</Link> </Link>
</div> </div>
</div>
</section> </section>
); );
} }

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

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

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

@@ -13,56 +13,99 @@
} }
.button-prev, .button-prev,
.button-next { .button-next {
width: 40px; width: 32px;
height: 40px; height: 32px;
color: white; background-color: rgba(255, 255, 255, 0.05);
background-color: #383747; border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 7px; backdrop-filter: blur(8px);
display: flex; border-radius: 6px;
justify-content: center;
align-items: center;
cursor: pointer; 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-prev:hover,
.button-next:hover { .button-next:hover {
background-color: #ffbade; background-color: rgba(255, 255, 255, 0.1);
color: #383747; 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 { .button-prev::after {
font-family: "Font Awesome 5 Free"; transform: rotate(-135deg);
content: "\f053"; margin-left: 3px;
font-weight: 900;
font-size: 14px;
} }
.button-next::after { .button-next::after {
font-family: "Font Awesome 5 Free"; transform: rotate(45deg);
content: "\f054"; margin-right: 3px;
font-weight: 900;
font-size: 14px;
} }
.swiper-horizontal > .swiper-pagination-bullets { .swiper-horizontal > .swiper-pagination-bullets {
display: none; bottom: 20px !important;
} left: 50% !important;
.swiper-pagination-bullet-active { transform: translateX(-50%) !important;
background-color: rgb(239, 213, 22) !important; width: auto !important;
}
@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;
display: flex !important; display: flex !important;
gap: 18px; gap: 8px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 80%; }
flex-direction: column;
.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: #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: 10px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: auto !important;
display: flex !important;
gap: 6px;
align-items: center;
justify-content: center;
flex-direction: row !important;
height: auto !important;
}
.button-prev,
.button-next {
display: none;
} }
} }

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

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