src/app/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { useState } from "react";
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FaqDouble from '@/components/sections/faq/FaqDouble';
 import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
@@ -11,9 +12,12 @@ import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
 import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
-import { Coffee } from "lucide-react";
+import { Coffee, Calendar, Clock } from "lucide-react";
 
 export default function LandingPage() {
+  const [selectedDate, setSelectedDate] = useState<string>("");
+  const [selectedTime, setSelectedTime] = useState<string>("");
+
   const scrollToSection = (id: string) => {
     const element = document.getElementById(id);
     if (element) {
@@ -21,6 +25,14 @@ export default function LandingPage() {
     }
   };
 
+  const handleBooking = () => {
+    if (!selectedDate || !selectedTime) {
+      alert("Veuillez sélectionner une date et un créneau horaire.");
+      return;
+    }
+    alert(`Réservation confirmée pour le ${selectedDate} à ${selectedTime} !`);
+  };
+
   return (
     <ThemeProvider
         defaultButtonVariant="hover-magnetic"
@@ -161,14 +173,27 @@ export default function LandingPage() {
       </div>
 
       <div id="contact" data-section="contact">
-          <ContactCTA
-          useInvertedBackground={false}
-          background={{ variant: "sparkles-gradient" }}
-          tag="Réservations"
-          title="Système de Réservation"
-          description="Sélectionnez votre créneau et le nombre de convives ci-dessous pour confirmer votre venue."
-          buttons={[{ text: "Confirmer ma réservation", onClick: () => alert("Réservation confirmée !") }]}
-        />
+        <div className="bg-card p-8 rounded-xl shadow-lg border border-border max-w-2xl mx-auto my-12">
+          <h2 className="text-3xl font-bold mb-6">Réservation</h2>
+          <div className="space-y-4">
+            <div>
+              <label className="flex items-center gap-2 mb-2 font-medium"><Calendar size={18} /> Date souhaitée</label>
+              <input type="date" className="w-full p-3 rounded-lg bg-background border border-border" onChange={(e) => setSelectedDate(e.target.value)} />
+            </div>
+            <div>
+              <label className="flex items-center gap-2 mb-2 font-medium"><Clock size={18} /> Créneau horaire</label>
+              <select className="w-full p-3 rounded-lg bg-background border border-border" onChange={(e) => setSelectedTime(e.target.value)}>
+                <option value="">Choisir un créneau</option>
+                <option value="14:00">14:00</option>
+                <option value="15:30">15:30</option>
+                <option value="17:00">17:00</option>
+              </select>
+            </div>
+            <button onClick={handleBooking} className="w-full bg-primary-cta text-white py-3 rounded-lg font-bold hover:opacity-90 transition-opacity">
+              Confirmer la réservation
+            </button>
+          </div>
+        </div>
       </div>
 
       <div id="footer" data-section="footer">