Merge version_1 into main #2
495
src/app/page.tsx
495
src/app/page.tsx
@@ -29,365 +29,160 @@ export default function LandingPage() {
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Shows",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Plans",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "faq",
|
||||
},
|
||||
]}
|
||||
brandName="Netflix"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Shows", id: "features" },
|
||||
{ name: "Plans", id: "pricing" },
|
||||
{ name: "FAQ", id: "faq" }
|
||||
]}
|
||||
brandName="Netflix"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlayTestimonial
|
||||
title="Unlimited movies, TV shows, and more."
|
||||
description="Watch anywhere. Cancel anytime."
|
||||
testimonials={[
|
||||
{
|
||||
name: "John Doe",
|
||||
handle: "@johndoe",
|
||||
testimonial: "The best streaming experience I've ever had.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/focused-concentrated-woman-eating-popcorn-watching-interesting-movie-tv-female-home-alone_482257-2725.jpg",
|
||||
},
|
||||
{
|
||||
name: "Jane Smith",
|
||||
handle: "@janesmith",
|
||||
testimonial: "Incredible selection and quality.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-couple-watching-horror-movie-while-sitting-couch-home_58466-15995.jpg",
|
||||
},
|
||||
{
|
||||
name: "Bob Johnson",
|
||||
handle: "@bobjohnson",
|
||||
testimonial: "I love the new UI update!",
|
||||
rating: 4,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/amused-man-lounged-couch-laughing-funny-comedy-movie-while-eating-popcorn_482257-124273.jpg",
|
||||
},
|
||||
{
|
||||
name: "Alice Brown",
|
||||
handle: "@aliceb",
|
||||
testimonial: "So many classics available in one place.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-playing-virtual-video-games-holding-joystick_482257-31417.jpg",
|
||||
},
|
||||
{
|
||||
name: "Charlie Davis",
|
||||
handle: "@charlied",
|
||||
testimonial: "Seamless streaming and great audio.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/amused-man-lounged-couch-laughing-funny-comedy-movie-while-eating-popcorn_482257-126424.jpg",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#pricing",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/luxury-movie-theater-with-modern-design-lighting-generated-by-ai_188544-33089.jpg?_wi=1"
|
||||
showBlur={true}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/laughing-couple-having-movie-night_23-2147718327.jpg",
|
||||
alt: "Laughing couple having a movie night",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/exhausted-man-sleeping-couch-after-working-laptop-watching-tv_482257-126351.jpg",
|
||||
alt: "Exhausted man sleeping on couch after working on laptop and watching TV",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/scared-kids-watching-horror-movie_23-2147768040.jpg",
|
||||
alt: "Scared kids watching horror movie",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/dark-vip-cinema-studio-still-life_23-2149500609.jpg",
|
||||
alt: "Dark vip cinema studio still life",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-man-with-beard-holding-popcorn-bowl_482257-21499.jpg",
|
||||
alt: "Portrait of man with beard holding popcorn bowl",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlayTestimonial
|
||||
title="Unlimited movies, TV shows, and more."
|
||||
description="Watch anywhere. Cancel anytime."
|
||||
testimonials={[
|
||||
{ name: "John Doe", handle: "@johndoe", testimonial: "The best streaming experience I've ever had.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/focused-concentrated-woman-eating-popcorn-watching-interesting-movie-tv-female-home-alone_482257-2725.jpg" },
|
||||
{ name: "Jane Smith", handle: "@janesmith", testimonial: "Incredible selection and quality.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-couple-watching-horror-movie-while-sitting-couch-home_58466-15995.jpg" },
|
||||
{ name: "Bob Johnson", handle: "@bobjohnson", testimonial: "I love the new UI update!", rating: 4, imageSrc: "http://img.b2bpic.net/free-photo/amused-man-lounged-couch-laughing-funny-comedy-movie-while-eating-popcorn_482257-124273.jpg" },
|
||||
{ name: "Alice Brown", handle: "@aliceb", testimonial: "So many classics available in one place.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/person-playing-virtual-video-games-holding-joystick_482257-31417.jpg" },
|
||||
{ name: "Charlie Davis", handle: "@charlied", testimonial: "Seamless streaming and great audio.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/amused-man-lounged-couch-laughing-funny-comedy-movie-while-eating-popcorn_482257-126424.jpg" }
|
||||
]}
|
||||
buttons={[{ text: "Get Started", href: "#pricing" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/luxury-movie-theater-with-modern-design-lighting-generated-by-ai_188544-33089.jpg"
|
||||
showBlur={true}
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/laughing-couple-having-movie-night_23-2147718327.jpg", alt: "Laughing couple having a movie night" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/exhausted-man-sleeping-couch-after-working-laptop-watching-tv_482257-126351.jpg", alt: "Exhausted man sleeping on couch after working on laptop and watching TV" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/scared-kids-watching-horror-movie_23-2147768040.jpg", alt: "Scared kids watching horror movie" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/dark-vip-cinema-studio-still-life_23-2149500609.jpg", alt: "Dark vip cinema studio still life" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-man-with-beard-holding-popcorn-bowl_482257-21499.jpg", alt: "Portrait of man with beard holding popcorn bowl" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Download your shows",
|
||||
description: "Save your favorites easily and always have something to watch.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-home-with-boyfriend-using-tablet-headphones_23-2148793519.jpg",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
text: "Offline playback",
|
||||
icon: Download,
|
||||
},
|
||||
],
|
||||
reverse: false,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/luxury-movie-theater-with-modern-design-lighting-generated-by-ai_188544-33089.jpg?_wi=2",
|
||||
imageAlt: "streaming on multiple devices",
|
||||
},
|
||||
]}
|
||||
title="Enjoy on your TV"
|
||||
description="Watch on Smart TVs, Playstation, Xbox, Chromecast, Apple TV, Blu-ray players, and more."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Download your shows", description: "Save your favorites easily and always have something to watch.", media: { imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-home-with-boyfriend-using-tablet-headphones_23-2148793519.jpg" },
|
||||
items: [{ text: "Offline playback", icon: Download }],
|
||||
reverse: false
|
||||
}
|
||||
]}
|
||||
title="Enjoy on your TV"
|
||||
description="Watch on Smart TVs, Playstation, Xbox, Chromecast, Apple TV, Blu-ray players, and more."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="product" data-section="product">
|
||||
<ProductCardOne
|
||||
animationType="opacity"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Stranger Things",
|
||||
price: "Available",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/lifestyle-leisure-recreation-activity-icon_53876-21313.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "The Witcher",
|
||||
price: "Available",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hipster-vintage-vector-graphic-concept_53876-13842.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Squid Game",
|
||||
price: "Available",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/urban-mysterious-lights-film-aesthetic_23-2149098546.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Bridgerton",
|
||||
price: "Available",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/japanese-subway-system-passenger-information-display-screen_23-2148954785.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Dark",
|
||||
price: "Available",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/couple-taking-photos-light-movie-projector_23-2149377352.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Black Mirror",
|
||||
price: "Available",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/couple-taking-photos-light-movie-projector_23-2149377328.jpg",
|
||||
},
|
||||
]}
|
||||
title="Trending Now"
|
||||
description="See what everyone is watching."
|
||||
/>
|
||||
</div>
|
||||
<div id="product" data-section="product">
|
||||
<ProductCardOne
|
||||
animationType="opacity"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "1", name: "Stranger Things", price: "Available", imageSrc: "http://img.b2bpic.net/free-photo/lifestyle-leisure-recreation-activity-icon_53876-21313.jpg" },
|
||||
{ id: "2", name: "The Witcher", price: "Available", imageSrc: "http://img.b2bpic.net/free-photo/hipster-vintage-vector-graphic-concept_53876-13842.jpg" },
|
||||
{ id: "3", name: "Squid Game", price: "Available", imageSrc: "http://img.b2bpic.net/free-photo/urban-mysterious-lights-film-aesthetic_23-2149098546.jpg" },
|
||||
{ id: "4", name: "Bridgerton", price: "Available", imageSrc: "http://img.b2bpic.net/free-photo/japanese-subway-system-passenger-information-display-screen_23-2148954785.jpg" },
|
||||
{ id: "5", name: "Dark", price: "Available", imageSrc: "http://img.b2bpic.net/free-photo/couple-taking-photos-light-movie-projector_23-2149377352.jpg" },
|
||||
{ id: "6", name: "Black Mirror", price: "Available", imageSrc: "http://img.b2bpic.net/free-photo/couple-taking-photos-light-movie-projector_23-2149377328.jpg" }
|
||||
]}
|
||||
title="Trending Now"
|
||||
description="See what everyone is watching."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Our Story"
|
||||
description="We are revolutionizing how the world consumes entertainment."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Global reach",
|
||||
description: "Streaming to over 190 countries.",
|
||||
},
|
||||
{
|
||||
title: "Original content",
|
||||
description: "Award winning films and series.",
|
||||
},
|
||||
{
|
||||
title: "User-first design",
|
||||
description: "Seamless interface across devices.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/filmmaker-refining-movie-footage_482257-121322.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Our Story"
|
||||
description="We are revolutionizing how the world consumes entertainment."
|
||||
bulletPoints={[
|
||||
{ title: "Global reach", description: "Streaming to over 190 countries." },
|
||||
{ title: "Original content", description: "Award winning films and series." },
|
||||
{ title: "User-first design", description: "Seamless interface across devices." }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/filmmaker-refining-movie-footage_482257-121322.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metric" data-section="metric">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={true}
|
||||
title="Our Global Impact"
|
||||
tag="Milestones"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "260M+",
|
||||
description: "Paid subscribers",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "190+",
|
||||
description: "Countries covered",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "1000+",
|
||||
description: "Original titles",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="metric" data-section="metric">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={true}
|
||||
title="Our Global Impact"
|
||||
tag="Milestones"
|
||||
metrics={[
|
||||
{ id: "m1", value: "260M+", description: "Paid subscribers" },
|
||||
{ id: "m2", value: "190+", description: "Countries covered" },
|
||||
{ id: "m3", value: "1000+", description: "Original titles" }
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonial" data-section="testimonial">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Alice",
|
||||
handle: "@alice",
|
||||
testimonial: "Netflix is great!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/sports-fan-watching-football-competition-live-tv-reacting-anger_482257-92429.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Bob",
|
||||
handle: "@bob",
|
||||
testimonial: "Amazing content variety.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-turning-tv-using-remote-control-eating-popcorn_482257-120863.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Charlie",
|
||||
handle: "@charlie",
|
||||
testimonial: "Super reliable streaming.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/scared-woman-cinema_23-2147988949.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "David",
|
||||
handle: "@david",
|
||||
testimonial: "The recommendation engine is perfect.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-couch-having-movie-night_23-2147718305.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Eve",
|
||||
handle: "@eve",
|
||||
testimonial: "I love the original series.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-arriving-apartment-sitting-down-couch-enjoy-movies_482257-126486.jpg",
|
||||
},
|
||||
]}
|
||||
title="What People Say"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonial" data-section="testimonial">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
description="What our subscribers think."
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Alice", handle: "@alice", testimonial: "Netflix is great!", imageSrc: "http://img.b2bpic.net/free-photo/sports-fan-watching-football-competition-live-tv-reacting-anger_482257-92429.jpg" },
|
||||
{ id: "t2", name: "Bob", handle: "@bob", testimonial: "Amazing content variety.", imageSrc: "http://img.b2bpic.net/free-photo/man-turning-tv-using-remote-control-eating-popcorn_482257-120863.jpg" },
|
||||
{ id: "t3", name: "Charlie", handle: "@charlie", testimonial: "Super reliable streaming.", imageSrc: "http://img.b2bpic.net/free-photo/scared-woman-cinema_23-2147988949.jpg" },
|
||||
{ id: "t4", name: "David", handle: "@david", testimonial: "The recommendation engine is perfect.", imageSrc: "http://img.b2bpic.net/free-photo/man-couch-having-movie-night_23-2147718305.jpg" },
|
||||
{ id: "t5", name: "Eve", handle: "@eve", testimonial: "I love the original series.", imageSrc: "http://img.b2bpic.net/free-photo/person-arriving-apartment-sitting-down-couch-enjoy-movies_482257-126486.jpg" }
|
||||
]}
|
||||
title="What People Say"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "How much does Netflix cost?",
|
||||
content: "Plans start from $6.99/mo.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Can I cancel anytime?",
|
||||
content: "Yes, absolutely.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "What can I watch?",
|
||||
content: "Thousands of titles available.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Frequently Asked Questions"
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "f1", title: "How much does Netflix cost?", content: "Plans start from $6.99/mo." },
|
||||
{ id: "f2", title: "Can I cancel anytime?", content: "Yes, absolutely." },
|
||||
{ id: "f3", title: "What can I watch?", content: "Thousands of titles available." }
|
||||
]}
|
||||
sideTitle="Frequently Asked Questions"
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
tag="Join Now"
|
||||
title="Ready to watch?"
|
||||
description="Enter your email to create or restart your membership."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Join Now"
|
||||
title="Ready to watch?"
|
||||
description="Enter your email to create or restart your membership."
|
||||
buttons={[{ text: "Get Started", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Help Center",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Account",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Media Center",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Netflix"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{ items: [{ label: "FAQ", href: "#" }, { label: "Help Center", href: "#" }] },
|
||||
{ items: [{ label: "Account", href: "#" }, { label: "Media Center", href: "#" }] },
|
||||
{ items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
|
||||
]}
|
||||
logoText="Netflix"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user