Files
db4e9b70-abf7-40ed-9182-653…/src/app/page.tsx
2026-03-14 19:15:30 +00:00

341 lines
19 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Zap, Shield, Sparkles, Target, Award, TrendingUp, MessageCircle, Phone, Users, Star } from 'lucide-react';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="mediumLarge"
sizing="medium"
background="aurora"
cardStyle="inset"
primaryButtonStyle="shadow"
secondaryButtonStyle="glass"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{ name: "Accueil", id: "home" },
{ name: "À propos", id: "about" },
{ name: "Programmes", id: "programs" },
{ name: "Contact", id: "contact" }
]}
brandName="Olympia Pro Gym"
brandLogo="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AwiLgrCsYLCLtqrLjEds9gmEwf/uploaded-1773515717225-cfvnap6f.png"
brandLogoAlt="Olympia Pro Gym Logo"
button={{
text: "Appeler maintenant", href: "tel:+21620320967"
}}
/>
</div>
<div id="hero-section" data-section="hero-section">
<HeroBillboardTestimonial
title="Transformez votre corps chez Olympia Pro Gym"
description="Kick Boxing, Taekwondo, CrossFit et Musculation à Kairouan. Ouvert 24h/24 avec coachs expérimentés et équipement professionnel."
background={{ variant: "radial-gradient" }}
tag="💪 Salle de Fitness Premium"
tagIcon={Zap}
tagAnimation="slide-up"
buttons={[
{ text: "Appeler maintenant", href: "tel:+21620320967" },
{ text: "Réserver une séance d'essai", href: "#contact" }
]}
buttonAnimation="slide-up"
testimonials={[
{
name: "Melek Khraief", handle: "Membre depuis 2023", testimonial: "Très bonne salle de sport avec une excellente ambiance. Les coachs sont professionnels et motivants!", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/business-woman-standing_1187-1543.jpg?_wi=1", imageAlt: "Melek Khraief"
},
{
name: "Ali Mansouri", handle: "CrossFit Homme", testimonial: "L'équipement est moderne et les séances sont intensives. Parfait pour progresser rapidement!", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/business-woman-standing_1187-1543.jpg?_wi=2", imageAlt: "Ali Mansouri"
},
{
name: "Fatima Ben Youssef", handle: "CrossFit Femme", testimonial: "Une vraie communauté de femmes fortes. L'ambiance motivante me pousse à dépasser mes limites.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/business-woman-standing_1187-1543.jpg?_wi=3", imageAlt: "Fatima Ben Youssef"
},
{
name: "Mohamed Karim", handle: "Kickboxing", testimonial: "Coachs incroyables! J'ai appris les techniques rapidement et le résultat est au rendez-vous.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/business-woman-standing_1187-1543.jpg?_wi=4", imageAlt: "Mohamed Karim"
}
]}
testimonialRotationInterval={5000}
useInvertedBackground={false}
imageSrc="http://img.b2bpic.net/free-photo/fitness-woman-working-out-with-battle-ropes-gym_342744-4.jpg"
imageAlt="Entraînement intensif à Olympia Pro Gym"
mediaAnimation="blur-reveal"
containerClassName="py-20"
titleClassName="text-5xl md:text-6xl font-light tracking-tight"
descriptionClassName="text-lg md:text-xl text-foreground/80 max-w-2xl"
buttonClassName="px-8 py-3 rounded-full font-medium"
/>
</div>
<div id="about-section" data-section="about-section">
<MediaAbout
title="À propos d'Olympia Pro Gym"
description="Depuis sa création, Olympia Pro Gym s'engage à offrir une expérience d'entraînement exceptionnelle. Notre salle moderne dispose d'équipements professionnels de dernière génération, de coachs certifiés et expérimentés, et surtout d'une ambiance motivante et inclusive. Que vous soyez débutant ou athlète confirmé, nous avons le programme adapté pour vous."
tag="🏋️ Environnement Professionnel"
tagIcon={Shield}
tagAnimation="slide-up"
buttons={[
{ text: "Découvrir nos programmes", href: "#programs" }
]}
buttonAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/training-treadmill_1098-15787.jpg"
imageAlt="Intérieur moderne d'Olympia Pro Gym"
useInvertedBackground={true}
textBoxClassName=""
titleClassName="text-4xl md:text-5xl font-light"
descriptionClassName="text-lg text-foreground/80 leading-relaxed"
/>
</div>
<div id="feature-programs" data-section="feature-programs">
<FeatureCardSixteen
title="Nos Programmes d'Entraînement"
description="Cinq programmes spécialisés pour tous les objectifs. Choisissez celui qui correspond à vos ambitions."
tag="🎯 Programmes Variés"
tagIcon={Sparkles}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
animationType="blur-reveal"
negativeCard={{
items: [
"Manque de motivation personnelle", "Pas d'équipement adapté", "Programmes généralistes inefficaces", "Ambiance démotivante"
]
}}
positiveCard={{
items: [
"✅ Coachs personnels motivants", "✅ Équipement professionnel complet", "✅ Programmes spécialisés et structurés", "✅ Communauté engagée et supportive"
]
}}
containerClassName="py-20"
textBoxTitleClassName="text-4xl md:text-5xl font-light"
textBoxDescriptionClassName="text-lg text-foreground/80"
/>
</div>
<div id="product-services" data-section="product-services">
<ProductCardFour
title="Explorez nos services"
description="Chaque programme est conçu pour développer force, technique et confiance en soi."
tag="💯 Services Professionnels"
tagIcon={Target}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={true}
gridVariant="three-columns-all-equal-width"
animationType="blur-reveal"
products={[
{
id: "kickboxing", name: "Kick Boxing", price: "À partir de 30,000 TND/mois", variant: "Cardio & Discipline", imageSrc: "http://img.b2bpic.net/free-photo/athletic-boxer-punching-with-determination-precaution-silver-kground_158595-4858.jpg", imageAlt: "Entraînement Kick Boxing"
},
{
id: "taekwondo", name: "Taekwondo", price: "À partir de 30,000 TND/mois", variant: "Martial Art & Technique", imageSrc: "http://img.b2bpic.net/free-photo/karate-fighters-tatami-fighting-championship_654080-1906.jpg", imageAlt: "Entraînement Taekwondo"
},
{
id: "crossfit-femme", name: "CrossFit Femme", price: "À partir de 35,000 TND/mois", variant: "Force Fonctionnelle", imageSrc: "http://img.b2bpic.net/free-photo/people-working-out-indoors-together-with-dumbbells_23-2149175374.jpg", imageAlt: "Entraînement CrossFit Femme"
},
{
id: "crossfit-homme", name: "CrossFit Homme", price: "À partir de 35,000 TND/mois", variant: "Intensité Extrême", imageSrc: "http://img.b2bpic.net/free-photo/man-raising-barbell_23-2147675196.jpg", imageAlt: "Entraînement CrossFit Homme"
},
{
id: "musculation", name: "Musculation/Bodybuilding", price: "À partir de 40,000 TND/mois", variant: "Construction Musculaire", imageSrc: "http://img.b2bpic.net/free-photo/athlete-gym-swings-triceps-with-barbell-sports-lifestyle_169016-61178.jpg", imageAlt: "Entraînement Musculation"
}
]}
carouselMode="buttons"
containerClassName="py-20"
textBoxTitleClassName="text-4xl md:text-5xl font-light"
textBoxDescriptionClassName="text-lg text-foreground/80"
/>
</div>
<div id="why-choose-us" data-section="why-choose-us">
<FeatureCardSixteen
title="Pourquoi choisir Olympia Pro Gym?"
description="Nous offrons bien plus qu'une simple salle de sport. C'est une communauté, un engagement envers votre transformation."
tag="⭐ Avantages Premium"
tagIcon={Award}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
animationType="blur-reveal"
positiveCard={{
items: [
"🏋️ Salle moderne et bien équipée", "👨‍🏫 Coachs certifiés et expérimentés", "⏰ Ouvert 24h/24 pour votre flexibilité", "🎯 Programmes pour tous les niveaux", "🔥 Ambiance motivante et inclusive", "📍 Localisation centrale à Kairouan"
]
}}
negativeCard={{
items: [
"Pas de suivi personnel", "Équipement usé et limité", "Horaires restreints", "Pas de flexibilité"
]
}}
containerClassName="py-20"
textBoxTitleClassName="text-4xl md:text-5xl font-light"
textBoxDescriptionClassName="text-lg text-foreground/80"
/>
</div>
<div id="metrics-section" data-section="metrics-section">
<MetricCardOne
title="Nos Résultats Parlent d'Eux-Mêmes"
description="Rejoignez une communauté de plus de 500 membres satisfaits qui transforment leur corps et leur vie."
tag="📊 Impact Réel"
tagIcon={TrendingUp}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={true}
gridVariant="uniform-all-items-equal"
animationType="blur-reveal"
metrics={[
{
id: "members", value: "+500", title: "Membres Actifs", description: "Une communauté grandissante de passionnés", icon: Users
},
{
id: "transformation", value: "100%", title: "Taux de Satisfaction", description: "Note 5/5 sur les platefmes", icon: Star
},
{
id: "experience", value: "+10", title: "Années d'Expérience", description: "Expertise reconnue dans le fitness", icon: Award
},
{
id: "programs", value: "5", title: "Programmes Spécialisés", description: "Adaptés à tous les objectifs", icon: Target
}
]}
containerClassName="py-20"
titleClassName="text-4xl md:text-5xl font-light"
descriptionClassName="text-lg text-foreground/80"
/>
</div>
<div id="testimonials-section" data-section="testimonials-section">
<TestimonialCardFive
title="Ce que nos membres disent"
description="Décourez comment Olympia Pro Gym a changé la vie de nos membres."
tag="💬 Témoignages"
tagIcon={MessageCircle}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "testi-1", name: "Melek Khraief", date: "Janvier 2025", title: "Membre Premium", quote: "Très bonne salle de sport avec une excellente ambiance. Les coachs sont motivants et professionnels. Je recommande vivement!", tag: "CrossFit Femme", avatarSrc: "http://img.b2bpic.net/free-photo/business-woman-standing_1187-1543.jpg", avatarAlt: "Melek Khraief"
},
{
id: "testi-2", name: "Ali Mansouri", date: "Décembre 2024", title: "Coached CrossFit", quote: "L'équipement est moderne, les coachs savent exactement comment m'aider. Résultats spectaculaires en 3 mois!", tag: "CrossFit Homme", avatarSrc: "http://img.b2bpic.net/free-photo/business-woman-standing_1187-1543.jpg", avatarAlt: "Ali Mansouri"
},
{
id: "testi-3", name: "Fatima Ben Youssef", date: "Novembre 2024", title: "Transformée", quote: "Une vraie communauté de femmes fortes. L'ambiance motivante me pousse à dépasser mes limites chaque jour.", tag: "CrossFit Femme", avatarSrc: "http://img.b2bpic.net/free-photo/business-woman-standing_1187-1543.jpg", avatarAlt: "Fatima Ben Youssef"
},
{
id: "testi-4", name: "Mohamed Karim", date: "Octobre 2024", title: "Champion Kickboxing", quote: "Les coachs sont incroyables! J'ai appris les techniques rapidement et progresse à vitesse régulière.", tag: "Kick Boxing", avatarSrc: "http://img.b2bpic.net/free-photo/business-woman-standing_1187-1543.jpg", avatarAlt: "Mohamed Karim"
},
{
id: "testi-5", name: "Layla Amara", date: "Septembre 2024", title: "Bodybuilding", quote: "Salle professionnelle avec un coach personnel attentif. Mes objectifs de musculation sont atteints!", tag: "Musculation", avatarSrc: "http://img.b2bpic.net/free-photo/business-woman-standing_1187-1543.jpg", avatarAlt: "Layla Amara"
},
{
id: "testi-6", name: "Karim Salah", date: "Août 2024", title: "Taekwondo", quote: "Discipline, respect et excellente formation martiale. C'est exactement ce que je cherchais!", tag: "Taekwondo", avatarSrc: "http://img.b2bpic.net/free-photo/business-woman-standing_1187-1543.jpg", avatarAlt: "Karim Salah"
}
]}
containerClassName="py-20"
textBoxTitleClassName="text-4xl md:text-5xl font-light"
textBoxDescriptionClassName="text-lg text-foreground/80"
/>
</div>
<div id="cta-section" data-section="cta-section">
<ContactCTA
tag="🚀 Action Immédiate"
tagIcon={Zap}
tagAnimation="slide-up"
title="Prêt à commencer votre transformation?"
description="Rejoignez plus de 500 membres qui transforment leur corps et leur vie. Votre première séance d'essai est gratuite!"
buttons={[
{ text: "Appeler maintenant", href: "tel:+21620320967" },
{ text: "Réserver votre séance d'essai", href: "#contact" }
]}
buttonAnimation="slide-up"
background={{ variant: "radial-gradient" }}
useInvertedBackground={true}
containerClassName="py-20"
titleClassName="text-4xl md:text-5xl font-light"
descriptionClassName="text-lg text-foreground/80"
/>
</div>
<div id="contact-form-section" data-section="contact-form-section">
<ContactCTA
tag="📞 Nous Contacter"
tagIcon={Phone}
tagAnimation="slide-up"
title="Contactez-nous Directement"
description="Av. Mongi Slim, Kairouan 3100, Tunisie | Tél: 25 320 967 | Ouvert 24h/24"
buttons={[
{ text: "Appeler", href: "tel:+21620320967" },
{ text: "Visiter sur Google Maps", href: "https://maps.google.com" }
]}
background={{ variant: "plain" }}
useInvertedBackground={false}
containerClassName="py-20"
titleClassName="text-4xl md:text-5xl font-light"
descriptionClassName="text-lg text-foreground/80"
/>
</div>
<div id="footer-section" data-section="footer-section">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/stationary-bike_23-2148017333.jpg"
imageAlt="Olympia Pro Gym Kairouan"
logoText="Olympia Pro Gym"
copyrightText="© 2025 Olympia Pro Gym. Tous droits réservés."
columns={[
{
title: "Navigation", items: [
{ label: "Accueil", href: "#home" },
{ label: "À propos", href: "#about" },
{ label: "Programmes", href: "#programs" },
{ label: "Contact", href: "#contact" }
]
},
{
title: "Services", items: [
{ label: "Kick Boxing", href: "#kickboxing" },
{ label: "Taekwondo", href: "#taekwondo" },
{ label: "CrossFit Femme", href: "#crossfit-femme" },
{ label: "CrossFit Homme", href: "#crossfit-homme" },
{ label: "Musculation", href: "#musculation" }
]
},
{
title: "Informations", items: [
{ label: "Tél: 25 320 967", href: "tel:+21620320967" },
{ label: "Av. Mongi Slim, Kairouan", href: "#" },
{ label: "Ouvert 24h/24", href: "#" },
{ label: "Mentions Légales", href: "#" }
]
}
]}
containerClassName="py-20"
logoTextClassName="text-2xl font-light"
copyrightTextClassName="text-foreground/60"
/>
</div>
</ThemeProvider>
);
}