Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -3,6 +3,7 @@
 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';
@@ -16,13 +17,10 @@ import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCar
 export default function LandingPage() {
   const [submitted, setSubmitted] = useState(false);
   const [selectedService, setSelectedService] = useState<string | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
-  const handleServiceSelect = (serviceName: string) => {
+  const handleBookingClick = () => {
-    setSelectedService(serviceName);
+    setIsModalOpen(true);
-    const contactSection = document.getElementById('contact');
-    if (contactSection) {
-        contactSection.scrollIntoView({ behavior: 'smooth' });
-    }
   };
 
   return (
@@ -39,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={[
@@ -64,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"
@@ -98,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", onClick: () => handleServiceSelect("Coupe & Coiffage") }
+          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", onClick: () => handleServiceSelect("La Barbe Traditionnelle") }
+          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", onClick: () => handleServiceSelect("Le Rituel Mondial") }
+          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"
@@ -135,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>
 
@@ -172,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."
     />