268 lines
12 KiB
TypeScript
268 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
|
|
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
|
import { Award, GraduationCap, LineChart, ShieldCheck, TrendingUp, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="small"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="floatingGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "#hero"},
|
|
{
|
|
name: "About", id: "#about"},
|
|
{
|
|
name: "Features", id: "#features"},
|
|
{
|
|
name: "Pricing", id: "#pricing"},
|
|
{
|
|
name: "Contact", id: "#contact"},
|
|
]}
|
|
brandName="TradeLearn"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardGallery
|
|
background={{
|
|
variant: "canvas-reveal"}}
|
|
title="Master the Markets with Professional Trading Education"
|
|
description="Unlock advanced strategies, real-time analytics, and expert-led courses designed to elevate your trading journey from novice to master."
|
|
tag="Trusted by 10,000+ Traders"
|
|
buttons={[
|
|
{
|
|
text: "Start Learning", href: "#pricing"},
|
|
]}
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-man-looking-into-crypto-currency-stock-market_482257-2365.jpg", imageAlt: "Trading Chart Analytics"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-dark-earth-space_23-2151051317.jpg", imageAlt: "Global Market Data"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/business-success-growth-visualization_23-2152011787.jpg", imageAlt: "Growth Financial Charts"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/boardroom-table-with-tablet-running-isolated-mockup-night-lights-performance-projections_482257-136166.jpg", imageAlt: "Trader Workstation"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/closeup-african-american-entrepreneur-analyzing-company-profit_482257-20207.jpg", imageAlt: "Trading Interface"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/business-graphs-performance-metrics-monitors-office_482257-126569.jpg", imageAlt: "Market Analysis Tools"},
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<AboutMetric
|
|
useInvertedBackground={true}
|
|
title="Why Choose Our Trading Academy"
|
|
metrics={[
|
|
{
|
|
icon: GraduationCap,
|
|
label: "Students Taught", value: "15,000+"},
|
|
{
|
|
icon: TrendingUp,
|
|
label: "Market Success Rate", value: "89%"},
|
|
{
|
|
icon: Award,
|
|
label: "Certified Curriculums", value: "50+"},
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardSixteen
|
|
animationType="depth-3d"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
negativeCard={{
|
|
items: [
|
|
"No overnight success promises", "No automated trading bots", "No low-quality signals"],
|
|
}}
|
|
positiveCard={{
|
|
items: [
|
|
"In-depth market structure analysis", "Risk management best practices", "Psychological training for traders"],
|
|
}}
|
|
title="Comprehensive Learning Path"
|
|
description="We bridge the gap between complex market theory and profitable trading execution."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
plans={[
|
|
{
|
|
id: "beginner", name: "Beginner Foundations", price: "$49/mo", features: [
|
|
"Introduction to Candlesticks", "Market Terminology", "Basic Support & Resistance"],
|
|
buttons: [
|
|
{
|
|
text: "Get Started", href: "#contact"},
|
|
],
|
|
},
|
|
{
|
|
id: "pro", name: "Pro Trader Program", price: "$199/mo", features: [
|
|
"Advanced Price Action", "Risk Management Masterclass", "1-on-1 Mentorship Session"],
|
|
buttons: [
|
|
{
|
|
text: "Join Pro", href: "#contact"},
|
|
],
|
|
},
|
|
{
|
|
id: "elite", name: "Elite Institutional", price: "$499/mo", features: [
|
|
"Institutional Order Flow", "Full Algorithmic Setup", "Daily Live Trading Room Access"],
|
|
buttons: [
|
|
{
|
|
text: "Apply Now", href: "#contact"},
|
|
],
|
|
},
|
|
]}
|
|
title="Structured Learning Plans"
|
|
description="Choose the level that suits your goals, whether you are just starting or scaling your capital."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardThree
|
|
animationType="scale-rotate"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1", icon: LineChart,
|
|
title: "Portfolio Growth", value: "240%"},
|
|
{
|
|
id: "m2", icon: ShieldCheck,
|
|
title: "Risk Win Ratio", value: "1:3.5"},
|
|
{
|
|
id: "m3", icon: Zap,
|
|
title: "Avg Execution Speed", value: "12ms"},
|
|
]}
|
|
title="Performance at a Glance"
|
|
description="Track the impact of our curriculum on student portfolio performance and growth."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwo
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Jenkins", role: "Full-time Trader", testimonial: "The institutional order flow course changed my perspective on market volatility completely.", imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-car-showroom_1303-17442.jpg"},
|
|
{
|
|
id: "2", name: "Mark Sterling", role: "Crypto Enthusiast", testimonial: "Finally, a trading course that actually emphasizes risk management over lucky signals.", imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-writing-down-her-thoughts-corporate-lady-sits-outdoors-works-brainstorming_1258-116716.jpg"},
|
|
{
|
|
id: "3", name: "Alice Thompson", role: "Aspiring Investor", testimonial: "The mentorship sessions were invaluable. I now feel confident navigating bear markets.", imageSrc: "http://img.b2bpic.net/free-photo/confident-businessman-working-desk_273609-12809.jpg"},
|
|
{
|
|
id: "4", name: "David Wu", role: "Day Trader", testimonial: "The daily live trading room is where the real learning happens. Unbeatable value.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-happy-mature-businessman-with-cup-coffee_23-2147955276.jpg"},
|
|
{
|
|
id: "5", name: "Chloe Vance", role: "Swing Trader", testimonial: "I've quadrupled my portfolio since I started following these disciplined strategies.", imageSrc: "http://img.b2bpic.net/free-photo/blond-teenager-boy-eyeglasses-holds-tablet-pc-smartphone_613910-11920.jpg"},
|
|
]}
|
|
title="Student Success Stories"
|
|
description="Hear from successful traders who built their careers using our comprehensive methodologies."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "q1", title: "What educational materials are provided?", content: "Our curriculum includes video modules, downloadable strategy PDFs, weekly live webinars, and access to our private community."},
|
|
{
|
|
id: "q2", title: "Can I track my trading progress?", content: "Yes, all courses include progress tracking tools to monitor your understanding of market theory and execution skills."},
|
|
{
|
|
id: "q3", title: "Do you offer certifications upon completion?", content: "Yes, students receive a digital certificate of completion after successfully passing the final assessment for each advanced module."},
|
|
]}
|
|
sideTitle="Trading Education FAQ"
|
|
sideDescription="Learn how our structured curriculum helps you master professional trading methodologies."
|
|
faqsAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
useInvertedBackground={true}
|
|
title="Get Trading Support"
|
|
description="Need guidance on selecting the right course or troubleshooting your account? Our dedicated support team is here to help you succeed."
|
|
inputs={[
|
|
{
|
|
name: "name", type: "text", placeholder: "Full Name", required: true,
|
|
},
|
|
{
|
|
name: "email", type: "email", placeholder: "Support Email", required: true,
|
|
},
|
|
]}
|
|
textarea={{
|
|
name: "message", placeholder: "Describe your request for trading assistance", rows: 4,
|
|
}}
|
|
imageSrc="http://img.b2bpic.net/free-photo/beautiful-customer-support-representative-wearing-headset-while-working-call-center_637285-133.jpg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
columns={[
|
|
{
|
|
items: [
|
|
{
|
|
label: "Learning Dashboard", href: "#hero"},
|
|
{
|
|
label: "Trading Courses", href: "#pricing"},
|
|
{
|
|
label: "Support Center", href: "#contact"},
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{
|
|
label: "Trading App iOS", href: "#"},
|
|
{
|
|
label: "Trading App Android", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{
|
|
label: "Terms of Service", href: "#"},
|
|
{
|
|
label: "Privacy Policy", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
logoText="TradeLearn"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|