Merge version_2 into main #1
79
src/app/anime-catalog/page.tsx
Normal file
79
src/app/anime-catalog/page.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function AnimeCatalogPage() {
|
||||
const [filter, setFilter] = useState("all");
|
||||
const allAnime = [
|
||||
{ id: "1", name: "Cyber Samurai", price: "Action", variant: "2024", imageSrc: "http://img.b2bpic.net/free-photo/concept-halloween-celebration-covid-19-pandemic_1258-18691.jpg" },
|
||||
{ id: "2", name: "Neon Maiden", price: "Sci-Fi", variant: "2023", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-standing-universe-texture-projection_23-2149512126.jpg" },
|
||||
{ id: "3", name: "Shadow Knight", price: "Fantasy", variant: "2024", imageSrc: "http://img.b2bpic.net/free-photo/ramadan-boxes-with-lantern-perspective-side_187299-38087.jpg" },
|
||||
{ id: "4", name: "Cloud Princess", price: "Adventure", variant: "2022", imageSrc: "http://img.b2bpic.net/free-photo/high-tech-portrait-young-girl-with-futuristic-style_23-2151133569.jpg" },
|
||||
{ id: "5", name: "Dragon Soul", price: "Action", variant: "2024", imageSrc: "http://img.b2bpic.net/free-photo/dark-style-ninja-naruto_23-2151278793.jpg" },
|
||||
{ id: "6", name: "Elemental Mage", price: "Fantasy", variant: "2023", imageSrc: "http://img.b2bpic.net/free-photo/high-tech-portrait-young-girl-with-futuristic-style_23-2151133576.jpg" },
|
||||
];
|
||||
|
||||
const filteredAnime = filter === "all" ? allAnime : allAnime.filter(a => a.price === filter);
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="layered-gradient"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Catalog", id: "/anime-catalog" },
|
||||
{ name: "Community", id: "/" },
|
||||
]}
|
||||
brandName="AniPortal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="pt-32 pb-16 px-4 md:px-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-8">Anime Library</h1>
|
||||
<div className="flex gap-4 mb-8">
|
||||
{["all", "Action", "Fantasy", "Sci-Fi", "Adventure"].map((f) => (
|
||||
<button
|
||||
key={f}
|
||||
onClick={() => setFilter(f)}
|
||||
className={`px-4 py-2 rounded-full border transition ${filter === f ? "bg-primary text-white" : "hover:bg-gray-100"}`}>
|
||||
{f.charAt(0).toUpperCase() + f.slice(1)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<ProductCardFour
|
||||
products={filteredAnime}
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
animationType="slide-up"
|
||||
title=""
|
||||
description=""
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FooterBaseReveal
|
||||
logoText="AniPortal"
|
||||
columns={[]}
|
||||
/>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
272
src/app/page.tsx
272
src/app/page.tsx
@@ -32,21 +32,13 @@ export default function LandingPage() {
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "home",
|
||||
},
|
||||
name: "Home", id: "home"},
|
||||
{
|
||||
name: "Series",
|
||||
id: "featured",
|
||||
},
|
||||
name: "Series", id: "featured"},
|
||||
{
|
||||
name: "Community",
|
||||
id: "metrics",
|
||||
},
|
||||
name: "Community", id: "metrics"},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "faq",
|
||||
},
|
||||
name: "FAQ", id: "faq"},
|
||||
]}
|
||||
brandName="AniPortal"
|
||||
/>
|
||||
@@ -56,98 +48,55 @@ export default function LandingPage() {
|
||||
<HeroBillboardTestimonial
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
variant: "sparkles-gradient"}}
|
||||
title="Immerse Yourself in Anime"
|
||||
description="Discover your next obsession. Join the largest community of anime fans worldwide."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Akira K.",
|
||||
handle: "@akira_chan",
|
||||
testimonial: "The best place to track my favorite series!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/androgynous-avatar-non-binary-queer-person_23-2151100254.jpg",
|
||||
},
|
||||
name: "Akira K.", handle: "@akira_chan", testimonial: "The best place to track my favorite series!", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/androgynous-avatar-non-binary-queer-person_23-2151100254.jpg"},
|
||||
{
|
||||
name: "Kenji M.",
|
||||
handle: "@kenji_m",
|
||||
testimonial: "I love the community discussions here.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/androgynous-avatar-non-binary-queer-person_23-2151100248.jpg",
|
||||
},
|
||||
name: "Kenji M.", handle: "@kenji_m", testimonial: "I love the community discussions here.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/androgynous-avatar-non-binary-queer-person_23-2151100248.jpg"},
|
||||
{
|
||||
name: "Yuki S.",
|
||||
handle: "@yuki_s",
|
||||
testimonial: "So many recommendations, I never run out.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/paintings-cute-kid-s-portrait_23-2151155258.jpg",
|
||||
},
|
||||
name: "Yuki S.", handle: "@yuki_s", testimonial: "So many recommendations, I never run out.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/paintings-cute-kid-s-portrait_23-2151155258.jpg"},
|
||||
{
|
||||
name: "Hiroshi T.",
|
||||
handle: "@hiroshi_t",
|
||||
testimonial: "High quality interface, really feels modern.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/androgynous-avatar-non-binary-queer-person_23-2151100209.jpg",
|
||||
},
|
||||
name: "Hiroshi T.", handle: "@hiroshi_t", testimonial: "High quality interface, really feels modern.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/androgynous-avatar-non-binary-queer-person_23-2151100209.jpg"},
|
||||
{
|
||||
name: "Mina K.",
|
||||
handle: "@mina_k",
|
||||
testimonial: "The community insights are unparalleled.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/digital-art-portrait-asian-female_23-2151836592.jpg",
|
||||
},
|
||||
name: "Mina K.", handle: "@mina_k", testimonial: "The community insights are unparalleled.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/digital-art-portrait-asian-female_23-2151836592.jpg"},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Now",
|
||||
href: "#featured",
|
||||
},
|
||||
text: "Explore Now", href: "#featured"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/fantasy-style-fire_23-2151099756.jpg"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/digital-art-young-student-school_23-2151065217.jpg",
|
||||
alt: "Anime fan",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/digital-art-young-student-school_23-2151065217.jpg", alt: "Anime fan"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/androgynous-avatar-non-binary-queer-person_23-2151100232.jpg",
|
||||
alt: "Anime fan",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/androgynous-avatar-non-binary-queer-person_23-2151100232.jpg", alt: "Anime fan"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/androgynous-avatar-non-binary-queer-person_23-2151100169.jpg",
|
||||
alt: "Anime fan",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/androgynous-avatar-non-binary-queer-person_23-2151100169.jpg", alt: "Anime fan"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-little-girl-indoors_23-2151061746.jpg",
|
||||
alt: "Anime fan",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-little-girl-indoors_23-2151061746.jpg", alt: "Anime fan"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/digital-art-portrait-asian-man_23-2151836582.jpg",
|
||||
alt: "Anime fan",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/digital-art-portrait-asian-man_23-2151836582.jpg", alt: "Anime fan"},
|
||||
]}
|
||||
avatarText="Join 1.5M+ fans"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "New Series Drops",
|
||||
},
|
||||
type: "text", text: "New Series Drops"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Community Events",
|
||||
},
|
||||
type: "text", text: "Community Events"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Exclusive Merch",
|
||||
},
|
||||
type: "text", text: "Exclusive Merch"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Live Discussions",
|
||||
},
|
||||
type: "text", text: "Live Discussions"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Fan Art Showcases",
|
||||
},
|
||||
type: "text", text: "Fan Art Showcases"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -155,8 +104,8 @@ export default function LandingPage() {
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={true}
|
||||
title="Where Anime Lives"
|
||||
description="We are dedicated to bringing the best anime experience to your screens. From trending series to hidden gems, find everything you love in one place."
|
||||
title="The Ultimate Anime Companion"
|
||||
description="AniPortal is built by fans, for fans. Our platform aggregates data from global streaming sources, offers advanced tracking for your watchlists, and connects you with a passionate community discussing the latest simulcasts."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/anime-style-character-space_23-2151134173.jpg"
|
||||
/>
|
||||
</div>
|
||||
@@ -169,20 +118,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "1.5M+",
|
||||
description: "Active Anime Fans",
|
||||
},
|
||||
id: "1", value: "1.5M+", description: "Active Anime Fans"},
|
||||
{
|
||||
id: "2",
|
||||
value: "50K+",
|
||||
description: "Series Catalog",
|
||||
},
|
||||
id: "2", value: "50K+", description: "Series Catalog"},
|
||||
{
|
||||
id: "3",
|
||||
value: "120+",
|
||||
description: "Global Regions",
|
||||
},
|
||||
id: "3", value: "120+", description: "Global Regions"},
|
||||
]}
|
||||
title="Community Power"
|
||||
description="See the passion driving our platform."
|
||||
@@ -195,48 +135,14 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Great Experience",
|
||||
quote: "I found so many new shows here.",
|
||||
name: "Akira K.",
|
||||
role: "Fan",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-fantasy-portrait-with-costume_23-2151159175.jpg",
|
||||
},
|
||||
id: "1", title: "Essential for tracking", quote: "I haven't missed a new episode since I started using this tracker.", name: "Sora T.", role: "Hardcore Fan", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-fantasy-portrait-with-costume_23-2151159175.jpg"},
|
||||
{
|
||||
id: "2",
|
||||
title: "Amazing UI",
|
||||
quote: "The design is super smooth.",
|
||||
name: "Kenji M.",
|
||||
role: "Fan",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/digital-art-portrait-asian-woman_23-2151836552.jpg",
|
||||
},
|
||||
id: "2", title: "Community is great", quote: "The discussion forums are so much better than generic social networks.", name: "Hana R.", role: "Community Member", imageSrc: "http://img.b2bpic.net/free-photo/digital-art-portrait-asian-woman_23-2151836552.jpg"},
|
||||
{
|
||||
id: "3",
|
||||
title: "Truly Epic",
|
||||
quote: "Essential for any anime lover.",
|
||||
name: "Yuki S.",
|
||||
role: "Fan",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/androgynous-avatar-non-binary-queer-person_23-2151100180.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Perfect!",
|
||||
quote: "Highly recommend to my friends.",
|
||||
name: "Hiroshi T.",
|
||||
role: "Fan",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/androgynous-avatar-non-binary-queer-person_23-2151100148.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "Simply The Best",
|
||||
quote: "I love the community features.",
|
||||
name: "Mina K.",
|
||||
role: "Fan",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/anime-boy-playing-with-water-gun-beach_23-2151987391.jpg",
|
||||
},
|
||||
id: "3", title: "Clean Interface", quote: "I love how easy it is to find hidden gems I missed.", name: "Ren K.", role: "Casual Viewer", imageSrc: "http://img.b2bpic.net/free-photo/androgynous-avatar-non-binary-queer-person_23-2151100180.jpg"},
|
||||
]}
|
||||
title="Fan Experiences"
|
||||
description="What our users think about AniPortal."
|
||||
description="What our global community says about their time on AniPortal."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -248,41 +154,17 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Cyber Samurai Figure",
|
||||
price: "$89",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/concept-halloween-celebration-covid-19-pandemic_1258-18691.jpg",
|
||||
},
|
||||
id: "p1", name: "Cyber Samurai Figure", price: "$89", imageSrc: "http://img.b2bpic.net/free-photo/concept-halloween-celebration-covid-19-pandemic_1258-18691.jpg"},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Neon Maiden Doll",
|
||||
price: "$75",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-standing-universe-texture-projection_23-2149512126.jpg",
|
||||
},
|
||||
id: "p2", name: "Neon Maiden Doll", price: "$75", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-standing-universe-texture-projection_23-2149512126.jpg"},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Shadow Knight Statue",
|
||||
price: "$120",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/ramadan-boxes-with-lantern-perspective-side_187299-38087.jpg",
|
||||
},
|
||||
id: "p3", name: "Shadow Knight Statue", price: "$120", imageSrc: "http://img.b2bpic.net/free-photo/ramadan-boxes-with-lantern-perspective-side_187299-38087.jpg"},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Cloud Princess Figure",
|
||||
price: "$95",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-tech-portrait-young-girl-with-futuristic-style_23-2151133569.jpg",
|
||||
},
|
||||
id: "p4", name: "Cloud Princess Figure", price: "$95", imageSrc: "http://img.b2bpic.net/free-photo/high-tech-portrait-young-girl-with-futuristic-style_23-2151133569.jpg"},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Dragon Soul Keyring",
|
||||
price: "$25",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dark-style-ninja-naruto_23-2151278793.jpg",
|
||||
},
|
||||
id: "p5", name: "Dragon Soul Keyring", price: "$25", imageSrc: "http://img.b2bpic.net/free-photo/dark-style-ninja-naruto_23-2151278793.jpg"},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Elemental Mage Set",
|
||||
price: "$150",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-tech-portrait-young-girl-with-futuristic-style_23-2151133576.jpg",
|
||||
},
|
||||
id: "p6", name: "Elemental Mage Set", price: "$150", imageSrc: "http://img.b2bpic.net/free-photo/high-tech-portrait-young-girl-with-futuristic-style_23-2151133576.jpg"},
|
||||
]}
|
||||
title="Top Anime Merchandise"
|
||||
description="Exclusive collectibles for true fans."
|
||||
@@ -295,20 +177,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "How do I subscribe?",
|
||||
content: "You can sign up directly via our membership dashboard.",
|
||||
},
|
||||
id: "1", title: "How do I subscribe?", content: "You can sign up directly via our membership dashboard."},
|
||||
{
|
||||
id: "2",
|
||||
title: "Are there community guidelines?",
|
||||
content: "Yes, we encourage a respectful environment for everyone.",
|
||||
},
|
||||
id: "2", title: "Are there community guidelines?", content: "Yes, we encourage a respectful environment for everyone."},
|
||||
{
|
||||
id: "3",
|
||||
title: "Can I suggest shows?",
|
||||
content: "Absolutely! Use the feedback form to reach our content team.",
|
||||
},
|
||||
id: "3", title: "Can I suggest shows?", content: "Absolutely! Use the feedback form to reach our content team."},
|
||||
]}
|
||||
title="Need Help?"
|
||||
description="Common questions from our community members."
|
||||
@@ -321,14 +194,7 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"AniWatch",
|
||||
"OtakuGlobal",
|
||||
"StudioDream",
|
||||
"AnimeFeed",
|
||||
"FestivAnime",
|
||||
"JumpApp",
|
||||
"MerchHaven",
|
||||
]}
|
||||
"AniWatch", "OtakuGlobal", "StudioDream", "AnimeFeed", "FestivAnime", "JumpApp", "MerchHaven"]}
|
||||
title="Trusted By Creators"
|
||||
description="Leading studios and influencers collaborate with us."
|
||||
/>
|
||||
@@ -338,16 +204,13 @@ export default function LandingPage() {
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Connect With Us"
|
||||
title="Join The Anime Revolution"
|
||||
description="Ready to discuss your favorite series? Let's get started today."
|
||||
variant: "plain"}}
|
||||
tag="Contact Support"
|
||||
title="Need Assistance?"
|
||||
description="Our dedicated support team is here to help with your account, community issues, or feedback. We aim to respond within 24 hours."
|
||||
buttons={[
|
||||
{
|
||||
text: "Join Now",
|
||||
href: "#",
|
||||
},
|
||||
text: "Get Help", href: "#"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -357,42 +220,27 @@ export default function LandingPage() {
|
||||
logoText="AniPortal"
|
||||
columns={[
|
||||
{
|
||||
title: "Platform",
|
||||
items: [
|
||||
title: "Platform", items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#",
|
||||
},
|
||||
label: "About", href: "#"},
|
||||
{
|
||||
label: "Series",
|
||||
href: "#featured",
|
||||
},
|
||||
label: "Series", href: "#featured"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
title: "Resources", items: [
|
||||
{
|
||||
label: "Blog",
|
||||
href: "#",
|
||||
},
|
||||
label: "Blog", href: "#"},
|
||||
{
|
||||
label: "Community",
|
||||
href: "#metrics",
|
||||
},
|
||||
label: "Community", href: "#metrics"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
label: "Privacy", href: "#"},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
label: "Terms", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
@@ -402,4 +250,4 @@ export default function LandingPage() {
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
74
src/app/watch/[id]/page.tsx
Normal file
74
src/app/watch/[id]/page.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function AnimeWatchPage({ params }: { params: { id: string } }) {
|
||||
const [currentEpisode, setCurrentEpisode] = useState(1);
|
||||
const episodes = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="layered-gradient"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Series", id: "/#featured" },
|
||||
]}
|
||||
brandName="AniPortal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<main className="pt-24 pb-12 px-6 flex flex-col md:flex-row gap-8 max-w-7xl mx-auto">
|
||||
<div className="flex-grow">
|
||||
<div className="aspect-video w-full bg-slate-900 rounded-lg flex items-center justify-center text-white mb-4">
|
||||
<span className="text-2xl">Video Player: Episode {currentEpisode}</span>
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold">Anime Series Title - Episode {currentEpisode}</h1>
|
||||
</div>
|
||||
|
||||
<div className="w-full md:w-80 flex-shrink-0">
|
||||
<h2 className="text-xl font-semibold mb-4">Episodes</h2>
|
||||
<div className="grid grid-cols-4 md:grid-cols-2 gap-2">
|
||||
{episodes.map((ep) => (
|
||||
<button
|
||||
key={ep}
|
||||
onClick={() => setCurrentEpisode(ep)}
|
||||
className={`p-3 rounded border transition ${currentEpisode === ep ? 'bg-primary text-white' : 'hover:bg-slate-100'}`}
|
||||
>
|
||||
Ep {ep}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="AniPortal"
|
||||
columns={[
|
||||
{ title: "Platform", items: [{ label: "About", href: "/" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy", href: "/" }] },
|
||||
]}
|
||||
copyrightText="© 2024 AniPortal. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user