0a6af7ef-e3e5-4e88-afcb-54e2cc8045a4/src/app/page.tsx

"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import { Clock, MapPin, Phone } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="mediumLarge"
        sizing="mediumLarge"
        background="noise"
        cardStyle="solid"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        { name: "Accueil", id: "hero" },
        { name: "Services", id: "services" },
        { name: "À propos", id: "about" },
        { name: "Prendre rendez-vous", id: "contact" },
      ]}
      brandName="Salon La cache à repousse"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroCarouselLogo
      logoText="Salon La cache à repousse"
      description="Révélez votre beauté dès aujourd'hui. Services capillaires professionnels dans un salon chaleureux à Lévis."
      buttons={[
        { text: "Prendre rendez-vous", href: "#contact" },
        { text: "Appelez maintenant", href: "tel:+14185550199" },
      ]}
      slides={[
        { imageSrc: "http://img.b2bpic.net/free-photo/lodge-wintertime-with-ski-gear_482257-76632.jpg", imageAlt: "Intérieur du salon accueillant" },
        { imageSrc: "http://img.b2bpic.net/free-photo/female-hairdresser-smiling-making-hairstyle-woman-beauty-salon_176420-4464.jpg", imageAlt: "Styliste au travail" },
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyNine
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      features={[
        { title: "Coupes Expertes", description: "Des coupes de précision adaptées à votre style et à la morphologie de votre visage.", imageSrc: "http://img.b2bpic.net/free-photo/professional-girl-hairdresser-makes-client-haircut-girl-is-sitting-mask-beauty-salon_343596-4451.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/pretty-barber-girl-cutting-hair_624325-3064.jpg", buttonText: "Voir nos services" },
        { title: "Coloration Professionnelle", description: "Des solutions de couleur personnalisées, des reflets naturels aux teintes audacieuses.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-woman-smiling-showing-palm-her-hand_141793-573.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-dyed-hair-summertime_52683-86996.jpg", buttonText: "Voir nos services" },
        { title: "Soins Revitalisants", description: "Soins en profondeur et traitements thérapeutiques pour des cheveux sains et éclatants.", imageSrc: "http://img.b2bpic.net/free-photo/brunette-woman-getting-her-hair-washed_23-2148108893.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/brunette-girl-getting-her-hair-washed_23-2148108851.jpg", buttonText: "Voir nos services" },
      ]}
      title="Soins Capillaires Premium"
      description="Nous utilisons des produits de la plus haute qualité pour révéler votre beauté naturelle."
    />
  </div>

  <div id="services" data-section="services">
      <PricingCardTwo
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      plans={[
        { id: "p1", badge: "Essentiel", price: "À partir de 55$", subtitle: "Inclut consultation et coupe", features: ["Consultation", "Coupe de précision", "Mise en plis"], buttons: [{ text: "Réserver", href: "#contact" }] },
        { id: "p2", badge: "Populaire", price: "À partir de 120$", subtitle: "Transformation complète", features: ["Consultation couleur", "Application de couleur", "Coupe et finition"], buttons: [{ text: "Réserver", href: "#contact" }] },
        { id: "p3", badge: "Premium", price: "À partir de 85$", subtitle: "Soins profonds", features: ["Analyse capillaire", "Traitement nourrissant", "Massage du cuir chevelu"], buttons: [{ text: "Réserver", href: "#contact" }] },
      ]}
      title="Services et Tarifs"
      description="Tarification transparente pour tous nos services."
    />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={true}
      title="Notre Histoire"
      description="Au Salon La cache à repousse, nous croyons que la coiffure est un moment de pure détente. Situé au cœur de Lévis, notre salon familial offre un espace accueillant pour vous relaxer. Notre équipe de stylistes passionnés est dédiée à créer une expérience personnalisée pour chaque client."
      imageSrc="http://img.b2bpic.net/free-photo/female-painter-using-watercolor-paint-mixing-colors-artistic-creation_482257-124848.jpg"
    />
  </div>

  <div id="before-after" data-section="before-after">
      <FeatureCardTwentyNine
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      features={[
        { title: "Avant / Après 1", description: "Transformation blonde éclatante", imageSrc: "http://img.b2bpic.net/free-photo/funny-sisters-black-white_329181-10662.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/woman-s-profile-trendy-grey-hair-background_633478-2379.jpg", buttonText: "Réserver" },
        { title: "Avant / Après 2", description: "Style bob élégant", imageSrc: "http://img.b2bpic.net/free-photo/happy-sad-twins_329181-10672.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/portrait-young-blonde-female-friends-posing_273609-7278.jpg", buttonText: "Réserver" },
      ]}
      title="Nos Transformations"
      description="Découvrez comment nous aidons nos clients à révéler leur meilleur look."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardThirteen
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      testimonials={[
        { id: "1", name: "Marie Leclair", handle: "@marie", testimonial: "Le meilleur salon à Lévis ! Atmosphère professionnelle et très relaxante.", rating: 5 },
        { id: "2", name: "Sophie Tremblay", handle: "@sophie", testimonial: "J'adore ma nouvelle couleur. Une équipe à l'écoute.", rating: 5 },
      ]}
      showRating={true}
      title="Ce qu'ils disent de nous"
      description="Note de 5.0 étoiles de la part de nos clients satisfaits à Lévis."
    />
  </div>

  <div id="location" data-section="location">
      <MetricCardThree
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      metrics={[
        { id: "m1", icon: MapPin, title: "Adresse", value: "Lévis, QC" },
        { id: "m2", icon: Clock, title: "Heures", value: "Mar-Sam 9h-17h" },
        { id: "m3", icon: Phone, title: "Téléphone", value: "(418) 555-0199" },
      ]}
      title="Visitez-nous"
      description="Situé à Lévis, au Québec. Nous avons hâte de vous accueillir."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={true}
      title="Prendre rendez-vous"
      description="Prêt à révéler votre beauté ? Contactez-nous pour réserver votre plage horaire."
      inputs={[
        { name: "name", type: "text", placeholder: "Votre Nom", required: true },
        { name: "phone", type: "tel", placeholder: "Votre Numéro", required: true },
      ]}
      textarea={{ name: "message", placeholder: "Votre message ou date souhaitée", rows: 4 }}
      buttonText="Envoyer la demande"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        { items: [{ label: "Tél: (418) 555-0199", href: "tel:+14185550199" }, { label: "Lévis, QC", href: "#location" }] },
        { items: [{ label: "Facebook", href: "https://facebook.com" }, { label: "Prendre Rendez-vous", href: "#contact" }] },
      ]}
      logoText="Salon La cache à repousse"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}