334 lines
20 KiB
TypeScript
334 lines
20 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
|
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
|
import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
|
|
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
|
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
|
|
import { Activity, Zap, Heart, TrendingUp, Target, Users, Award, DollarSign, Rocket, MessageCircle, CheckCircle, Sparkles, Star } from 'lucide-react';
|
|
|
|
const navItems = [
|
|
{ name: "Features", id: "features" },
|
|
{ name: "How It Works", id: "about" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Contact", id: "contact" },
|
|
{ name: "Get Started", id: "https://app.fittrack.com" }
|
|
];
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="compact"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="aurora"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple brandName="FitTrack" navItems={navItems} />
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardScroll
|
|
title="Track Your Fitness Journey"
|
|
description="Log daily workouts, monitor calories burned, visualize progress with intelligent charts, and create personalized workout plans. Your comprehensive fitness companion starts here."
|
|
tag="Fitness Tracking"
|
|
tagIcon={Activity}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
imageSrc="http://img.b2bpic.net/free-photo/young-woman-exercising-outside-turning-playlist-before-jogging_329181-11118.jpg"
|
|
imageAlt="FitTrack fitness dashboard interface"
|
|
buttons={[
|
|
{ text: "Start Tracking", href: "https://app.fittrack.com" },
|
|
{ text: "Learn More", href: "features" }
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
ariaLabel="Hero section for fitness tracking platform"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardSeven
|
|
title="Powerful Fitness Features"
|
|
description="Everything you need to achieve your health goals in one intuitive platform."
|
|
tag="Core Features"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Log Daily Workouts", description: "Easily record your exercises, sets, reps, and intensity. Capture every workout moment with our streamlined logging interface.", imageSrc: "http://img.b2bpic.net/free-photo/backpacker-sitting-bed-open-his-passport_53876-16073.jpg", imageAlt: "Workout logging interface"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Track Calories Burned", description: "Monitor your daily energy expenditure with precision. Get real-time insights into calories burned across different exercise types.", imageSrc: "http://img.b2bpic.net/free-photo/data-stats-around-person-doing-physical-activity_23-2150165162.jpg", imageAlt: "Calorie tracking dashboard"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Progress Charts", description: "Visualize your fitness journey with beautiful, animated progress charts. See trends over weeks and months at a glance.", imageSrc: "http://img.b2bpic.net/free-photo/woman-eating-salad-isolated-yellow-background_1303-27059.jpg", imageAlt: "Progress visualization charts"
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "Create Workout Plans", description: "Design personalized workout routines tailored to your goals. Organize your training with smart scheduling and reminders.", imageSrc: "http://img.b2bpic.net/free-vector/gym-training-schedule-template_23-2147943081.jpg", imageAlt: "Workout plan creation"
|
|
}
|
|
]}
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Features section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
title="Why Choose FitTrack?"
|
|
description="FitTrack is built for fitness enthusiasts who want data-driven insights into their health journey. We combine powerful analytics with an intuitive user experience."
|
|
tag="About Us"
|
|
tagIcon={Heart}
|
|
tagAnimation="slide-up"
|
|
bulletPoints={[
|
|
{
|
|
title: "Comprehensive Tracking", description: "Log every detail of your workouts—from cardio sessions to strength training—with customizable tracking options.", icon: CheckCircle
|
|
},
|
|
{
|
|
title: "Intelligent Analytics", description: "Gain actionable insights from your fitness data. Understand patterns and optimize your training for better results.", icon: TrendingUp
|
|
},
|
|
{
|
|
title: "Personalized Plans", description: "Create workout programs that match your fitness level and goals. Our smart planner adapts to your progress.", icon: Target
|
|
},
|
|
{
|
|
title: "Community Support", description: "Connect with fellow fitness enthusiasts, share progress, and stay motivated together in our supportive community.", icon: Users
|
|
}
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/young-woman-white-top-standing-with-coach_1157-32126.jpg"
|
|
imageAlt="FitTrack community support"
|
|
imagePosition="right"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
mediaAnimation="opacity"
|
|
buttons={[
|
|
{ text: "Join Our Community", href: "https://app.fittrack.com" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
ariaLabel="About FitTrack section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardTen
|
|
title="Our Impact"
|
|
description="Join thousands of users transforming their fitness through FitTrack's powerful tracking and analytics."
|
|
tag="Community Stats"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
metrics={[
|
|
{
|
|
id: "1", title: "Active Users", subtitle: "Fitness enthusiasts tracking daily", category: "Community", value: "50,000+", buttons: [
|
|
{ text: "Join Now", href: "https://app.fittrack.com" }
|
|
]
|
|
},
|
|
{
|
|
id: "2", title: "Workouts Logged", subtitle: "Total exercises tracked in our platform", category: "Tracking", value: "2.5M+", buttons: [
|
|
{ text: "Start Logging", href: "https://app.fittrack.com" }
|
|
]
|
|
},
|
|
{
|
|
id: "3", title: "Calories Tracked", subtitle: "Daily energy expenditure monitored", category: "Analytics", value: "15B+", buttons: [
|
|
{ text: "Track Yours", href: "https://app.fittrack.com" }
|
|
]
|
|
},
|
|
{
|
|
id: "4", title: "Fitness Goals Met", subtitle: "Personal records achieved by users", category: "Success", value: "320K+", buttons: [
|
|
{ text: "Set Your Goal", href: "https://app.fittrack.com" }
|
|
]
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Key metrics section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardEight
|
|
title="Choose Your Plan"
|
|
description="Select the perfect plan to match your fitness goals and budget."
|
|
tag="Pricing"
|
|
tagIcon={DollarSign}
|
|
tagAnimation="slide-up"
|
|
plans={[
|
|
{
|
|
id: "starter", badge: "Popular", badgeIcon: Sparkles,
|
|
price: "Free", subtitle: "Great for getting started", buttons: [
|
|
{ text: "Get Started", href: "https://app.fittrack.com" }
|
|
],
|
|
features: [
|
|
"Unlimited workout logging", "Basic calorie tracking", "Monthly progress reports", "Mobile app access"
|
|
]
|
|
},
|
|
{
|
|
id: "pro", badge: "Best Value", badgeIcon: Star,
|
|
price: "$9.99", subtitle: "Perfect for serious fitness", buttons: [
|
|
{ text: "Upgrade to Pro", href: "https://app.fittrack.com" }
|
|
],
|
|
features: [
|
|
"Everything in Free", "Advanced analytics", "Personalized workout plans", "Community access", "Priority support"
|
|
]
|
|
},
|
|
{
|
|
id: "elite", badge: "Premium", badgeIcon: Zap,
|
|
price: "$19.99", subtitle: "For fitness champions", buttons: [
|
|
{ text: "Go Elite", href: "https://app.fittrack.com" }
|
|
],
|
|
features: [
|
|
"Everything in Pro", "AI-powered recommendations", "1-on-1 coaching sessions", "Custom meal planning", "24/7 premium support"
|
|
]
|
|
}
|
|
]}
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Pricing plans section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
title="What Our Users Say"
|
|
description="Real stories from real fitness enthusiasts who transformed their health with FitTrack."
|
|
tag="Testimonials"
|
|
tagIcon={MessageCircle}
|
|
tagAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Chen, Fitness Enthusiast", date: "Date: 15 January 2025", title: "Game-changing fitness tracking experience!", quote: "FitTrack completely transformed how I approach my fitness. The progress charts keep me motivated, and the calorie tracking is incredibly accurate. I've hit personal records I never thought possible.", tag: "Pro User", avatarSrc: "http://img.b2bpic.net/free-photo/enthusiastic-fitness-woman-shows-strong-arm-flexing-miceps-shows-muscles-gym-workout-results-healthy-body-standing-white-background_176420-47072.jpg", imageSrc: "http://img.b2bpic.net/free-photo/enthusiastic-fitness-woman-shows-strong-arm-flexing-miceps-shows-muscles-gym-workout-results-healthy-body-standing-white-background_176420-47072.jpg", imageAlt: "Sarah Chen fitness progress"
|
|
},
|
|
{
|
|
id: "2", name: "Marcus Johnson, Strength Coach", date: "Date: 12 January 2025", title: "Essential tool for my coaching", quote: "As a coach, FitTrack helps me track my clients' progress effortlessly. The detailed analytics and smart workout planning features save me hours every week. My clients love the app too!", tag: "Elite User", avatarSrc: "http://img.b2bpic.net/free-vector/sport-quote-background-grunge-style-with-inspirational-message_23-2147804856.jpg", imageSrc: "http://img.b2bpic.net/free-vector/sport-quote-background-grunge-style-with-inspirational-message_23-2147804856.jpg", imageAlt: "Marcus Johnson coaching success"
|
|
},
|
|
{
|
|
id: "3", name: "Jennifer Lee, Marathon Runner", date: "Date: 10 January 2025", title: "Perfect for endurance training", quote: "The calorie tracking and detailed workout logging have been crucial for my marathon training. I can see exactly how my training is progressing and adjust accordingly. Highly recommended!", tag: "Pro User", avatarSrc: "http://img.b2bpic.net/free-photo/funny-young-woman-laughing-multi-ethnic-group-fitness-yoga-cl_1163-4980.jpg", imageSrc: "http://img.b2bpic.net/free-photo/funny-young-woman-laughing-multi-ethnic-group-fitness-yoga-cl_1163-4980.jpg", imageAlt: "Jennifer Lee running achievement"
|
|
},
|
|
{
|
|
id: "4", name: "David Rodriguez, Beginner", date: "Date: 08 January 2025", title: "Finally, fitness tracking made simple", quote: "I was intimidated by fitness apps, but FitTrack's intuitive interface made it easy. I've been consistent for 3 months now, and the progress is motivating. This is the app that finally stuck!", tag: "Starter User", avatarSrc: "http://img.b2bpic.net/free-photo/fit-young-woman-ready-training_23-2148381972.jpg", imageSrc: "http://img.b2bpic.net/free-photo/fit-young-woman-ready-training_23-2148381972.jpg", imageAlt: "David Rodriguez fitness journey"
|
|
},
|
|
{
|
|
id: "5", name: "Emma Williams, Busy Professional", date: "Date: 05 January 2025", title: "Quick logging, powerful insights", quote: "As someone with limited time, FitTrack's quick-log feature is perfect. I can log my workouts in seconds, but the analytics are deep and meaningful. Best of both worlds!", tag: "Pro User", avatarSrc: "http://img.b2bpic.net/free-photo/emotional-mixed-race-woman-man-shout-loudly-hold-karemat-weights-have-training-with-coach-yell-from-despair-being-tired-workout-isolated-purple-wall-people-sport-lifestyle_273609-27787.jpg", imageSrc: "http://img.b2bpic.net/free-photo/emotional-mixed-race-woman-man-shout-loudly-hold-karemat-weights-have-training-with-coach-yell-from-despair-being-tired-workout-isolated-purple-wall-people-sport-lifestyle_273609-27787.jpg", imageAlt: "Emma Williams professional fitness"
|
|
},
|
|
{
|
|
id: "6", name: "Alex Thompson, Fitness Competitor", date: "Date: 02 January 2025", title: "Competitive edge through data", quote: "For competitive fitness, data is everything. FitTrack's advanced analytics and custom plans have given me the insights I need to stay ahead of my competition. Invaluable tool!", tag: "Elite User", avatarSrc: "http://img.b2bpic.net/free-psd/sport-outside-instagram-stories_23-2148608104.jpg", imageSrc: "http://img.b2bpic.net/free-psd/sport-outside-instagram-stories_23-2148608104.jpg", imageAlt: "Alex Thompson competitive success"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="User testimonials section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
sideTitle="Frequently Asked Questions"
|
|
sideDescription="Get answers to common questions about FitTrack and how it can help you achieve your fitness goals."
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How do I start tracking my workouts?", content: "Simply sign up for FitTrack, choose your fitness profile, and start logging! You can manually enter workout details or sync with wearable devices. Our quick-log feature lets you record exercises in seconds."
|
|
},
|
|
{
|
|
id: "2", title: "Is my fitness data private and secure?", content: "Absolutely. We use industry-standard encryption to protect your data. Your fitness information is never shared with third parties without your explicit consent. We're SOC 2 Type II compliant."
|
|
},
|
|
{
|
|
id: "3", title: "Can I sync FitTrack with other fitness apps?", content: "Yes! FitTrack integrates with popular fitness devices and apps including Apple Health, Fitbit, Strava, and Google Fit. Simply connect your account in settings."
|
|
},
|
|
{
|
|
id: "4", title: "What's the difference between plans?", content: "Our Free plan includes basic tracking. Pro adds advanced analytics, personalized plans, and community access. Elite includes AI recommendations, coaching sessions, and meal planning."
|
|
},
|
|
{
|
|
id: "5", title: "How accurate is the calorie tracking?", content: "Our calorie estimates use advanced algorithms based on exercise type, intensity, duration, and your personal metrics. For maximum accuracy, we recommend using with compatible fitness trackers."
|
|
},
|
|
{
|
|
id: "6", title: "Is there a mobile app?", content: "Yes! FitTrack is available on iOS and Android. Download the app to track on the go, get real-time notifications, and access all features offline."
|
|
}
|
|
]}
|
|
textPosition="left"
|
|
useInvertedBackground={false}
|
|
faqsAnimation="slide-up"
|
|
showCard={true}
|
|
animationType="smooth"
|
|
ariaLabel="FAQ section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Ready to Start?"
|
|
tagIcon={Rocket}
|
|
tagAnimation="slide-up"
|
|
title="Begin Your Fitness Transformation Today"
|
|
description="Join thousands of users who are already tracking their progress, achieving their goals, and transforming their lives with FitTrack. Sign up now and get started for free!"
|
|
background={{ variant: "rotated-rays-animated" }}
|
|
useInvertedBackground={false}
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Start Free"
|
|
termsText="We respect your privacy. Unsubscribe anytime from our emails."
|
|
ariaLabel="Contact and signup section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Product", items: [
|
|
{ label: "Features", href: "#features" },
|
|
{ label: "Pricing", href: "#pricing" },
|
|
{ label: "Apps", href: "#" },
|
|
{ label: "Security", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Blog", href: "#" },
|
|
{ label: "Careers", href: "#" },
|
|
{ label: "Contact", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{ label: "Help Center", href: "#" },
|
|
{ label: "Status", href: "#" },
|
|
{ label: "Documentation", href: "#" },
|
|
{ label: "API Docs", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Cookie Policy", href: "#" },
|
|
{ label: "Accessibility", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
bottomLeftText="© 2025 FitTrack. All rights reserved."
|
|
bottomRightText="Made with passion for fitness"
|
|
ariaLabel="Site footer"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|