Merge version_1 into main #2
283
src/app/page.tsx
283
src/app/page.tsx
@@ -14,197 +14,114 @@ import { Zap } from "lucide-react";
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "home",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "faq",
|
||||
},
|
||||
]}
|
||||
brandName="MultiMesh"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "FAQ", id: "faq" }
|
||||
]}
|
||||
brandName="MultiMesh"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="home" data-section="home">
|
||||
<HeroBillboardScroll
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Unify Your Assets Across Every Chain"
|
||||
description="MultiMesh abstracts the complexity of cross-chain swaps. Best-route optimization for cost, speed, and safety in one seamless transaction."
|
||||
buttons={[
|
||||
{
|
||||
text: "Launch App",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWsHfpkr6D2v5YMKnXpUl50EWi/a-futuristic-cross-chain-blockchain-visu-1774616112963-8b947064.png"
|
||||
imageAlt="Futuristic cross-chain blockchain visualization"
|
||||
/>
|
||||
</div>
|
||||
<div id="home" data-section="home">
|
||||
<HeroBillboardScroll
|
||||
title="Unify Your Assets Across Every Chain"
|
||||
description="MultiMesh abstracts the complexity of cross-chain swaps. Best-route optimization for cost, speed, and safety in one seamless transaction."
|
||||
background={{ variant: "plain" }}
|
||||
buttons={[{ text: "Launch App", href: "#" }]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWsHfpkr6D2v5YMKnXpUl50EWi/a-futuristic-cross-chain-blockchain-visu-1774616112963-8b947064.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={true}
|
||||
tag="Infrastructure"
|
||||
title="Cross-Chain Made Simple"
|
||||
description="We remove the friction of bridges, wrappers, and multiple transactions. MultiMesh creates a unified routing layer so you can focus on trading."
|
||||
subdescription="Built for DeFi traders, protocols, and builders who need efficient, safe, and fast cross-chain liquidity."
|
||||
icon={Zap}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWsHfpkr6D2v5YMKnXpUl50EWi/an-abstract-professional-3d-render-of-in-1774616112201-995c26fb.png"
|
||||
mediaAnimation="blur-reveal"
|
||||
imageAlt="Abstract Web3 network infrastructure"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
tag="Infrastructure"
|
||||
title="Cross-Chain Made Simple"
|
||||
description="We remove the friction of bridges, wrappers, and multiple transactions. MultiMesh creates a unified routing layer so you can focus on trading."
|
||||
subdescription="Built for DeFi traders, protocols, and builders who need efficient, safe, and fast cross-chain liquidity."
|
||||
icon={Zap}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWsHfpkr6D2v5YMKnXpUl50EWi/an-abstract-professional-3d-render-of-in-1774616112201-995c26fb.png"
|
||||
mediaAnimation="blur-reveal"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Automated Routing",
|
||||
description: "Best-route computation analyzing both price and safety metrics across all integrated bridges.",
|
||||
},
|
||||
{
|
||||
title: "Single-Flow Swaps",
|
||||
description: "Swap assets from chain A to chain B in one transaction without needing to manually bridge.",
|
||||
},
|
||||
{
|
||||
title: "Real-time Tracking",
|
||||
description: "Monitor your transaction status from wallet confirmation to final execution on the destination chain.",
|
||||
},
|
||||
]}
|
||||
title="Why MultiMesh?"
|
||||
description="Powerful features to make your cross-chain journey safe and efficient."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardOne
|
||||
title="Why MultiMesh?"
|
||||
description="Powerful features to make your cross-chain journey safe and efficient."
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Automated Routing", description: "Best-route computation analyzing both price and safety metrics across all integrated bridges.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWsHfpkr6D2v5YMKnXpUl50EWi/a-clean-modern-crypto-wallet-ui-dashboar-1774616112572-db061cc7.png"
|
||||
},
|
||||
{
|
||||
title: "Single-Flow Swaps", description: "Swap assets from chain A to chain B in one transaction without needing to manually bridge.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWsHfpkr6D2v5YMKnXpUl50EWi/a-clean-modern-crypto-wallet-ui-dashboar-1774616112572-db061cc7.png"
|
||||
},
|
||||
{
|
||||
title: "Real-time Tracking", description: "Monitor your transaction status from wallet confirmation to final execution on the destination chain.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWsHfpkr6D2v5YMKnXpUl50EWi/a-clean-modern-crypto-wallet-ui-dashboar-1774616112572-db061cc7.png"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonial" data-section="testimonial">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Excellent UX",
|
||||
quote: "Finally, a tool that makes cross-chain swaps look like standard DEX trades.",
|
||||
name: "Alex R.",
|
||||
role: "DeFi Trader",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWsHfpkr6D2v5YMKnXpUl50EWi/a-clean-modern-crypto-wallet-ui-dashboar-1774616112572-db061cc7.png?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Fast and Reliable",
|
||||
quote: "MultiMesh saved me hours of manual bridging time. The routing is top-tier.",
|
||||
name: "Sarah J.",
|
||||
role: "Liquidity Provider",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWsHfpkr6D2v5YMKnXpUl50EWi/a-clean-modern-crypto-wallet-ui-dashboar-1774616112572-db061cc7.png?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Safe Routes",
|
||||
quote: "I feel secure knowing it prioritizes routes based on risk level, not just cost.",
|
||||
name: "David W.",
|
||||
role: "Protocol Manager",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWsHfpkr6D2v5YMKnXpUl50EWi/a-clean-modern-crypto-wallet-ui-dashboar-1774616112572-db061cc7.png?_wi=3",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Game Changer",
|
||||
quote: "The cleanest interface in Web3. Absolute must-have for my multi-chain operations.",
|
||||
name: "Kim L.",
|
||||
role: "Web3 Developer",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWsHfpkr6D2v5YMKnXpUl50EWi/a-clean-modern-crypto-wallet-ui-dashboar-1774616112572-db061cc7.png?_wi=4",
|
||||
},
|
||||
]}
|
||||
title="Trusted by DeFi Traders"
|
||||
description="Join the community of users optimizing their cross-chain strategy."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonial" data-section="testimonial">
|
||||
<TestimonialCardTen
|
||||
title="Trusted by DeFi Traders"
|
||||
description="Join the community of users optimizing their cross-chain strategy."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", title: "Excellent UX", quote: "Finally, a tool that makes cross-chain swaps look like standard DEX trades.", name: "Alex R.", role: "DeFi Trader", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWsHfpkr6D2v5YMKnXpUl50EWi/a-clean-modern-crypto-wallet-ui-dashboar-1774616112572-db061cc7.png" },
|
||||
{ id: "2", title: "Fast and Reliable", quote: "MultiMesh saved me hours of manual bridging time. The routing is top-tier.", name: "Sarah J.", role: "Liquidity Provider", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWsHfpkr6D2v5YMKnXpUl50EWi/a-clean-modern-crypto-wallet-ui-dashboar-1774616112572-db061cc7.png" },
|
||||
{ id: "3", title: "Safe Routes", quote: "I feel secure knowing it prioritizes routes based on risk level, not just cost.", name: "David W.", role: "Protocol Manager", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWsHfpkr6D2v5YMKnXpUl50EWi/a-clean-modern-crypto-wallet-ui-dashboar-1774616112572-db061cc7.png" },
|
||||
{ id: "4", title: "Game Changer", quote: "The cleanest interface in Web3. Absolute must-have for my multi-chain operations.", name: "Kim L.", role: "Web3 Developer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWsHfpkr6D2v5YMKnXpUl50EWi/a-clean-modern-crypto-wallet-ui-dashboar-1774616112572-db061cc7.png" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "What networks are supported?",
|
||||
content: "We support Ethereum, BNB Chain, and Polygon at launch.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Do you hold my funds?",
|
||||
content: "No, MultiMesh is a non-custodial aggregator. We never hold or custody user assets.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Is the routing logic secure?",
|
||||
content: "Yes, we compute routes based on a combination of price and security safety scoring.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about MultiMesh infrastructure."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about MultiMesh infrastructure."
|
||||
textboxLayout="default"
|
||||
faqsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "1", title: "What networks are supported?", content: "We support Ethereum, BNB Chain, and Polygon at launch." },
|
||||
{ id: "2", title: "Do you hold my funds?", content: "No, MultiMesh is a non-custodial aggregator. We never hold or custody user assets." },
|
||||
{ id: "3", title: "Is the routing logic secure?", content: "Yes, we compute routes based on a combination of price and security safety scoring." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Product",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "API",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Support",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="MultiMesh"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="MultiMesh"
|
||||
columns={[
|
||||
{ items: [{ label: "Product", href: "#" }, { label: "API", href: "#" }, { label: "Support", href: "#" }] },
|
||||
{ items: [{ label: "Terms", href: "#" }, { label: "Privacy", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user