Merge version_1 into main #2
375
src/app/page.tsx
375
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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user