Update src/app/page.tsx
This commit is contained in:
394
src/app/page.tsx
394
src/app/page.tsx
@@ -15,283 +15,143 @@ import TextAbout from '@/components/sections/about/TextAbout';
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Dashboard",
|
||||
id: "#metrics",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
id: "#features",
|
||||
},
|
||||
{
|
||||
name: "Budgeting",
|
||||
id: "#pricing",
|
||||
},
|
||||
{
|
||||
name: "Support",
|
||||
id: "#contact",
|
||||
},
|
||||
]}
|
||||
brandName="TradeTrack"
|
||||
button={{
|
||||
text: "Get Started",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Dashboard", id: "#metrics" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Budgeting", id: "#pricing" },
|
||||
{ name: "Support", id: "#contact" }
|
||||
]}
|
||||
brandName="TradeTrack"
|
||||
button={{ text: "Get Started", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Master Your Trading Performance"
|
||||
description="Track your P&L, manage your capital, and automate your budgeting with our mobile-first tracker designed for the modern trader."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/beautiful-cryptocurrwncy-concept_23-2149250219.jpg"
|
||||
imageAlt="Mobile App UI"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/businessman-adjusting-his-tie_1139-649.jpg",
|
||||
alt: "Business trader 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-young-businessman-with-hands-head_1262-2009.jpg",
|
||||
alt: "Business trader 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/businessman-leaning-wall-smiling_1139-654.jpg",
|
||||
alt: "Business trader 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1662.jpg",
|
||||
alt: "Business trader 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/female-office-worker-surprised-about-news_114579-78789.jpg",
|
||||
alt: "Business trader 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Join 5,000+ traders"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Real-time P&L Analytics",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Automated Budgeting",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Mobile-First Design",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Seamless Integration",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Secure Capital Management",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{ variant: "plain" }}
|
||||
title="Master Your Trading Performance"
|
||||
description="Track your P&L, manage your capital, and automate your budgeting with our mobile-first tracker designed for the modern trader."
|
||||
buttons={[{ text: "Get Started", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/beautiful-cryptocurrwncy-concept_23-2149250219.jpg"
|
||||
imageAlt="Mobile App UI"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/businessman-adjusting-his-tie_1139-649.jpg", alt: "Business trader 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/smiling-young-businessman-with-hands-head_1262-2009.jpg", alt: "Business trader 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/businessman-leaning-wall-smiling_1139-654.jpg", alt: "Business trader 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1662.jpg", alt: "Business trader 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/female-office-worker-surprised-about-news_114579-78789.jpg", alt: "Business trader 5" }
|
||||
]}
|
||||
avatarText="Join 5,000+ traders"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Real-time P&L Analytics" },
|
||||
{ type: "text", text: "Automated Budgeting" },
|
||||
{ type: "text", text: "Mobile-First Design" },
|
||||
{ type: "text", text: "Seamless Integration" },
|
||||
{ type: "text", text: "Secure Capital Management" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "$42,500",
|
||||
title: "Total Capital",
|
||||
items: [
|
||||
"Portfolio health",
|
||||
"Margin usage",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "12.5%",
|
||||
title: "Monthly Return",
|
||||
items: [
|
||||
"Monthly growth",
|
||||
"Profit targets",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "184",
|
||||
title: "Total Trades",
|
||||
items: [
|
||||
"Success rate",
|
||||
"Win/Loss ratio",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Real-time Trading Stats"
|
||||
description="Monitor your monthly growth, capital allocation, and ROI targets instantly."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{ id: "m1", value: "$42,500", title: "Total Capital", items: ["Portfolio health", "Margin usage"] },
|
||||
{ id: "m2", value: "12.5%", title: "Monthly Return", items: ["Monthly growth", "Profit targets"] },
|
||||
{ id: "m3", value: "184", title: "Total Trades", items: ["Success rate", "Win/Loss ratio"] }
|
||||
]}
|
||||
title="Real-time Trading Stats"
|
||||
description="Monitor your monthly growth, capital allocation, and ROI targets instantly."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="Built for Discipline and Growth"
|
||||
buttons={[
|
||||
{
|
||||
text: "Learn More",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="Built for Discipline and Growth"
|
||||
buttons={[{ text: "Learn More" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Tithe & Giving",
|
||||
description: "Automated calculations for charitable contributions based on your net profit.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/location-map-direction-right-side_187299-45230.jpg",
|
||||
},
|
||||
{
|
||||
title: "Essentials Budgeting",
|
||||
description: "Allocate earnings to clothing, personal care, and living costs automatically.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/banking-app-interface_23-2148600650.jpg",
|
||||
},
|
||||
{
|
||||
title: "Profit Growth Analytics",
|
||||
description: "Visualise how your capital compounds over time with detailed reporting.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/businessman-checking-stock-market-online_53876-14787.jpg",
|
||||
},
|
||||
]}
|
||||
title="Smart Profit Management"
|
||||
description="Divide your wins effortlessly between your spiritual commitments, personal essentials, and long-term savings."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ title: "Tithe & Giving", description: "Automated calculations for charitable contributions based on your net profit.", imageSrc: "http://img.b2bpic.net/free-photo/location-map-direction-right-side_187299-45230.jpg" },
|
||||
{ title: "Essentials Budgeting", description: "Allocate earnings to clothing, personal care, and living costs automatically.", imageSrc: "http://img.b2bpic.net/free-vector/banking-app-interface_23-2148600650.jpg" },
|
||||
{ title: "Profit Growth Analytics", description: "Visualise how your capital compounds over time with detailed reporting.", imageSrc: "http://img.b2bpic.net/free-photo/businessman-checking-stock-market-online_53876-14787.jpg" }
|
||||
]}
|
||||
title="Smart Profit Management"
|
||||
description="Divide your wins effortlessly between your spiritual commitments, personal essentials, and long-term savings."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "basic",
|
||||
badge: "Entry",
|
||||
price: "$9/mo",
|
||||
subtitle: "For part-time traders",
|
||||
features: [
|
||||
"Profit/Loss tracking",
|
||||
"Basic budget tools",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
badge: "Pro",
|
||||
price: "$29/mo",
|
||||
subtitle: "For full-time pros",
|
||||
features: [
|
||||
"Auto-budget allocation",
|
||||
"In-depth analytics",
|
||||
"Export reports",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Choose Your Tracker Plan"
|
||||
description="Select the plan that fits your trading volume and reporting needs."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{ id: "basic", badge: "Entry", price: "$9/mo", subtitle: "For part-time traders", features: ["Profit/Loss tracking", "Basic budget tools"] },
|
||||
{ id: "pro", badge: "Pro", price: "$29/mo", subtitle: "For full-time pros", features: ["Auto-budget allocation", "In-depth analytics", "Export reports"] }
|
||||
]}
|
||||
title="Choose Your Tracker Plan"
|
||||
description="Select the plan that fits your trading volume and reporting needs."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
title: "Essential for me",
|
||||
quote: "I never knew where my profits were going until I used this.",
|
||||
name: "Sarah J.",
|
||||
role: "Forex Trader",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/successful-businessman-with-hands-head_1262-2024.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
title: "Simplified my life",
|
||||
quote: "Automating my tithe and budget has given me so much peace of mind.",
|
||||
name: "Mike R.",
|
||||
role: "Swing Trader",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-businesswoman-looking-her-cellphone-gray-background_114579-70730.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
title: "Excellent ROI",
|
||||
quote: "This tool paid for itself within the first week of using it.",
|
||||
name: "Alex K.",
|
||||
role: "Day Trader",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-office-center_1303-19601.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
title: "Highly Recommend",
|
||||
quote: "Clean, simple, and exactly what I needed to keep my discipline.",
|
||||
name: "Jenny L.",
|
||||
role: "Equity Trader",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-happy-middle-aged-business-leader_1262-4823.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
title: "Incredible clarity",
|
||||
quote: "Seeing my growth charted out keeps me motivated every day.",
|
||||
name: "Robert B.",
|
||||
role: "Crypto Trader",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-man_1098-15443.jpg",
|
||||
},
|
||||
]}
|
||||
title="Traders Love Us"
|
||||
description="Join thousands of traders who have mastered their financial habits."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "t1", title: "Essential for me", quote: "I never knew where my profits were going until I used this.", name: "Sarah J.", role: "Forex Trader", imageSrc: "http://img.b2bpic.net/free-photo/successful-businessman-with-hands-head_1262-2024.jpg" },
|
||||
{ id: "t2", title: "Simplified my life", quote: "Automating my tithe and budget has given me so much peace of mind.", name: "Mike R.", role: "Swing Trader", imageSrc: "http://img.b2bpic.net/free-photo/female-businesswoman-looking-her-cellphone-gray-background_114579-70730.jpg" },
|
||||
{ id: "t3", title: "Excellent ROI", quote: "This tool paid for itself within the first week of using it.", name: "Alex K.", role: "Day Trader", imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-office-center_1303-19601.jpg" },
|
||||
{ id: "t4", title: "Highly Recommend", quote: "Clean, simple, and exactly what I needed to keep my discipline.", name: "Jenny L.", role: "Equity Trader", imageSrc: "http://img.b2bpic.net/free-photo/closeup-happy-middle-aged-business-leader_1262-4823.jpg" },
|
||||
{ id: "t5", title: "Incredible clarity", quote: "Seeing my growth charted out keeps me motivated every day.", name: "Robert B.", role: "Crypto Trader", imageSrc: "http://img.b2bpic.net/free-photo/smiling-man_1098-15443.jpg" }
|
||||
]}
|
||||
title="Traders Love Us"
|
||||
description="Join thousands of traders who have mastered their financial habits."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Waitlist"
|
||||
title="Be The First To Know"
|
||||
description="Join our early access list for the official app release."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Waitlist"
|
||||
title="Be The First To Know"
|
||||
description="Join our early access list for the official app release."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="TradeTrack"
|
||||
copyrightText="© 2025 | TradeTrack Inc."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="TradeTrack"
|
||||
copyrightText="© 2025 | TradeTrack Inc."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user