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

---
 src/app/page.tsx | 375 +++++++++++++++--------------------------------
 1 file changed, 115 insertions(+), 260 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 77675be..28efafe 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -26,274 +26,129 @@ export default function LandingPage() {
         headingFontWeight="light"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleCentered
-      navItems={[
-        {
-          name: "Protocol",
-          id: "protocol",
-        },
-        {
-          name: "Architecture",
-          id: "architecture",
-        },
-        {
-          name: "Governance",
-          id: "governance",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="VELA"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Protocol", id: "protocol" },
+              { name: "Architecture", id: "architecture" },
+              { name: "Governance", id: "governance" },
+              { name: "Contact", id: "contact" },
+            ]}
+            brandName="VELA"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroLogo
-      logoText="VELA"
-      description="Protocol-layer trust and verification infrastructure for international trade documentation. A neutral infrastructure protocol enabling the cryptographic verification of trade documents across institutional boundaries."
-      buttons={[
-        {
-          text: "Read Protocol Specification",
-          href: "#protocol",
-        },
-        {
-          text: "View Standards Alignment",
-          href: "#standards",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/business-network-background-connecting-dots-technology-design_53876-160244.jpg?_wi=1"
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroLogo
+            logoText="VELA"
+            description="Protocol-layer trust and verification infrastructure for international trade documentation. A neutral infrastructure protocol enabling the cryptographic verification of trade documents across institutional boundaries."
+            buttons={[
+              { text: "Read Protocol Specification", href: "#protocol" },
+              { text: "View Standards Alignment", href: "#standards" },
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/business-network-background-connecting-dots-technology-design_53876-160244.jpg"
+          />
+        </div>
 
-  <div id="standards" data-section="standards">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={true}
-      names={[
-        "WCO Data Model v4.2.0",
-        "UN/CEFACT RDM",
-        "ICC DSI KTDDE",
-        "MLETR Compliance",
-        "TradeTrust Interoperability",
-        "ISO TC 154",
-        "AFCTA Digital Trade",
-      ]}
-      title="Standards Foundation"
-      description="VELA is designed for alignment with global trade standards bodies and data models."
-    />
-  </div>
+        <div id="standards" data-section="standards">
+          <SocialProofOne
+            textboxLayout="default"
+            useInvertedBackground={true}
+            names={[
+              "WCO Data Model v4.2.0",              "UN/CEFACT RDM",              "ICC DSI KTDDE",              "MLETR Compliance",              "TradeTrust Interoperability",              "ISO TC 154",              "AFCTA Digital Trade"]}
+            title="Standards Foundation"
+            description="VELA is designed for alignment with global trade standards bodies and data models."
+          />
+        </div>
 
-  <div id="protocol" data-section="protocol">
-      <TextSplitAbout
-      useInvertedBackground={false}
-      title="Protocol Overview"
-      description={[
-        "Global trade operates on fragmented, legacy infrastructure. VELA functions as a neutral coordination substrate, enabling document verification without disrupting existing systems.",
-        "We map every data element to globally recognized standards including WCO DM, UN/CEFACT, and ICC DSI.",
-      ]}
-    />
-  </div>
+        <div id="protocol" data-section="protocol">
+          <TextSplitAbout
+            useInvertedBackground={false}
+            title="Protocol Overview"
+            description={[
+              "Global trade operates on fragmented, legacy infrastructure. VELA functions as a neutral coordination substrate, enabling document verification without disrupting existing systems.",              "We map every data element to globally recognized standards including WCO DM, UN/CEFACT, and ICC DSI."]}
+          />
+        </div>
 
-  <div id="architecture" data-section="architecture">
-      <FeatureBento
-      animationType="slide-up"
-      textboxLayout="split-description"
-      useInvertedBackground={true}
-      features={[
-        {
-          title: "Identity Layer",
-          description: "Leveraging W3C Decentralized Identifiers (DIDs) for jurisdictional control and actor verification.",
-          bentoComponent: "reveal-icon",
-          icon: Shield,
-          imageSrc: "http://img.b2bpic.net/free-photo/server-check-using-green-screen-tablet_482257-75447.jpg",
-          imageAlt: "technical architecture flow chart",
-        },
-        {
-          title: "Verification Layer",
-          description: "Cryptographic assurance of document authenticity without centralized gatekeeping.",
-          bentoComponent: "reveal-icon",
-          icon: CheckCircle,
-          imageSrc: "http://img.b2bpic.net/free-photo/business-network-background-connecting-dots-technology-design_53876-160244.jpg?_wi=2",
-          imageAlt: "technical architecture flow chart",
-        },
-        {
-          title: "Orchestration Layer",
-          description: "Async, resilient workflow management for cross-border trade document exchanges.",
-          bentoComponent: "reveal-icon",
-          icon: Zap,
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-network-communications-background_1048-14070.jpg?_wi=1",
-          imageAlt: "technical architecture flow chart",
-        },
-        {
-          title: "Settlement Layer",
-          description: "Interoperable multi-rail settlement protocols for secure trade document transmission.",
-          bentoComponent: "reveal-icon",
-          icon: Globe,
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-cyber-network-visualization-design_1048-17445.jpg",
-          imageAlt: "technical architecture flow chart",
-        },
-      ]}
-      title="Technical Architecture"
-      description="Our five-layer architecture ensures modularity, interoperability, and verifiable trust."
-    />
-  </div>
+        <div id="architecture" data-section="architecture">
+          <FeatureBento
+            animationType="slide-up"
+            textboxLayout="split-description"
+            useInvertedBackground={true}
+            features={[
+              { title: "Identity Layer", description: "Leveraging W3C Decentralized Identifiers (DIDs) for jurisdictional control and actor verification.", bentoComponent: "reveal-icon", icon: Shield },
+              { title: "Verification Layer", description: "Cryptographic assurance of document authenticity without centralized gatekeeping.", bentoComponent: "reveal-icon", icon: CheckCircle },
+              { title: "Orchestration Layer", description: "Async, resilient workflow management for cross-border trade document exchanges.", bentoComponent: "reveal-icon", icon: Zap },
+              { title: "Settlement Layer", description: "Interoperable multi-rail settlement protocols for secure trade document transmission.", bentoComponent: "reveal-icon", icon: Globe },
+            ]}
+            title="Technical Architecture"
+            description="Our five-layer architecture ensures modularity, interoperability, and verifiable trust."
+          />
+        </div>
 
-  <div id="governance" data-section="governance">
-      <TextSplitAbout
-      useInvertedBackground={false}
-      title="Governance Design"
-      description={[
-        "Infrastructure requires institutional neutrality. VELA is governed by its stakeholders, preventing capture by any single commercial or geopolitical interest.",
-        "We are committed to long-term governance transparency through an open, stakeholder-representative constitution.",
-      ]}
-    />
-  </div>
+        <div id="governance" data-section="governance">
+          <TextSplitAbout
+            useInvertedBackground={false}
+            title="Governance Design"
+            description={[
+              "Infrastructure requires institutional neutrality. VELA is governed by its stakeholders, preventing capture by any single commercial or geopolitical interest.",              "We are committed to long-term governance transparency through an open, stakeholder-representative constitution."]}
+          />
+        </div>
 
-  <div id="roadmap" data-section="roadmap">
-      <FeatureBento
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      features={[
-        {
-          title: "Foundation Phase",
-          description: "Standards alignment, technical specification, and advisory board formation.",
-          bentoComponent: "timeline",
-          items: [
-            {
-              label: "Q1 2024",
-              detail: "Specification v1.0",
-            },
-            {
-              label: "Q2 2024",
-              detail: "Governance Draft",
-            },
-            {
-              label: "Q3 2024",
-              detail: "Advisory Board",
-            },
-          ],
-          heading: "2024",
-          subheading: "Standards Phase",
-          completedLabel: "Active",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-network-communications-background_1048-14070.jpg?_wi=2",
-          imageAlt: "3D render of a network communications background",
-        },
-        {
-          title: "Pilot Phase",
-          description: "Controlled corridor implementations and partner onboarding.",
-          bentoComponent: "timeline",
-          items: [
-            {
-              label: "Q4 2024",
-              detail: "Initial Pilot",
-            },
-            {
-              label: "Q1 2025",
-              detail: "Partner Scaling",
-            },
-            {
-              label: "Q2 2025",
-              detail: "Evaluation",
-            },
-          ],
-          heading: "2025",
-          subheading: "Pilot Phase",
-          completedLabel: "Planned",
-          imageSrc: "http://img.b2bpic.net/free-photo/business-network-background-connecting-dots-technology-design_53876-160244.jpg?_wi=3",
-          imageAlt: "3D render of a network communications background",
-        },
-      ]}
-      title="Institutional Roadmap"
-      description="A measured approach toward permanent infrastructure deployment."
-    />
-  </div>
+        <div id="roadmap" data-section="roadmap">
+          <FeatureBento
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={true}
+            features={[
+              {
+                title: "Foundation Phase",                description: "Standards alignment, technical specification, and advisory board formation.",                bentoComponent: "timeline",                items: [
+                  { label: "Q1 2024", detail: "Specification v1.0" },
+                  { label: "Q2 2024", detail: "Governance Draft" },
+                  { label: "Q3 2024", detail: "Advisory Board" },
+                ],
+                heading: "2024",                subheading: "Standards Phase",                completedLabel: "Active"
+              },
+              {
+                title: "Pilot Phase",                description: "Controlled corridor implementations and partner onboarding.",                bentoComponent: "timeline",                items: [
+                  { label: "Q4 2024", detail: "Initial Pilot" },
+                  { label: "Q1 2025", detail: "Partner Scaling" },
+                  { label: "Q2 2025", detail: "Evaluation" },
+                ],
+                heading: "2025",                subheading: "Pilot Phase",                completedLabel: "Planned"
+              },
+            ]}
+            title="Institutional Roadmap"
+            description="A measured approach toward permanent infrastructure deployment."
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqBase
-      textboxLayout="split-description"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "1",
-          title: "How is VELA neutral?",
-          content: "Neutrality is encoded in the governance constitution and protocol design. No commercial stakeholder owns the protocol layer.",
-        },
-        {
-          id: "2",
-          title: "Is VELA a blockchain?",
-          content: "VELA uses a modular approach including event sourcing, ZK-proofs, and selective DLT where auditability adds value, but rejects the 'everything-on-chain' monolith.",
-        },
-        {
-          id: "3",
-          title: "How does VELA relate to WCO standards?",
-          content: "VELA is mapped directly to the WCO Data Model v4.2.0, ensuring customs-readiness from the protocol inception.",
-        },
-      ]}
-      title="Institutional Questions"
-      description="Frequently addressed concerns regarding protocol positioning."
-      faqsAnimation="slide-up"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+          <FaqBase
+            textboxLayout="split-description"
+            useInvertedBackground={false}
+            faqs={[
+              { id: "1", title: "How is VELA neutral?", content: "Neutrality is encoded in the governance constitution and protocol design. No commercial stakeholder owns the protocol layer." },
+              { id: "2", title: "Is VELA a blockchain?", content: "VELA uses a modular approach including event sourcing, ZK-proofs, and selective DLT where auditability adds value, but rejects the 'everything-on-chain' monolith." },
+              { id: "3", title: "How does VELA relate to WCO standards?", content: "VELA is mapped directly to the WCO Data Model v4.2.0, ensuring customs-readiness from the protocol inception." },
+            ]}
+            title="Institutional Questions"
+            description="Frequently addressed concerns regarding protocol positioning."
+            faqsAnimation="slide-up"
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterSimple
-      columns={[
-        {
-          title: "Infrastructure",
-          items: [
-            {
-              label: "Protocol",
-              href: "#protocol",
-            },
-            {
-              label: "Architecture",
-              href: "#architecture",
-            },
-            {
-              label: "Governance",
-              href: "#governance",
-            },
-          ],
-        },
-        {
-          title: "Standards",
-          items: [
-            {
-              label: "WCO Alignment",
-              href: "#standards",
-            },
-            {
-              label: "Implementation",
-              href: "#docs",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Security",
-              href: "#",
-            },
-            {
-              label: "Terms",
-              href: "#",
-            },
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-          ],
-        },
-      ]}
-      bottomLeftText="© 2024 VELA Infrastructure Protocol."
-      bottomRightText="Open Specification"
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterSimple
+            columns={[
+              { title: "Infrastructure", items: [{ label: "Protocol", href: "#protocol" }, { label: "Architecture", href: "#architecture" }, { label: "Governance", href: "#governance" }] },
+              { title: "Standards", items: [{ label: "WCO Alignment", href: "#standards" }, { label: "Implementation", href: "#docs" }] },
+              { title: "Legal", items: [{ label: "Security", href: "#" }, { label: "Terms", href: "#" }, { label: "Contact", href: "#contact" }] },
+            ]}
+            bottomLeftText="© 2024 VELA Infrastructure Protocol."
+            bottomRightText="Open Specification"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-- 
2.49.1