Merge version_1 into main #1
380
src/app/page.tsx
380
src/app/page.tsx
@@ -15,275 +15,135 @@ import { Globe, ShieldCheck, Zap } from "lucide-react";
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
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: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Markets",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "faq",
|
||||
},
|
||||
]}
|
||||
brandName="TradeFlow"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Markets", id: "products" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
]}
|
||||
brandName="TradeFlow"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Master the Markets with Precision"
|
||||
description="Experience lightning-fast execution, professional-grade analytics, and military-grade security. Trade anywhere, anytime with TradeFlow."
|
||||
kpis={[
|
||||
{
|
||||
value: "1.2ms",
|
||||
label: "Order Latency",
|
||||
},
|
||||
{
|
||||
value: "$10B+",
|
||||
label: "Volume Traded",
|
||||
},
|
||||
{
|
||||
value: "99.99%",
|
||||
label: "System Uptime",
|
||||
},
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Trading",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
text: "See Markets",
|
||||
href: "#products",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ6l4oCLGncHyp74XJVrU6rWEE/a-futuristic-dark-mode-software-dashboar-1774684434777-fb7c067f.png"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Master the Markets with Precision"
|
||||
description="Experience lightning-fast execution, professional-grade analytics, and military-grade security. Trade anywhere, anytime with TradeFlow."
|
||||
kpis={[
|
||||
{ value: "1.2ms", label: "Order Latency" },
|
||||
{ value: "$10B+", label: "Volume Traded" },
|
||||
{ value: "99.99%", label: "System Uptime" },
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[
|
||||
{ text: "Start Trading", href: "#" },
|
||||
{ text: "See Markets", href: "#products" },
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ6l4oCLGncHyp74XJVrU6rWEE/a-futuristic-dark-mode-software-dashboar-1774684434777-fb7c067f.png"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBorderGlow
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Ultra-Fast Execution",
|
||||
description: "Execute orders with sub-millisecond precision.",
|
||||
},
|
||||
{
|
||||
icon: ShieldCheck,
|
||||
title: "Secure Vaults",
|
||||
description: "Institutional-grade cold storage for all assets.",
|
||||
},
|
||||
{
|
||||
icon: Globe,
|
||||
title: "Global Market Access",
|
||||
description: "Trade across 50+ global exchanges seamlessly.",
|
||||
},
|
||||
]}
|
||||
title="Unmatched Trading Features"
|
||||
description="Engineered for speed, built for reliability, and designed for winners."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBorderGlow
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ icon: Zap, title: "Ultra-Fast Execution", description: "Execute orders with sub-millisecond precision." },
|
||||
{ icon: ShieldCheck, title: "Secure Vaults", description: "Institutional-grade cold storage for all assets." },
|
||||
{ icon: Globe, title: "Global Market Access", description: "Trade across 50+ global exchanges seamlessly." },
|
||||
]}
|
||||
title="Unmatched Trading Features"
|
||||
description="Engineered for speed, built for reliability, and designed for winners."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Basic Trader",
|
||||
price: "Free",
|
||||
variant: "Standard",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ6l4oCLGncHyp74XJVrU6rWEE/an-abstract-3d-visualization-of-market-g-1774684434275-52abbde3.png",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Pro Analyst",
|
||||
price: "$49/mo",
|
||||
variant: "Premium",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ6l4oCLGncHyp74XJVrU6rWEE/visual-representation-of-cross-platform--1774684434591-9eacc86e.png",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Institutional",
|
||||
price: "$299/mo",
|
||||
variant: "Enterprise",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ6l4oCLGncHyp74XJVrU6rWEE/deep-analytics-visual-interface-complex--1774684434760-610c4267.png",
|
||||
},
|
||||
]}
|
||||
title="Professional Trading Tools"
|
||||
description="Choose the engine that fits your trading strategy."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "1", name: "Basic Trader", price: "Free", variant: "Standard", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ6l4oCLGncHyp74XJVrU6rWEE/an-abstract-3d-visualization-of-market-g-1774684434275-52abbde3.png" },
|
||||
{ id: "2", name: "Pro Analyst", price: "$49/mo", variant: "Premium", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ6l4oCLGncHyp74XJVrU6rWEE/visual-representation-of-cross-platform--1774684434591-9eacc86e.png" },
|
||||
{ id: "3", name: "Institutional", price: "$299/mo", variant: "Enterprise", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ6l4oCLGncHyp74XJVrU6rWEE/deep-analytics-visual-interface-complex--1774684434760-610c4267.png" },
|
||||
]}
|
||||
title="Professional Trading Tools"
|
||||
description="Choose the engine that fits your trading strategy."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={false}
|
||||
title="Trusted by Thousands"
|
||||
tag="Performance"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "500k",
|
||||
description: "Active Traders",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "150+",
|
||||
description: "Countries Covered",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "5M+",
|
||||
description: "Monthly Trades",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={false}
|
||||
title="Trusted by Thousands"
|
||||
tag="Performance"
|
||||
metrics={[
|
||||
{ id: "m1", value: "500k", description: "Active Traders" },
|
||||
{ id: "m2", value: "150+", description: "Countries Covered" },
|
||||
{ id: "m3", value: "5M+", description: "Monthly Trades" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Marcus Chen",
|
||||
date: "Oct 2024",
|
||||
title: "Day Trader",
|
||||
quote: "The execution speed is unmatched. I won't trade anywhere else.",
|
||||
tag: "Speed",
|
||||
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ6l4oCLGncHyp74XJVrU6rWEE/portrait-of-a-professional-male-trader-i-1774684434320-a3f48865.png",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Sarah Miller",
|
||||
date: "Nov 2024",
|
||||
title: "Portfolio Manager",
|
||||
quote: "Finally, a platform that gives me institutional-grade data and reliability.",
|
||||
tag: "Tools",
|
||||
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ6l4oCLGncHyp74XJVrU6rWEE/portrait-of-a-female-financial-analyst-f-1774684433783-609e4026.png",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "David Okafor",
|
||||
date: "Dec 2024",
|
||||
title: "Crypto Investor",
|
||||
quote: "Security is everything for me and TradeFlow delivers perfection.",
|
||||
tag: "Security",
|
||||
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ6l4oCLGncHyp74XJVrU6rWEE/portrait-of-a-young-tech-investor-glasse-1774684434289-f42ae24d.png",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Elena Rossi",
|
||||
date: "Jan 2025",
|
||||
title: "Analyst",
|
||||
quote: "I have improved my profit margins by 20% since switching.",
|
||||
tag: "Growth",
|
||||
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ6l4oCLGncHyp74XJVrU6rWEE/portrait-of-a-seasoned-portfolio-manager-1774684433836-73bd4314.png",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "James Wilson",
|
||||
date: "Feb 2025",
|
||||
title: "Quantitative Trader",
|
||||
quote: "The API documentation and integration are flawless for algo trading.",
|
||||
tag: "Efficiency",
|
||||
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ6l4oCLGncHyp74XJVrU6rWEE/portrait-of-a-professional-male-trader-i-1774684434320-a3f48865.png",
|
||||
},
|
||||
]}
|
||||
title="Voices of Success"
|
||||
description="Hear why traders choose TradeFlow."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Marcus Chen", date: "Oct 2024", title: "Day Trader", quote: "The execution speed is unmatched. I won't trade anywhere else.", tag: "Speed", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ6l4oCLGncHyp74XJVrU6rWEE/portrait-of-a-professional-male-trader-i-1774684434320-a3f48865.png" },
|
||||
{ id: "t2", name: "Sarah Miller", date: "Nov 2024", title: "Portfolio Manager", quote: "Finally, a platform that gives me institutional-grade data and reliability.", tag: "Tools", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ6l4oCLGncHyp74XJVrU6rWEE/portrait-of-a-female-financial-analyst-f-1774684433783-609e4026.png" },
|
||||
{ id: "t3", name: "David Okafor", date: "Dec 2024", title: "Crypto Investor", quote: "Security is everything for me and TradeFlow delivers perfection.", tag: "Security", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ6l4oCLGncHyp74XJVrU6rWEE/portrait-of-a-young-tech-investor-glasse-1774684434289-f42ae24d.png" },
|
||||
{ id: "t4", name: "Elena Rossi", date: "Jan 2025", title: "Analyst", quote: "I have improved my profit margins by 20% since switching.", tag: "Growth", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ6l4oCLGncHyp74XJVrU6rWEE/portrait-of-a-seasoned-portfolio-manager-1774684433836-73bd4314.png" },
|
||||
{ id: "t5", name: "James Wilson", date: "Feb 2025", title: "Quantitative Trader", quote: "The API documentation and integration are flawless for algo trading.", tag: "Efficiency", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ6l4oCLGncHyp74XJVrU6rWEE/portrait-of-a-professional-male-trader-i-1774684434320-a3f48865.png" },
|
||||
]}
|
||||
title="Voices of Success"
|
||||
description="Hear why traders choose TradeFlow."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Is my money safe?",
|
||||
content: "Yes, we use industry-standard security and cold storage.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "How long does verification take?",
|
||||
content: "Usually within a few hours for standard accounts.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "What platforms are supported?",
|
||||
content: "Trade via Web, Desktop, or Mobile App.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Have questions? We have answers."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "Is my money safe?", content: "Yes, we use industry-standard security and cold storage." },
|
||||
{ id: "f2", title: "How long does verification take?", content: "Usually within a few hours for standard accounts." },
|
||||
{ id: "f3", title: "What platforms are supported?", content: "Trade via Web, Desktop, or Mobile App." },
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Have questions? We have answers."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#faq",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
columns={[
|
||||
{ title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Careers", href: "#" }] },
|
||||
{ title: "Support", items: [{ label: "Contact", href: "#" }, { label: "FAQ", href: "#faq" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user