196 lines
12 KiB
TypeScript
196 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import Link from 'next/link';
|
|
import { TrendingUp, Sparkles, Zap, Users, BarChart3, Shield, Clock, ExternalLink } from 'lucide-react';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="mediumSmall"
|
|
sizing="mediumLarge"
|
|
background="aurora"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="bold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="My Trade"
|
|
navItems={[
|
|
{ name: "Home", id: "/" },
|
|
{ name: "About", id: "/about" },
|
|
{ name: "Pricing", id: "/pricing" },
|
|
{ name: "Contact", id: "/contact" }
|
|
]}
|
|
button={{
|
|
text: "Start Trading", href: "/pricing"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboard
|
|
title="Master Your Crypto Trading with Real-Time Stats"
|
|
description="Track, analyze, and optimize your cryptocurrency trading performance with advanced analytics, real-time market data, and actionable insights. Make informed decisions with My Trade's comprehensive trading statistics platform."
|
|
background={{ variant: "sparkles-gradient" }}
|
|
tag="Advanced Trading Platform"
|
|
tagIcon={TrendingUp}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Start Free Trial", href: "/pricing" },
|
|
{ text: "Watch Demo", href: "#features" }
|
|
]}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/a-modern-cryptocurrency-trading-dashboar-1773136513834-a197d971.png"
|
|
imageAlt="My Trade cryptocurrency trading dashboard interface"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
tag="About My Trade"
|
|
tagIcon={Sparkles}
|
|
title="Empower Your Trading Decisions with Data-Driven Insights and Professional-Grade Analytics"
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Explore Platform", href: "/pricing" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardThree
|
|
title="Powerful Trading Features"
|
|
description="Discover comprehensive tools designed to elevate your cryptocurrency trading performance and maximize your potential returns"
|
|
tag="Core Features"
|
|
tagIcon={Zap}
|
|
buttons={[
|
|
{ text: "Explore All Features", href: "/features" }
|
|
]}
|
|
features={[
|
|
{
|
|
id: "01", title: "Real-Time Market Analytics", description: "Track live price movements, volume trends, and market sentiment across major cryptocurrencies with instant notifications.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/a-detailed-trading-analytics-screen-show-1773136515159-009a965c.png?_wi=1", imageAlt: "A detailed trading analytics screen showing advanced statistical analysis tools for cryptocurrency t"
|
|
},
|
|
{
|
|
id: "02", title: "Advanced Trading Tools", description: "Access technical analysis indicators, charting tools, and pattern recognition to identify profitable trading opportunities.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/an-illustration-showing-automated-tradin-1773136514689-e0a28c43.png", imageAlt: "An illustration showing automated trading and algorithmic features. Depicts trading robots, automate"
|
|
},
|
|
{
|
|
id: "03", title: "Portfolio Performance Tracking", description: "Monitor your trading performance with detailed metrics, win rates, profit/loss analysis, and historical performance data.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/an-infographic-showing-cryptocurrency-tr-1773136514314-5cdc9261.png?_wi=1", imageAlt: "An infographic showing cryptocurrency trading metrics and growth statistics. Displays trading volume"
|
|
},
|
|
{
|
|
id: "04", title: "Enterprise Security", description: "Bank-level security with encrypted connections, two-factor authentication, and compliance with international regulations.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/a-professional-illustration-representing-1773136513219-e3772a1d.png?_wi=1", imageAlt: "A professional illustration representing cryptocurrency security and protection. Features include lo"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
gridVariant="two-columns-alternating-heights"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
title="My Trade by the Numbers"
|
|
description="Join thousands of traders using our platform to maximize returns"
|
|
tag="Growth Metrics"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "50,000", title: "Active Traders", description: "Professional traders worldwide using My Trade daily", icon: Users
|
|
},
|
|
{
|
|
id: "2", value: "2,500,000,000", title: "Volume Tracked", description: "Total trading volume monitored on our platform", icon: BarChart3
|
|
},
|
|
{
|
|
id: "3", value: "99.9", title: "Uptime Guarantee", description: "Enterprise-grade infrastructure reliability", icon: Shield
|
|
},
|
|
{
|
|
id: "4", value: "24", title: "Market Coverage", description: "Real-time monitoring across all major exchanges", icon: Clock
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
title="Trusted by Professional Traders"
|
|
description="See what successful traders say about My Trade"
|
|
tag="Testimonials"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Johnson", role: "Day Trader", company: "Independent Trader", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/professional-headshot-portrait-of-a-succ-1773136514328-34a1bb04.png?_wi=1", imageAlt: "Professional headshot portrait of a successful cryptocurrency trader, wearing business casual attire"
|
|
},
|
|
{
|
|
id: "2", name: "Michael Chen", role: "Portfolio Manager", company: "Crypto Hedge Fund", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/professional-headshot-portrait-of-a-fema-1773136513236-b6d693c1.png?_wi=1", imageAlt: "Professional headshot portrait of a female cryptocurrency analyst, wearing professional attire, welc"
|
|
},
|
|
{
|
|
id: "3", name: "Emma Rodriguez", role: "Trading Analyst", company: "Financial Advisory", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/professional-headshot-portrait-of-a-cryp-1773136513284-36dd154c.png?_wi=1", imageAlt: "Professional headshot portrait of a crypto portfolio manager, wearing business attire, neutral backg"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials-featured" data-section="testimonials-featured">
|
|
<TestimonialCardFive
|
|
testimonial="This product has completely transformed how we approach cryptocurrency trading. The real-time analytics and risk management tools have helped us optimize our strategies and significantly improve our returns. My Trade is truly the gold standard for professional traders."
|
|
rating={5}
|
|
author="James Carter, Senior Investment Officer"
|
|
avatars={[
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/professional-headshot-portrait-of-a-succ-1773136514328-34a1bb04.png", alt: "Avatar 1" },
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/professional-headshot-portrait-of-a-fema-1773136513236-b6d693c1.png", alt: "Avatar 2" },
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/professional-headshot-portrait-of-a-cryp-1773136513284-36dd154c.png", alt: "Avatar 3" },
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/professional-headshot-portrait-of-a-succ-1773136514328-34a1bb04.png", alt: "Avatar 4" },
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/professional-headshot-portrait-of-a-fema-1773136513236-b6d693c1.png", alt: "Avatar 5" },
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/professional-headshot-portrait-of-a-cryp-1773136513284-36dd154c.png", alt: "Avatar 6" }
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Newsletter"
|
|
title="Stay Updated with Trading Insights"
|
|
description="Subscribe to our weekly newsletter for market analysis, trading tips, and platform updates delivered directly to your inbox."
|
|
background={{ variant: "rotated-rays-animated-grid" }}
|
|
useInvertedBackground={false}
|
|
inputPlaceholder="Enter your email address"
|
|
buttonText="Subscribe Now"
|
|
termsText="We respect your privacy. You can unsubscribe anytime. See our Privacy Policy for details."
|
|
/>
|
|
</div>
|
|
|
|
<FooterLogoReveal
|
|
logoText="My Trade"
|
|
leftLink={{ text: "Privacy Policy", href: "#" }}
|
|
rightLink={{ text: "Terms of Service", href: "#" }}
|
|
/>
|
|
</ThemeProvider>
|
|
);
|
|
} |