Merge version_2 into main #4

Merged
bender merged 1 commits from version_2 into main 2026-06-03 14:17:50 +00:00

View File

@@ -2,16 +2,24 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import dynamic from 'next/dynamic';
import { Suspense } from 'react';
// Dynamically imported sections for code splitting and lazy loading
const DynamicContactCTA = dynamic(() => import('@/components/sections/contact/ContactCTA'));
const DynamicFeatureBento = dynamic(() => import('@/components/sections/feature/FeatureBento'));
const DynamicFooterBaseCard = dynamic(() => import('@/components/sections/footer/FooterBaseCard'));
const DynamicHeroSplitKpi = dynamic(() => import('@/components/sections/hero/HeroSplitKpi'));
const DynamicMetricCardThree = dynamic(() => import('@/components/sections/metrics/MetricCardThree'));
const DynamicPricingCardThree = dynamic(() => import('@/components/sections/pricing/PricingCardThree'));
const DynamicSocialProofOne = dynamic(() => import('@/components/sections/socialProof/SocialProofOne'));
const DynamicTestimonialAboutCard = dynamic(() => import('@/components/sections/about/TestimonialAboutCard'));
const DynamicTestimonialCardOne = dynamic(() => import('@/components/sections/testimonial/TestimonialCardOne'));
// Keep static import for Navbar as it's critical for immediate interaction
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
// Lucide icons, these are small and used in multiple sections, keeping them static for now
import { Activity, Apple, Award, Bell, Calendar, Crown, Flame, Heart, Settings, ShoppingBag, Signal, Sparkles, Star, Trophy, User, Users, Weight } from "lucide-react";
export default function LandingPage() {
@@ -56,296 +64,314 @@ export default function LandingPage() {
</div>
<div id="home" data-section="home">
<HeroSplitKpi
background={{
variant: "radial-gradient"}}
imagePosition="right"
title="Elevate Your Fitness Journey with Sleek Fitness"
description="Achieve your health and wellness goals with our expert trainers, state-of-the-art facilities, and personalized programs. Start your transformation today."
kpis={[
{
value: "100+", label: "Classes Daily"},
{
value: "20+", label: "Expert Trainers"},
{
value: "500+", label: "Happy Members"},
]}
enableKpiAnimation={true}
buttons={[
{
text: "Join Now", href: "#contact"},
{
text: "Learn More", href: "#about"},
]}
avatars={[
{
src: "http://img.b2bpic.net/free-photo/smiley-people-having-fun-zumba-class_23-2149074892.jpg", alt: "Fitness instructor"},
{
src: "http://img.b2bpic.net/free-photo/portrait-young-female-basketball-player_23-2151098110.jpg", alt: "Gym member"},
{
src: "http://img.b2bpic.net/free-photo/fitness-woman-doing-yoga-yoga-mat-home_23-2148952532.jpg", alt: "Yoga practitioner"},
{
src: "http://img.b2bpic.net/free-photo/young-fitness-girl-wearing-headband-holding-smartphone-looking-it-with-smile-happy-face-standing-white-background_141793-130222.jpg", alt: "Runner"},
{
src: "http://img.b2bpic.net/free-photo/close-up-people-high-five-gym_23-2149049819.jpg", alt: "Athlete"},
]}
avatarText="Join our thriving community of fitness enthusiasts!"
imageSrc="http://img.b2bpic.net/free-photo/people-exercising-gym_52683-111024.jpg"
imageAlt="Dynamic fitness training session"
mediaAnimation="slide-up"
marqueeItems={[
{
type: "text-icon", text: "Cardio Excellence", icon: Heart,
},
{
type: "text-icon", text: "Strength Training", icon: Activity,
},
{
type: "text-icon", text: "Yoga & Mindfulness", icon: Heart,
},
{
type: "text-icon", text: "Personal Coaching", icon: User,
},
{
type: "text-icon", text: "Nutritional Guidance", icon: Apple,
},
]}
marqueeSpeed={40}
showMarqueeCard={true}
/>
<Suspense fallback={null}>
<DynamicHeroSplitKpi
background={{
variant: "radial-gradient"}}
imagePosition="right"
title="Elevate Your Fitness Journey with Sleek Fitness"
description="Achieve your health and wellness goals with our expert trainers, state-of-the-art facilities, and personalized programs. Start your transformation today."
kpis={[
{
value: "100+", label: "Classes Daily"},
{
value: "20+", label: "Expert Trainers"},
{
value: "500+", label: "Happy Members"},
]}
enableKpiAnimation={true}
buttons={[
{
text: "Join Now", href: "#contact"},
{
text: "Learn More", href: "#about"},
]}
avatars={[
{
src: "http://img.b2bpic.net/free-photo/smiley-people-having-fun-zumba-class_23-2149074892.jpg", alt: "Fitness instructor"},
{
src: "http://img.b2bpic.net/free-photo/portrait-young-female-basketball-player_23-2151098110.jpg", alt: "Gym member"},
{
src: "http://img.b2bpic.net/free-photo/fitness-woman-doing-yoga-yoga-mat-home_23-2148952532.jpg", alt: "Yoga practitioner"},
{
src: "http://img.b2bpic.net/free-photo/young-fitness-girl-wearing-headband-holding-smartphone-looking-it-with-smile-happy-face-standing-white-background_141793-130222.jpg", alt: "Runner"},
{
src: "http://img.b2bpic.net/free-photo/close-up-people-high-five-gym_23-2149049819.jpg", alt: "Athlete"},
]}
avatarText="Join our thriving community of fitness enthusiasts!"
imageSrc="http://img.b2bpic.net/free-photo/people-exercising-gym_52683-111024.jpg"
imageAlt="Dynamic fitness training session"
mediaAnimation="slide-up"
marqueeItems={[
{
type: "text-icon", text: "Cardio Excellence", icon: Heart,
},
{
type: "text-icon", text: "Strength Training", icon: Activity,
},
{
type: "text-icon", text: "Yoga & Mindfulness", icon: Heart,
},
{
type: "text-icon", text: "Personal Coaching", icon: User,
},
{
type: "text-icon", text: "Nutritional Guidance", icon: Apple,
},
]}
marqueeSpeed={40}
showMarqueeCard={true}
/>
</Suspense>
</div>
<div id="about" data-section="about">
<TestimonialAboutCard
useInvertedBackground={true}
tag="About Us"
title="Your Path to a Healthier Lifestyle"
description="At Sleek Fitness, we believe in a holistic approach to wellness. Our mission is to empower individuals to achieve their fitness aspirations through dedicated support and innovative training."
subdescription="Experience a welcoming community, diverse classes, and cutting-edge equipment designed to cater to all fitness levels, helping you reach your peak performance."
icon={Activity}
imageSrc="http://img.b2bpic.net/free-photo/people-training-together-with-weight-lifting_23-2149307948.jpg"
imageAlt="Modern gym with diverse equipment and members training"
mediaAnimation="opacity"
/>
<Suspense fallback={null}>
<DynamicTestimonialAboutCard
useInvertedBackground={true}
tag="About Us"
title="Your Path to a Healthier Lifestyle"
description="At Sleek Fitness, we believe in a holistic approach to wellness. Our mission is to empower individuals to achieve their fitness aspirations through dedicated support and innovative training."
subdescription="Experience a welcoming community, diverse classes, and cutting-edge equipment designed to cater to all fitness levels, helping you reach your peak performance."
icon={Activity}
imageSrc="http://img.b2bpic.net/free-photo/people-training-together-with-weight-lifting_23-2149307948.jpg"
imageAlt="Modern gym with diverse equipment and members training"
mediaAnimation="opacity"
/>
</Suspense>
</div>
<div id="features" data-section="features">
<FeatureBento
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
title: "Personalized Coaching", description: "Receive one-on-one guidance from certified trainers tailored to your specific fitness level and objectives.", bentoComponent: "globe", button: {
text: "Learn More", href: "#"}
},
{
title: "Advanced Analytics", description: "Track your progress with detailed performance metrics and data-driven insights to optimize your training.", bentoComponent: "animated-bar-chart", button: {
text: "View Dashboard", href: "#"}
},
{
title: "Flexible Class Schedules", description: "Access a wide variety of group classes, from HIIT to Yoga, with convenient timings to fit your busy lifestyle.", bentoComponent: "phone", statusIcon: Signal,
alertIcon: Bell,
alertTitle: "New Class Alert!", alertMessage: "HIIT Blast starting in 15 mins. Join now!", apps: [
<Suspense fallback={null}>
<DynamicFeatureBento
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
name: "Workouts", icon: Weight,
title: "Personalized Coaching", description: "Receive one-on-one guidance from certified trainers tailored to your specific fitness level and objectives.", bentoComponent: "globe", button: {
text: "Learn More", href: "#"}
},
{
name: "Schedule", icon: Calendar,
title: "Advanced Analytics", description: "Track your progress with detailed performance metrics and data-driven insights to optimize your training.", bentoComponent: "animated-bar-chart", button: {
text: "View Dashboard", href: "#"}
},
{
name: "Nutrition", icon: Apple,
title: "Flexible Class Schedules", description: "Access a wide variety of group classes, from HIIT to Yoga, with convenient timings to fit your busy lifestyle.", bentoComponent: "phone", statusIcon: Signal,
alertIcon: Bell,
alertTitle: "New Class Alert!", alertMessage: "HIIT Blast starting in 15 mins. Join now!", apps: [
{
name: "Workouts", icon: Weight,
},
{
name: "Schedule", icon: Calendar,
},
{
name: "Nutrition", icon: Apple,
},
{
name: "Coaches", icon: Users,
},
{
name: "Progress", icon: Activity,
},
{
name: "Challenges", icon: Trophy,
},
{
name: "Store", icon: ShoppingBag,
},
{
name: "Settings", icon: Settings,
},
],
button: {
text: "Explore Classes", href: "#"}
},
{
name: "Coaches", icon: Users,
},
{
name: "Progress", icon: Activity,
},
{
name: "Challenges", icon: Trophy,
},
{
name: "Store", icon: ShoppingBag,
},
{
name: "Settings", icon: Settings,
},
],
button: {
text: "Explore Classes", href: "#"}
},
]}
title="Tailored Programs for Every Goal"
description="Explore our diverse range of fitness programs, from high-intensity training to mindful yoga, designed to fit your unique needs and help you achieve optimal results."
tag="Our Services"
/>
]}
title="Tailored Programs for Every Goal"
description="Explore our diverse range of fitness programs, from high-intensity training to mindful yoga, designed to fit your unique needs and help you achieve optimal results."
tag="Our Services"
/>
</Suspense>
</div>
<div id="metrics" data-section="metrics">
<MetricCardThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
metrics={[
{
id: "m1", icon: Heart,
title: "Improved Health", value: "95%"},
{
id: "m2", icon: Flame,
title: "Increased Energy", value: "90%"},
{
id: "m3", icon: Award,
title: "Achieved Goals", value: "98%"},
]}
title="Achieve Your Best with Us"
description="See the tangible results our members are achieving every day. We're committed to helping you reach new milestones and unlock your full potential."
tag="Our Impact"
/>
<Suspense fallback={null}>
<DynamicMetricCardThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
metrics={[
{
id: "m1", icon: Heart,
title: "Improved Health", value: "95%"},
{
id: "m2", icon: Flame,
title: "Increased Energy", value: "90%"},
{
id: "m3", icon: Award,
title: "Achieved Goals", value: "98%"},
]}
title="Achieve Your Best with Us"
description="See the tangible results our members are achieving every day. We're committed to helping you reach new milestones and unlock your full potential."
tag="Our Impact"
/>
</Suspense>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
animationType="scale-rotate"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
testimonials={[
{
id: "1", name: "Sarah Johnson", role: "Marketing Manager", company: "GrowthCo", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-fitness-woman-sportswear-with-headband-holding-blank-speech-bubble-sign-smiling-cheerfully-showing-thumbs-up-standing-white-wall_141793-48859.jpg", imageAlt: "Sarah Johnson smiling"},
{
id: "2", name: "Michael Chen", role: "Software Engineer", company: "InnovateTech", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/upperangle-shot-attractive-sweaty-sportswoman-using-gym-equipment-gain-perfect-abs-good-body-shape-pushup-rings-pumping-biceps-smiling-as-if-feeling-joy-working-out-train-endurance_197531-30367.jpg", imageAlt: "Michael Chen smiling"},
{
id: "3", name: "Emily Rodriguez", role: "Financial Analyst", company: "Apex Investments", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/wellness-health-lifestyle-workout-graphic-word_53876-21386.jpg", imageAlt: "Emily Rodriguez smiling"},
{
id: "4", name: "David Kim", role: "Small Business Owner", company: "Local Eats", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/positive-woman-leggings-standing-one-knee-tying-lace_1262-18584.jpg", imageAlt: "David Kim smiling"},
{
id: "5", name: "Jessica Lee", role: "Yoga Instructor", company: "Zen Flow Studio", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-explorer-reaching-mountain-peak-meditating-top_482257-125889.jpg", imageAlt: "Jessica Lee smiling"},
{
id: "6", name: "Robert Green", role: "Project Manager", company: "BuildRight Co.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/group-people-exercising-together-outdoors_23-2151061417.jpg", imageAlt: "Robert Green smiling"},
]}
title="What Our Members Say"
description="Hear directly from our satisfied members about their transformative journeys at Sleek Fitness and how we've helped them achieve their dreams."
tag="Success Stories"
/>
<Suspense fallback={null}>
<DynamicTestimonialCardOne
animationType="scale-rotate"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
testimonials={[
{
id: "1", name: "Sarah Johnson", role: "Marketing Manager", company: "GrowthCo", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-fitness-woman-sportswear-with-headband-holding-blank-speech-bubble-sign-smiling-cheerfully-showing-thumbs-up-standing-white-wall_141793-48859.jpg", imageAlt: "Sarah Johnson smiling"},
{
id: "2", name: "Michael Chen", role: "Software Engineer", company: "InnovateTech", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/upperangle-shot-attractive-sweaty-sportswoman-using-gym-equipment-gain-perfect-abs-good-body-shape-pushup-rings-pumping-biceps-smiling-as-if-feeling-joy-working-out-train-endurance_197531-30367.jpg", imageAlt: "Michael Chen smiling"},
{
id: "3", name: "Emily Rodriguez", role: "Financial Analyst", company: "Apex Investments", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/wellness-health-lifestyle-workout-graphic-word_53876-21386.jpg", imageAlt: "Emily Rodriguez smiling"},
{
id: "4", name: "David Kim", role: "Small Business Owner", company: "Local Eats", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/positive-woman-leggings-standing-one-knee-tying-lace_1262-18584.jpg", imageAlt: "David Kim smiling"},
{
id: "5", name: "Jessica Lee", role: "Yoga Instructor", company: "Zen Flow Studio", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-explorer-reaching-mountain-peak-meditating-top_482257-125889.jpg", imageAlt: "Jessica Lee smiling"},
{
id: "6", name: "Robert Green", role: "Project Manager", company: "BuildRight Co.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/group-people-exercising-together-outdoors_23-2151061417.jpg", imageAlt: "Robert Green smiling"},
]}
title="What Our Members Say"
description="Hear directly from our satisfied members about their transformative journeys at Sleek Fitness and how we've helped them achieve their dreams."
tag="Success Stories"
/>
</Suspense>
</div>
<div id="pricing" data-section="pricing">
<PricingCardThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
plans={[
{
id: "basic", badge: "Value", badgeIcon: Sparkles,
price: "$49/month", name: "Basic Access", buttons: [
<Suspense fallback={null}>
<DynamicPricingCardThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
plans={[
{
text: "Choose Basic", href: "#contact"},
],
features: [
"Gym Access (Off-Peak)", "Basic Group Classes", "Locker Room Access"],
},
{
id: "premium", badge: "Popular", badgeIcon: Star,
price: "$79/month", name: "Premium Pass", buttons: [
id: "basic", badge: "Value", badgeIcon: Sparkles,
price: "$49/month", name: "Basic Access", buttons: [
{
text: "Choose Basic", href: "#contact"},
],
features: [
"Gym Access (Off-Peak)", "Basic Group Classes", "Locker Room Access"],
},
{
text: "Choose Premium", href: "#contact"},
],
features: [
"24/7 Gym Access", "All Group Classes", "Personal Training Session (1/month)", "Nutritional Guidance"],
},
{
id: "elite", badge: "Ultimate", badgeIcon: Crown,
price: "$129/month", name: "Elite Membership", buttons: [
id: "premium", badge: "Popular", badgeIcon: Star,
price: "$79/month", name: "Premium Pass", buttons: [
{
text: "Choose Premium", href: "#contact"},
],
features: [
"24/7 Gym Access", "All Group Classes", "Personal Training Session (1/month)", "Nutritional Guidance"],
},
{
text: "Choose Elite", href: "#contact"},
],
features: [
"24/7 Gym Access", "All Group Classes", "Personal Training Sessions (4/month)", "Custom Meal Plan", "Priority Booking"],
},
]}
title="Find Your Perfect Fit"
description="Choose from our flexible membership options, designed to provide maximum value and access to all our state-of-the-art facilities and classes."
tag="Membership Plans"
/>
id: "elite", badge: "Ultimate", badgeIcon: Crown,
price: "$129/month", name: "Elite Membership", buttons: [
{
text: "Choose Elite", href: "#contact"},
],
features: [
"24/7 Gym Access", "All Group Classes", "Personal Training Sessions (4/month)", "Custom Meal Plan", "Priority Booking"],
},
]}
title="Find Your Perfect Fit"
description="Choose from our flexible membership options, designed to provide maximum value and access to all our state-of-the-art facilities and classes."
tag="Membership Plans"
/>
</Suspense>
</div>
<div id="partners" data-section="partners">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={false}
names={[
"NutriFuel", "SportTech", "WellnessWorks", "ActiveLife", "FitGenius", "PeakPerformance", "HealthHub"]}
title="Trusted by Industry Leaders"
description="We collaborate with top health and wellness brands, sports organizations, and technology providers to bring you the best in fitness innovation and support."
tag="Our Partners"
speed={40}
showCard={true}
/>
<Suspense fallback={null}>
<DynamicSocialProofOne
textboxLayout="default"
useInvertedBackground={false}
names={[
"NutriFuel", "SportTech", "WellnessWorks", "ActiveLife", "FitGenius", "PeakPerformance", "HealthHub"]}
title="Trusted by Industry Leaders"
description="We collaborate with top health and wellness brands, sports organizations, and technology providers to bring you the best in fitness innovation and support."
tag="Our Partners"
speed={40}
showCard={true}
/>
</Suspense>
</div>
<div id="contact" data-section="contact">
<ContactCTA
useInvertedBackground={true}
background={{
variant: "sparkles-gradient"}}
tag="Get Started"
title="Ready to Transform?"
description="Join Sleek Fitness today and take the first step towards a healthier, stronger you. Contact us to learn more about our programs and facilities!"
buttons={[
{
text: "Schedule a Visit", href: "#"},
{
text: "Contact Sales", href: "#"},
]}
/>
<Suspense fallback={null}>
<DynamicContactCTA
useInvertedBackground={true}
background={{
variant: "sparkles-gradient"}}
tag="Get Started"
title="Ready to Transform?"
description="Join Sleek Fitness today and take the first step towards a healthier, stronger you. Contact us to learn more about our programs and facilities!"
buttons={[
{
text: "Schedule a Visit", href: "#"},
{
text: "Contact Sales", href: "#"},
]}
/>
</Suspense>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="Sleek Fitness"
columns={[
{
title: "Company", items: [
<Suspense fallback={null}>
<DynamicFooterBaseCard
logoText="Sleek Fitness"
columns={[
{
label: "About Us", href: "#about"},
title: "Company", items: [
{
label: "About Us", href: "#about"},
{
label: "Careers", href: "#"},
{
label: "Blog", href: "#"},
],
},
{
label: "Careers", href: "#"},
title: "Services", items: [
{
label: "Classes", href: "#features"},
{
label: "Personal Training", href: "#features"},
{
label: "Membership", href: "#pricing"},
],
},
{
label: "Blog", href: "#"},
],
},
{
title: "Services", items: [
{
label: "Classes", href: "#features"},
{
label: "Personal Training", href: "#features"},
{
label: "Membership", href: "#pricing"},
],
},
{
title: "Support", items: [
{
label: "Contact Us", href: "#contact"},
{
label: "FAQ", href: "#"},
{
label: "Privacy Policy", href: "#"},
{
label: "Terms of Service", href: "#"},
],
},
]}
copyrightText="© 2024 Sleek Fitness. All rights reserved."
/>
title: "Support", items: [
{
label: "Contact Us", href: "#contact"},
{
label: "FAQ", href: "#"},
{
label: "Privacy Policy", href: "#"},
{
label: "Terms of Service", href: "#"},
],
},
]}
copyrightText="© 2024 Sleek Fitness. All rights reserved."
/>
</Suspense>
</div>
</ReactLenis>
</ThemeProvider>