Files
01e40c30-fe8d-44f9-8bac-da0…/src/app/page.tsx
2026-01-02 19:16:37 +02:00

345 lines
13 KiB
TypeScript

"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import TextAbout from '@/components/sections/about/TextAbout';
import TeamCardSix from '@/components/sections/team/TeamCardSix';
import FeatureCardEleven from '@/components/sections/feature/FeatureCardEleven';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Zap, Users, Play, Bell } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="smallMedium"
sizing="largeSmall"
background="fluid"
cardStyle="spotlight"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="layered"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
brandName="Stranger Things"
navItems={[
{ name: "Home", id: "home" },
{ name: "About", id: "about" },
{ name: "Characters", id: "characters" },
{ name: "Episodes", id: "episodes" },
{ name: "FAQ", id: "faq" }
]}
button={{
text: "Join Community",
href: "contact"
}}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplit
title="Welcome to the Upside Down"
description="Explore the mysterious world of Stranger Things, where supernatural forces threaten a small town in Indiana. Discover the story, characters, and unforgettable moments that captivated millions worldwide."
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767374121813-6jcbw59t.jpg"
imageAlt="Stranger Things dark atmospheric banner"
imagePosition="right"
tag="Netflix Series"
tagIcon={Zap}
buttons={[
{
text: "Explore the Story",
href: "about"
},
{
text: "Meet the Cast",
href: "characters"
}
]}
/>
</div>
<div id="about" data-section="about">
<TextAbout
title="Stranger Things follows a group of young friends navigating supernatural mysteries, government conspiracies, and otherworldly threats in 1980s Hawkins, Indiana. When a boy goes missing, the town uncovers dark secrets that challenge everything they know about reality."
useInvertedBackground="noInvert"
buttons={[
{
text: "Watch Now on Netflix",
href: "https://www.netflix.com/search?q=stranger+things"
},
{
text: "Learn More",
href: "episodes"
}
]}
/>
</div>
<div id="characters" data-section="characters">
<TeamCardSix
title="Meet the Cast"
description="The ensemble of heroes and survivors who battle the forces of the Upside Down"
tag="Main Characters"
tagIcon={Users}
textboxLayout="default"
gridVariant="uniform-all-items-equal"
animationType="slide-up"
useInvertedBackground="noInvert"
members={[
{
id: "1",
name: "Mike Wheeler",
role: "Leader & Friend",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767374122567-g0k64tah.jpg",
imageAlt: "Mike Wheeler character portrait"
},
{
id: "2",
name: "Eleven",
role: "Telekinetic Survivor",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767374123250-9n37jc2p.jpg",
imageAlt: "Eleven character portrait"
},
{
id: "3",
name: "Lucas Sinclair",
role: "Devoted Friend",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767374123890-cve4n266.jpg",
imageAlt: "Lucas Sinclair character portrait"
},
{
id: "4",
name: "Dustin Henderson",
role: "Lovable Genius",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767374124599-avzv98i9.jpg",
imageAlt: "Dustin Henderson character portrait"
},
{
id: "5",
name: "Nancy Wheeler",
role: "Determined Protector",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767374125434-bjqc525k.jpg",
imageAlt: "Nancy Wheeler character portrait"
},
{
id: "6",
name: "Jonathan Byers",
role: "Brave Photographer",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767374126740-zrhciw13.jpg",
imageAlt: "Jonathan Byers character portrait"
}
]}
/>
</div>
<div id="episodes" data-section="episodes">
<FeatureCardEleven
title="Episode Guide"
description="Journey through the seasons of Stranger Things, from the initial mystery to epic conclusions"
tag="Seasons"
tagIcon={Play}
textboxLayout="default"
animationType="slide-up"
useInvertedBackground="noInvert"
usePrimaryButtonImage={false}
features={[
{
id: 1,
title: "Season 1: The Vanishing",
description: "When Will Byers goes missing, his friends discover strange occurrences and a mysterious girl with telekinetic powers. They uncover the existence of the Upside Down, a dark parallel dimension threatening their town.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767374128672-90hakgvk.jpg",
imageAlt: "Season 1 key moments"
},
{
id: 2,
title: "Season 2: The Hunt",
description: "The battle against the darkness intensifies as new threats emerge from the Upside Down. The kids face a growing shadow creature and must protect Hawkins from supernatural invasion.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767374127900-epjdxpkh.jpg",
imageAlt: "Season 2 supernatural imagery"
},
{
id: 3,
title: "Season 3: The Summer of '85",
description: "Relationships evolve and new dangers surface as the group faces a mysterious new threat. The fate of Hawkins hangs in the balance during a climactic summer.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767374129565-j592tl8e.jpg",
imageAlt: "Season 3 creature design"
}
]}
/>
</div>
<div id="social-proof" data-section="social-proof">
<MetricCardTwo
title="Global Impact"
description="Stranger Things has captivated audiences worldwide and become a cultural phenomenon"
gridVariant="uniform-all-items-equal"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="noInvert"
metrics={[
{
id: "1",
value: "4 Seasons",
description: "of thrilling supernatural storytelling"
},
{
id: "2",
value: "1.35B+",
description: "hours watched globally on Netflix"
},
{
id: "3",
value: "Millions",
description: "dedicated fans worldwide"
},
{
id: "4",
value: "42",
description: "Emmy nominations and awards"
}
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
title="Frequently Asked Questions"
description="Find answers to common questions about Stranger Things, characters, and the story"
tag="Help"
textboxLayout="default"
useInvertedBackground="noInvert"
animationType="smooth"
faqs={[
{
id: "1",
title: "What is the Upside Down?",
content: "The Upside Down is a dark, parallel dimension that exists alongside our world. It serves as a gateway for supernatural forces and creatures to enter Hawkins. The dimension is cold, dark, and inhabited by dangerous creatures."
},
{
id: "2",
title: "Who is Eleven?",
content: "Eleven is a young girl with telekinetic and psychokinetic abilities. She escaped from a secret government laboratory (Hawkins Lab) where she was experimented on. She becomes central to the group's fight against the Upside Down."
},
{
id: "3",
title: "How many seasons are there?",
content: "There are 4 seasons of Stranger Things, each consisting of multiple episodes. The series began in 2016 and concluded in 2022, telling a complete story arc about Hawkins and its supernatural mysteries."
},
{
id: "4",
title: "Where can I watch Stranger Things?",
content: "Stranger Things is exclusively available on Netflix. All seasons are available to stream with a Netflix subscription. You can watch it in 4K on compatible devices."
},
{
id: "5",
title: "Is there going to be a Season 5?",
content: "The creators have indicated that Stranger Things has concluded with Season 4. However, spin-offs and related projects have been discussed by Netflix and the show's creators."
}
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactFaq
ctaTitle="Join the Fan Community"
ctaDescription="Subscribe to get updates about Stranger Things news, behind-the-scenes content, and exclusive fan discussions."
ctaButton={{
text: "Subscribe Now",
href: "https://netflix.com"
}}
ctaIcon={Bell}
useInvertedBackground="noInvert"
animationType="slide-up"
faqs={[
{
id: "1",
title: "How do I stay updated?",
content: "Follow official Stranger Things social media accounts and subscribe to Netflix notifications for the latest news, trailers, and updates about the show."
},
{
id: "2",
title: "Is there official merchandise?",
content: "Yes, there is extensive official Stranger Things merchandise available including clothing, collectibles, games, and more through Netflix and licensed retailers."
},
{
id: "3",
title: "Where is Hawkins supposed to be?",
content: "Hawkins is a fictional town in Indiana. The show is set in the 1980s and explores supernatural mysteries unique to this location."
},
{
id: "4",
title: "Can I watch Stranger Things with family?",
content: "Stranger Things is rated TV-14. It contains some violence and scary scenes, so parental discretion is recommended for younger viewers."
}
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
columns={[
{
title: "Show",
items: [
{
label: "About",
href: "about"
},
{
label: "Characters",
href: "characters"
},
{
label: "Episodes",
href: "episodes"
}
]
},
{
title: "Community",
items: [
{
label: "FAQ",
href: "faq"
},
{
label: "Contact",
href: "contact"
},
{
label: "Join Community",
href: "contact"
}
]
},
{
title: "Legal",
items: [
{
label: "Privacy Policy",
href: "privacy"
},
{
label: "Terms of Service",
href: "terms"
},
{
label: "Cookie Policy",
href: "cookies"
}
]
}
]}
copyrightText="© 2025 Stranger Things Fan Site. Not affiliated with Netflix or Netflix Inc."
/>
</div>
</ThemeProvider>
);
}