Merge version_1 into main #2
366
src/app/page.tsx
366
src/app/page.tsx
@@ -26,280 +26,110 @@ export default function LandingPage() {
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Movies",
|
||||
id: "movies",
|
||||
},
|
||||
{
|
||||
name: "Series",
|
||||
id: "series",
|
||||
},
|
||||
{
|
||||
name: "Anime",
|
||||
id: "anime",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "pricing",
|
||||
},
|
||||
]}
|
||||
brandName="StreamLine"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Movies", id: "movies" },
|
||||
{ name: "Series", id: "series" },
|
||||
{ name: "Anime", id: "anime" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
]}
|
||||
brandName="StreamLine"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Your Cinematic World, Anywhere."
|
||||
description="Unlimited movies, TV series, and anime. Stream everything in one place with ultra-high quality, no interruptions."
|
||||
tag="All-Access Streaming"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-daughter-filming-online-content-with-her-parent-using-green-screen-tablet-from-sponsor_482257-76811.jpg",
|
||||
imageAlt: "Cinematic Action",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/illustration-anime-city_23-2151779645.jpg",
|
||||
imageAlt: "Anime Fantasy",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-make-up-eyes_23-2148282247.jpg?_wi=1",
|
||||
imageAlt: "Sci-Fi Thriller",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/collage-about-movie-time-with-people-cinema_23-2149946314.jpg?_wi=1",
|
||||
imageAlt: "City Drama",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/anime-style-boy-girl-couple_23-2151451496.jpg?_wi=1",
|
||||
imageAlt: "Epic Anime",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
rating={5}
|
||||
ratingText="Trusted by 10M+ users"
|
||||
tagIcon={Sparkles}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{ variant: "plain" }}
|
||||
title="Your Cinematic World, Anywhere."
|
||||
description="Unlimited movies, TV series, and anime. Stream everything in one place with ultra-high quality, no interruptions."
|
||||
tag="All-Access Streaming"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-daughter-filming-online-content-with-her-parent-using-green-screen-tablet-from-sponsor_482257-76811.jpg", imageAlt: "Cinematic Action"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/illustration-anime-city_23-2151779645.jpg", imageAlt: "Anime Fantasy"}
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
rating={5}
|
||||
ratingText="Trusted by 10M+ users"
|
||||
tagIcon={Sparkles}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="movies" data-section="movies">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Galactic Odyssey",
|
||||
price: "Available",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-make-up-eyes_23-2148282247.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Neon City Blues",
|
||||
price: "Available",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/collage-about-movie-time-with-people-cinema_23-2149946314.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Dragon Peak",
|
||||
price: "Available",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/anime-style-boy-girl-couple_23-2151451496.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Midnight Shadow",
|
||||
price: "Available",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/terrifying-screaming-adult-silhouette-studio_23-2150710127.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Joyful Journeys",
|
||||
price: "Available",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-people-celebrating-christmas_23-2150977214.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Deep Sea Secrets",
|
||||
price: "Available",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-small-crab-green-leaves-sandy-ground_181624-35856.jpg",
|
||||
},
|
||||
]}
|
||||
title="Featured Movies & Series"
|
||||
description="Discover the latest blockbusters and timeless classics across every genre."
|
||||
/>
|
||||
</div>
|
||||
<div id="movies" data-section="movies">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "Galactic Odyssey", price: "Available", imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-make-up-eyes_23-2148282247.jpg" },
|
||||
{ id: "p2", name: "Neon City Blues", price: "Available", imageSrc: "http://img.b2bpic.net/free-photo/collage-about-movie-time-with-people-cinema_23-2149946314.jpg" },
|
||||
{ id: "p3", name: "Dragon Peak", price: "Available", imageSrc: "http://img.b2bpic.net/free-photo/anime-style-boy-girl-couple_23-2151451496.jpg" },
|
||||
{ id: "p4", name: "Midnight Shadow", price: "Available", imageSrc: "http://img.b2bpic.net/free-photo/terrifying-screaming-adult-silhouette-studio_23-2150710127.jpg" },
|
||||
{ id: "p5", name: "Joyful Journeys", price: "Available", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-people-celebrating-christmas_23-2150977214.jpg" },
|
||||
{ id: "p6", name: "Deep Sea Secrets", price: "Available", imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-small-crab-green-leaves-sandy-ground_181624-35856.jpg" },
|
||||
]}
|
||||
title="Featured Movies & Series"
|
||||
description="Discover the latest blockbusters and timeless classics across every genre."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "basic",
|
||||
badge: "Standard",
|
||||
price: "$9.99/mo",
|
||||
subtitle: "Perfect for individual viewers.",
|
||||
buttons: [
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"HD Quality",
|
||||
"1 Screen at a time",
|
||||
"Unlimited Content",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "premium",
|
||||
badge: "Popular",
|
||||
price: "$14.99/mo",
|
||||
subtitle: "Best for families and friends.",
|
||||
buttons: [
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"4K Ultra HD",
|
||||
"4 Screens at a time",
|
||||
"Offline Viewing",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
badge: "Ultimate",
|
||||
price: "$19.99/mo",
|
||||
subtitle: "For cinema enthusiasts.",
|
||||
buttons: [
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"4K + HDR",
|
||||
"6 Screens at a time",
|
||||
"Early Access to Premieres",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Membership Plans"
|
||||
description="Choose the best plan for your entertainment needs."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{ id: "basic", badge: "Standard", price: "$9.99/mo", subtitle: "Perfect for individual viewers.", buttons: [{ text: "Get Started", href: "#" }], features: ["HD Quality", "1 Screen at a time", "Unlimited Content"] },
|
||||
{ id: "premium", badge: "Popular", price: "$14.99/mo", subtitle: "Best for families and friends.", buttons: [{ text: "Get Started", href: "#" }], features: ["4K Ultra HD", "4 Screens at a time", "Offline Viewing"] },
|
||||
{ id: "pro", badge: "Ultimate", price: "$19.99/mo", subtitle: "For cinema enthusiasts.", buttons: [{ text: "Get Started", href: "#" }], features: ["4K + HDR", "6 Screens at a time", "Early Access to Premieres"] }
|
||||
]}
|
||||
title="Membership Plans"
|
||||
description="Choose the best plan for your entertainment needs."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Can I cancel anytime?",
|
||||
content: "Yes, you can cancel your subscription at any time with no penalties.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Does this include Anime?",
|
||||
content: "Absolutely! We feature a vast library of classic and seasonal anime.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "How many devices?",
|
||||
content: "Depending on your plan, you can watch on up to 6 devices simultaneously.",
|
||||
},
|
||||
{
|
||||
id: "f4",
|
||||
title: "Is it available globally?",
|
||||
content: "We support streaming in over 150 countries worldwide.",
|
||||
},
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Get answers to your questions about your streaming experience."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "Can I cancel anytime?", content: "Yes, you can cancel your subscription at any time with no penalties." },
|
||||
{ id: "f2", title: "Does this include Anime?", content: "Absolutely! We feature a vast library of classic and seasonal anime." },
|
||||
{ id: "f3", title: "How many devices?", content: "Depending on your plan, you can watch on up to 6 devices simultaneously." },
|
||||
{ id: "f4", title: "Is it available globally?", content: "We support streaming in over 150 countries worldwide." },
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Get answers to your questions about your streaming experience."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Support"
|
||||
title="Need Help?"
|
||||
description="Have questions about your account? Our support team is here to assist you 24/7."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/adult-male-illustrator-working-tablet-device_23-2149863235.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Support"
|
||||
title="Need Help?"
|
||||
description="Have questions about your account? Our support team is here to assist you 24/7."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/adult-male-illustrator-working-tablet-device_23-2149863235.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/neon-light-streak-background_23-2148133185.jpg"
|
||||
logoText="StreamLine"
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Press",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Community",
|
||||
items: [
|
||||
{
|
||||
label: "Forum",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Twitter",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Discord",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Use",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/neon-light-streak-background_23-2148133185.jpg"
|
||||
logoText="StreamLine"
|
||||
columns={[
|
||||
{ title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Careers", href: "#" }, { label: "Press", href: "#" }] },
|
||||
{ title: "Community", items: [{ label: "Forum", href: "#" }, { label: "Twitter", href: "#" }, { label: "Discord", href: "#" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Use", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user