345 lines
13 KiB
TypeScript
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>
|
|
);
|
|
} |