265 lines
17 KiB
TypeScript
265 lines
17 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
|
|
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
|
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
|
import TeamCardFive from '@/components/sections/team/TeamCardFive';
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import { Dumbbell } from 'lucide-react';
|
|
|
|
export default function GymLandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="mediumSmall"
|
|
sizing="largeSizeMediumTitles"
|
|
background="plain"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="FitCore"
|
|
navItems={[
|
|
{ name: "About", id: "about" },
|
|
{ name: "Classes", id: "features" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Trainers", id: "team" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{
|
|
text: "Join Now", href: "#pricing"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboard
|
|
logoText="FitCore Gym"
|
|
description="Transform your body and mind with expert trainers, state-of-the-art equipment, and a supportive community. Start your fitness journey today."
|
|
imageSrc="https://img.b2bpic.net/free-photo/low-angle-view-muscular-build-man-doing-deadlift-while-exercising-with-barbell-gym_637285-2489.jpg"
|
|
imageAlt="Modern gym facility with professionals training"
|
|
frameStyle="card"
|
|
logoLineHeight={1.2}
|
|
ariaLabel="FitCore Gym Hero Section"
|
|
containerClassName="w-full"
|
|
logoClassName="text-5xl md:text-6xl font-bold"
|
|
descriptionClassName="text-lg md:text-2xl leading-relaxed"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
tag="About Us"
|
|
tagIcon={Dumbbell}
|
|
title="Build Strength, Build Community"
|
|
description="FitCore Gym has been at the forefront of fitness innovation for over a decade. We combine cutting-edge equipment with compassionate coaching to create an environment where everyone can achieve their goals. Our mission is to empower our members through fitness education, personalized training, and a welcoming community that celebrates every victory."
|
|
metrics={[
|
|
{ value: "10,000+", title: "Active Members" },
|
|
{ value: "50+", title: "Expert Trainers" }
|
|
]}
|
|
imageSrc="https://img.b2bpic.net/free-photo/young-sportswoman-having-cross-training-with-weight-plate-gym_637285-8530.jpg"
|
|
imageAlt="FitCore Gym community training together"
|
|
useInvertedBackground="invertDefault"
|
|
containerClassName="w-full"
|
|
titleClassName="text-3xl md:text-4xl font-bold"
|
|
descriptionClassName="text-base md:text-lg leading-relaxed"
|
|
metricValueClassName="text-2xl md:text-3xl font-bold"
|
|
metricTitleClassName="text-sm md:text-base"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardNineteen
|
|
tag="Our Services"
|
|
title="Everything You Need to Succeed"
|
|
description="Access world-class facilities and expert guidance designed to accelerate your fitness transformation."
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
tag: "Strength", title: "Strength Training", subtitle: "Build muscle and power", description: "Our comprehensive strength training programs are designed by certified coaches to help you build muscle, increase power, and transform your physique safely and effectively.", imageSrc: "https://img.b2bpic.net/free-photo/athlete-gym-swings-triceps-with-barbell-sports-lifestyle_169016-59855.jpg", imageAlt: "Strength training equipment and weights", buttons: [{ text: "Learn More", href: "#pricing" }]
|
|
},
|
|
{
|
|
id: 2,
|
|
tag: "Cardio", title: "Cardio & Conditioning", subtitle: "Build endurance and stamina", description: "State-of-the-art cardio equipment combined with expert conditioning programs to improve your cardiovascular health, boost energy levels, and enhance overall fitness.", imageSrc: "https://img.b2bpic.net/free-photo/attractive-powerful-bodybuilder-is-doing-exercises-training-apparatus-sunny-gym_613910-20342.jpg", imageAlt: "Modern cardio equipment and training area", buttons: [{ text: "Learn More", href: "#pricing" }]
|
|
},
|
|
{
|
|
id: 3,
|
|
tag: "Wellness", title: "Yoga & Flexibility", subtitle: "Achieve balance and peace", description: "Discover the transformative power of yoga and flexibility training. Our certified instructors guide you through classes designed to improve mobility, reduce stress, and achieve mind-body balance.", imageSrc: "https://img.b2bpic.net/free-photo/handsome-blond-athletic-male-two-slim-female-fitness-models-doing-shoulder-exercises-with-dumbbells-gym-club_613910-16313.jpg", imageAlt: "Yoga and flexibility training session", buttons: [{ text: "Learn More", href: "#pricing" }]
|
|
}
|
|
]}
|
|
containerClassName="w-full"
|
|
titleClassName="text-3xl md:text-4xl font-bold"
|
|
descriptionClassName="text-base md:text-lg leading-relaxed"
|
|
cardTitleClassName="text-2xl md:text-3xl font-bold"
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardNine
|
|
title="Flexible Membership Plans"
|
|
description="Choose the perfect plan that fits your fitness goals and budget. All memberships include access to our full facility and group classes."
|
|
textboxLayout="default"
|
|
useInvertedBackground="invertDefault"
|
|
animationType="slide-up"
|
|
plans={[
|
|
{
|
|
id: "basic", title: "Basic Membership", price: "$29", period: "/month", imageSrc: "https://img.b2bpic.net/free-photo/active-woman-gym_1098-13871.jpg", imageAlt: "Basic gym membership plan", button: { text: "Get Started", href: "#contact" },
|
|
features: [
|
|
"24/7 gym access", "All equipment and facilities", "Group classes included", "Member mobile app"
|
|
]
|
|
},
|
|
{
|
|
id: "premium", title: "Premium Plus", price: "$59", period: "/month", imageSrc: "https://img.b2bpic.net/free-photo/happy-female-athlete-doing-relaxation-exercises-while-warming-up-n-gym_637285-8484.jpg", imageAlt: "Premium gym membership with personal training", button: { text: "Start Free Trial", href: "#contact" },
|
|
features: [
|
|
"Everything in Basic", "2 personal training sessions/month", "Nutrition coaching consultation", "Priority class booking", "Guest privileges"
|
|
]
|
|
}
|
|
]}
|
|
containerClassName="w-full"
|
|
titleClassName="text-3xl md:text-4xl font-bold"
|
|
descriptionClassName="text-base md:text-lg leading-relaxed"
|
|
planTitleClassName="text-2xl font-bold"
|
|
planPriceClassName="text-3xl font-bold"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
title="Success Stories from Our Members"
|
|
description="Real transformations from real people. Hear how FitCore Gym has changed lives."
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
animationType="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Mitchell", handle: "@sarahfit_journey", testimonial: "I lost 35 pounds in 6 months! The trainers at FitCore are incredibly supportive and knowledgeable. This isn't just a gym, it's a community.", imageSrc: "https://img.b2bpic.net/free-photo/trainer-helping-beginner-gym_23-2149561915.jpg", imageAlt: "Sarah Mitchell - Member Success"
|
|
},
|
|
{
|
|
id: "2", name: "Marcus Johnson", handle: "@marcus_strength", testimonial: "My confidence has sky-rocketed since joining FitCore. The personal training program is tailored perfectly to my goals and pushes me just right.", imageSrc: "https://img.b2bpic.net/free-photo/trainer-helping-beginner-gym_23-2149561945.jpg", imageAlt: "Marcus Johnson - Strength Training Success"
|
|
},
|
|
{
|
|
id: "3", name: "Elena Rodriguez", handle: "@elena_wellness", testimonial: "The yoga classes and nutrition coaching completely transformed my relationship with fitness. I've never felt better physically and mentally.", imageSrc: "https://img.b2bpic.net/free-photo/trainer-helping-beginner-gym_23-2149561944.jpg", imageAlt: "Elena Rodriguez - Wellness Transformation"
|
|
},
|
|
{
|
|
id: "4", name: "David Chen", handle: "@david_fitcore", testimonial: "As someone who used to hate the gym, FitCore changed my entire perspective. The community here is what keeps me coming back.", imageSrc: "https://img.b2bpic.net/free-photo/smiling-young-spportswoman-shows-thumbs-up-motivated-fitness-woman-like-something-giving-compliment-recommending-sport-gym-white-background_176420-47064.jpg", imageAlt: "David Chen - Gym Transformation"
|
|
},
|
|
{
|
|
id: "5", name: "Jessica Taylor", handle: "@jess_transforms", testimonial: "Built my dream physique with the help of amazing trainers. Every goal I set, I achieve. FitCore is more than worth it!", imageSrc: "https://img.b2bpic.net/free-photo/young-latin-couple-wearing-sportswear-standing-isolated-background-smiling-looking-camera-showing-fingers-doing-victory-sign-number-two_839833-25115.jpg", imageAlt: "Jessica Taylor - Achievement Story"
|
|
},
|
|
{
|
|
id: "6", name: "Robert Williams", handle: "@robert_gains", testimonial: "Started from zero fitness knowledge, and now I'm stronger than ever. The personalized guidance makes all the difference here.", imageSrc: "https://img.b2bpic.net/free-photo/trainer-helping-beginner-gym_23-2149561947.jpg", imageAlt: "Robert Williams - Fitness Progress"
|
|
}
|
|
]}
|
|
speed={40}
|
|
topMarqueeDirection="left"
|
|
containerClassName="w-full"
|
|
titleClassName="text-3xl md:text-4xl font-bold"
|
|
descriptionClassName="text-base md:text-lg leading-relaxed"
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardFive
|
|
title="Expert Trainers & Coaches"
|
|
description="Meet the certified fitness professionals dedicated to your success."
|
|
textboxLayout="default"
|
|
useInvertedBackground="invertDefault"
|
|
animationType="slide-up"
|
|
team={[
|
|
{
|
|
id: "1", name: "Alex Torres", role: "Head Coach & Strength Specialist", imageSrc: "https://img.b2bpic.net/free-photo/close-up-young-man-gesturing-isolated_176474-43799.jpg", imageAlt: "Alex Torres - Head Coach"
|
|
},
|
|
{
|
|
id: "2", name: "Nicole Bennett", role: "Cardio & Conditioning Expert", imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-smiley-women-taking-selfie_23-2149338051.jpg", imageAlt: "Nicole Bennett - Cardio Expert"
|
|
},
|
|
{
|
|
id: "3", name: "James Kim", role: "Yoga & Flexibility Instructor", imageSrc: "https://img.b2bpic.net/free-photo/indoor-shot-joyful-diverse-couple-keep-muscle-flexible-have-daily-workout-wear-sports-clothing-stand-closely-look-camera-with-happy-expression_273609-32465.jpg", imageAlt: "James Kim - Yoga Instructor"
|
|
},
|
|
{
|
|
id: "4", name: "Maria Gonzalez", role: "Gym Manager & Nutrition Coach", imageSrc: "https://img.b2bpic.net/free-photo/close-up-people-high-five-gym_23-2149049819.jpg", imageAlt: "Maria Gonzalez - Manager"
|
|
}
|
|
]}
|
|
containerClassName="w-full"
|
|
titleClassName="text-3xl md:text-4xl font-bold"
|
|
descriptionClassName="text-base md:text-lg leading-relaxed"
|
|
nameClassName="text-lg md:text-xl font-semibold"
|
|
roleClassName="text-sm md:text-base"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
title="Ready to Transform Your Body?"
|
|
description="Join FitCore Gym today and start your journey to a healthier, stronger you. Fill out the form below and our team will be in touch within 24 hours."
|
|
inputs={[
|
|
{ name: "fullName", type: "text", placeholder: "Full Name", required: true },
|
|
{ name: "email", type: "email", placeholder: "Email Address", required: true },
|
|
{ name: "phone", type: "tel", placeholder: "Phone Number", required: true },
|
|
{ name: "fitnessGoal", type: "text", placeholder: "What's your main fitness goal?", required: false }
|
|
]}
|
|
textarea={{
|
|
name: "message", placeholder: "Tell us a bit about yourself and your fitness experience...", rows: 5,
|
|
required: false
|
|
}}
|
|
useInvertedBackground="noInvert"
|
|
imageSrc="https://img.b2bpic.net/free-photo/motivated-young-female-athlete-smiling-gym-using-leg-press-equipment_197531-22868.jpg"
|
|
imageAlt="FitCore Gym modern facility"
|
|
mediaPosition="right"
|
|
buttonText="Get Started"
|
|
containerClassName="w-full"
|
|
titleClassName="text-3xl md:text-4xl font-bold"
|
|
descriptionClassName="text-base md:text-lg leading-relaxed"
|
|
buttonClassName="rounded-lg font-semibold"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
columns={[
|
|
{
|
|
title: "Gym Info", items: [
|
|
{ label: "About FitCore", href: "about" },
|
|
{ label: "Classes", href: "features" },
|
|
{ label: "Trainers", href: "team" },
|
|
{ label: "Membership", href: "pricing" }
|
|
]
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{ label: "Blog", href: "/" },
|
|
{ label: "Fitness Tips", href: "/" },
|
|
{ label: "Nutrition Guide", href: "/" },
|
|
{ label: "Success Stories", href: "testimonials" }
|
|
]
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "Contact Us", href: "contact" },
|
|
{ label: "Instagram", href: "https://instagram.com" },
|
|
{ label: "Facebook", href: "https://facebook.com" },
|
|
{ label: "Twitter", href: "https://twitter.com" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2025 FitCore Gym. All rights reserved. Transform Your Life."
|
|
containerClassName="w-full"
|
|
columnsClassName="grid grid-cols-1 md:grid-cols-3 gap-8"
|
|
columnTitleClassName="text-lg font-bold mb-4"
|
|
columnItemClassName="text-sm hover:underline transition-all"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |