From f6804743f4333f2677b421b52af7a614165d8853 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 31 Mar 2026 13:56:57 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 337 ++++++++++++++---------------------------------
 1 file changed, 97 insertions(+), 240 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 21ca710..7d298f1 100644
--- a/src/app/page.tsx
+++ b/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>
   );
-- 
2.49.1