Merge version_1 into main #2
275
src/app/page.tsx
275
src/app/page.tsx
@@ -20,27 +20,22 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
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">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Dashboard",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Dashboard", id: "hero" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="TradePro"
|
||||
/>
|
||||
@@ -48,50 +43,22 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardDashboard
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Elite Trading Platform"
|
||||
description="Execute trades with sub-millisecond precision, deep liquidity access, and professional analytical tools designed for high-frequency market participants."
|
||||
dashboard={{
|
||||
title: "Market Terminal",
|
||||
logoIcon: Zap,
|
||||
title: "Market Terminal", logoIcon: Zap,
|
||||
sidebarItems: [
|
||||
{
|
||||
icon: LayoutDashboard,
|
||||
active: true,
|
||||
},
|
||||
{
|
||||
icon: TrendingUp,
|
||||
},
|
||||
{
|
||||
icon: Settings,
|
||||
},
|
||||
{ icon: LayoutDashboard, active: true },
|
||||
{ icon: TrendingUp },
|
||||
{ icon: Settings }
|
||||
],
|
||||
stats: [
|
||||
{
|
||||
title: "Daily Volume",
|
||||
values: [
|
||||
120,
|
||||
150,
|
||||
180,
|
||||
],
|
||||
valuePrefix: "$",
|
||||
valueSuffix: "B",
|
||||
description: "Total liquidity pool access",
|
||||
},
|
||||
{
|
||||
title: "Active Traders",
|
||||
values: [
|
||||
5000,
|
||||
5200,
|
||||
5500,
|
||||
],
|
||||
description: "Global user count",
|
||||
},
|
||||
{ title: "Daily Volume", values: [120, 150, 180], valuePrefix: "$", valueSuffix: "B", description: "Total liquidity pool access" },
|
||||
{ title: "Active Traders", values: [5000, 5200, 5500], description: "Global user count" },
|
||||
{ title: "Latency (ms)", values: [1, 2, 1], description: "Network speed" }
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/banking-app-interface-template-collection_23-2148593866.jpg?_wi=1",
|
||||
chartTitle: "Market Performance",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/banking-app-interface-template-collection_23-2148593866.jpg", chartTitle: "Market Performance"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
@@ -103,27 +70,14 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Advanced Security",
|
||||
description: "End-to-end encrypted trading environment with hardware wallet integration.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Shield,
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/banking-app-interface-template-collection_23-2148593866.jpg?_wi=2",
|
||||
imageAlt: "stock market dashboard interface",
|
||||
title: "Advanced Security", description: "End-to-end encrypted trading environment with hardware wallet integration.", bentoComponent: "reveal-icon", icon: Shield
|
||||
},
|
||||
{
|
||||
title: "Global Market Access",
|
||||
description: "Connect to liquidity providers across four continents seamlessly.",
|
||||
bentoComponent: "globe",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/check-mark-shields-four-set_78370-8682.jpg",
|
||||
imageAlt: "cyber security shield icon",
|
||||
title: "Global Market Access", description: "Connect to liquidity providers across four continents seamlessly.", bentoComponent: "globe"
|
||||
},
|
||||
{
|
||||
title: "Real-time Analytics",
|
||||
description: "Instant execution with zero latency dashboards and streaming data.",
|
||||
bentoComponent: "line-chart",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/technology-digital-concept-blue-background_1035-17975.jpg",
|
||||
imageAlt: "fast speed icon lightning",
|
||||
},
|
||||
title: "Real-time Analytics", description: "Instant execution with zero latency dashboards and streaming data.", bentoComponent: "line-chart"
|
||||
}
|
||||
]}
|
||||
title="Institutional Architecture"
|
||||
description="Built for institutional-grade reliability, our infrastructure ensures maximum uptime and performance under peak volatility."
|
||||
@@ -132,24 +86,13 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hover-features" data-section="hover-features">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Smart Execution",
|
||||
description: "AI-driven order routing to get best prices instantly.",
|
||||
icon: Zap,
|
||||
},
|
||||
{
|
||||
title: "Portfolio Rebalancing",
|
||||
description: "Automate your strategy with complex rebalancing scripts.",
|
||||
icon: RefreshCw,
|
||||
},
|
||||
{
|
||||
title: "Risk Management",
|
||||
description: "Advanced margin and stop-loss management tools included.",
|
||||
icon: AlertTriangle,
|
||||
},
|
||||
{ title: "Smart Execution", description: "AI-driven order routing to get best prices instantly.", icon: Zap },
|
||||
{ title: "Portfolio Rebalancing", description: "Automate your strategy with complex rebalancing scripts.", icon: RefreshCw },
|
||||
{ title: "Risk Management", description: "Advanced margin and stop-loss management tools included.", icon: AlertTriangle }
|
||||
]}
|
||||
title="Professional Toolkit"
|
||||
description="Powerful features that enable traders to gain a competitive edge in any market condition."
|
||||
@@ -162,18 +105,9 @@ export default function LandingPage() {
|
||||
title="Global Market Authority"
|
||||
description="We empower institutional and individual investors with the same tools used by top hedge funds and market makers globally."
|
||||
metrics={[
|
||||
{
|
||||
value: "99.99%",
|
||||
title: "System Uptime",
|
||||
},
|
||||
{
|
||||
value: "24/7",
|
||||
title: "Market Coverage",
|
||||
},
|
||||
{
|
||||
value: "500k+",
|
||||
title: "Monthly Executions",
|
||||
},
|
||||
{ value: "99.99%", title: "System Uptime" },
|
||||
{ value: "24/7", title: "Market Coverage" },
|
||||
{ value: "500k+", title: "Monthly Executions" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/investors-reading-factory-paperwork-laptop-reviewing-financial-statements_482257-123452.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
@@ -183,44 +117,15 @@ export default function LandingPage() {
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "John Doe",
|
||||
handle: "@trader_john",
|
||||
testimonial: "The precision of this platform is unmatched in the industry.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-manager-suit-looking-camera-meeting_1163-4799.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Sarah Smith",
|
||||
handle: "@sarah_trades",
|
||||
testimonial: "Incredible performance even during extreme market volatility.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-businesswoman-standing-airport_107420-63594.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Mike Ross",
|
||||
handle: "@mike_invests",
|
||||
testimonial: "Best analytical tools I've used in my 10 years of trading.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/supervisor-getting-frustrated-leaving-briefing-meeting_482257-91190.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Jane Wilson",
|
||||
handle: "@jane_wilson",
|
||||
testimonial: "A complete game changer for my institutional portfolio.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-man-black-suit-glasses-looking-front-blowing-kiss-holding-hands-front-him-standing-blue-wall_141793-50796.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "David Chen",
|
||||
handle: "@dave_finance",
|
||||
testimonial: "The most robust API I have ever integrated in a trading terminal.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-manager-suit-looking-camera-meeting_1163-4799.jpg?_wi=2",
|
||||
},
|
||||
{ id: "1", name: "John Doe", handle: "@trader_john", testimonial: "The precision of this platform is unmatched in the industry.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-manager-suit-looking-camera-meeting_1163-4799.jpg" },
|
||||
{ id: "2", name: "Sarah Smith", handle: "@sarah_trades", testimonial: "Incredible performance even during extreme market volatility.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-businesswoman-standing-airport_107420-63594.jpg" },
|
||||
{ id: "3", name: "Mike Ross", handle: "@mike_invests", testimonial: "Best analytical tools I've used in my 10 years of trading.", imageSrc: "http://img.b2bpic.net/free-photo/supervisor-getting-frustrated-leaving-briefing-meeting_482257-91190.jpg" },
|
||||
{ id: "4", name: "Jane Wilson", handle: "@jane_wilson", testimonial: "A complete game changer for my institutional portfolio.", imageSrc: "http://img.b2bpic.net/free-photo/business-man-black-suit-glasses-looking-front-blowing-kiss-holding-hands-front-him-standing-blue-wall_141793-50796.jpg" },
|
||||
{ id: "5", name: "David Chen", handle: "@dave_finance", testimonial: "The most robust API I have ever integrated in a trading terminal.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-manager-suit-looking-camera-meeting_1163-4799.jpg" }
|
||||
]}
|
||||
title="Trusted by Pros"
|
||||
description="Join the community of professional traders dominating the market."
|
||||
@@ -233,51 +138,9 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "basic",
|
||||
price: "$199/mo",
|
||||
name: "Individual",
|
||||
features: [
|
||||
"Advanced charting",
|
||||
"5 active workspaces",
|
||||
"Real-time data",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Start Trading",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
price: "$499/mo",
|
||||
name: "Professional",
|
||||
features: [
|
||||
"Institutional API access",
|
||||
"20 active workspaces",
|
||||
"Direct exchange connection",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Upgrade to Pro",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "enterprise",
|
||||
price: "Custom",
|
||||
name: "Enterprise",
|
||||
features: [
|
||||
"Dedicated server",
|
||||
"Custom liquidity pools",
|
||||
"24/7 Priority support",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Contact Sales",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ id: "basic", price: "$199/mo", name: "Individual", features: ["Advanced charting", "5 active workspaces", "Real-time data"], buttons: [{ text: "Start Trading" }] },
|
||||
{ id: "pro", price: "$499/mo", name: "Professional", features: ["Institutional API access", "20 active workspaces", "Direct exchange connection"], buttons: [{ text: "Upgrade to Pro" }] },
|
||||
{ id: "enterprise", price: "Custom", name: "Enterprise", features: ["Dedicated server", "Custom liquidity pools", "24/7 Priority support"], buttons: [{ text: "Contact Sales" }] }
|
||||
]}
|
||||
title="Tailored Plans"
|
||||
description="Choose a plan that fits your trading style, from individual to enterprise scale."
|
||||
@@ -289,21 +152,9 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Is the platform secure?",
|
||||
content: "Yes, we use industry-standard encryption and institutional protocols.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Do you support API access?",
|
||||
content: "Absolutely, our REST and WebSocket APIs are designed for high-frequency trading.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "What assets are supported?",
|
||||
content: "We support thousands of assets across major global exchanges.",
|
||||
},
|
||||
{ id: "q1", title: "Is the platform secure?", content: "Yes, we use industry-standard encryption and institutional protocols." },
|
||||
{ id: "q2", title: "Do you support API access?", content: "Absolutely, our REST and WebSocket APIs are designed for high-frequency trading." },
|
||||
{ id: "q3", title: "What assets are supported?", content: "We support thousands of assets across major global exchanges." }
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about our trading platform."
|
||||
@@ -314,17 +165,11 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
tag="Get Started"
|
||||
title="Ready to Trade?"
|
||||
description="Contact our sales team for a custom demo or institutional onboarding."
|
||||
buttons={[
|
||||
{
|
||||
text: "Talk to Sales",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Talk to Sales" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -332,36 +177,12 @@ export default function LandingPage() {
|
||||
<FooterBaseCard
|
||||
logoText="TradePro"
|
||||
columns={[
|
||||
{
|
||||
title: "Product",
|
||||
items: [
|
||||
{
|
||||
label: "Platform",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Security",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Product", items: [{ label: "Platform", href: "#" }, { label: "Security", href: "#" }] },
|
||||
{ title: "Company", items: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user