228 lines
12 KiB
TypeScript
228 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
|
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
|
|
import TextAbout from "@/components/sections/about/TextAbout";
|
|
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
|
|
import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
|
|
import FeatureBento from "@/components/sections/feature/FeatureBento";
|
|
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
|
|
import ContactSplit from "@/components/sections/contact/ContactSplit";
|
|
import FooterCard from "@/components/sections/footer/FooterCard";
|
|
import { Award, BarChart2, Bell, Calendar, Clock, Dumbbell, Heart, HelpCircle, MessageSquare, Rocket, Settings, Share2, Signal, Target, TrendingUp, Users, Zap, Instagram, Facebook, Linkedin, Twitter } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="medium"
|
|
sizing="mediumLarge"
|
|
background="aurora"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{ name: "Home", id: "home" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Success Stories", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
brandName="FitCoach"
|
|
bottomLeftText="Transform Your Body"
|
|
bottomRightText="hello@fitcoach.com"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitKpi
|
|
title="Transform Your Body, Transform Your Life"
|
|
description="Personalized fitness coaching designed to help you achieve your goals. Expert guidance, proven strategies, and unwavering support every step of the way."
|
|
tag="Elite Coaching"
|
|
tagIcon={Zap}
|
|
background={{ variant: "aurora" }}
|
|
kpis={[
|
|
{ value: "500+", label: "Successful Transformations" },
|
|
{ value: "95%", label: "Client Satisfaction Rate" },
|
|
{ value: "10+", label: "Years of Experience" }
|
|
]}
|
|
enableKpiAnimation={true}
|
|
buttons={[
|
|
{ text: "Start Your Journey", href: "#contact" },
|
|
{ text: "Learn More", href: "#about" }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/two-internationals-friends-is-engaged-gym_1157-32114.jpg"
|
|
imageAlt="fitness trainer personal coaching gym motivation athletic inspiration"
|
|
mediaAnimation="slide-up"
|
|
imagePosition="right"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
tag="Our Mission"
|
|
tagIcon={Heart}
|
|
title="Empowering fitness enthusiasts through science-backed coaching and personalized strategies that deliver real, measurable results"
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Meet Our Team", href: "#testimonials" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
title="Why Choose FitCoach"
|
|
description="Proven results backed by real client success and industry-leading expertise"
|
|
tag="Our Impact"
|
|
tagIcon={TrendingUp}
|
|
metrics={[
|
|
{ id: "1", value: "8", title: "weeks", description: "Average time to see visible results", icon: Rocket },
|
|
{ id: "2", value: "24", title: "/7", description: "Personal support and accountability", icon: Clock },
|
|
{ id: "3", value: "100", title: "%personalized", description: "Every program tailored to your needs", icon: Target },
|
|
{ id: "4", value: "3000", title: "+hours", description: "Combined coaching experience", icon: Award }
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
gridVariant="bento-grid"
|
|
buttons={[
|
|
{ text: "See Success Stories", href: "#testimonials" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardSeven
|
|
title="Our Coaching Services"
|
|
description="Comprehensive fitness solutions tailored to your unique goals and lifestyle"
|
|
tag="What We Offer"
|
|
tagIcon={Dumbbell}
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Strength Training Programs", description: "Build muscle, increase power, and develop functional strength with science-backed resistance training customized for your experience level.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-bald-athletic-man-with-tattoo-his-hand-is-preparing-exercises-with-barbell_613910-21481.jpg", imageAlt: "strength training weightlifting gym workout fitness program"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Nutrition Coaching", description: "Receive personalized meal plans and dietary guidance that fuel your fitness goals without restrictive dieting or complicated meal prep.", imageSrc: "http://img.b2bpic.net/free-photo/healthy-menu-recipe-food-diet_53876-122837.jpg", imageAlt: "nutrition plan healthy eating meal prep diet coaching"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Body Transformation", description: "Experience sustainable body composition changes through integrated training, nutrition, and lifestyle modifications backed by proven methods.", imageSrc: "http://img.b2bpic.net/free-photo/slim-sexy-blonde-young-sportswoman-with-athletic-body-pumped-press-poses-gym-looking-camera-black-sportswear-full-length-portrait_7502-8729.jpg", imageAlt: "body transformation fitness results before after weight loss"
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "Community Support", description: "Join a supportive community of like-minded fitness enthusiasts sharing progress, celebrating wins, and motivating each other daily.", imageSrc: "http://img.b2bpic.net/free-photo/young-sports-people-training-morning-gym_1157-32104.jpg", imageAlt: "fitness community group training team motivation gym group"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="blur-reveal"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features-interactive" data-section="features-interactive">
|
|
<FeatureBento
|
|
title="Advanced Coaching Tools"
|
|
description="Cutting-edge technology integrated into your fitness coaching experience"
|
|
tag="Innovation"
|
|
tagIcon={Zap}
|
|
features={[
|
|
{
|
|
title: "Progress Tracking", description: "Real-time monitoring of your fitness metrics and achievements", bentoComponent: "line-chart"
|
|
},
|
|
{
|
|
title: "AI Workout Generator", description: "Smart algorithms create personalized workouts based on your goals", bentoComponent: "globe"
|
|
},
|
|
{
|
|
title: "Nutrition Database", description: "Track macros with our extensive food and meal database", bentoComponent: "animated-bar-chart"
|
|
},
|
|
{
|
|
title: "Community Hub", description: "Connect with thousands of fitness enthusiasts and coaches", bentoComponent: "orbiting-icons", centerIcon: Users,
|
|
items: [
|
|
{ icon: Heart, ring: 1 },
|
|
{ icon: MessageSquare, ring: 2 },
|
|
{ icon: Share2, ring: 3 }
|
|
]
|
|
},
|
|
{
|
|
title: "Mobile App", description: "Full access to your coaching on the go", bentoComponent: "phone", statusIcon: Signal,
|
|
alertIcon: Bell,
|
|
alertTitle: "Workout Ready", alertMessage: "Your session is ready to go", apps: [
|
|
{ name: "Workouts", icon: Dumbbell },
|
|
{ name: "Meals", icon: Heart },
|
|
{ name: "Progress", icon: TrendingUp },
|
|
{ name: "Messages", icon: MessageSquare },
|
|
{ name: "Settings", icon: Settings },
|
|
{ name: "Calendar", icon: Calendar },
|
|
{ name: "Analytics", icon: BarChart2 },
|
|
{ name: "Support", icon: HelpCircle }
|
|
]
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
testimonial="Working with FitCoach completely transformed how I approach fitness. Not only did I lose 30 pounds, but I gained confidence and a sustainable lifestyle I can maintain forever."
|
|
rating={5}
|
|
author="Sarah Johnson, Marketing Executive"
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/front-view-fit-man-gym_23-2149517268.jpg", alt: "fit man portrait athletic male gym professional trainer headshot" },
|
|
{ src: "http://img.b2bpic.net/free-photo/beautiful-sportive-girl-posing-with-crossed-arms-dark-wall_176420-620.jpg", alt: "fit woman portrait athletic female fitness professional female trainer" },
|
|
{ src: "http://img.b2bpic.net/free-photo/smiling-sporty-black-man-standing-with-his-arms-crossed_1262-16419.jpg", alt: "diverse portrait confident athlete fit person gym enthusiast" },
|
|
{ src: "http://img.b2bpic.net/free-photo/smiling-athletic-man-black-background_613910-9870.jpg", alt: "professional headshot fitness expert confident person athletic portrait" }
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
tag="Get Started"
|
|
tagIcon={Zap}
|
|
title="Begin Your Transformation Today"
|
|
description="Join hundreds of satisfied clients who have achieved their fitness goals. Sign up for our newsletter and get exclusive coaching tips delivered to your inbox."
|
|
background={{ variant: "aurora" }}
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/blurred-cardio-machines_1203-98.jpg"
|
|
imageAlt="fitness background gym interior healthy lifestyle workout space"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Get Coaching Tips"
|
|
termsText="We respect your privacy. Unsubscribe anytime. No spam, just pure coaching insights."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="FitCoach"
|
|
copyrightText="© 2025 FitCoach | Transforming Lives Through Fitness"
|
|
socialLinks={[
|
|
{ icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" },
|
|
{ icon: Facebook, href: "https://facebook.com", ariaLabel: "Facebook" },
|
|
{ icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
|
|
{ icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" }
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|