Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -2,6 +2,8 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
+import { useState } from "react";
+import { X, Phone, MessageSquare } from "lucide-react";
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
@@ -13,6 +15,14 @@ import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
 import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
 
 export default function LandingPage() {
+  const [submitted, setSubmitted] = useState(false);
+  const [selectedService, setSelectedService] = useState<string | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleBookingClick = () => {
+    setIsModalOpen(true);
+  };
+
   return (
     <ThemeProvider
         defaultButtonVariant="hover-bubble"
@@ -27,6 +37,23 @@ export default function LandingPage() {
         headingFontWeight="medium"
     >
       <ReactLenis root>
+        {isModalOpen && (
+          <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm" onClick={() => setIsModalOpen(false)}>
+            <div className="bg-white w-full max-w-sm p-6 rounded-3xl shadow-2xl relative flex flex-col gap-6 animate-in zoom-in-95 duration-300" onClick={(e) => e.stopPropagation()}>
+              <button className="absolute top-4 right-4 text-gray-400 hover:text-black" onClick={() => setIsModalOpen(false)}><X /></button>
+              <h3 className="text-xl font-semibold text-center">Réservez votre moment</h3>
+              <div className="flex flex-col gap-3">
+                <a href="tel:0483890867" className="flex items-center justify-center gap-3 w-full py-3 bg-[#15479c] text-white rounded-full font-medium hover:opacity-90">
+                  <Phone size={18} /> 0483 89 08 67
+                </a>
+                <a href="https://wa.me/32483890867?text=Bonjour,%20je%20souhaite%20prendre%20rendez-vous%20chez%20Mondial%20Coiffure." target="_blank" rel="noopener noreferrer" className="flex items-center justify-center gap-3 w-full py-3 bg-[#25d366] text-white rounded-full font-medium hover:opacity-90">
+                  <MessageSquare size={18} /> WhatsApp
+                </a>
+              </div>
+            </div>
+          </div>
+        )}
+
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
@@ -52,7 +79,7 @@ export default function LandingPage() {
         { name: "Jean-Pierre D.", handle: "@jp_d", testimonial: "Un savoir-faire exceptionnel et un accueil vraiment chaleureux.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-suit_23-2149705920.jpg" },
         { name: "Marc B.", handle: "@marcb", testimonial: "Le service est impeccable, je ne vais nulle part ailleurs.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-glad-pretty-woman-dark-sweater-standing-near-lamps_114579-81865.jpg" }
       ]}
-      buttons={[{ text: "Réserver un Créneau", href: "#contact" }, { text: "Découvrir nos Services", href: "#services" }]}
+      buttons={[{ text: "Réserver un Créneau", onClick: handleBookingClick }, { text: "Découvrir nos Services", href: "#services" }]}
       imageSrc="http://img.b2bpic.net/free-photo/close-up-from-man-barber-shop_23-2148257045.jpg?_wi=1"
       imageAlt="Professional haircut in progress"
       mediaAnimation="opacity"
@@ -86,15 +113,15 @@ export default function LandingPage() {
       plans={[
         {
           id: "p1",          title: "Coupe & Coiffage",          price: "35€",          period: "service",          features: ["Shampooing traitant", "Massage crânien", "Coupe personnalisée", "Coiffage professionnel"],
-          imageSrc: "http://img.b2bpic.net/free-photo/back-view-man-getting-haircut_23-2148242819.jpg",          imageAlt: "Back view of man getting a haircut",          button: { text: "Réserver" }
+          imageSrc: "http://img.b2bpic.net/free-photo/back-view-man-getting-haircut_23-2148242819.jpg",          imageAlt: "Back view of man getting a haircut",          button: { text: "Réserver", onClick: handleBookingClick }
         },
         {
           id: "p2",          title: "La Barbe Traditionnelle",          price: "25€",          period: "service",          features: ["Taille aux ciseaux", "Rasoir de précision", "Rituel serviette chaude", "Huiles de soin"],
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-from-man-barber-shop_23-2148257045.jpg?_wi=2",          imageAlt: "Back view of man getting a haircut",          button: { text: "Réserver" }
+          imageSrc: "http://img.b2bpic.net/free-photo/close-up-from-man-barber-shop_23-2148257045.jpg?_wi=2",          imageAlt: "Back view of man getting a haircut",          button: { text: "Réserver", onClick: handleBookingClick }
         },
         {
           id: "p3",          title: "Le Rituel Mondial",          price: "55€",          period: "service",          features: ["Coupe premium", "Soin de la barbe", "Massage signature", "Finitions irréprochables"],
-          imageSrc: "http://img.b2bpic.net/free-photo/barber-shop-tools-arrangement_23-2149167448.jpg",          imageAlt: "Back view of man getting a haircut",          button: { text: "Réserver" }
+          imageSrc: "http://img.b2bpic.net/free-photo/barber-shop-tools-arrangement_23-2149167448.jpg",          imageAlt: "Back view of man getting a haircut",          button: { text: "Réserver", onClick: handleBookingClick }
         }
       ]}
       title="Nos Services Signature"
@@ -123,7 +150,7 @@ export default function LandingPage() {
       <InlineImageSplitTextAbout
       useInvertedBackground={false}
       heading={[{ type: "text", content: "Une Approche " }, { type: "image", src: "http://img.b2bpic.net/free-photo/barber-shop-tools-arrangement_23-2149167448.jpg", alt: "Salon interior" }, { type: "text", content: " Exclusive" }]}
-      buttons={[{ text: "Réserver Maintenant", href: "#contact" }]}
+      buttons={[{ text: "Réserver Maintenant", onClick: handleBookingClick }]}
     />
   </div>
 
@@ -145,12 +172,13 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactSplitForm
       useInvertedBackground={false}
-      title="Prêt à rafraîchir votre style ?"
+      title={submitted ? "Merci !" : "Prêt à rafraîchir votre style ?"}
-      description="Installez-vous confortablement, on s’occupe du reste. Réservez votre moment en ligne en moins de 2 minutes."
+      description={submitted ? "Votre demande a bien été envoyée. Nous reviendrons vers vous rapidement." : "Installez-vous confortablement, on s’occupe du reste. Réservez votre moment en ligne en moins de 2 minutes."}
       inputs={[{ name: "name", type: "text", placeholder: "Nom Complet", required: true }, { name: "email", type: "email", placeholder: "Email", required: true }]}
-      textarea={{ name: "message", placeholder: "Dites-nous ce dont vous avez besoin...", rows: 4 }}
+      textarea={{ name: "message", placeholder: selectedService ? `Je souhaite réserver : ${selectedService}` : "Dites-nous ce dont vous avez besoin...", rows: 4 }}
       imageSrc="http://img.b2bpic.net/free-photo/professional-barber-working-with-client-hairdressing-salon-styling-beard-with-trimmer_613910-18295.jpg"
       imageAlt="Barber working"
+      onSubmit={() => setSubmitted(true)}
     />
   </div>
 
@@ -159,7 +187,7 @@ export default function LandingPage() {
       logoText="MONDIAL COIFFURE"
       columns={[
         { title: "Navigation", items: [{ label: "L’Expérience", href: "#hero" }, { label: "Services", href: "#services" }, { label: "Reviews", href: "#reviews" }] },
-        { title: "Contact", items: [{ label: "Adresse: Bruxelles, Belgique", href: "#" }, { label: "Tél: +32 X XX XX XX", href: "tel:+32XXXXXXXX" }] }
+        { title: "Contact", items: [{ label: "Adresse: Bruxelles, Belgique", href: "#" }, { label: "Tél: +32 483 89 08 67", onClick: handleBookingClick }] }
       ]}
       copyrightText="© 2024 Mondial Coiffure. Tous droits réservés."
     />