407 lines
14 KiB
TypeScript
407 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
import { Shield, TrendingUp, Users } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="mediumSmall"
|
|
sizing="medium"
|
|
background="floatingGradient"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{
|
|
name: "Features",
|
|
id: "#features",
|
|
},
|
|
{
|
|
name: "Pricing",
|
|
id: "#pricing",
|
|
},
|
|
{
|
|
name: "Testimonials",
|
|
id: "#testimonials",
|
|
},
|
|
{
|
|
name: "FAQ",
|
|
id: "#faq",
|
|
},
|
|
]}
|
|
brandName="TradeSim"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardGallery
|
|
background={{
|
|
variant: "sparkles-gradient",
|
|
}}
|
|
title="Trade Everything. Risk Nothing. Learn Fast."
|
|
description="Master crypto, stocks, forex, commodities, and index funds with $100,000 virtual capital. Practice real market strategies in a safe, consequence-free environment."
|
|
buttons={[
|
|
{
|
|
text: "Start Paper Trading Free",
|
|
href: "#contact",
|
|
},
|
|
]}
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-trading-browsing-online-stock-investments-night_169016-48803.jpg?_wi=1",
|
|
imageAlt: "Trading Dashboard",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/woman-watching-business-conference-computer-screen-looking-statistics_482257-125563.jpg",
|
|
imageAlt: "Market Analytics",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/trading-stock-stock-market-business-graph-trading-investment-broker-stock-exchange-market_169016-66442.jpg",
|
|
imageAlt: "Portfolio Tracking",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-ai-data-visualization_23-2151977857.jpg",
|
|
imageAlt: "Crypto Simulation",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/businessman-working-futuristic-office_23-2151003754.jpg",
|
|
imageAlt: "Forex Tools",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/team-leader-showing-employee-mistakes-fix-business-documents-pc_482257-131788.jpg",
|
|
imageAlt: "Commodities Watch",
|
|
},
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
useInvertedBackground={false}
|
|
title="Master the Markets Without Risk"
|
|
description={[
|
|
"Whether you are a beginner looking to understand market mechanics or an experienced trader stress-testing a new strategy, our platform provides a mirror-image of real-world trading environments.",
|
|
"With $100,000 in virtual capital, you get unlimited access to buy, sell, and analyze assets across all major financial sectors. Build your confidence without risking a single cent of real money.",
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardNine
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Multi-Asset Support",
|
|
description: "Trade everything from volatile cryptocurrencies and forex pairs to stable index funds and commodities in one unified dashboard.",
|
|
phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/happy-man-holding-remote-control-chatting-smartphone_482257-126560.jpg",
|
|
imageAlt: "Multi-asset dashboard",
|
|
},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/contemporary-office-space-featuring-cubicles-organized-workstations_482257-96243.jpg",
|
|
imageAlt: "Crypto and stocks analytics",
|
|
},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-trading-browsing-online-stock-investments-night_169016-48803.jpg?_wi=2",
|
|
imageAlt: "mobile trading app interface",
|
|
},
|
|
{
|
|
title: "Real-time Market Data",
|
|
description: "Experience simulated trading using live market feeds that replicate actual market movements and price volatility.",
|
|
phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/minimalistic-still-life-assortment-with-cryptocurrency_23-2149102102.jpg",
|
|
imageAlt: "Live charts",
|
|
},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/isolated-greenscreen-display-running-tablet-military-power-base_482257-89730.jpg",
|
|
imageAlt: "Real-time price feed",
|
|
},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/technology-connection-online-networking-medias-conpt_53876-64965.jpg",
|
|
imageAlt: "mobile trading app interface",
|
|
},
|
|
{
|
|
title: "Portfolio Analytics",
|
|
description: "Track your gains, losses, and historical performance with advanced reporting tools designed to improve your decision-making.",
|
|
phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/market-trends-concept-with-smartphone_23-2150372425.jpg",
|
|
imageAlt: "Performance tracking",
|
|
},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/laptop-showing-isolated-chroma-key-help-strategy-planning_482257-126434.jpg",
|
|
imageAlt: "Strategy breakdown",
|
|
},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/hipster-attractive-man-using-devices-working-laptop-tablet-computer_285396-1632.jpg?_wi=1",
|
|
imageAlt: "mobile trading app interface",
|
|
},
|
|
]}
|
|
showStepNumbers={true}
|
|
title="Core Trading Features"
|
|
description="Built for the next generation of financial success stories."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{
|
|
id: "basic",
|
|
badge: "Starter",
|
|
price: "Free",
|
|
subtitle: "Perfect for beginners",
|
|
features: [
|
|
"100k Virtual Capital",
|
|
"Basic Market Access",
|
|
"Portfolio Tracking",
|
|
],
|
|
buttons: [
|
|
{
|
|
text: "Start Free",
|
|
href: "#contact",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "pro",
|
|
badge: "Pro",
|
|
price: "$29/mo",
|
|
subtitle: "For serious traders",
|
|
features: [
|
|
"Unlimited Capital",
|
|
"Advanced Analytics",
|
|
"Custom Strategy Tools",
|
|
"Priority Support",
|
|
],
|
|
buttons: [
|
|
{
|
|
text: "Upgrade",
|
|
href: "#contact",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
title="Simple Pricing"
|
|
description="Choose the level of access that matches your learning goals."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1",
|
|
icon: Users,
|
|
title: "Active Traders",
|
|
value: "50,000+",
|
|
},
|
|
{
|
|
id: "m2",
|
|
icon: TrendingUp,
|
|
title: "Trades Executed",
|
|
value: "2M+",
|
|
},
|
|
{
|
|
id: "m3",
|
|
icon: Shield,
|
|
title: "Risk Mitigated",
|
|
value: "$500M+",
|
|
},
|
|
]}
|
|
title="Our Platform Impact"
|
|
description="Helping traders globally achieve financial independence."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
title: "Life Changing",
|
|
quote: "I learned more in one month here than in a year of self-study.",
|
|
name: "Sarah Johnson",
|
|
role: "Full-time Trader",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/hipster-attractive-man-using-devices-working-laptop-tablet-computer_285396-1632.jpg?_wi=2",
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "Game Changer",
|
|
quote: "The risk-free environment allowed me to test my forex strategy before committing real capital.",
|
|
name: "Michael Chen",
|
|
role: "Crypto Analyst",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/powerful-ceo-corporate-headquarters-plans-company-expansion_482257-123287.jpg",
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "Essential Tool",
|
|
quote: "Every beginner needs this. It's the best way to learn the ropes of stock trading.",
|
|
name: "Emily Rodriguez",
|
|
role: "Financial Student",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/confident-senior-businessman-sitting-with-touchpad_1262-2372.jpg",
|
|
},
|
|
{
|
|
id: "4",
|
|
title: "Strategy Master",
|
|
quote: "Advanced analytics tools helped me understand my trading weaknesses perfectly.",
|
|
name: "David Kim",
|
|
role: "Day Trader",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-digital-nomad-woman-with-tablet-working-outdoors-fresh-air-smiling-looking-away_1258-194355.jpg",
|
|
},
|
|
{
|
|
id: "5",
|
|
title: "Highly Recommend",
|
|
quote: "Safe, reliable, and intuitive. My trading game has leveled up significantly.",
|
|
name: "Alex Rivera",
|
|
role: "Part-time Investor",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-bearded-man-with-laptop-cafe_171337-18082.jpg",
|
|
},
|
|
]}
|
|
title="Traders Love Us"
|
|
description="Hear from the community about how we changed their approach to trading."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "q1",
|
|
title: "Is real money required?",
|
|
content: "No, this is a paper trading platform designed to teach trading without using real money.",
|
|
},
|
|
{
|
|
id: "q2",
|
|
title: "Can I test my own strategies?",
|
|
content: "Yes, the platform supports customized technical indicators and strategy backtesting.",
|
|
},
|
|
{
|
|
id: "q3",
|
|
title: "Is market data live?",
|
|
content: "We integrate with industry-standard real-time market feeds to provide realistic market conditions.",
|
|
},
|
|
]}
|
|
title="Frequently Asked Questions"
|
|
description="Everything you need to know about starting your trading journey."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
useInvertedBackground={false}
|
|
title="Get Started Today"
|
|
description="Sign up and receive $100,000 in virtual capital instantly to begin your trading practice."
|
|
inputs={[
|
|
{
|
|
name: "name",
|
|
type: "text",
|
|
placeholder: "Your Name",
|
|
required: true,
|
|
},
|
|
{
|
|
name: "email",
|
|
type: "email",
|
|
placeholder: "Your Email",
|
|
required: true,
|
|
},
|
|
]}
|
|
textarea={{
|
|
name: "message",
|
|
placeholder: "What are your trading goals?",
|
|
rows: 4,
|
|
}}
|
|
imageSrc="http://img.b2bpic.net/free-photo/financial-advisor-examines-cryptocurrency-trade-market-from-his-loft-workstation_482257-119805.jpg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Platform",
|
|
items: [
|
|
{
|
|
label: "About",
|
|
href: "#about",
|
|
},
|
|
{
|
|
label: "Pricing",
|
|
href: "#pricing",
|
|
},
|
|
{
|
|
label: "Features",
|
|
href: "#features",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Resources",
|
|
items: [
|
|
{
|
|
label: "Learning Center",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Blog",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Support",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Legal",
|
|
items: [
|
|
{
|
|
label: "Privacy Policy",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Terms of Service",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
bottomLeftText="© 2024 TradeSim Inc."
|
|
bottomRightText="Paper Trading Platform"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|