387 lines
11 KiB
TypeScript
387 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import { Server, Shield, Star, Tv, Users, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="mediumLarge"
|
|
sizing="medium"
|
|
background="circleGradient"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "Home",
|
|
id: "home",
|
|
},
|
|
{
|
|
name: "Features",
|
|
id: "features",
|
|
},
|
|
{
|
|
name: "Pricing",
|
|
id: "pricing",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
id: "contact",
|
|
},
|
|
]}
|
|
brandName="AnimeFlow"
|
|
/>
|
|
</div>
|
|
|
|
<div id="home" data-section="home">
|
|
<HeroBillboardCarousel
|
|
background={{
|
|
variant: "plain",
|
|
}}
|
|
title="Unlimited Anime Anytime Anywhere"
|
|
description="Stream thousands of anime series and movies in HD. Watch ad-free with flexible plans starting at just $4.99/month."
|
|
tag="New Season"
|
|
buttons={[
|
|
{
|
|
text: "Start Free Trial",
|
|
href: "#pricing",
|
|
},
|
|
]}
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-illustration-with-futuristic-technology-bright-neon-lights_23-2151672078.jpg",
|
|
imageAlt: "anime action background",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/illustration-rain-futuristic-city_23-2151406570.jpg",
|
|
imageAlt: "cyberpunk anime city",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/anime-elf-girl-with-long-hair-golden-tiara_23-2152016886.jpg",
|
|
imageAlt: "anime eyes close up",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/digital-art-fire_23-2151104485.jpg",
|
|
imageAlt: "anime sword fight scene",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/holographic-paper-note-with-cloud-shape-washi-tape_53876-133540.jpg",
|
|
imageAlt: "tech anime dashboard",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cozy-home-interior-anime-style_23-2151176356.jpg",
|
|
imageAlt: "aesthetic anime interior",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureHoverPattern
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
icon: Zap,
|
|
title: "Lightning Fast",
|
|
description: "Stream without buffering on any device.",
|
|
},
|
|
{
|
|
icon: Shield,
|
|
title: "Safe & Legal",
|
|
description: "Support the creators with high-quality legal streaming.",
|
|
},
|
|
{
|
|
icon: Star,
|
|
title: "Personalized Recs",
|
|
description: "AI-powered recommendations based on your unique watch history.",
|
|
},
|
|
]}
|
|
title="Experience Anime in HD"
|
|
description="Powerful tools and features built for the dedicated anime enthusiast."
|
|
/>
|
|
</div>
|
|
|
|
<div id="catalog" data-section="catalog">
|
|
<ProductCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "1",
|
|
brand: "Studio A",
|
|
name: "Epic Journey",
|
|
price: "Season 1",
|
|
rating: 5,
|
|
reviewCount: "1.2k",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cartoon-superhero-illustration_23-2151732509.jpg",
|
|
},
|
|
{
|
|
id: "2",
|
|
brand: "Studio B",
|
|
name: "Shadow Realm",
|
|
price: "Season 4",
|
|
rating: 5,
|
|
reviewCount: "980",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/halloween-scene-illustration-anime-style_23-2151794303.jpg",
|
|
},
|
|
{
|
|
id: "3",
|
|
brand: "Studio C",
|
|
name: "Neon Dreams",
|
|
price: "Movie",
|
|
rating: 4,
|
|
reviewCount: "500",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-girl-neon-city_23-2152007985.jpg",
|
|
},
|
|
{
|
|
id: "4",
|
|
brand: "Studio D",
|
|
name: "Lost Soul",
|
|
price: "Season 2",
|
|
rating: 5,
|
|
reviewCount: "2.1k",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/fantasy-water-character_23-2151149324.jpg",
|
|
},
|
|
{
|
|
id: "5",
|
|
brand: "Studio E",
|
|
name: "Final Stand",
|
|
price: "Season 1",
|
|
rating: 4,
|
|
reviewCount: "320",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/aesthetic-anime-character-gaming_23-2151560654.jpg",
|
|
},
|
|
{
|
|
id: "6",
|
|
brand: "Studio F",
|
|
name: "Sky High",
|
|
price: "Season 3",
|
|
rating: 5,
|
|
reviewCount: "1.5k",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/fun-3d-cartoon-superhero-with-flag-from-france-alpha-channel-included_183364-120268.jpg",
|
|
},
|
|
]}
|
|
title="Popular Now"
|
|
description="Trending series available to stream right now."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{
|
|
id: "basic",
|
|
badge: "Free",
|
|
price: "$0/mo",
|
|
subtitle: "With ads",
|
|
features: [
|
|
"Ad-supported",
|
|
"720p resolution",
|
|
"Standard library",
|
|
],
|
|
},
|
|
{
|
|
id: "premium",
|
|
badge: "Pro",
|
|
price: "$4.99/mo",
|
|
subtitle: "Best value",
|
|
features: [
|
|
"Ad-free",
|
|
"1080p resolution",
|
|
"Offline downloads",
|
|
],
|
|
},
|
|
{
|
|
id: "ultra",
|
|
badge: "Ultimate",
|
|
price: "$9.99/mo",
|
|
subtitle: "For mega fans",
|
|
features: [
|
|
"4K resolution",
|
|
"All devices",
|
|
"Early access",
|
|
],
|
|
},
|
|
]}
|
|
title="Choose Your Plan"
|
|
description="Flexible plans designed to fit your watching habits."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1",
|
|
value: "10k+",
|
|
title: "Episodes",
|
|
description: "Total library size",
|
|
icon: Tv,
|
|
},
|
|
{
|
|
id: "m2",
|
|
value: "5M+",
|
|
title: "Viewers",
|
|
description: "Active community",
|
|
icon: Users,
|
|
},
|
|
{
|
|
id: "m3",
|
|
value: "99.9%",
|
|
title: "Uptime",
|
|
description: "Streaming reliability",
|
|
icon: Server,
|
|
},
|
|
]}
|
|
title="Platform Impact"
|
|
description="Growing community of passionate viewers worldwide."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
useInvertedBackground={false}
|
|
testimonial="AnimeFlow is the best platform I've used. The selection is huge and the quality is perfect."
|
|
rating={5}
|
|
author="Kenji Sato"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/androgynous-avatar-non-binary-queer-person_23-2151100201.jpg",
|
|
alt: "cute anime avatar",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/anime-boy-skateboard-neon-city-night_23-2151975904.jpg",
|
|
alt: "cool anime character avatar",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/androgynous-avatar-non-binary-queer-person_23-2151100183.jpg",
|
|
alt: "anime girl with headphones",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/anime-character-dj-playing-music_23-2151103481.jpg",
|
|
alt: "anime fan avatar",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/beautiful-anime-kid-cartoon-scene_23-2151035260.jpg",
|
|
alt: "Beautiful anime kid cartoon scene",
|
|
},
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "f1",
|
|
title: "Can I download episodes?",
|
|
content: "Yes, our premium plans allow for offline downloads.",
|
|
},
|
|
{
|
|
id: "f2",
|
|
title: "Is there a free tier?",
|
|
content: "Yes, we offer an ad-supported free tier for casual fans.",
|
|
},
|
|
{
|
|
id: "f3",
|
|
title: "Supported devices?",
|
|
content: "Watch on web, mobile, tablets, and smart TVs.",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/digital-art-sad-student-attending-school_23-2151065276.jpg"
|
|
mediaAnimation="slide-up"
|
|
title="Common Questions"
|
|
description="Answers to everything you need to know about your subscription."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain",
|
|
}}
|
|
text="Ready to dive into the world of anime?"
|
|
buttons={[
|
|
{
|
|
text: "Get Started",
|
|
href: "#pricing",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
logoText="AnimeFlow"
|
|
columns={[
|
|
{
|
|
title: "Platform",
|
|
items: [
|
|
{
|
|
label: "Library",
|
|
href: "#catalog",
|
|
},
|
|
{
|
|
label: "Pricing",
|
|
href: "#pricing",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Support",
|
|
items: [
|
|
{
|
|
label: "Help Center",
|
|
href: "#faq",
|
|
},
|
|
{
|
|
label: "Terms",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|