Merge version_1 into main #2
491
src/app/page.tsx
491
src/app/page.tsx
@@ -29,372 +29,149 @@ export default function LandingPage() {
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Movies",
|
||||
id: "featured",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Support",
|
||||
id: "faq",
|
||||
},
|
||||
]}
|
||||
brandName="StreamCinema"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Movies", id: "featured" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Support", id: "faq" },
|
||||
]}
|
||||
brandName="StreamCinema"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
title="Stream Cinema Anywhere"
|
||||
description="Experience blockbuster movies and exclusive series in stunning cinematic quality, right from the comfort of your home."
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Watching",
|
||||
href: "#featured",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-home-watching-interesting-movie-tv_482257-119571.jpg?_wi=1"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
background={{ variant: "radial-gradient" }}
|
||||
title="Stream Cinema Anywhere"
|
||||
description="Experience blockbuster movies and exclusive series in stunning cinematic quality, right from the comfort of your home."
|
||||
buttons={[{ text: "Start Watching", href: "#featured" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-home-watching-interesting-movie-tv_482257-119571.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="featured" data-section="featured">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
brand: "Sci-Fi",
|
||||
name: "Neon Horizon",
|
||||
price: "2024",
|
||||
rating: 5,
|
||||
reviewCount: "1.2M",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-portrait-with-light-effects_23-2151118162.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
brand: "Mystery",
|
||||
name: "The Silent Echo",
|
||||
price: "2023",
|
||||
rating: 4,
|
||||
reviewCount: "890K",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/spooky-scene-with-man-floating-outside_23-2149758911.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
brand: "Thriller",
|
||||
name: "Dark Corridor",
|
||||
price: "2024",
|
||||
rating: 5,
|
||||
reviewCount: "2.1M",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dictatorship-concept-with-microphone_23-2149672838.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
brand: "Adventure",
|
||||
name: "Lone Voyager",
|
||||
price: "2022",
|
||||
rating: 4,
|
||||
reviewCount: "540K",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/silhouette-man-foggy-day_1160-328.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
brand: "Drama",
|
||||
name: "Eternal Waltz",
|
||||
price: "2024",
|
||||
rating: 5,
|
||||
reviewCount: "1.5M",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-man-holding-hand-woman-neck_23-2147988077.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
brand: "Fantasy",
|
||||
name: "Dragon's Legacy",
|
||||
price: "2023",
|
||||
rating: 5,
|
||||
reviewCount: "3.4M",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fantasy-characters-experiencing-love_23-2151164540.jpg",
|
||||
},
|
||||
]}
|
||||
title="Featured Movies"
|
||||
description="Hand-picked collection of new arrivals and audience favorites."
|
||||
/>
|
||||
</div>
|
||||
<div id="featured" data-section="featured">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "1", brand: "Sci-Fi", name: "Neon Horizon", price: "2024", rating: 5, reviewCount: "1.2M", imageSrc: "http://img.b2bpic.net/free-photo/abstract-portrait-with-light-effects_23-2151118162.jpg" },
|
||||
{ id: "2", brand: "Mystery", name: "The Silent Echo", price: "2023", rating: 4, reviewCount: "890K", imageSrc: "http://img.b2bpic.net/free-photo/spooky-scene-with-man-floating-outside_23-2149758911.jpg" },
|
||||
{ id: "3", brand: "Thriller", name: "Dark Corridor", price: "2024", rating: 5, reviewCount: "2.1M", imageSrc: "http://img.b2bpic.net/free-photo/dictatorship-concept-with-microphone_23-2149672838.jpg" },
|
||||
{ id: "4", brand: "Adventure", name: "Lone Voyager", price: "2022", rating: 4, reviewCount: "540K", imageSrc: "http://img.b2bpic.net/free-photo/silhouette-man-foggy-day_1160-328.jpg" },
|
||||
{ id: "5", brand: "Drama", name: "Eternal Waltz", price: "2024", rating: 5, reviewCount: "1.5M", imageSrc: "http://img.b2bpic.net/free-photo/happy-man-holding-hand-woman-neck_23-2147988077.jpg" },
|
||||
{ id: "6", brand: "Fantasy", name: "Dragon's Legacy", price: "2023", rating: 5, reviewCount: "3.4M", imageSrc: "http://img.b2bpic.net/free-photo/fantasy-characters-experiencing-love_23-2151164540.jpg" }
|
||||
]}
|
||||
title="Featured Movies"
|
||||
description="Hand-picked collection of new arrivals and audience favorites."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="trending" data-section="trending">
|
||||
<FeatureCardTwentySeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Ultra HD Streaming",
|
||||
descriptions: [
|
||||
"Enjoy content in pristine 4K resolution with HDR support.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/led-screen-with-flags-world-countries_140725-8327.jpg",
|
||||
imageAlt: "Led screen with the flags of the world countries",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Offline Mode",
|
||||
descriptions: [
|
||||
"Download your favorites and watch them anywhere, anytime without internet.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-home-watching-interesting-movie-tv_482257-119571.jpg?_wi=2",
|
||||
imageAlt: "Led screen with the flags of the world countries",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Multi-Device Sync",
|
||||
descriptions: [
|
||||
"Resume exactly where you left off on any of your devices, seamlessly.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-portrait-with-light-effects_23-2151118162.jpg?_wi=2",
|
||||
imageAlt: "Led screen with the flags of the world countries",
|
||||
},
|
||||
]}
|
||||
title="What Makes Us Different"
|
||||
description="Our platform combines top-tier technology with a user-centric design to elevate your entertainment experience."
|
||||
/>
|
||||
</div>
|
||||
<div id="trending" data-section="trending">
|
||||
<FeatureCardTwentySeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "f1", title: "Ultra HD Streaming", descriptions: ["Enjoy content in pristine 4K resolution with HDR support."], imageSrc: "http://img.b2bpic.net/free-photo/led-screen-with-flags-world-countries_140725-8327.jpg" },
|
||||
{ id: "f2", title: "Offline Mode", descriptions: ["Download your favorites and watch them anywhere, anytime without internet."], imageSrc: "http://img.b2bpic.net/free-photo/man-home-watching-interesting-movie-tv_482257-119571.jpg" },
|
||||
{ id: "f3", title: "Multi-Device Sync", descriptions: ["Resume exactly where you left off on any of your devices, seamlessly."], imageSrc: "http://img.b2bpic.net/free-photo/abstract-portrait-with-light-effects_23-2151118162.jpg" }
|
||||
]}
|
||||
title="What Makes Us Different"
|
||||
description="Our platform combines top-tier technology with a user-centric design to elevate your entertainment experience."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "basic",
|
||||
tag: "Essential",
|
||||
price: "$9.99",
|
||||
period: "/mo",
|
||||
description: "Perfect for casual viewers.",
|
||||
button: {
|
||||
text: "Get Started",
|
||||
},
|
||||
featuresTitle: "Includes:",
|
||||
features: [
|
||||
"HD Quality",
|
||||
"1 Device",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "standard",
|
||||
tag: "Popular",
|
||||
price: "$14.99",
|
||||
period: "/mo",
|
||||
description: "Best for families.",
|
||||
button: {
|
||||
text: "Get Started",
|
||||
},
|
||||
featuresTitle: "Includes:",
|
||||
features: [
|
||||
"4K HDR",
|
||||
"3 Devices",
|
||||
"Offline Viewing",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "premium",
|
||||
tag: "Ultimate",
|
||||
price: "$19.99",
|
||||
period: "/mo",
|
||||
description: "For the cinephile.",
|
||||
button: {
|
||||
text: "Get Started",
|
||||
},
|
||||
featuresTitle: "Includes:",
|
||||
features: [
|
||||
"4K HDR",
|
||||
"6 Devices",
|
||||
"Offline Viewing",
|
||||
"Early Access",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Membership Plans"
|
||||
description="Choose a plan that fits your viewing habits."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{ id: "basic", tag: "Essential", price: "$9.99", period: "/mo", description: "Perfect for casual viewers.", button: { text: "Get Started" }, featuresTitle: "Includes:", features: ["HD Quality", "1 Device"] },
|
||||
{ id: "standard", tag: "Popular", price: "$14.99", period: "/mo", description: "Best for families.", button: { text: "Get Started" }, featuresTitle: "Includes:", features: ["4K HDR", "3 Devices", "Offline Viewing"] },
|
||||
{ id: "premium", tag: "Ultimate", price: "$19.99", period: "/mo", description: "For the cinephile.", button: { text: "Get Started" }, featuresTitle: "Includes:", features: ["4K HDR", "6 Devices", "Offline Viewing", "Early Access"] }
|
||||
]}
|
||||
title="Membership Plans"
|
||||
description="Choose a plan that fits your viewing 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: "10M+",
|
||||
title: "Users",
|
||||
description: "Join our global community.",
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "50K+",
|
||||
title: "Movies",
|
||||
description: "Extensive library to choose from.",
|
||||
icon: Film,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "99.9%",
|
||||
title: "Uptime",
|
||||
description: "Always ready to stream.",
|
||||
icon: Zap,
|
||||
},
|
||||
]}
|
||||
title="Platform Impact"
|
||||
description="Our community is growing every single day."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "10M+", title: "Users", description: "Join our global community.", icon: Users },
|
||||
{ id: "m2", value: "50K+", title: "Movies", description: "Extensive library to choose from.", icon: Film },
|
||||
{ id: "m3", value: "99.9%", title: "Uptime", description: "Always ready to stream.", icon: Zap }
|
||||
]}
|
||||
title="Platform Impact"
|
||||
description="Our community is growing every single day."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sarah J.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-arriving-home-relaxing-couch-while-watching-movies-tv_482257-119610.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Michael C.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-home-couch-gripped-by-interesting-film-shown-television-screen_482257-124244.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Emily R.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-guy-posing-carnival_23-2148311248.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "David K.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/african-american-woman-watching-streaming-service-home_23-2148977267.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Alex B.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-watching-movie-cinema_23-2148202030.jpg",
|
||||
},
|
||||
]}
|
||||
cardTitle="Loved by Cinephiles"
|
||||
cardTag="Testimonials"
|
||||
cardAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Sarah J.", imageSrc: "http://img.b2bpic.net/free-photo/man-arriving-home-relaxing-couch-while-watching-movies-tv_482257-119610.jpg" },
|
||||
{ id: "t2", name: "Michael C.", imageSrc: "http://img.b2bpic.net/free-photo/man-home-couch-gripped-by-interesting-film-shown-television-screen_482257-124244.jpg" },
|
||||
{ id: "t3", name: "Emily R.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-guy-posing-carnival_23-2148311248.jpg" },
|
||||
{ id: "t4", name: "David K.", imageSrc: "http://img.b2bpic.net/free-photo/african-american-woman-watching-streaming-service-home_23-2148977267.jpg" },
|
||||
{ id: "t5", name: "Alex B.", imageSrc: "http://img.b2bpic.net/free-photo/man-watching-movie-cinema_23-2148202030.jpg" }
|
||||
]}
|
||||
cardTitle="Loved by Cinephiles"
|
||||
cardTag="Testimonials"
|
||||
cardAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Can I cancel anytime?",
|
||||
content: "Yes, our subscriptions are monthly and can be cancelled at any time without fees.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Does it work internationally?",
|
||||
content: "Our content is available globally, subject to regional licensing.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Can I share my account?",
|
||||
content: "Each plan has device limits; premium plans allow up to 6 simultaneous devices.",
|
||||
},
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Find everything you need to know about our services."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "q1", title: "Can I cancel anytime?", content: "Yes, our subscriptions are monthly and can be cancelled at any time without fees." },
|
||||
{ id: "q2", title: "Does it work internationally?", content: "Our content is available globally, subject to regional licensing." },
|
||||
{ id: "q3", title: "Can I share my account?", content: "Each plan has device limits; premium plans allow up to 6 simultaneous devices." }
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Find everything you need to know about our services."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={true}
|
||||
title="Need Help?"
|
||||
description="Our support team is available 24/7."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "How can we help?",
|
||||
rows: 4,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-playing-singleplayer-videogames-ultrawide-smart-tv_482257-103524.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={true}
|
||||
title="Need Help?"
|
||||
description="Our support team is available 24/7."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Your Email", required: true }
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "How can we help?", rows: 4 }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-playing-singleplayer-videogames-ultrawide-smart-tv_482257-103524.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
logoText="StreamCinema"
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Help Center",
|
||||
href: "#faq",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/3d-rendering-cinema-interior_23-2150985272.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
logoText="StreamCinema"
|
||||
columns={[
|
||||
{ title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Careers", href: "#" }] },
|
||||
{ title: "Support", items: [{ label: "Help Center", href: "#faq" }, { label: "Terms", href: "#" }] }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/3d-rendering-cinema-interior_23-2150985272.jpg"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user