228 lines
12 KiB
TypeScript
228 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
|
|
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
|
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import { Zap, Flame, Award, Star, Download, Heart, Target, Shield, TrendingUp, Wind, Circle, Sparkles, Dumbbell } from "lucide-react";
|
|
|
|
export default function FitnessLandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="small"
|
|
sizing="largeSmallSizeLargeTitles"
|
|
background="circleGradient"
|
|
cardStyle="subtle-shadow"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="FitFlow"
|
|
navItems={[
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Workouts", id: "workouts" },
|
|
{ name: "Reviews", id: "testimonials" },
|
|
{ name: "Download", id: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboard
|
|
title="Transform Your Body, Transform Your Life"
|
|
description="Join thousands of users achieving their fitness goals with FitFlow. Personalized workout plans, expert guidance, and a supportive community—all in your pocket."
|
|
background={{ variant: "sparkles-gradient" }}
|
|
tag="Fitness Revolution"
|
|
tagIcon={Zap}
|
|
imageSrc="https://img.b2bpic.net/free-photo/closeup-female-athlete-using-mobile-phone-while-checking-heart-rate-wristwatch_637285-3472.jpg"
|
|
imageAlt="FitFlow Fitness App Interface"
|
|
buttons={[
|
|
{ text: "Download Now", href: "contact" },
|
|
{ text: "Learn More", href: "features" }
|
|
]}
|
|
avatars={[
|
|
{ src: "https://img.b2bpic.net/free-photo/beautiful-sportive-girl-posing-with-crossed-arms-dark-wall_176420-622.jpg", alt: "User 1" },
|
|
{ src: "https://img.b2bpic.net/free-photo/beautiful-sportive-girl-posing-with-crossed-arms-dark-wall_176420-625.jpg", alt: "User 2" },
|
|
{ src: "https://img.b2bpic.net/free-photo/beautiful-sportive-girl-posing-with-crossed-arms-dark-wall_176420-620.jpg", alt: "User 3" }
|
|
]}
|
|
avatarText="Trusted by 50,000+ fitness enthusiasts"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<InlineImageSplitTextAbout
|
|
heading={[
|
|
{ type: "text", content: "Everything You Need to" },
|
|
{ type: "text", content: "Achieve Your Fitness Goals" }
|
|
]}
|
|
buttons={[
|
|
{ text: "Start Your Journey", href: "contact" }
|
|
]}
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="workouts" data-section="workouts">
|
|
<FeatureCardTen
|
|
title="Workout Plans Built For You"
|
|
description="Choose from expertly designed workout programs tailored to your fitness level, goals, and available time. From beginner-friendly routines to advanced training protocols."
|
|
tag="Personalized Training"
|
|
tagIcon={Flame}
|
|
features={[
|
|
{
|
|
id: "1", title: "Cardio Blast", description: "High-intensity interval training designed to maximize calorie burn and improve cardiovascular endurance. Perfect for building stamina and achieving rapid results.", media: {
|
|
imageSrc: "https://img.b2bpic.net/free-photo/woman-gym-with-smartphone-template_23-2148111618.jpg", imageAlt: "Cardio Workout Training"
|
|
},
|
|
items: [
|
|
{ icon: Zap, text: "30-45 minute sessions" },
|
|
{ icon: Heart, text: "Boost metabolism" },
|
|
{ icon: Target, text: "Track progress" }
|
|
],
|
|
reverse: false
|
|
},
|
|
{
|
|
id: "2", title: "Strength Builder", description: "Progressive resistance training to build lean muscle and increase overall strength. Each workout focuses on compound movements with proper form guidance.", media: {
|
|
imageSrc: "https://img.b2bpic.net/free-photo/closeup-female-athlete-text-messaging-mobile-phone_637285-6214.jpg", imageAlt: "Strength Training Workout"
|
|
},
|
|
items: [
|
|
{ icon: Dumbbell, text: "Muscle growth focus" },
|
|
{ icon: Shield, text: "Injury prevention tips" },
|
|
{ icon: TrendingUp, text: "Progressive overload" }
|
|
],
|
|
reverse: true
|
|
},
|
|
{
|
|
id: "3", title: "Flexibility & Balance", description: "Improve mobility, reduce tension, and enhance overall wellness with yoga and flexibility routines. Essential for recovery and preventing injuries.", media: {
|
|
imageSrc: "https://img.b2bpic.net/free-photo/view-athlete-using-cell-phone-health-club_637285-8290.jpg", imageAlt: "Yoga Flexibility Training"
|
|
},
|
|
items: [
|
|
{ icon: Wind, text: "Stress relief" },
|
|
{ icon: Circle, text: "Mind-body connection" },
|
|
{ icon: Sparkles, text: "Recovery focused" }
|
|
],
|
|
reverse: false
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardSeven
|
|
title="The Results Speak For Themselves"
|
|
description="Join our community of fitness enthusiasts who have transformed their lives with FitFlow."
|
|
tag="Community Impact"
|
|
tagIcon={Award}
|
|
metrics={[
|
|
{
|
|
id: "1", value: "50K+", title: "Active Users Worldwide", items: ["Growing daily community", "24/7 support network", "Global challenges"]
|
|
},
|
|
{
|
|
id: "2", value: "500+", title: "Expert-Designed Workouts", items: ["Updated regularly", "All fitness levels", "Multiple specialties"]
|
|
},
|
|
{
|
|
id: "3", value: "95%", title: "User Satisfaction Rate", items: ["Highly rated app", "Positive reviews", "Trusted by millions"]
|
|
},
|
|
{
|
|
id: "4", value: "3.2M", title: "Total Workouts Completed", items: ["Real user success", "Proven results", "Transformations daily"]
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
title="What Our Users Say"
|
|
description="Real stories from people who've transformed their fitness journey with FitFlow."
|
|
tag="User Reviews"
|
|
tagIcon={Star}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Johnson", handle: "@sarah.fit", testimonial: "FitFlow completely changed my fitness routine. The personalized workouts kept me motivated, and I've never felt stronger!", imageSrc: "https://img.b2bpic.net/free-photo/beautiful-sportive-girl-posing-with-crossed-arms-dark-wall_176420-622.jpg", imageAlt: "Sarah Johnson"
|
|
},
|
|
{
|
|
id: "2", name: "Marcus Chen", handle: "@fit.marcus", testimonial: "As a busy professional, FitFlow fits perfectly into my schedule. Amazing app with incredible results in just 8 weeks.", imageSrc: "https://img.b2bpic.net/free-photo/beautiful-sportive-girl-posing-with-crossed-arms-dark-wall_176420-625.jpg", imageAlt: "Marcus Chen"
|
|
},
|
|
{
|
|
id: "3", name: "Emma Rodriguez", handle: "@emma.transforms", testimonial: "The community support is incredible. Knowing I'm working out alongside thousands of others keeps me accountable and motivated daily.", imageSrc: "https://img.b2bpic.net/free-photo/beautiful-sportive-girl-posing-with-crossed-arms-dark-wall_176420-620.jpg", imageAlt: "Emma Rodriguez"
|
|
},
|
|
{
|
|
id: "4", name: "David Kim", handle: "@kim.strength", testimonial: "Best fitness investment I've made. The form guides and progress tracking features are next level. Highly recommend FitFlow to anyone serious about fitness.", imageSrc: "https://img.b2bpic.net/free-photo/adorable-lovely-smiling-girl-with-long-wavy-hairstyle-black-sport-top-is-holding-arms-chest-looking-window-isolated-background_291650-2273.jpg", imageAlt: "David Kim"
|
|
},
|
|
{
|
|
id: "5", name: "Lisa Thompson", handle: "@lisa.wellness", testimonial: "I've tried many fitness apps, but FitFlow stands out. The variety of workouts keeps things fresh, and the results speak for themselves.", imageSrc: "https://img.b2bpic.net/free-photo/physically-fit-woman-with-long-hair-is-standing-crossed-her-hands-dark-background_613910-13266.jpg", imageAlt: "Lisa Thompson"
|
|
},
|
|
{
|
|
id: "6", name: "James Wilson", handle: "@james.gains", testimonial: "From zero fitness to running marathons. FitFlow's progressive training approach made it all possible. This app saved my life.", imageSrc: "https://img.b2bpic.net/free-photo/brunette-woman-wearing-sport-clothes_329181-13199.jpg", imageAlt: "James Wilson"
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Ready to Start?"
|
|
tagIcon={Download}
|
|
title="Download FitFlow Today"
|
|
description="Get access to unlimited workouts, personalized plans, and join a community of 50,000+ fitness enthusiasts. Start your transformation now—completely free to download."
|
|
buttons={[
|
|
{ text: "Download on App Store", href: "https://www.apple.com/app-store/" },
|
|
{ text: "Get it on Google Play", href: "https://play.google.com/store" }
|
|
]}
|
|
background={{ variant: "radial-gradient" }}
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="https://img.b2bpic.net/free-photo/closeup-female-athlete-using-mobile-phone-while-checking-heart-rate-wristwatch_637285-3472.jpg"
|
|
imageAlt="FitFlow Community"
|
|
columns={[
|
|
{
|
|
title: "Product", items: [
|
|
{ label: "Workout Plans", href: "workouts" },
|
|
{ label: "Features", href: "features" },
|
|
{ label: "Pricing", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Community", items: [
|
|
{ label: "Reviews", href: "testimonials" },
|
|
{ label: "Success Stories", href: "#" },
|
|
{ label: "Blog", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{ label: "Contact Us", href: "contact" },
|
|
{ label: "FAQ", href: "#" },
|
|
{ label: "Help Center", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
logoText="FitFlow"
|
|
copyrightText="© 2025 FitFlow. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |