Merge version_2 into main #2
342
src/app/page.tsx
342
src/app/page.tsx
@@ -20,20 +20,17 @@ export default function LandingPage() {
|
||||
borderRadius="rounded"
|
||||
contentWidth="small"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
background="aurora"
|
||||
background="none"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="layered"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Wishlist on Steam",
|
||||
id: "#wishlist",
|
||||
},
|
||||
{ name: "Wishlist", id: "#wishlist" },
|
||||
]}
|
||||
brandName="PARASITE: Z.E.T.A."
|
||||
/>
|
||||
@@ -41,337 +38,94 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
title="Complete System Failure. Trust No One."
|
||||
description="12 crew members. 1 hidden parasite. Repair the station, test blood samples, survive sabotage, and stop the alien before it evolves into something unstoppable."
|
||||
leftCarouselItems={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=y7sw8t&_wi=1",
|
||||
imageAlt: "Station Corridor",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=q3orh0&_wi=1",
|
||||
imageAlt: "Med-bay",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=z4q0e5&_wi=1",
|
||||
imageAlt: "Engine Room",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=imia4u&_wi=1",
|
||||
imageAlt: "Airlock",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tca07x",
|
||||
imageAlt: "Reactor Core",
|
||||
},
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tgoqbu",
|
||||
imageAlt: "Corridor",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=e3ro1v",
|
||||
imageAlt: "Ventilation",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3f70cb",
|
||||
imageAlt: "Laboratory",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0bkedd",
|
||||
imageAlt: "Reactor",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6wmtnv",
|
||||
imageAlt: "Escape Pods",
|
||||
},
|
||||
]}
|
||||
tag="Social Deduction • Survival Horror • Co-op"
|
||||
buttons={[
|
||||
{
|
||||
text: "Wishlist on Steam",
|
||||
href: "https://store.steampowered.com",
|
||||
},
|
||||
{
|
||||
text: "Watch Trailer",
|
||||
href: "#trailer",
|
||||
},
|
||||
]}
|
||||
avatars={[
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ze58pw",
|
||||
alt: "Crew Member 1",
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3efmu2",
|
||||
alt: "Crew Member 2",
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=px7cxj",
|
||||
alt: "Crew Member 3",
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fira2z",
|
||||
alt: "Crew Member 4",
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=5l5rnd",
|
||||
alt: "Crew Member 5",
|
||||
},
|
||||
]}
|
||||
avatarText="12+ crew members surviving the nightmare."
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "HORROR",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "DEDUCTION",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "SCI-FI",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "SURVIVAL",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "CO-OP",
|
||||
},
|
||||
]}
|
||||
leftCarouselItems={[{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=y7sw8t&_wi=1" }, { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=q3orh0&_wi=1" }]}
|
||||
rightCarouselItems={[{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tgoqbu" }, { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=e3ro1v" }]}
|
||||
tag="Survival Horror"
|
||||
buttons={[{ text: "Wishlist Now", href: "#wishlist" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="core-fantasy" data-section="core-fantasy">
|
||||
<FeatureBorderGlow
|
||||
animationType="slide-up"
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
icon: Eye,
|
||||
title: "Find the Parasite",
|
||||
description: "Monitor behavior and watch your back.",
|
||||
},
|
||||
{
|
||||
icon: Wrench,
|
||||
title: "Repair the Station",
|
||||
description: "Maintain life support and fix sabotaged airlocks.",
|
||||
},
|
||||
{
|
||||
icon: Star,
|
||||
title: "Test Blood",
|
||||
description: "Extract samples to prove your humanity.",
|
||||
},
|
||||
{
|
||||
icon: Skull,
|
||||
title: "Survive the Mutation",
|
||||
description: "Run, hide, or coordinate a desperate last stand.",
|
||||
},
|
||||
{ icon: Eye, title: "Detect Sabotage", description: "Identify infected crew members before they strike." },
|
||||
{ icon: Wrench, title: "System Integrity", description: "Maintain critical station systems to survive." },
|
||||
{ icon: Star, title: "Biometric Testing", description: "Use lab equipment to verify human identity." },
|
||||
{ icon: Skull, title: "Final Containment", description: "Contain the threat or perish in the vacuum." },
|
||||
]}
|
||||
title="Core Mechanics"
|
||||
description="Survive the Z.E.T.A. Station."
|
||||
title="Core Survival Mechanics"
|
||||
description="The Z.E.T.A. Station is a cold, calculated death trap."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="gameplay-loop" data-section="gameplay-loop">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "01",
|
||||
title: "Suspicion",
|
||||
items: [
|
||||
"Spread out.",
|
||||
"Gather resources.",
|
||||
"Watch partners.",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "02",
|
||||
title: "Sabotage",
|
||||
items: [
|
||||
"Comms drop.",
|
||||
"Lights go out.",
|
||||
"Locked med-bay.",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
value: "03",
|
||||
title: "Infection",
|
||||
items: [
|
||||
"Crew vanishes.",
|
||||
"Trust breaks.",
|
||||
"Panic sets in.",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
value: "04",
|
||||
title: "Hunt",
|
||||
items: [
|
||||
"Monster revealed.",
|
||||
"Fire escape pods.",
|
||||
"Final stand.",
|
||||
],
|
||||
},
|
||||
{ id: "1", value: "12", title: "Crew Members", items: ["Survivalists", "Collaborators"] },
|
||||
{ id: "2", value: "01", title: "Infected", items: ["Hidden Parasite", "Saboteur"] },
|
||||
{ id: "3", value: "40", title: "Min", items: ["Average Session", "High Tension"] },
|
||||
]}
|
||||
title="Gameplay Loop"
|
||||
description="How a match unfolds on the station."
|
||||
title="High-Stakes Loop"
|
||||
description="Every action carries potential life-ending risk."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="roles" data-section="roles">
|
||||
<TeamCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
textboxLayout="split"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
useInvertedBackground={true}
|
||||
members={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Captain",
|
||||
role: "Command",
|
||||
description: "Overrides critical systems.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=y7sw8t&_wi=2",
|
||||
imageAlt: "sci-fi horror station corridor",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Doctor",
|
||||
role: "Medical",
|
||||
description: "Conducts blood testing.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=q3orh0&_wi=2",
|
||||
imageAlt: "sci-fi horror station corridor",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Engineer",
|
||||
role: "Systems",
|
||||
description: "Reactor maintenance.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=z4q0e5&_wi=2",
|
||||
imageAlt: "sci-fi horror station corridor",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Parasite",
|
||||
role: "Infection",
|
||||
description: "Master of deception.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=imia4u&_wi=2",
|
||||
imageAlt: "sci-fi horror station corridor",
|
||||
},
|
||||
{ id: "1", name: "Command", role: "Security Clearance", description: "Direct access to the armory and airlocks." },
|
||||
{ id: "2", name: "Science", role: "Lab Access", description: "Advanced testing and decontamination suites." },
|
||||
{ id: "3", name: "Engineering", role: "Maintenance", description: "Full control over station systems and reactors." },
|
||||
{ id: "4", name: "The Host", role: "Containment Breach", description: "Evolving threat hiding in plain sight." },
|
||||
]}
|
||||
title="Role Tension"
|
||||
description="Every role has unique access. Interdependence is your lifeline."
|
||||
title="Occupational Hazard"
|
||||
description="Access control is the only difference between hope and extinction."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="gallery" data-section="gallery">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Med-bay",
|
||||
price: "Screenshot",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=px7cxj",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Reactor",
|
||||
price: "Screenshot",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fira2z",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Ventilation",
|
||||
price: "Screenshot",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=5l5rnd",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Terminal",
|
||||
price: "Screenshot",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=udiypn",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Corridor",
|
||||
price: "Screenshot",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ogf6lu",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Pods",
|
||||
price: "Screenshot",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0xqapi",
|
||||
},
|
||||
]}
|
||||
title="Station Visuals"
|
||||
description="Atmospheric survival in Z.E.T.A."
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="split"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={true}
|
||||
title="Station Containment"
|
||||
description="Environments designed for total isolation and horror."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="wishlist" data-section="wishlist">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "rotated-rays-static",
|
||||
}}
|
||||
tag="WISHLIST"
|
||||
title="The Outbreak Begins Soon."
|
||||
description="Be there for the first containment breach. Join early playtests."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4hfjp3"
|
||||
mediaAnimation="none"
|
||||
buttonText="Wishlist on Steam"
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="ACTION REQUIRED"
|
||||
title="The Outbreak Begins Soon"
|
||||
description="Get access to the classified playtest early."
|
||||
buttonText="Wishlist Now"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Socials",
|
||||
items: [
|
||||
{
|
||||
label: "Steam",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Discord",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "YouTube",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "X/Twitter",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
columns={[{ title: "Community", items: [{ label: "Discord", href: "#" }, { label: "Steam", href: "#" }] }]}
|
||||
logoText="PARASITE: Z.E.T.A."
|
||||
copyrightText="© 2026 ZETA Studio."
|
||||
copyrightText="© 2026 ZETA Studio. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user