130 lines
5.4 KiB
TypeScript
130 lines
5.4 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
|
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
|
|
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="large"
|
|
background="circleGradient"
|
|
cardStyle="subtle-shadow"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="medium"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Metrics", id: "metrics" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
brandName="TradeMaster"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroCentered
|
|
background={{ variant: "plain" }}
|
|
title="Master the Market."
|
|
description="Professional-grade trading tools for modern stock market analysis. Gain the edge you need to execute smarter trades with confidence."
|
|
avatars={[
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ8lJhI0I2zCneilTDry5zgWuQ/professional-portrait-of-a-middle-aged-m-1774685418590-89b8cde0.png", alt: "Trader" },
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ8lJhI0I2zCneilTDry5zgWuQ/professional-portrait-of-a-young-female--1774685420619-aa89c1ff.png", alt: "Trader" },
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ8lJhI0I2zCneilTDry5zgWuQ/close-up-headshot-of-a-mature-financial--1774685418286-25a583b1.png", alt: "Trader" }
|
|
]}
|
|
avatarText="Used by 10,000+ stock traders"
|
|
buttons={[{ text: "Get Started", href: "#pricing" }]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardSeven
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{ id: 1, title: "Real-Time Data", description: "Market updates in milliseconds.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ8lJhI0I2zCneilTDry5zgWuQ/a-close-up-view-of-a-high-speed-real-tim-1774685420539-050f2e91.png" },
|
|
{ id: 2, title: "Smart Analytics", description: "Deep insights into stock trends.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ8lJhI0I2zCneilTDry5zgWuQ/a-clean-analysis-tool-showing-technical--1774685418960-024602a8.png" }
|
|
]}
|
|
title="Engineered for Alpha."
|
|
description="Our platform provides the infrastructure required to succeed in volatile markets."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardFourteen
|
|
title="Platform Reliability"
|
|
tag="Infrastructure"
|
|
metrics={[
|
|
{ id: "1", value: "99.99%", description: "Uptime" },
|
|
{ id: "2", value: "<5ms", description: "Latency" },
|
|
{ id: "3", value: "$50B+", description: "Asset Volume" }
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
plans={[
|
|
{ id: "basic", price: "$29", name: "Trader", features: ["Standard Data", "Mobile App"], buttons: [{ text: "Choose Plan" }] },
|
|
{ id: "pro", price: "$149", name: "Pro Trader", features: ["Real-time Data", "API Access", "Priority Support"], buttons: [{ text: "Choose Plan" }] }
|
|
]}
|
|
title="Transparent Pricing."
|
|
description="Choose the plan that fits your trading scale."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwelve
|
|
testimonials={[
|
|
{ id: "1", name: "Alex R.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZ8lJhI0I2zCneilTDry5zgWuQ/professional-portrait-of-a-middle-aged-m-1774685418590-89b8cde0.png" }
|
|
]}
|
|
cardTitle="Market Leaders Trust Us."
|
|
cardTag="Testimonials"
|
|
cardAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Ready to Trade?"
|
|
title="Start Your Journey."
|
|
description="Get access to professional tools today."
|
|
buttons={[{ text: "Open Account" }]}
|
|
background={{ variant: "sparkles-gradient" }}
|
|
/>
|
|
</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: "#" }] }
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |