268 lines
11 KiB
TypeScript
268 lines
11 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
|
import AboutPhoneTimeline from '@/components/sections/about/AboutPhoneTimeline';
|
|
import FeatureCardTwenty from '@/components/sections/feature/FeatureCardTwenty';
|
|
import TestimonialCardEleven from '@/components/sections/testimonial/TestimonialCardEleven';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';
|
|
import FooterSocial from '@/components/sections/footer/FooterSocial';
|
|
import { Sparkles, Instagram, Twitter, Facebook } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="small"
|
|
sizing="medium"
|
|
background="aurora"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="minimal"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
brandName="Stranger Things"
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Seasons", id: "feature" },
|
|
{ name: "Fans", id: "testimonial" },
|
|
{ name: "FAQ", id: "faq" }
|
|
]}
|
|
button={{
|
|
text: "Join Fans",
|
|
href: "contact"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardCarousel
|
|
title="Welcome to the Upside Down"
|
|
description="Explore the thrilling world of Stranger Things. Discover the mysteries of Hawkins, meet unforgettable characters, and relive iconic moments from Netflix's hit series."
|
|
tag="Netflix Phenomenon"
|
|
tagIcon={Sparkles}
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xyb7eo",
|
|
imageAlt: "Stranger Things opening scene"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=guxiij",
|
|
imageAlt: "Upside Down portal"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=f64ih0",
|
|
imageAlt: "Main cast characters"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=aotlkg",
|
|
imageAlt: "Retro 1980s neon aesthetic"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ff3h9b",
|
|
imageAlt: "Hawkins town setting"
|
|
}
|
|
]}
|
|
buttons={[
|
|
{ text: "Watch Now", href: "https://www.netflix.com" },
|
|
{ text: "Fan Community", href: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<AboutPhoneTimeline
|
|
tag="Show Overview"
|
|
title="The Story of Stranger Things"
|
|
description="When a young boy mysteriously disappears in 1980s Indiana, his friends, family and local police uncover a mystery involving secret government experiments and a strange new world. Stranger Things is a masterpiece of suspense, nostalgia, and supernatural thrills that captivated millions worldwide."
|
|
textboxLayout="default"
|
|
phoneOne={{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=v3jd9a",
|
|
imageAlt: "Stranger Things season overview"
|
|
}}
|
|
phoneTwo={{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6v9dq7",
|
|
imageAlt: "Character cast ensemble"
|
|
}}
|
|
useInvertedBackground="noInvert"
|
|
buttons={[
|
|
{ text: "All Seasons Available", href: "https://www.netflix.com" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="feature" data-section="feature">
|
|
<FeatureCardTwenty
|
|
title="Iconic Seasons and Story Arcs"
|
|
description="Each season of Stranger Things builds on the mythology of Hawkins, introducing new threats, deeper character development, and increasingly high stakes. From the initial mystery to cosmic horror, experience the complete journey."
|
|
tag="All 4 Seasons"
|
|
images={[
|
|
{
|
|
id: 1,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=v549ep",
|
|
imageAlt: "Season 1 Demogorgon"
|
|
},
|
|
{
|
|
id: 2,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c343k8",
|
|
imageAlt: "Season 2 Mind Flayer"
|
|
},
|
|
{
|
|
id: 3,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=5y9qxl",
|
|
imageAlt: "Season 3 Starcourt"
|
|
},
|
|
{
|
|
id: 4,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=je9mgw",
|
|
imageAlt: "Season 4 Vecna"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
buttons={[
|
|
{ text: "Stream on Netflix", href: "https://www.netflix.com" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonial" data-section="testimonial">
|
|
<TestimonialCardEleven
|
|
title="What Fans Are Saying"
|
|
description="Join millions of fans who have fallen in love with Stranger Things. From casual viewers to dedicated enthusiasts, discover why this show has become a cultural phenomenon."
|
|
tag="Fan Stories"
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
nameTitle: "Alex Martinez, Super Fan",
|
|
quote: "Stranger Things transported me back to the 1980s while keeping me on the edge of my seat. The character development is incredible and the mystery kept me binge-watching for days.",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=alhl6x",
|
|
imageAlt: "Fan testimonial 1"
|
|
},
|
|
{
|
|
id: "2",
|
|
nameTitle: "Jordan Chen, Sci-Fi Enthusiast",
|
|
quote: "The blend of science fiction, horror, and coming-of-age drama is perfectly executed. Each season raises the stakes and I can't wait to see where the story goes next.",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=pnlh4q",
|
|
imageAlt: "Fan testimonial 2"
|
|
},
|
|
{
|
|
id: "3",
|
|
nameTitle: "Sam Taylor, Television Critic",
|
|
quote: "Stranger Things is a masterclass in storytelling. The acting is phenomenal, the writing is sharp, and the nostalgia factor is through the roof. A true gem of modern television.",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=w6vgz9",
|
|
imageAlt: "Fan testimonial 3"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
title="Frequently Asked Questions"
|
|
description="Get answers to common questions about Stranger Things, where to watch, and the show's incredible cast and crew."
|
|
tag="Help & Info"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
faqs={[
|
|
{
|
|
id: "1",
|
|
title: "Where can I watch Stranger Things?",
|
|
content: "Stranger Things is available exclusively on Netflix. All four seasons are currently streaming. You can watch on any device with a Netflix subscription."
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "How many seasons are there?",
|
|
content: "There are 4 complete seasons of Stranger Things available on Netflix. The series has concluded with a satisfying ending that wraps up the main storylines."
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "Is there a fifth season coming?",
|
|
content: "The creators have indicated that the story of Stranger Things is complete with Season 4. However, the Duffer Brothers have hinted at potential spinoffs exploring different aspects of the Stranger Things universe."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenterForm
|
|
title="Join the Stranger Things Fan Community"
|
|
description="Sign up to get the latest news, updates about new seasons, exclusive behind-the-scenes content, and connect with fellow fans from around the world."
|
|
inputs={[
|
|
{
|
|
name: "name",
|
|
type: "text",
|
|
placeholder: "Your Name",
|
|
required: true
|
|
},
|
|
{
|
|
name: "email",
|
|
type: "email",
|
|
placeholder: "Your Email",
|
|
required: true
|
|
}
|
|
]}
|
|
textarea={{
|
|
name: "message",
|
|
placeholder: "Tell us your favorite Stranger Things moment or character",
|
|
rows: 4,
|
|
required: false
|
|
}}
|
|
buttonText="Join Community"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSocial
|
|
logoText="Stranger Things"
|
|
columns={[
|
|
{
|
|
title: "Show",
|
|
items: [
|
|
{ label: "Watch on Netflix", href: "https://www.netflix.com" },
|
|
{ label: "Episodes Guide", href: "about" },
|
|
{ label: "Season Summaries", href: "feature" }
|
|
]
|
|
},
|
|
{
|
|
title: "Community",
|
|
items: [
|
|
{ label: "Fan Reviews", href: "testimonial" },
|
|
{ label: "Join Us", href: "contact" },
|
|
{ label: "Get Help", href: "faq" }
|
|
]
|
|
}
|
|
]}
|
|
socialLinks={[
|
|
{
|
|
icon: Instagram,
|
|
href: "https://instagram.com",
|
|
ariaLabel: "Instagram"
|
|
},
|
|
{
|
|
icon: Twitter,
|
|
href: "https://twitter.com",
|
|
ariaLabel: "Twitter"
|
|
},
|
|
{
|
|
icon: Facebook,
|
|
href: "https://facebook.com",
|
|
ariaLabel: "Facebook"
|
|
}
|
|
]}
|
|
copyrightText="© 2025 Stranger Things Fan Site. Netflix is a trademark of Netflix, Inc."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |