Update src/app/contact/page.tsx

src/app/contact/page.tsx

@@ -1,49 +1,43 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import Link from "next/link";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
-import ContactCTA from "@/components/sections/contact/ContactCTA";
-import MetricCardFourteen from "@/components/sections/metrics/MetricCardFourteen";
-import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import { Mail, Package, Quote } from "lucide-react";
+import { MapPin, Phone, Clock, DollarSign } from "lucide-react";
 
 export default function ContactPage() {
   const navItems = [
-    { name: "Accueil", id: "home" },
-    { name: "Le Restaurant", id: "about" },
-    { name: "Menu", id: "menu" },
-    { name: "Galerie", id: "gallery" },
-    { name: "Contact", id: "contact" },
+    { name: "Accueil", id: "/" },
+    { name: "Le Restaurant", id: "/le-restaurant" },
+    { name: "Réservation", id: "/reservation" },
+    { name: "Contact", id: "/contact" },
+    { name: "Menu", id: "/#menu" },
+    { name: "Galerie", id: "/#gallery" }
   ];
 
   const footerColumns = [
     {
-      title: "Navigation",
-      items: [
+      title: "Navigation",      items: [
         { label: "Accueil", href: "/" },
-        { label: "À Propos", href: "/" },
-        { label: "Menu", href: "/" },
-        { label: "Galerie", href: "/" },
-      ],
+        { label: "À Propos", href: "/le-restaurant" },
+        { label: "Réservation", href: "/reservation" },
+        { label: "Contact", href: "/contact" }
+      ]
     },
     {
-      title: "Contact",
-      items: [
+      title: "Contact",      items: [
         { label: "23 Rue de l'Eminee, 63000 Clermont-Ferrand", href: "#" },
         { label: "04 73 44 22 22", href: "tel:+33473442222" },
-        { label: "Réserver une Table", href: "/contact" },
-      ],
+        { label: "Réserver une Table", href: "/reservation" }
+      ]
     },
     {
-      title: "Horaires",
-      items: [
+      title: "Horaires",      items: [
         { label: "Mardi-Dimanche : 12h00-14h30", href: "#" },
         { label: "19h00-22h30", href: "#" },
-        { label: "Fermé le lundi", href: "#" },
-      ],
-    },
+        { label: "Fermé le lundi", href: "#" }
+      ]
+    }
   ];
 
   return (
@@ -53,7 +47,7 @@ export default function ContactPage() {
       borderRadius="soft"
       contentWidth="compact"
       sizing="largeSmallSizeMediumTitles"
-      background="aurora"
+      background="circleGradient"
       cardStyle="glass-depth"
       primaryButtonStyle="gradient"
       secondaryButtonStyle="layered"
@@ -63,142 +57,104 @@ export default function ContactPage() {
         <NavbarStyleCentered
           navItems={navItems}
           button={{
-            text: "Réserver une table",
-            href: "/contact",
+            text: "Réserver une table",            onClick: () => window.location.href = "/reservation"
           }}
           brandName="Caffè Mazzo"
         />
       </div>
 
-      <div id="location-hours" data-section="location-hours">
-        <MetricCardFourteen
-          title="Caffè Mazzo : Au cœur de Clermont-Ferrand, votre adresse gastronomique incontournable"
-          tag="Infos Pratiques"
-          tagAnimation="slide-up"
-          metrics={[
-            {
-              id: "1",
-              value: "23 Rue de l'Eminee",
-              description:
-                "Clermont-Ferrand, 63000 - Localisation idéale entre tradition et modernité",
-            },
-            {
-              id: "2",
-              value: "04 73 44 22 22",
-              description:
-                "Joignez-nous pour réserver votre table ou poser vos questions",
-            },
-            {
-              id: "3",
-              value: "30-40 €",
-              description:
-                "Prix moyen par personne pour une expérience gastronomique authentique",
-            },
-            {
-              id: "4",
-              value: "Fermé le lundi",
-              description: "Mardi-dimanche : 12h00-14h30 et 19h00-22h30",
-            },
-          ]}
-          metricsAnimation="slide-up"
-          useInvertedBackground={false}
-        />
-      </div>
+      <div className="min-h-screen py-20 px-4">
+        <div className="max-w-4xl mx-auto">
+          <div className="text-center mb-16">
+            <h1 className="text-4xl md:text-5xl font-bold mb-4">Nous Contacter</h1>
+            <p className="text-lg text-foreground/80">Trouvez Caffè Mazzo et venez nous rencontrer</p>
+          </div>
 
-      <div id="testimonials" data-section="testimonials">
-        <TestimonialCardTwo
-          title="Avis de Nos Clients"
-          description="Découvrez ce que nos visiteurs pensent de Caffè Mazzo"
-          tag="Témoignages"
-          testimonials={[
-            {
-              id: "1",
-              name: "Marie Rousseau",
-              role: "Chef d'entreprise",
-              testimonial:
-                "Une soirée magique en amoureux. Les plats sont savoureux, l'ambiance chaleureuse et le service impeccable. Je reviens dès que possible !",
-              imageSrc:
-                "http://img.b2bpic.net/free-photo/cheerful-good-looking-young-tanned-woman-lean-terrace-gazing-happily_197531-22852.jpg?_wi=3",
-              imageAlt: "Marie Rousseau",
-            },
-            {
-              id: "2",
-              name: "Thomas Bernard",
-              role: "Food Blogger",
-              testimonial:
-                "Le risotto de foie gras est absolument divin. Authentic Italian cuisine with a French touch. Un incontournable de Clermont-Ferrand !",
-              imageSrc:
-                "http://img.b2bpic.net/free-photo/emotional-young-male-with-blue-shirt-standing-gate-with-slight-smile-his-face_181624-33508.jpg?_wi=3",
-              imageAlt: "Thomas Bernard",
-            },
-            {
-              id: "3",
-              name: "Sophie Dupont",
-              role: "Architecte",
-              testimonial:
-                "Parfait pour un repas en famille. Les enfants ont adoré les pâtes, les adultes ont apprécié la finesse des saveurs. Restaurant à recommander !",
-              imageSrc:
-                "http://img.b2bpic.net/free-photo/young-lady-propping-chin-hand_176474-94561.jpg?_wi=3",
-              imageAlt: "Sophie Dupont",
-            },
-            {
-              id: "4",
-              name: "Luc Moreau",
-              role: "Consultant",
-              testimonial:
-                "L'atmosphère est élégante sans être prétentieuse. La qualité des ingrédients se sent dans chaque assiette. Bravo à l'équipe !",
-              imageSrc:
-                "http://img.b2bpic.net/free-photo/portrait-cheerful-guy-classic-black-shirt-with-arms-crossed_146671-13946.jpg?_wi=3",
-              imageAlt: "Luc Moreau",
-            },
-            {
-              id: "5",
-              name: "Isabelle Lacroix",
-              role: "Éducatrice",
-              testimonial:
-                "Nous avons célébré notre anniversaire ici. Marco et Sofia ont rendu cette soirée inoubliable avec leur accueil chaleureux.",
-              imageSrc:
-                "http://img.b2bpic.net/free-photo/portrait-woman_1098-12705.jpg?_wi=3",
-              imageAlt: "Isabelle Lacroix",
-            },
-            {
-              id: "6",
-              name: "Julien Petit",
-              role: "Musicien",
-              testimonial:
-                "Un havre de paix gastronomique. Chaque détail est pensé avec soin, du design de la table à la présentation des plats.",
-              imageSrc:
-                "http://img.b2bpic.net/free-photo/handsome-young-male-walking-street_158595-4695.jpg?_wi=3",
-              imageAlt: "Julien Petit",
-            },
-          ]}
-          textboxLayout="default"
-          useInvertedBackground={false}
-          animationType="slide-up"
-        />
-      </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
+            {/* Address */}
+            <div className="bg-card rounded-lg p-8 shadow-lg">
+              <div className="flex items-start gap-4 mb-6">
+                <MapPin className="w-8 h-8 text-primary-cta flex-shrink-0 mt-1" />
+                <div>
+                  <h2 className="text-2xl font-semibold mb-2">Adresse</h2>
+                  <p className="text-foreground/80 font-medium">23 Rue de l'Eminee</p>
+                  <p className="text-foreground/80">63000 Clermont-Ferrand, France</p>
+                </div>
+              </div>
+            </div>
 
-      <div id="reservation-cta" data-section="reservation-cta">
-        <ContactCTA
-          tag="Prêt à Déguster ?"
-          tagIcon={Mail}
-          title="Réservez Votre Table Dès Maintenant"
-          description="Vivez une expérience gastronomique inoubliable au cœur de Clermont-Ferrand. Notre équipe vous accueille chaleureusement du mardi au dimanche."
-          buttons={[
-            {
-              text: "Réserver une Table",
-              href: "/contact",
-            },
-            {
-              text: "Voir le Menu Complet",
-              href: "/",
-            },
-          ]}
-          background={{
-            variant: "plain",
-          }}
-          useInvertedBackground={false}
-        />
+            {/* Phone */}
+            <div className="bg-card rounded-lg p-8 shadow-lg">
+              <div className="flex items-start gap-4 mb-6">
+                <Phone className="w-8 h-8 text-primary-cta flex-shrink-0 mt-1" />
+                <div>
+                  <h2 className="text-2xl font-semibold mb-2">Téléphone</h2>
+                  <a href="tel:+33473442222" className="text-foreground/80 hover:text-primary-cta transition-colors font-medium">
+                    04 73 44 22 22
+                  </a>
+                  <p className="text-sm text-foreground/60 mt-1">Appelez-nous pour réserver ou pour toute question</p>
+                </div>
+              </div>
+            </div>
+
+            {/* Opening Hours */}
+            <div className="bg-card rounded-lg p-8 shadow-lg">
+              <div className="flex items-start gap-4 mb-6">
+                <Clock className="w-8 h-8 text-primary-cta flex-shrink-0 mt-1" />
+                <div>
+                  <h2 className="text-2xl font-semibold mb-2">Horaires</h2>
+                  <div className="text-foreground/80 space-y-1">
+                    <p><span className="font-medium">Mardi - Dimanche :</span></p>
+                    <p>Midi : 12h00 - 14h30</p>
+                    <p>Soir : 19h00 - 22h30</p>
+                    <p className="text-red-500 font-medium mt-2">Fermé le lundi</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Average Price */}
+            <div className="bg-card rounded-lg p-8 shadow-lg">
+              <div className="flex items-start gap-4 mb-6">
+                <DollarSign className="w-8 h-8 text-primary-cta flex-shrink-0 mt-1" />
+                <div>
+                  <h2 className="text-2xl font-semibold mb-2">Budget Moyen</h2>
+                  <p className="text-foreground/80 font-medium">30 - 40 € par personne</p>
+                  <p className="text-sm text-foreground/60 mt-1">Repas complet avec boissons non incluses</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Google Maps Integration */}
+          <div className="mb-12">
+            <h2 className="text-2xl font-semibold mb-6">Localisation</h2>
+            <div className="w-full h-96 rounded-lg overflow-hidden shadow-lg">
+              <iframe
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2815.1234567890123!2d3.087775!3d45.771959!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47f71a1b1b1b1b1b%3A0x1b1b1b1b1b1b1b1b!2s23%20Rue%20de%20l'Eminee%2C%2063000%20Clermont-Ferrand!5e0!3m2!1sfr!2sfr!4v1234567890"
+                width="100%"
+                height="100%"
+                style={{ border: 0 }}
+                allowFullScreen={true}
+                loading="lazy"
+                referrerPolicy="no-referrer-when-downgrade"
+                title="Localisation Caffè Mazzo"
+              />
+            </div>
+          </div>
+
+          {/* CTA to Reservation */}
+          <div className="bg-gradient-to-r from-primary-cta to-primary-cta/80 rounded-lg p-8 text-center">
+            <h2 className="text-2xl font-semibold mb-4 text-background">Prêt à nous visiter ?</h2>
+            <p className="text-background/90 mb-6">Réservez votre table et vivez une expérience culinaire inoubliable</p>
+            <button
+              onClick={() => window.location.href = "/reservation"}
+              className="bg-background hover:bg-background/90 text-primary-cta font-semibold py-3 px-8 rounded-lg transition-colors duration-200"
+            >
+              Réserver une Table
+            </button>
+          </div>
+        </div>
       </div>
 
       <div id="footer" data-section="footer">
@@ -210,4 +166,4 @@ export default function ContactPage() {
       </div>
     </ThemeProvider>
   );
-}
+}