From 8e640530442152259bdefeb88cbada315f983a4f Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sat, 23 May 2026 12:23:50 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 464 ++++++++++++++---------------------------------
 1 file changed, 136 insertions(+), 328 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index f10cdc6..9f28149 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -29,343 +29,151 @@ export default function LandingPage() {
         headingFontWeight="semibold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
-      navItems={[
-        {
-          name: "Workspace",
-          id: "hero",
-        },
-        {
-          name: "Features",
-          id: "features",
-        },
-        {
-          name: "Showcase",
-          id: "products",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="Rope.physics"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+            <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Workspace", id: "hero" },
+              { name: "Features", id: "features" },
+              { name: "Showcase", id: "products" },
+              { name: "Contact", id: "contact" },
+            ]}
+            brandName="Rope.physics"
+            button={{ text: "Get Started", href: "#contact" }}
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroCarouselLogo
-      logoText="Physics-Enabled Flow"
-      description="Experience a new level of interactive UI design with real-time elastic physics and intuitive node-based logic."
-      buttons={[
-        {
-          text: "Launch Workspace",
-          href: "#",
-        },
-        {
-          text: "View Physics",
-          href: "#",
-        },
-      ]}
-      slides={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/sales-assistant-planning-business-charts-digital-laptop-working-with-e-commerce-e-shopping-management-company-office-manager-using-statistics-develop-creative-project_482257-39076.jpg?_wi=1",
-          imageAlt: "digital workspace dashboard",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/female-web-designer-with-papers-notes-office_23-2149749914.jpg?_wi=1",
-          imageAlt: "ui design tool",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-swirl-background_1017-2756.jpg",
-          imageAlt: "node network visualization",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-smartphone-mockup-with-blank-screen-gray-background_9975-133666.jpg",
-          imageAlt: "ui connection lines",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/sleek-desktop-workspace-displays-active-code-windows-artificial-intelligence_482257-126307.jpg",
-          imageAlt: "software workspace",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-vector/infographic-element-collection_52683-6918.jpg",
-          imageAlt: "data flow graph",
-        },
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+            <HeroCarouselLogo
+            logoText="Physics-Enabled Flow"
+            description="Experience a new level of interactive UI design with real-time elastic physics and intuitive node-based logic."
+            buttons={[{ text: "Launch Workspace", href: "#" }, { text: "View Physics", href: "#" }]}
+            slides={[
+              { imageSrc: "http://img.b2bpic.net/free-photo/sales-assistant-planning-business-charts-digital-laptop-working-with-e-commerce-e-shopping-management-company-office-manager-using-statistics-develop-creative-project_482257-39076.jpg", imageAlt: "digital workspace dashboard" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/female-web-designer-with-papers-notes-office_23-2149749914.jpg", imageAlt: "ui design tool" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/abstract-swirl-background_1017-2756.jpg", imageAlt: "node network visualization" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/modern-smartphone-mockup-with-blank-screen-gray-background_9975-133666.jpg", imageAlt: "ui connection lines" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/sleek-desktop-workspace-displays-active-code-windows-artificial-intelligence_482257-126307.jpg", imageAlt: "software workspace" },
+              { imageSrc: "http://img.b2bpic.net/free-vector/infographic-element-collection_52683-6918.jpg", imageAlt: "data flow graph" }
+            ]}
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureBento
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      features={[
-        {
-          title: "Elastic Physics",
-          description: "Bouncy ropes and natural tension nodes that react to interaction.",
-          bentoComponent: "reveal-icon",
-          icon: Zap,
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241200.jpg",
-          imageAlt: "Modern and equipped computer lab",
-        },
-        {
-          title: "Node Logic",
-          description: "Drag-and-drop workflow nodes for complex task management.",
-          bentoComponent: "reveal-icon",
-          icon: Layers,
-          imageSrc: "http://img.b2bpic.net/free-photo/sales-assistant-planning-business-charts-digital-laptop-working-with-e-commerce-e-shopping-management-company-office-manager-using-statistics-develop-creative-project_482257-39076.jpg?_wi=2",
-          imageAlt: "Modern and equipped computer lab",
-        },
-        {
-          title: "Live Streaming",
-          description: "Real-time data visualization through glowing active connections.",
-          bentoComponent: "reveal-icon",
-          icon: Activity,
-          imageSrc: "http://img.b2bpic.net/free-photo/female-web-designer-with-papers-notes-office_23-2149749914.jpg?_wi=2",
-          imageAlt: "Modern and equipped computer lab",
-        },
-      ]}
-      title="Interactive Node System"
-      description="Powerful tools built for real-time visualization and logic flow control."
-    />
-  </div>
+        <div id="features" data-section="features">
+            <FeatureBento
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            features={[
+              { title: "Elastic Physics", description: "Bouncy ropes and natural tension nodes that react to interaction.", bentoComponent: "reveal-icon", icon: Zap },
+              { title: "Node Logic", description: "Drag-and-drop workflow nodes for complex task management.", bentoComponent: "reveal-icon", icon: Layers },
+              { title: "Live Streaming", description: "Real-time data visualization through glowing active connections.", bentoComponent: "reveal-icon", icon: Activity }
+            ]}
+            title="Interactive Node System"
+            description="Powerful tools built for real-time visualization and logic flow control."
+          />
+        </div>
 
-  <div id="products" data-section="products">
-      <ProductCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="bento-grid"
-      useInvertedBackground={false}
-      products={[
-        {
-          id: "1",
-          name: "Text Processor",
-          price: "Free",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-end-company-office-with-computer-showing-detailed-data-insights-executive-business-meetings_482257-133111.jpg",
-          imageAlt: "digital workspace dashboard",
-        },
-        {
-          id: "2",
-          name: "Image Filter",
-          price: "$12",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-measuring-tools-desk_23-2150440907.jpg",
-          imageAlt: "ui design tool",
-        },
-        {
-          id: "3",
-          name: "Audio Visualizer",
-          price: "$15",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-technology-background-with-low-poly-connecting-lines-dots_1048-8641.jpg",
-          imageAlt: "node network visualization",
-        },
-        {
-          id: "4",
-          name: "Database Node",
-          price: "$20",
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-technology-frame-background-connecting-dots-digital-network-design_53876-160223.jpg",
-          imageAlt: "ui connection lines",
-        },
-        {
-          id: "5",
-          name: "AI Agent Node",
-          price: "$49",
-          imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-ux-elements-collection_23-2149053605.jpg",
-          imageAlt: "software workspace",
-        },
-        {
-          id: "6",
-          name: "Logger Module",
-          price: "Free",
-          imageSrc: "http://img.b2bpic.net/free-vector/orange-network-infographic_23-2147492966.jpg",
-          imageAlt: "data flow graph",
-        },
-      ]}
-      title="Node Presets"
-      description="Ready-to-use presets to jumpstart your design project."
-    />
-  </div>
+        <div id="products" data-section="products">
+            <ProductCardOne
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="bento-grid"
+            useInvertedBackground={false}
+            products={[
+              { id: "1", name: "Text Processor", price: "Free", imageSrc: "http://img.b2bpic.net/free-photo/high-end-company-office-with-computer-showing-detailed-data-insights-executive-business-meetings_482257-133111.jpg", imageAlt: "digital workspace dashboard" },
+              { id: "2", name: "Image Filter", price: "$12", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-measuring-tools-desk_23-2150440907.jpg", imageAlt: "ui design tool" },
+              { id: "3", name: "Audio Visualizer", price: "$15", imageSrc: "http://img.b2bpic.net/free-photo/3d-technology-background-with-low-poly-connecting-lines-dots_1048-8641.jpg", imageAlt: "node network visualization" },
+              { id: "4", name: "Database Node", price: "$20", imageSrc: "http://img.b2bpic.net/free-photo/abstract-technology-frame-background-connecting-dots-digital-network-design_53876-160223.jpg", imageAlt: "ui connection lines" },
+              { id: "5", name: "AI Agent Node", price: "$49", imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-ux-elements-collection_23-2149053605.jpg", imageAlt: "software workspace" },
+              { id: "6", name: "Logger Module", price: "Free", imageSrc: "http://img.b2bpic.net/free-vector/orange-network-infographic_23-2147492966.jpg", imageAlt: "data flow graph" }
+            ]}
+            title="Node Presets"
+            description="Ready-to-use presets to jumpstart your design project."
+          />
+        </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardTwo
-      animationType="depth-3d"
-      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "1",
-          value: "60fps",
-          description: "Smooth Interaction",
-        },
-        {
-          id: "2",
-          value: "12ms",
-          description: "Latency",
-        },
-        {
-          id: "3",
-          value: "0.1ms",
-          description: "Frame Time",
-        },
-      ]}
-      title="Performance metrics"
-      description="High performance physics engine with minimal overhead."
-    />
-  </div>
+        <div id="metrics" data-section="metrics">
+            <MetricCardTwo
+            animationType="depth-3d"
+            textboxLayout="default"
+            gridVariant="uniform-all-items-equal"
+            useInvertedBackground={false}
+            metrics={[
+              { id: "1", value: "60fps", description: "Smooth Interaction" },
+              { id: "2", value: "12ms", description: "Latency" },
+              { id: "3", value: "0.1ms", description: "Frame Time" }
+            ]}
+            title="Performance metrics"
+            description="High performance physics engine with minimal overhead."
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwo
-      textboxLayout="default"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "1",
-          name: "Sarah",
-          role: "Designer",
-          testimonial: "The physics engine is incredibly responsive.",
-          imageSrc: "http://img.b2bpic.net/free-photo/people-using-mobile-phone_53876-26374.jpg",
-          imageAlt: "digital workspace dashboard",
-        },
-        {
-          id: "2",
-          name: "Mike",
-          role: "Dev",
-          testimonial: "Connection logic is seamless.",
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-silent-mode-button_53876-42527.jpg",
-          imageAlt: "ui design tool",
-        },
-        {
-          id: "3",
-          name: "Emily",
-          role: "Architect",
-          testimonial: "Best visual workspace I've tried.",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-modern-background-with-flowing-particles-design_1048-14842.jpg",
-          imageAlt: "node network visualization",
-        },
-        {
-          id: "4",
-          name: "David",
-          role: "Creative",
-          testimonial: "Bouncy ropes are so satisfying.",
-          imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-ux-landing-page_52683-69728.jpg",
-          imageAlt: "ui connection lines",
-        },
-        {
-          id: "5",
-          name: "Alice",
-          role: "Lead UI",
-          testimonial: "Pure magic in the browser.",
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-home-office-with-desktop-pc-monitor-displaying-business-analytics_482257-130255.jpg",
-          imageAlt: "software workspace",
-        },
-      ]}
-      title="User Reviews"
-      description="Designers and engineers love the fluid interface."
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+            <TestimonialCardTwo
+            textboxLayout="default"
+            useInvertedBackground={false}
+            animationType="slide-up"
+            testimonials={[
+              { id: "1", name: "Sarah", role: "Designer", testimonial: "The physics engine is incredibly responsive.", imageSrc: "http://img.b2bpic.net/free-photo/people-using-mobile-phone_53876-26374.jpg", imageAlt: "digital workspace dashboard" },
+              { id: "2", name: "Mike", role: "Dev", testimonial: "Connection logic is seamless.", imageSrc: "http://img.b2bpic.net/free-photo/closeup-silent-mode-button_53876-42527.jpg", imageAlt: "ui design tool" },
+              { id: "3", name: "Emily", role: "Architect", testimonial: "Best visual workspace I've tried.", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-modern-background-with-flowing-particles-design_1048-14842.jpg", imageAlt: "node network visualization" },
+              { id: "4", name: "David", role: "Creative", testimonial: "Bouncy ropes are so satisfying.", imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-ux-landing-page_52683-69728.jpg", imageAlt: "ui connection lines" },
+              { id: "5", name: "Alice", role: "Lead UI", testimonial: "Pure magic in the browser.", imageSrc: "http://img.b2bpic.net/free-photo/modern-home-office-with-desktop-pc-monitor-displaying-business-analytics_482257-130255.jpg", imageAlt: "software workspace" }
+            ]}
+            title="User Reviews"
+            description="Designers and engineers love the fluid interface."
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqSplitMedia
-      textboxLayout="split"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "1",
-          title: "Is it performant?",
-          content: "Yes, built with optimized WebGL.",
-        },
-        {
-          id: "2",
-          title: "Can I save nodes?",
-          content: "Full JSON export is supported.",
-        },
-        {
-          id: "3",
-          title: "Does it work mobile?",
-          content: "Optimized for touch interfaces.",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/technology-technical-assistance-repair-conceopt_53876-165268.jpg"
-      mediaAnimation="slide-up"
-      title="Common Questions"
-      description="Quick answers to help you get started."
-      faqsAnimation="slide-up"
-      imageAlt="faq interface design"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+            <FaqSplitMedia
+            textboxLayout="split"
+            useInvertedBackground={false}
+            faqs={[
+              { id: "1", title: "Is it performant?", content: "Yes, built with optimized WebGL." },
+              { id: "2", title: "Can I save nodes?", content: "Full JSON export is supported." },
+              { id: "3", title: "Does it work mobile?", content: "Optimized for touch interfaces." }
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/technology-technical-assistance-repair-conceopt_53876-165268.jpg"
+            mediaAnimation="slide-up"
+            title="Common Questions"
+            description="Quick answers to help you get started."
+            faqsAnimation="slide-up"
+          />
+        </div>
 
-  <div id="blog" data-section="blog">
-      <BlogCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      title="Recent Updates"
-      description="Keep up with the latest physics updates."
-      blogs={[
-        {
-          id: "1",
-          category: "Engine",
-          title: "Improved Springs",
-          excerpt: "New spring physics model.",
-          imageSrc: "http://img.b2bpic.net/free-photo/desktop-pc-wooden-desk-showcases-infographics-client-reach-data_482257-126353.jpg",
-          imageAlt: "digital workspace dashboard",
-          authorName: "Dev",
-          authorAvatar: "http://img.b2bpic.net/free-photo/side-view-man-planning-web-design_23-2149930953.jpg",
-          date: "2024",
-        },
-        {
-          id: "2",
-          category: "UI",
-          title: "Glassmorphism",
-          excerpt: "Refined depth UI.",
-          imageSrc: "http://img.b2bpic.net/free-photo/develop-coding-web-design-coding-web-template_53876-167109.jpg",
-          imageAlt: "ui design tool",
-          authorName: "Design",
-          authorAvatar: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-floating-cyber-particles_1048-14513.jpg",
-          date: "2024",
-        },
-        {
-          id: "3",
-          category: "Logic",
-          title: "New Node Types",
-          excerpt: "Added 3 new nodes.",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-digital-techno-wave-background-design_1048-12577.jpg",
-          imageAlt: "node network visualization",
-          authorName: "Dev",
-          authorAvatar: "http://img.b2bpic.net/free-photo/finger-touching-circle_1134-213.jpg",
-          date: "2024",
-        },
-      ]}
-    />
-  </div>
+        <div id="blog" data-section="blog">
+            <BlogCardOne
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            title="Recent Updates"
+            description="Keep up with the latest physics updates."
+            blogs={[
+              { id: "1", category: "Engine", title: "Improved Springs", excerpt: "New spring physics model.", imageSrc: "http://img.b2bpic.net/free-photo/desktop-pc-wooden-desk-showcases-infographics-client-reach-data_482257-126353.jpg", imageAlt: "digital workspace dashboard", authorName: "Dev", authorAvatar: "http://img.b2bpic.net/free-photo/side-view-man-planning-web-design_23-2149930953.jpg", date: "2024" },
+              { id: "2", category: "UI", title: "Glassmorphism", excerpt: "Refined depth UI.", imageSrc: "http://img.b2bpic.net/free-photo/develop-coding-web-design-coding-web-template_53876-167109.jpg", imageAlt: "ui design tool", authorName: "Design", authorAvatar: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-floating-cyber-particles_1048-14513.jpg", date: "2024" },
+              { id: "3", category: "Logic", title: "New Node Types", excerpt: "Added 3 new nodes.", imageSrc: "http://img.b2bpic.net/free-photo/3d-digital-techno-wave-background-design_1048-12577.jpg", imageAlt: "node network visualization", authorName: "Dev", authorAvatar: "http://img.b2bpic.net/free-photo/finger-touching-circle_1134-213.jpg", date: "2024" }
+            ]}
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactCenter
-      useInvertedBackground={false}
-      background={{
-        variant: "animated-grid",
-      }}
-      title="Get Workspace Updates"
-      description="Sign up for workspace updates and physics engine tips."
-      tag="Stay Updated"
-    />
-  </div>
+        <div id="contact" data-section="contact">
+            <ContactCenter
+            useInvertedBackground={false}
+            background={{ variant: "animated-grid" }}
+            title="Get Workspace Updates"
+            description="Sign up for workspace updates and physics engine tips."
+            tag="Stay Updated"
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterLogoReveal
-      logoText="Rope.physics"
-      leftLink={{
-        text: "Privacy Policy",
-        href: "#",
-      }}
-      rightLink={{
-        text: "Terms of Service",
-        href: "#",
-      }}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+            <FooterLogoReveal
+            logoText="Rope.physics"
+            leftLink={{ text: "Privacy Policy", href: "#" }}
+            rightLink={{ text: "Terms of Service", href: "#" }}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-- 
2.49.1