From ac26e734f1930d2e1535f50fe1067da74e8f0dd7 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 20 Apr 2026 19:03:12 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 486 ++++++++++++++++-------------------------------
 1 file changed, 164 insertions(+), 322 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 215239a..12b380d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -9,342 +9,184 @@ import FooterBase from '@/components/sections/footer/FooterBase';
 import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
-import { AlertCircle, Award, Cloud, Compass, Globe, Moon, Power, Rocket, Shield, Star, Sun, Target, Zap } from "lucide-react";
+import { AlertCircle, Anchor, Award, Cloud, Compass, Cpu, Globe, Infinity, Moon, Power, Rocket, Shield, Star, Sun, Target, Zap } from "lucide-react";
 
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="hover-magnetic"
-        defaultTextAnimation="entrance-slide"
-        borderRadius="rounded"
-        contentWidth="compact"
-        sizing="largeSizeMediumTitles"
-        background="noise"
-        cardStyle="layered-gradient"
-        primaryButtonStyle="diagonal-gradient"
-        secondaryButtonStyle="radial-glow"
-        headingFontWeight="bold"
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="largeSizeMediumTitles"
+      background="noise"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="bold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
-      navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Features",
-          id: "features",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="FUTURE"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "Home", id: "hero" },
+              { name: "About", id: "about" },
+              { name: "Features", id: "features" },
+              { name: "Contact", id: "contact" }
+            ]}
+            brandName="FUTURE"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroLogoBillboard
-      background={{
-        variant: "glowing-orb",
-      }}
-      logoText="Step Into the Future"
-      description="Experience the next dimension of digital interaction. Bold, immersive, and built for tomorrow."
-      buttons={[
-        {
-          text: "Explore Now",
-          href: "#features",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/shoot-fantastic-alien_23-2151648314.jpg?_wi=1"
-      mediaAnimation="slide-up"
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroLogoBillboard
+            background={{ variant: "glowing-orb" }}
+            logoText="Step Into the Future"
+            description="Experience the next dimension of digital interaction. Bold, immersive, and built for tomorrow."
+            buttons={[{ text: "Explore Now", href: "#features" }]}
+            imageSrc="http://img.b2bpic.net/free-photo/shoot-fantastic-alien_23-2151648314.jpg"
+            mediaAnimation="slide-up"
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <AboutMetric
-      useInvertedBackground={true}
-      title="Digital Universe Stats"
-      metrics={[
-        {
-          icon: Zap,
-          label: "Innovations",
-          value: "150+",
-        },
-        {
-          icon: Globe,
-          label: "Users",
-          value: "2M",
-        },
-        {
-          icon: Award,
-          label: "Awards",
-          value: "45",
-        },
-      ]}
-      metricsAnimation="blur-reveal"
-    />
-  </div>
+        <div id="about" data-section="about">
+          <AboutMetric
+            useInvertedBackground={true}
+            title="Digital Universe Stats"
+            metrics={[
+              { icon: Zap, label: "Innovations", value: "150+" },
+              { icon: Globe, label: "Users", value: "2M" },
+              { icon: Award, label: "Awards", value: "45" }
+            ]}
+            metricsAnimation="blur-reveal"
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureBento
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      features={[
-        {
-          bentoComponent: "3d-stack-cards",
-          title: "Neural Link",
-          description: "Seamless brain-machine connectivity for real-time data flow.",
-          items: [
-            {
-              icon: Cpu,
-              title: "Ultra Speed",
-              subtitle: "Low Latency",
-              detail: "Instant feedback",
-            },
-            {
-              icon: Shield,
-              title: "Security",
-              subtitle: "Encrypted",
-              detail: "Quantum-safe",
-            },
-            {
-              icon: Infinity,
-              title: "Scaling",
-              subtitle: "Infinite",
-              detail: "Adaptive load",
-            },
-          ],
-          imageSrc: "http://img.b2bpic.net/free-vector/wifi-signal-communication-technology-vector-gold-icon-with-bar-chart_53876-112189.jpg",
-          imageAlt: "data analytics icon neon",
-        },
-        {
-          bentoComponent: "reveal-icon",
-          icon: Rocket,
-          title: "Quantum Drive",
-          description: "Propel your business into the new era with adaptive propulsion systems.",
-          imageSrc: "http://img.b2bpic.net/free-photo/shoot-fantastic-alien_23-2151648314.jpg?_wi=2",
-          imageAlt: "data analytics icon neon",
-        },
-        {
-          bentoComponent: "reveal-icon",
-          icon: Globe,
-          title: "Universal Sync",
-          description: "Synchronize your global operations with automated cross-platform integration.",
-          imageSrc: "http://img.b2bpic.net/free-psd/novacore-studio-business-card-design-template-template_23-2152009505.jpg?_wi=1",
-          imageAlt: "data analytics icon neon",
-        },
-      ]}
-      title="Core Modules"
-      description="Unlock futuristic power modes and seamless performance across all your digital assets."
-    />
-  </div>
+        <div id="features" data-section="features">
+          <FeatureBento
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            features={[
+              {
+                bentoComponent: "3d-stack-cards",                title: "Neural Link",                description: "Seamless brain-machine connectivity for real-time data flow.",                items: [
+                  { icon: Cpu, title: "Ultra Speed", subtitle: "Low Latency", detail: "Instant feedback" },
+                  { icon: Shield, title: "Security", subtitle: "Encrypted", detail: "Quantum-safe" },
+                  { icon: Infinity, title: "Scaling", subtitle: "Infinite", detail: "Adaptive load" }
+                ]
+              },
+              {
+                bentoComponent: "reveal-icon",                icon: Rocket,
+                title: "Quantum Drive",                description: "Propel your business into the new era with adaptive propulsion systems."
+              },
+              {
+                bentoComponent: "reveal-icon",                icon: Globe,
+                title: "Universal Sync",                description: "Synchronize your global operations with automated cross-platform integration."
+              }
+            ]}
+            title="Core Modules"
+            description="Unlock futuristic power modes and seamless performance across all your digital assets."
+          />
+        </div>
 
-  <div id="gallery" data-section="gallery">
-      <ProductCardOne
-      animationType="scale-rotate"
-      textboxLayout="default"
-      gridVariant="bento-grid"
-      useInvertedBackground={true}
-      products={[
-        {
-          id: "1",
-          name: "Nebula Core",
-          price: "NFT",
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-techno-low-poly-background-with-dark-connecting-dots-lines_1048-6127.jpg",
-        },
-        {
-          id: "2",
-          name: "Interface Data",
-          price: "NFT",
-          imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-99389.jpg",
-        },
-        {
-          id: "3",
-          name: "Metallic Frame",
-          price: "NFT",
-          imageSrc: "http://img.b2bpic.net/free-photo/neon-c-colorolor-ribbons-illustration_211682-200.jpg",
-        },
-        {
-          id: "4",
-          name: "Energy Node",
-          price: "NFT",
-          imageSrc: "http://img.b2bpic.net/free-photo/futuristic-science-fiction-abstract-pixelated-background-with-blue-yellow-lights_181624-26306.jpg",
-        },
-        {
-          id: "5",
-          name: "Structure X",
-          price: "NFT",
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-geometric-wavy-folds-background_1048-16954.jpg",
-        },
-        {
-          id: "6",
-          name: "Sync Network",
-          price: "NFT",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-futuristic-with-low-poly-design-with-connecting-lines-dots_1048-12728.jpg",
-        },
-      ]}
-      title="Cinematic Visuals"
-      description="See the digital universe in high fidelity. Every element crafted for immersion."
-    />
-  </div>
+        <div id="gallery" data-section="gallery">
+          <ProductCardOne
+            animationType="scale-rotate"
+            textboxLayout="default"
+            gridVariant="bento-grid"
+            useInvertedBackground={true}
+            products={[
+              { id: "1", name: "Nebula Core", price: "NFT", imageSrc: "http://img.b2bpic.net/free-photo/abstract-techno-low-poly-background-with-dark-connecting-dots-lines_1048-6127.jpg" },
+              { id: "2", name: "Interface Data", price: "NFT", imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-99389.jpg" },
+              { id: "3", name: "Metallic Frame", price: "NFT", imageSrc: "http://img.b2bpic.net/free-photo/neon-c-colorolor-ribbons-illustration_211682-200.jpg" },
+              { id: "4", name: "Energy Node", price: "NFT", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-science-fiction-abstract-pixelated-background-with-blue-yellow-lights_181624-26306.jpg" },
+              { id: "5", name: "Structure X", price: "NFT", imageSrc: "http://img.b2bpic.net/free-photo/abstract-geometric-wavy-folds-background_1048-16954.jpg" },
+              { id: "6", name: "Sync Network", price: "NFT", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-futuristic-with-low-poly-design-with-connecting-lines-dots_1048-12728.jpg" }
+            ]}
+            title="Cinematic Visuals"
+            description="See the digital universe in high fidelity. Every element crafted for immersion."
+          />
+        </div>
 
-  <div id="timeline" data-section="timeline">
-      <FeatureBento
-      animationType="slide-up"
-      textboxLayout="split-description"
-      useInvertedBackground={false}
-      features={[
-        {
-          bentoComponent: "timeline",
-          heading: "Development Phases",
-          subheading: "Timeline of progression",
-          items: [
-            {
-              label: "V1 Origin",
-              detail: "Prototype inception",
-            },
-            {
-              label: "V2 Expansion",
-              detail: "Global market launch",
-            },
-            {
-              label: "V3 Quantum",
-              detail: "3D interface integration",
-            },
-          ],
-          completedLabel: "Active",
-          imageSrc: "http://img.b2bpic.net/free-psd/novacore-studio-business-card-design-template-template_23-2152009505.jpg?_wi=2",
-          imageAlt: "futuristic card design tech",
-        },
-      ]}
-      title="Our Journey"
-      description="Charting the evolution from digital startup to futuristic pioneer."
-    />
-  </div>
+        <div id="timeline" data-section="timeline">
+          <FeatureBento
+            animationType="slide-up"
+            textboxLayout="split-description"
+            useInvertedBackground={false}
+            features={[
+              {
+                bentoComponent: "timeline",                heading: "Development Phases",                subheading: "Timeline of progression",                items: [
+                  { label: "V1 Origin", detail: "Prototype inception" },
+                  { label: "V2 Expansion", detail: "Global market launch" },
+                  { label: "V3 Quantum", detail: "3D interface integration" }
+                ],
+                completedLabel: "Active"
+              }
+            ]}
+            title="Our Journey"
+            description="Charting the evolution from digital startup to futuristic pioneer."
+          />
+        </div>
 
-  <div id="interactive" data-section="interactive">
-      <FeatureBento
-      textboxLayout="default"
-      useInvertedBackground={true}
-      features={[
-        {
-          bentoComponent: "phone",
-          statusIcon: Power,
-          alertIcon: AlertCircle,
-          alertTitle: "Energy Build Up",
-          alertMessage: "Ready for transformation",
-          apps: [
-            {
-              name: "Mode 1",
-              icon: Sun,
-            },
-            {
-              name: "Mode 2",
-              icon: Moon,
-            },
-            {
-              name: "Mode 3",
-              icon: Star,
-            },
-            {
-              name: "Mode 4",
-              icon: Zap,
-            },
-            {
-              name: "Mode 5",
-              icon: Cloud,
-            },
-            {
-              name: "Mode 6",
-              icon: Compass,
-            },
-            {
-              name: "Mode 7",
-              icon: Anchor,
-            },
-            {
-              name: "Mode 8",
-              icon: Target,
-            },
-          ],
-          imageSrc: "http://img.b2bpic.net/free-vector/red-corporate-card-with-abstract-lines_23-2147595817.jpg",
-          imageAlt: "tech card abstract red",
-        },
-      ]}
-      title="Interactive Mode"
-      description="Click to toggle your power mode for a personalized interface transformation."
-    />
-  </div>
+        <div id="interactive" data-section="interactive">
+          <FeatureBento
+            textboxLayout="default"
+            useInvertedBackground={true}
+            animationType="blur-reveal"
+            features={[
+              {
+                bentoComponent: "phone",                statusIcon: Power,
+                alertIcon: AlertCircle,
+                alertTitle: "Energy Build Up",                alertMessage: "Ready for transformation",                apps: [
+                  { name: "Mode 1", icon: Sun },
+                  { name: "Mode 2", icon: Moon },
+                  { name: "Mode 3", icon: Star },
+                  { name: "Mode 4", icon: Zap },
+                  { name: "Mode 5", icon: Cloud },
+                  { name: "Mode 6", icon: Compass },
+                  { name: "Mode 7", icon: Anchor },
+                  { name: "Mode 8", icon: Target }
+                ]
+              }
+            ]}
+            title="Interactive Mode"
+            description="Click to toggle your power mode for a personalized interface transformation."
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactSplitForm
-      useInvertedBackground={false}
-      title="Get Connected"
-      description="Join the future. Leave your details and receive exclusive access."
-      inputs={[
-        {
-          name: "email",
-          type: "email",
-          placeholder: "Email Address",
-          required: true,
-        },
-        {
-          name: "name",
-          type: "text",
-          placeholder: "Name",
-          required: true,
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/lights-darkness_181624-10486.jpg"
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactSplitForm
+            useInvertedBackground={false}
+            title="Get Connected"
+            description="Join the future. Leave your details and receive exclusive access."
+            inputs={[
+              { name: "email", type: "email", placeholder: "Email Address", required: true },
+              { name: "name", type: "text", placeholder: "Name", required: true }
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/lights-darkness_181624-10486.jpg"
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBase
-      columns={[
-        {
-          title: "Navigation",
-          items: [
-            {
-              label: "Hero",
-              href: "#hero",
-            },
-            {
-              label: "About",
-              href: "#about",
-            },
-            {
-              label: "Features",
-              href: "#features",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacy",
-              href: "#",
-            },
-            {
-              label: "Terms",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      logoText="FUTURE"
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={[
+              {
+                title: "Navigation",                items: [
+                  { label: "Hero", href: "#hero" },
+                  { label: "About", href: "#about" },
+                  { label: "Features", href: "#features" }
+                ]
+              },
+              {
+                title: "Legal",                items: [
+                  { label: "Privacy", href: "#" },
+                  { label: "Terms", href: "#" }
+                ]
+              }
+            ]}
+            logoText="FUTURE"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-- 
2.49.1