Merge version_1 into main #1
337
src/app/page.tsx
337
src/app/page.tsx
@@ -26,252 +26,109 @@ export default function LandingPage() {
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Intro",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Action",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Responsibility",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Sunrise",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="SPIDER-MAN"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Intro", id: "hero" },
|
||||
{ name: "Action", id: "features" },
|
||||
{ name: "Responsibility", id: "about" },
|
||||
{ name: "Sunrise", id: "contact" },
|
||||
]}
|
||||
brandName="SPIDER-MAN"
|
||||
button={{ text: "Get Started", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="A Hero Rises Between Shadows"
|
||||
description="Experience the life of a hero in a city that never sleeps. Swing, fight, and protect the innocent."
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-vector/abstract-shape-logo-two-versions_23-2148455541.jpg",
|
||||
alt: "Logo 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-vector/shiny-silver-background_1415-160.jpg",
|
||||
alt: "Logo 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-vector/rose-gold-frame-collection_23-2148036768.jpg",
|
||||
alt: "Logo 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-vector/realistic-silver-frame-template_23-2149251361.jpg",
|
||||
alt: "Logo 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-psd/elegant-flowing-red-ribbon-with-shiny-satin-texture-transparent-background_9975-132665.jpg",
|
||||
alt: "Logo 5",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Swing Into Action",
|
||||
href: "#features",
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Neighborhood Watch",
|
||||
icon: Shield,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "NYC Patrol",
|
||||
icon: MapPin,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "High Alert",
|
||||
icon: AlertTriangle,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Web Swinging",
|
||||
icon: Zap,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "City Defender",
|
||||
icon: Star,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="A Hero Rises Between Shadows"
|
||||
description="Experience the life of a hero in a city that never sleeps. Swing, fight, and protect the innocent."
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-vector/abstract-shape-logo-two-versions_23-2148455541.jpg", alt: "Logo 1" },
|
||||
{ src: "http://img.b2bpic.net/free-vector/shiny-silver-background_1415-160.jpg", alt: "Logo 2" },
|
||||
{ src: "http://img.b2bpic.net/free-vector/rose-gold-frame-collection_23-2148036768.jpg", alt: "Logo 3" },
|
||||
{ src: "http://img.b2bpic.net/free-vector/realistic-silver-frame-template_23-2149251361.jpg", alt: "Logo 4" },
|
||||
{ src: "http://img.b2bpic.net/free-psd/elegant-flowing-red-ribbon-with-shiny-satin-texture-transparent-background_9975-132665.jpg", alt: "Logo 5" },
|
||||
]}
|
||||
buttons={[{ text: "Swing Into Action", href: "#features" }]}
|
||||
buttonAnimation="slide-up"
|
||||
marqueeItems={[
|
||||
{ type: "text-icon", text: "Neighborhood Watch", icon: Shield },
|
||||
{ type: "text-icon", text: "NYC Patrol", icon: MapPin },
|
||||
{ type: "text-icon", text: "High Alert", icon: AlertTriangle },
|
||||
{ type: "text-icon", text: "Web Swinging", icon: Zap },
|
||||
{ type: "text-icon", text: "City Defender", icon: Star },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwelve
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
label: "Physics",
|
||||
title: "Web Elasticity",
|
||||
items: [
|
||||
"Adaptive tension",
|
||||
"Dynamic recoil",
|
||||
"Momentum conservation",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
label: "Movement",
|
||||
title: "Fluid Motion",
|
||||
items: [
|
||||
"Air flips",
|
||||
"Wall running",
|
||||
"Rapid web-lines",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
label: "Control",
|
||||
title: "Directional Focus",
|
||||
items: [
|
||||
"Intuitive drag",
|
||||
"Precision landing",
|
||||
"Speed boost",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Swing Sequence"
|
||||
description="Master the art of traversal. Use momentum and physics to navigate the urban jungle."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwelve
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
animationType="slide-up"
|
||||
features={[
|
||||
{ id: "f1", label: "Physics", title: "Web Elasticity", items: ["Adaptive tension", "Dynamic recoil", "Momentum conservation"] },
|
||||
{ id: "f2", label: "Movement", title: "Fluid Motion", items: ["Air flips", "Wall running", "Rapid web-lines"] },
|
||||
{ id: "f3", label: "Control", title: "Directional Focus", items: ["Intuitive drag", "Precision landing", "Speed boost"] },
|
||||
]}
|
||||
title="Swing Sequence"
|
||||
description="Master the art of traversal. Use momentum and physics to navigate the urban jungle."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="With great power comes great responsibility."
|
||||
metrics={[
|
||||
{
|
||||
icon: Shield,
|
||||
label: "Lives Saved",
|
||||
value: "12,402",
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
label: "Threats Neutralized",
|
||||
value: "890",
|
||||
},
|
||||
{
|
||||
icon: Clock,
|
||||
label: "Hours Patrolled",
|
||||
value: "5,000+",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="With great power comes great responsibility."
|
||||
metrics={[
|
||||
{ icon: Shield, label: "Lives Saved", value: "12,402" },
|
||||
{ icon: Zap, label: "Threats Neutralized", value: "890" },
|
||||
{ icon: Clock, label: "Hours Patrolled", value: "5,000+" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={[
|
||||
"Daily Bugle",
|
||||
"Oscorp",
|
||||
"Stark Industries",
|
||||
"Avengers",
|
||||
"Horizon Labs",
|
||||
"Damage Control",
|
||||
"NYPD",
|
||||
]}
|
||||
logos={[
|
||||
"http://img.b2bpic.net/free-vector/abstract-shape-logo-two-versions_23-2148455541.jpg",
|
||||
"http://img.b2bpic.net/free-vector/shiny-silver-background_1415-160.jpg",
|
||||
"http://img.b2bpic.net/free-vector/rose-gold-frame-collection_23-2148036768.jpg",
|
||||
"http://img.b2bpic.net/free-vector/realistic-silver-frame-template_23-2149251361.jpg",
|
||||
"http://img.b2bpic.net/free-psd/elegant-flowing-red-ribbon-with-shiny-satin-texture-transparent-background_9975-132665.jpg",
|
||||
"http://img.b2bpic.net/free-vector/polygonal-dark-background_23-2148111327.jpg",
|
||||
"http://img.b2bpic.net/free-vector/red-business-card-template_23-2148528083.jpg",
|
||||
]}
|
||||
title="Community Alliance"
|
||||
description="Collaborating with city defenders to keep the peace."
|
||||
/>
|
||||
</div>
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={["Daily Bugle", "Oscorp", "Stark Industries", "Avengers", "Horizon Labs", "Damage Control", "NYPD"]}
|
||||
logos={[
|
||||
"http://img.b2bpic.net/free-vector/abstract-shape-logo-two-versions_23-2148455541.jpg", "http://img.b2bpic.net/free-vector/shiny-silver-background_1415-160.jpg", "http://img.b2bpic.net/free-vector/rose-gold-frame-collection_23-2148036768.jpg", "http://img.b2bpic.net/free-vector/realistic-silver-frame-template_23-2149251361.jpg", "http://img.b2bpic.net/free-psd/elegant-flowing-red-ribbon-with-shiny-satin-texture-transparent-background_9975-132665.jpg", "http://img.b2bpic.net/free-vector/polygonal-dark-background_23-2148111327.jpg", "http://img.b2bpic.net/free-vector/red-business-card-template_23-2148528083.jpg"
|
||||
]}
|
||||
title="Community Alliance"
|
||||
description="Collaborating with city defenders to keep the peace."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactFaq
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "How do I activate Spider-Sense?",
|
||||
content: "Click the central indicator when the screen desaturates.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Can I replay missions?",
|
||||
content: "Yes, select 'Replay Experience' from the menu.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Does choice affect ending?",
|
||||
content: "Yes, your choices define the city's fate.",
|
||||
},
|
||||
]}
|
||||
ctaTitle="Sunrise Awaits"
|
||||
ctaDescription="Your journey is just beginning."
|
||||
ctaButton={{
|
||||
text: "Replay Experience",
|
||||
}}
|
||||
ctaIcon={ArrowRight}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactFaq
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "q1", title: "How do I activate Spider-Sense?", content: "Click the central indicator when the screen desaturates." },
|
||||
{ id: "q2", title: "Can I replay missions?", content: "Yes, select 'Replay Experience' from the menu." },
|
||||
{ id: "q3", title: "Does choice affect ending?", content: "Yes, your choices define the city's fate." },
|
||||
]}
|
||||
ctaTitle="Sunrise Awaits"
|
||||
ctaDescription="Your journey is just beginning."
|
||||
ctaButton={{ text: "Replay Experience" }}
|
||||
ctaIcon={ArrowRight}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Experience",
|
||||
items: [
|
||||
{
|
||||
label: "Start Path",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Gallery",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="SPIDER-MAN"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{ title: "Experience", items: [{ label: "Start Path", href: "#" }, { label: "Gallery", href: "#" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
|
||||
]}
|
||||
logoText="SPIDER-MAN"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user