Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| a78d7abbb2 | |||
| 8e02ec8764 | |||
| 045a6433aa | |||
| d78abb23c2 |
446
src/app/page.tsx
446
src/app/page.tsx
@@ -3,364 +3,130 @@
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
||||
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
||||
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
||||
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="large"
|
||||
background="fluid"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="light"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Features",
|
||||
id: "#features",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "#pricing",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "#testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
]}
|
||||
brandName="TradeFlow"
|
||||
button={{
|
||||
text: "Start Trading",
|
||||
href: "#contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Metrics", id: "#metrics" },
|
||||
{ name: "Products", id: "#products" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="TechTrade"
|
||||
button={{ text: "Get Started", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Trade Smarter with AI-Driven Insights"
|
||||
description="Unlock advanced trading strategies and real-time analytics to make confident market decisions. Experience the future of professional finance."
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Tools",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
text: "Contact Sales",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/urban-apartment-with-minimalist-home-office-wooden-furniture_482257-120933.jpg",
|
||||
imageAlt: "Trading Dashboard",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/employee-reviews-stock-data-screen_482257-121089.jpg",
|
||||
imageAlt: "Advanced Market Terminal",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smartphone-with-graphics-icons_1134-415.jpg",
|
||||
imageAlt: "Financial Network",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/gradient-dark-mode-app-template_23-2150498015.jpg",
|
||||
imageAlt: "Investment Growth",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-graphs-performance-metrics-monitors-office_482257-126569.jpg",
|
||||
imageAlt: "Trader Workspace",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
title="Professional Tech-Driven Trading Infrastructure"
|
||||
description="Precision-engineered tools for high-frequency market analysis and automated execution. Built for the future of digital finance."
|
||||
background={{ variant: "rotated-rays-animated-grid" }}
|
||||
testimonials={[]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/employee-reviews-stock-data-screen_482257-121089.jpg"
|
||||
buttons={[{ text: "Explore Solution", href: "#products" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSix
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Real-time Analytics",
|
||||
description: "Access sub-millisecond market data streams.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=z0gnad&_wi=1",
|
||||
imageAlt: "Analytics",
|
||||
},
|
||||
{
|
||||
title: "Advanced Charting",
|
||||
description: "Customizable professional tools at your fingertips.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-kit-collection_23-2149203471.jpg?_wi=1",
|
||||
imageAlt: "Charting",
|
||||
},
|
||||
{
|
||||
title: "Automated Execution",
|
||||
description: "Define and execute complex strategies effortlessly.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blue-technology-background_1017-3288.jpg?_wi=1",
|
||||
imageAlt: "Automation",
|
||||
},
|
||||
{
|
||||
title: "Risk Management",
|
||||
description: "Advanced stop-loss and hedging automation.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=z0gnad&_wi=2",
|
||||
imageAlt: "Risk",
|
||||
},
|
||||
{
|
||||
title: "Global Liquidity",
|
||||
description: "Connect to all major liquidity providers globally.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-kit-collection_23-2149203471.jpg?_wi=2",
|
||||
imageAlt: "Liquidity",
|
||||
},
|
||||
{
|
||||
title: "Developer API",
|
||||
description: "Robust REST and WebSocket APIs for custom bots.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blue-technology-background_1017-3288.jpg?_wi=2",
|
||||
imageAlt: "API",
|
||||
},
|
||||
]}
|
||||
title="Why Choose Our Platform"
|
||||
description="Professional-grade tools designed for speed, accuracy, and profitability."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyThree
|
||||
title="Engineered for Performance"
|
||||
description="Cutting-edge infrastructure designed for reliability and speed."
|
||||
textboxLayout="split"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "f1", title: "Quantum Execution", tags: ["Low Latency"] },
|
||||
{ id: "f2", title: "AI Market Scanner", tags: ["Predictive"] },
|
||||
{ id: "f3", title: "Secured Vault", tags: ["AES-256"] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "99.9%",
|
||||
title: "Uptime Reliability",
|
||||
items: [
|
||||
"Robust server infrastructure",
|
||||
"Global cloud connectivity",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "250ms",
|
||||
title: "Latency",
|
||||
items: [
|
||||
"Fastest trade execution",
|
||||
"Minimized slippage",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "$1B+",
|
||||
title: "Daily Volume",
|
||||
items: [
|
||||
"Liquidity you can rely on",
|
||||
"High market participation",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m4",
|
||||
value: "500+",
|
||||
title: "Assets",
|
||||
items: [
|
||||
"Cryptocurrency and Forex",
|
||||
"Global stock derivatives",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m5",
|
||||
value: "24/7",
|
||||
title: "Support",
|
||||
items: [
|
||||
"Round the clock assistance",
|
||||
"Dedicated account managers",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Platform Performance"
|
||||
description="Driving results for thousands of active traders daily."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardFourteen
|
||||
title="Operational Excellence"
|
||||
tag="Performance Stats"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "99.99%", description: "Infrastructure Uptime" },
|
||||
{ id: "m2", value: "<1ms", description: "Order Latency" },
|
||||
{ id: "m3", value: "150+", description: "Integration Partners" }
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Pro Desktop",
|
||||
price: "$49/mo",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mock-up-animation-financial-stock-market-data-software-with-different-diagrams-graphs_482257-26904.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Mobile Edge",
|
||||
price: "$19/mo",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-person-looking-finance-graphs_23-2150461348.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Auto Trader Bot",
|
||||
price: "$99/mo",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/gradient-dark-mode-app-template_23-2150513319.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Portfolio Tracker",
|
||||
price: "Free",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/businessman-checking-stock-market-online_53876-163988.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Analytics Suite",
|
||||
price: "$79/mo",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/remote-control-sound-settings-from-tablet_169016-23700.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Market Scanner Pro",
|
||||
price: "$59/mo",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/fitness-mobile-app-infographic-template-flat-style_23-2148219822.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our Trading Solutions"
|
||||
description="Select the right plan for your trading style."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardTwo
|
||||
title="Core Trading Modules"
|
||||
description="Modular software stacks for professional institutions."
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", brand: "Core", name: "Algorithmic Engine", price: "$499", rating: 5, reviewCount: "120", imageSrc: "http://img.b2bpic.net/free-photo/mock-up-animation-financial-stock-market-data-software-with-different-diagrams-graphs_482257-26904.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
title: "Life Changer",
|
||||
quote: "The analytical tools here are unparalleled. My efficiency has doubled.",
|
||||
name: "Alex Rivet",
|
||||
role: "Senior Trader",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-business-leader-using-smartphone-lobby_1262-5625.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
title: "Fast Execution",
|
||||
quote: "Execution speeds are insane. Perfect for my scalping strategy.",
|
||||
name: "Elena Moss",
|
||||
role: "Full-time Trader",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-senior-businessman-posing-photography_1098-16749.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
title: "Top-tier Platform",
|
||||
quote: "Everything I need in one interface. Highly recommend.",
|
||||
name: "Marcus Kane",
|
||||
role: "Portfolio Manager",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/no-minute-without-my-laptop-handsome-young-man-working-laptop-while-enjoying-coffee-cafe_639032-2899.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
title: "Great Support",
|
||||
quote: "Support is knowledgeable and super fast to respond.",
|
||||
name: "Sarah Lee",
|
||||
role: "Individual Investor",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-happy-senior-man-using-digital-tablet_1262-1985.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
title: "Game Changer",
|
||||
quote: "The charting software is the best I have ever used.",
|
||||
name: "David Zhou",
|
||||
role: "Financial Analyst",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-mature-businessman-using-digital-tablet-caf_23-2147955292.jpg",
|
||||
},
|
||||
]}
|
||||
title="What Our Traders Say"
|
||||
description="Join the community of professionals who trust us."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
title="Trusted by Industry Leaders"
|
||||
description="Providing tech solutions for over a decade."
|
||||
textboxLayout="split"
|
||||
animationType="scale-rotate"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Dr. Aris Thorne", role: "CTO, FinTech Alpha", testimonial: "The infrastructure reliability is unmatched.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-business-leader-using-smartphone-lobby_1262-5625.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "rotated-rays-animated-grid",
|
||||
}}
|
||||
title="Ready to Start?"
|
||||
description="Sign up for a free trial and get exclusive insights."
|
||||
buttonText="Start Free Trial"
|
||||
tag="Join Now"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
title="Ready for Scalable Trading?"
|
||||
description="Contact our technical solutions team for a custom integration audit."
|
||||
tag="Contact Us"
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "canvas-reveal" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Platform",
|
||||
items: [
|
||||
{
|
||||
label: "Features",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Pricing",
|
||||
href: "#pricing",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="TradeFlow"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
logoText="TechTrade"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/blue-technology-background_1017-3288.jpg"
|
||||
columns={[
|
||||
{ title: "Solutions", items: [{ label: "Platform", href: "#" }] },
|
||||
{ title: "Legal", items: [{ label: "Terms", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #000000;
|
||||
--card: #0c0c0c;
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #106EFB;
|
||||
--primary-cta: #1f7cff;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #000000;
|
||||
--secondary-cta: #010101;
|
||||
--secondary-cta-text: #ffffff;
|
||||
--accent: #535353;
|
||||
--background-accent: #106EFB;
|
||||
--accent: #1f7cff;
|
||||
--background-accent: #f96b2f;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user