From da05727e250c7423d91ed602af066eee264402e0 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 9 Mar 2026 14:22:09 +0000
Subject: [PATCH 1/8] Update src/app/contact/page.tsx

---
 src/app/contact/page.tsx | 268 ++++++++++++++++-----------------------
 1 file changed, 112 insertions(+), 156 deletions(-)

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 5c0ec74..06a90f3 100644
--- a/src/app/contact/page.tsx
+++ b/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>
   );
-}
\ No newline at end of file
+}
-- 
2.49.1


From b4a18f0102f6139b0c62663fc12e3db900f7531e Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 9 Mar 2026 14:22:09 +0000
Subject: [PATCH 2/8] Add src/app/gallery/page.tsx

---
 src/app/gallery/page.tsx | 195 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 195 insertions(+)
 create mode 100644 src/app/gallery/page.tsx

diff --git a/src/app/gallery/page.tsx b/src/app/gallery/page.tsx
new file mode 100644
index 0000000..c71947b
--- /dev/null
+++ b/src/app/gallery/page.tsx
@@ -0,0 +1,195 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import HeroSplit from "@/components/sections/hero/HeroSplit";
+import ProductCardOne from "@/components/sections/product/ProductCardOne";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import { Sparkles, ChefHat } from "lucide-react";
+
+export default function GalleryPage() {
+  const navItems = [
+    { name: "Accueil", id: "home" },
+    { name: "Le Restaurant", id: "/le-restaurant" },
+    { name: "Menu", id: "menu" },
+    { name: "Galerie", id: "/gallery" },
+    { name: "Contact", id: "contact" }
+  ];
+
+  const handleNavClick = (id: string) => {
+    if (id === "home") {
+      window.location.href = "/";
+    } else if (id === "/le-restaurant") {
+      window.location.href = "/le-restaurant";
+    } else if (id === "/gallery") {
+      window.location.href = "/gallery";
+    } else if (id === "menu" || id === "contact") {
+      const element = document.getElementById(id);
+      if (element) {
+        element.scrollIntoView({ behavior: "smooth" });
+      }
+    }
+  };
+
+  const footerColumns = [
+    {
+      title: "Navigation",      items: [
+        { label: "Accueil", href: "/" },
+        { label: "À Propos", href: "/le-restaurant" },
+        { label: "Galerie", href: "/gallery" },
+        { label: "Contact", href: "#contact" }
+      ]
+    },
+    {
+      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" }
+      ]
+    },
+    {
+      title: "Horaires",      items: [
+        { label: "Mardi-Dimanche : 12h00-14h30", href: "#" },
+        { label: "19h00-22h30", href: "#" },
+        { label: "Fermé le lundi", href: "#" }
+      ]
+    }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="background-highlight"
+      borderRadius="soft"
+      contentWidth="compact"
+      sizing="largeSmallSizeMediumTitles"
+      background="circleGradient"
+      cardStyle="glass-depth"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="layered"
+      headingFontWeight="medium"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={navItems}
+          button={{
+            text: "Réserver une table",            onClick: () => handleNavClick("contact")
+          }}
+          brandName="Caffè Mazzo"
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroSplit
+          title="Notre Galerie Visuelle"
+          description="Explorez l'univers gastronomique et l'ambiance unique de Caffè Mazzo à travers nos photographies. De nos créations culinaires à l'atmosphère chaleureuse de nos espaces, découvrez chaque détail qui fait notre singularité."
+          background={{ variant: "plain" }}
+          tag="Galerie"
+          tagIcon={Sparkles}
+          buttons={[
+            { text: "Réserver une table", href: "#contact" },
+            { text: "Découvrir le restaurant", href: "/le-restaurant" }
+          ]}
+          imageSrc="http://img.b2bpic.net/free-photo/top-view-delicious-salad-with-sliced-little-vegetables-inside-plate-dark-blue-desk_140725-50581.jpg"
+          imageAlt="Présentation gastronomique"
+          mediaAnimation="slide-up"
+          imagePosition="right"
+        />
+      </div>
+
+      <div id="dishes" data-section="dishes">
+        <ProductCardOne
+          title="Nos Créations Culinaires"
+          description="Découvrez la beauté et la raffinement de nos plats signature"
+          tag="Gastronomie"
+          textboxLayout="default"
+          useInvertedBackground={true}
+          animationType="scale-rotate"
+          gridVariant="bento-grid"
+          products={[
+            {
+              id: "1",              name: "Risotto de Foie Gras",              price: "Spécialité Maison",              imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-salad-with-sliced-little-vegetables-inside-plate-dark-blue-desk_140725-50581.jpg",              imageAlt: "Risotto de foie gras aux morilles"
+            },
+            {
+              id: "2",              name: "Ravioli de Ricotta",              price: "Classique Italien",              imageSrc: "http://img.b2bpic.net/free-photo/stuffed-beans-with-pork-salted-eggs-asian-cuisine_1150-23665.jpg",              imageAlt: "Ravioli maison à la ricotta"
+            },
+            {
+              id: "3",              name: "Gnocchi à la Truffe",              price: "Premium",              imageSrc: "http://img.b2bpic.net/free-photo/shrimp-salad-with-glass-white-wine_140725-4174.jpg",              imageAlt: "Gnocchi à la truffe"
+            },
+            {
+              id: "4",              name: "Pappardelle Bolognaise",              price: "Héritage Familial",              imageSrc: "http://img.b2bpic.net/free-photo/view-delicious-cuisine-dish_23-2149460211.jpg",              imageAlt: "Pappardelle bolognaise"
+            },
+            {
+              id: "5",              name: "Osso Buco",              price: "Viande de Prestige",              imageSrc: "http://img.b2bpic.net/free-photo/fried-meat-with-potato-onin-mixed-with-greens-mint-side-view_141793-2367.jpg",              imageAlt: "Osso Buco milanais"
+            },
+            {
+              id: "6",              name: "Tiramisu",              price: "Dessert Signature",              imageSrc: "http://img.b2bpic.net/free-photo/delicious-cake-glass-arrangement_23-2149030741.jpg",              imageAlt: "Tiramisu maison"
+            },
+            {
+              id: "7",              name: "Zabaglione",              price: "Douceur Italienne",              imageSrc: "http://img.b2bpic.net/free-photo/tasty-buns-lie-white-plates-with-golden-design_8353-798.jpg",              imageAlt: "Zabaglione au champagne"
+            },
+            {
+              id: "8",              name: "Panna Cotta",              price: "Raffinement",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-chocolate-cake_23-2149030655.jpg",              imageAlt: "Panna cotta à la fraise"
+            }
+          ]}
+        />
+      </div>
+
+      <div id="ambiance" data-section="ambiance">
+        <ProductCardOne
+          title="L'Ambiance de Caffè Mazzo"
+          description="Immergez-vous dans l'atmosphère chaleureuse et élégante de notre restaurant"
+          tag="Atmosphère"
+          textboxLayout="default"
+          useInvertedBackground={true}
+          animationType="scale-rotate"
+          gridVariant="bento-grid-inverted"
+          products={[
+            {
+              id: "1",              name: "Salle Principale",              price: "Intimité Chaleureuse",              imageSrc: "http://img.b2bpic.net/free-photo/glass-candlestick-with-silver-candle-other-decor-stuff-are-desk_8353-9850.jpg",              imageAlt: "Salle à manger illuminée"
+            },
+            {
+              id: "2",              name: "Terrasse d'Été",              price: "Ambiance Méditerranéenne",              imageSrc: "http://img.b2bpic.net/free-photo/best-friends-catching-up-cafe-diverse-young-women-drinking-coffee-eating-pastries-brunch-besties-talking-having-nice-conversation_662251-947.jpg",              imageAlt: "Terrasse extérieure"
+            },
+            {
+              id: "3",              name: "Cuisine Ouverte",              price: "À la Vue de Tous",              imageSrc: "http://img.b2bpic.net/free-photo/male-chef-kitchen-cooking-dish-frying-pan_23-2149646198.jpg",              imageAlt: "Cuisine ouverte en action"
+            },
+            {
+              id: "4",              name: "Bar à Vin",              price: "Dégustation Raffinée",              imageSrc: "http://img.b2bpic.net/free-photo/wine-bottles-showcase_23-2149646258.jpg",              imageAlt: "Sélection de vins"
+            },
+            {
+              id: "5",              name: "Détails Décor",              price: "Raffinement & Élégance",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-interior-design_23-2149646325.jpg",              imageAlt: "Détails de décoration"
+            },
+            {
+              id: "6",              name: "Mise en Place",              price: "Élégance & Sophistication",              imageSrc: "http://img.b2bpic.net/free-photo/table-setting-elegant_23-2149646412.jpg",              imageAlt: "Mise en place soignée"
+            }
+          ]}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCTA
+          tag="Prêt à Visiter Caffè Mazzo ?"
+          tagIcon={ChefHat}
+          title="Réservez Votre Table Dès Maintenant"
+          description="Vivez en personne la magie de Caffè Mazzo. Nos photos ne sont qu'un aperçu de l'expérience gastronomique qui vous attend."
+          buttons={[
+            { text: "Réserver une Table", href: "#" },
+            { text: "Découvrir le Restaurant", href: "/le-restaurant" }
+          ]}
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          logoText="Caffè Mazzo"
+          copyrightText="© 2025 Caffè Mazzo | Restaurant Gastronomique - Clermont-Ferrand"
+          columns={footerColumns}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
-- 
2.49.1


From 1a6d2fb18a86422934cb691a4bd84a82e6211274 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 9 Mar 2026 14:22:10 +0000
Subject: [PATCH 3/8] Update src/app/layout.tsx

---
 src/app/layout.tsx | 1435 +-------------------------------------------
 1 file changed, 17 insertions(+), 1418 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index edafcff..7bff894 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,1433 +1,33 @@
 import type { Metadata } from "next";
-import { Halant } from "next/font/google";
 import { Inter } from "next/font/google";
 import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
+import "./styles/variables.css";
+import "./styles/base.css";
 
-const halant = Halant({
-  variable: "--font-halant",
-  subsets: ["latin"],
-  weight: ["300", "400", "500", "600", "700"],
-});
-
-const inter = Inter({
-  variable: "--font-inter",
-  subsets: ["latin"],
-});
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Caffè Mazzo - Restaurant Italien Gastronomique à Clermont-Ferrand",
-  description: "Découvrez Caffè Mazzo, restaurant gastronomique italien à Clermont-Ferrand. Cuisine authentique, ambiance chaleureuse, réservation facile. Risotto, pâtes fraîches, desserts italiens.",
-  keywords: "restaurant italien, Clermont-Ferrand, gastronomie italienne, risotto, pâtes fraîches, restaurant semi-gastronomique, réservation table",
-  metadataBase: new URL("https://caffemazzo.com"),
-  alternates: {
-    canonical: "https://caffemazzo.com",
-  },
-  openGraph: {
-    title: "Caffè Mazzo - Cuisine Italienne Authentique",
-    description: "Une expérience gastronomique italienne au cœur de Clermont-Ferrand. Réservez votre table dès aujourd'hui.",
-    siteName: "Caffè Mazzo",
-    type: "website",
-    images: [
-      {
-        url: "http://img.b2bpic.net/free-photo/papaya-crevettes-salads-with-tomatoes-sea-food-with-fresh-prawns-cockles-with-spicy-sauce_114579-106.jpg",
-        alt: "risotto foie gras morilles luxury plating",
-      },
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",
-    title: "Caffè Mazzo - Restaurant Italien",
-    description: "Vivez l'expérience gastronomique italienne authentique à Clermont-Ferrand",
-    images: [
-      "http://img.b2bpic.net/free-photo/papaya-crevettes-salads-with-tomatoes-sea-food-with-fresh-prawns-cockles-with-spicy-sauce_114579-106.jpg",
-    ],
-  },
-  robots: {
-    index: true,
-    follow: true,
-  },
-};
+  title: "Caffè Mazzo - Restaurant Gastronomique",  description: "Découvrez Caffè Mazzo, un restaurant gastronomique italien authentique au cœur de Clermont-Ferrand."};
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <ServiceWrapper>
-        <body
-          className={`${halant.variable} ${inter.variable} antialiased`}
-        >
-          <Tag />
-          {children}
-        
+    <html lang="fr" suppressHydrationWarning>
+      <body className={inter.className}>
+        {children}
         <script
           dangerouslySetInnerHTML={{
             __html: `
-(function() {
-  if (window.self === window.top) return;
-
-  if (window.__webildEditorInitialized) return;
-  window.__webildEditorInitialized = true;
-
-  let isActive = false;
-  let hoveredElement = null;
-  let selectedElement = null;
-  let originalContent = null;
-  let isEditing = false;
-  let elementTypeLabel = null;
-  let hoverOverlay = null;
-  let scrollTimeout = null;
-  let isScrolling = false;
-
-  const invalidElements = ['html', 'body', 'script', 'style', 'meta', 'link', 'head', 'noscript', 'title'];
-  const hoverClass = 'webild-hover';
-  const selectedClass = 'webild-selected';
-
-  const style = document.createElement('style');
-  style.id = 'webild-inspector-styles';
-  style.textContent = '' +
-    '.webild-hover {' +
-    '  outline: 2px dashed #4d96ff80 !important;' +
-    '  border-radius: 0 !important;' +
-    '  outline-offset: 2px !important;' +
-    '  cursor: pointer !important;' +
-    '  transition: outline 0.15s ease !important;' +
-    '  background-color: #4d96ff05 !important;' +
-    '}' +
-    '.webild-selected {' +
-    '  outline: 2px solid #4d96ff !important;' +
-    '  outline-offset: 2px !important;' +
-    '  transition: outline 0.15s ease !important;' +
-    '  background-color: #4d96ff05 !important;' +
-    '  border-radius: 0 !important;' +
-    '}' +
-    '[contenteditable="true"].webild-selected {' +
-    '  outline: 2px solid #4d96ff !important;' +
-    '  background-color: #4d96ff05 !important;' +
-    '}' +
-    'img.webild-hover,' +
-    'img.webild-selected,' +
-    'video.webild-hover,' +
-    'video.webild-selected {' +
-    '  outline-offset: 2px !important;' +
-    '}' +
-    '.webild-element-type-label {' +
-    '  position: fixed !important;' +
-    '  z-index: 999999 !important;' +
-    '  background: #4d96ff !important;' +
-    '  color: white !important;' +
-    '  padding: 4px 8px !important;' +
-    '  font-size: 11px !important;' +
-    '  font-weight: 600 !important;' +
-    '  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;' +
-    '  pointer-events: none !important;' +
-    '  white-space: nowrap !important;' +
-    '  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;' +
-    '  letter-spacing: 0.3px !important;' +
-    '  border: 1px solid #4d96ff20 !important;' +
-    '}' +
-    '.webild-element-type-label.label-top {' +
-    '  border-radius: 6px 6px 0 0 !important;' +
-    '}' +
-    '.webild-element-type-label.label-bottom {' +
-    '  border-radius: 0 0 6px 6px !important;' +
-    '}' +
-    '.webild-hover-overlay {' +
-    '  position: fixed !important;' +
-    '  background-color: #4d96ff15 !important;' +
-    '  pointer-events: none !important;' +
-    '  z-index: 999998 !important;' +
-    '  transition: all 0.15s ease !important;' +
-    '}';
-  document.head.appendChild(style);
-  
-  const getUniqueSelector = (element, assignId = false) => {
-    if (element.dataset && element.dataset.webildSelector) {
-      return element.dataset.webildSelector;
-    }
-    
-    const existingId = element.getAttribute('data-webild-id');
-    if (existingId) {
-      return '[data-webild-id="' + existingId + '"]';
-    }
-    
-    if (assignId) {
-      const uniqueId = 'webild-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
-      element.setAttribute('data-webild-id', uniqueId);
-      return '[data-webild-id="' + uniqueId + '"]';
-    }
-    
-    return null;
-  };
-  
-  const getSectionId = (element) => {
-    let current = element;
-    while (current && current !== document.body) {
-      const sectionId = current.getAttribute('data-section');
-      if (sectionId) {
-        return sectionId;
-      }
-      current = current.parentElement;
-    }
-    return 'hero';
-  };
-  
-  const getElementType = (element) => {
-  const tagName = element.tagName.toLowerCase();
-  const computedStyle = window.getComputedStyle(element);
-
-  if (tagName === 'img') {
-    return 'Image';
-  }
-
-  if (tagName === 'video') {
-    return 'Video';
-  }
-
-  const backgroundImage = computedStyle.backgroundImage;
-  if (backgroundImage && backgroundImage !== 'none') {
-    const urlMatch = backgroundImage.match(/url(['"]?([^'")]+)['"]?)/);
-    if (urlMatch && urlMatch[1] && !urlMatch[1].includes('gradient')) {
-      const area = element.offsetWidth * element.offsetHeight;
-      const hasReasonableSize = area > 1000;
-      const hasFewChildren = element.children.length <= 2;
-      
-      if (hasReasonableSize && hasFewChildren) {
-        return 'Image';
-      }
-    }
-  }
-
-    if (tagName === 'button') return 'Button';
-    if (tagName === 'a' && element.getAttribute('href')) return 'Button';
-    if (element.getAttribute('role') === 'button') return 'Button';
-
-    const buttonClasses = ['btn', 'button', 'cta', 'action-button'];
-    const hasButtonClass = buttonClasses.some(cls =>
-      element.classList.contains(cls) || element.classList.contains(\`btn-\${cls}\`)
-    );
-
-    if (hasButtonClass && element.textContent && element.textContent.trim().length > 0) {
-      return 'Button';
-    }
-
-    const textTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'label', 'li'];
-    if (textTags.includes(tagName)) {
-      return 'Text';
-    }
-
-    if (tagName === 'div') {
-      const hasDirectText = Array.from(element.childNodes).some(node => 
-        node.nodeType === Node.TEXT_NODE && node.textContent && node.textContent.trim().length > 0
-      );
-      
-      if (hasDirectText && !element.querySelector('div, section, article, main, header, footer')) {
-        return 'Text';
-      }
-      
-      return 'Div';
-    }
-
-    if (tagName === 'article') {
-      return 'Article';
-    }
-
-    if (tagName === 'a' && !element.getAttribute('href')) {
-      return 'Text';
-    }
-
-    return 'Section';
-  };
-
-  const extractOriginalUrl = (url) => {
-    if (!url) return url;
-
-    if (url.includes('/_next/')) {
-      try {
-        const urlObj = new URL(url);
-        const originalPath = urlObj.searchParams.get('url');
-        if (originalPath) {
-          return originalPath;
-        }
-      } catch (e) {
-        return url;
-      }
-    }
-    
-    if (url.includes('.webild.io/')) {
-      try {
-        const urlObj = new URL(url);
-        return urlObj.pathname;
-      } catch (e) {
-        return url;
-      }
-    }
-
-    return url;
-  };
-
-  const getMediaTypeFromUrl = (url) => {
-    const videoExts = ['.mp4', '.webm', '.ogg', '.mov', '.avi', '.mkv', '.m4v', '.wmv'];
-    const imageExts = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg', '.bmp', '.ico', '.tiff', '.avif'];
-    try {
-      const pathname = new URL(url).pathname.toLowerCase();
-      if (videoExts.some(function(ext) { return pathname.endsWith(ext); })) return 'video';
-      if (imageExts.some(function(ext) { return pathname.endsWith(ext); })) return 'image';
-    } catch(e) {}
-    return 'unknown';
-  };
-
-  const swapMediaElement = (oldEl, newTag, newSrc) => {
-    const newEl = document.createElement(newTag);
-    Array.from(oldEl.attributes).forEach(function(attr) {
-      if (attr.name !== 'src' && attr.name !== 'alt' && attr.name !== 'srcset' && attr.name !== 'autoplay' && attr.name !== 'loop' && attr.name !== 'muted' && attr.name !== 'playsinline') {
-        try { newEl.setAttribute(attr.name, attr.value); } catch(e) {}
-      }
-    });
-    newEl.style.cssText = oldEl.style.cssText;
-    if (newTag === 'video') {
-      newEl.setAttribute('autoplay', '');
-      newEl.setAttribute('loop', '');
-      newEl.setAttribute('muted', '');
-      newEl.setAttribute('playsinline', '');
-    }
-    newEl.src = newSrc;
-    if (oldEl.parentNode) {
-      oldEl.parentNode.replaceChild(newEl, oldEl);
-    }
-    return newEl;
-  };
-
-  const getElementInfo = (element, assignId = false) => {
-    const rect = element.getBoundingClientRect();
-    const tagName = element.tagName.toLowerCase();
-    const selector = getUniqueSelector(element, assignId);
-    const sectionId = getSectionId(element);
-    
-    let className = undefined;
-    try {
-      if (element.className) {
-        if (typeof element.className === 'string') {
-          className = element.className;
-        } else if (element.className.baseVal !== undefined) {
-          className = element.className.baseVal;
-        }
-      }
-    } catch (e) {}
-    
-    const info = {
-      tagName: tagName,
-      id: element.id || undefined,
-      className: className,
-      selector: selector,
-      elementType: null,
-      sectionId: sectionId,
-      boundingBox: {
-        x: rect.left,
-        y: rect.top,
-        width: rect.width,
-        height: rect.height
-      }
-    };
-    
-    if (tagName === 'img') {
-      const originalSrc = extractOriginalUrl(element.src);
-      info.imageData = {
-        src: originalSrc,
-        alt: element.alt || undefined,
-        naturalWidth: element.naturalWidth,
-        naturalHeight: element.naturalHeight,
-        isBackground: false
-      };
-    }
-
-    if (tagName === 'video') {
-      const rawSrc = element.src || element.currentSrc || (element.querySelector('source') && element.querySelector('source').src) || '';
-      const resolvedSrc = extractOriginalUrl(rawSrc);
-      info.imageData = {
-        src: resolvedSrc,
-        alt: element.getAttribute('aria-label') || undefined,
-        isBackground: false,
-        isVideo: true
-      };
-    }
-
-    const computedStyle = window.getComputedStyle(element);
-    const backgroundImage = computedStyle.backgroundImage;
-    if (backgroundImage && backgroundImage !== 'none') {
-      const urlMatch = backgroundImage.match(/url(['"]?([^'")]+)['"]?)/);
-      if (urlMatch) {
-        const originalBgSrc = extractOriginalUrl(urlMatch[1]);
-        if (tagName !== 'img') {
-          info.imageData = {
-            src: originalBgSrc,
-            isBackground: true
-          };
-        } else {
-          if (!info.imageData) info.imageData = {};
-          info.imageData.backgroundImageSrc = originalBgSrc;
-        }
-      }
-    }
-    
-    const elementType = getElementType(element);
-    info.elementType = elementType;
-    
-    if (elementType === 'Button') {
-      const buttonText = element.textContent?.trim() || element.value || element.getAttribute('aria-label') || '';
-      const buttonHref = element.getAttribute('href') ||
-                        element.getAttribute('data-href') ||
-                        element.getAttribute('onclick') ||
-                        element.dataset?.link ||
-                        undefined;
-
-      info.buttonData = {
-        text: buttonText,
-        href: buttonHref
-      };
-    }
-
-    if (elementType === 'Text') {
-      info.textContent = element.textContent || '';
-    }
-    
-    return info;
-  };
-  
-  const isValidElement = (element) => {
-    if (!isActive) return false;
-    const tagName = element.tagName?.toLowerCase();
-    if (invalidElements.includes(tagName)) return false;
-    const isImage = tagName === 'img';
-    const isVideo = tagName === 'video';
-    if (isImage || isVideo) return true;
-    const hasInnerHTML = element.innerHTML && element.innerHTML.trim().length > 0;
-    const hasTextContent = element.textContent && element.textContent.trim().length > 0;
-    const hasChildren = element.children && element.children.length > 0;
-    if (!hasInnerHTML && !hasTextContent && !hasChildren) {
-      return false;
-    }
-    const hasBackgroundImage = window.getComputedStyle(element).backgroundImage !== 'none';
-    if (hasBackgroundImage && !hasChildren && !hasTextContent) {
-      return false;
-    }
-    
-    return true;
-  };
-
-  const getMostSpecificElement = (x, y) => {
-    const elements = document.elementsFromPoint(x, y);
-    const validElements = elements.filter(el =>
-      isValidElement(el) &&
-      !el.classList.contains('webild-hover-overlay') &&
-      !el.classList.contains('webild-element-type-label')
-    );
-
-    if (validElements.length === 0) return null;
-    const scoredElements = validElements.map(element => {
-      let score = 0;
-      const rect = element.getBoundingClientRect();
-      const tagName = element.tagName.toLowerCase();
-      const computedStyle = window.getComputedStyle(element);
-      let depth = 0;
-      let current = element;
-      while (current && current !== document.body) {
-        depth++;
-        current = current.parentElement;
-      }
-      score += depth * 2;
-      const hasDirectText = Array.from(element.childNodes).some(node => 
-        node.nodeType === Node.TEXT_NODE && node.textContent && node.textContent.trim().length > 0
-      );
-
-      const hasImages = element.tagName === 'IMG' || element.tagName === 'VIDEO' || computedStyle.backgroundImage !== 'none' || element.querySelector('img') || element.querySelector('video');
-      const isInteractive = ['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(element.tagName);
-      const hasFewChildren = element.children.length <= 3;
-      const area = rect.width * rect.height;
-      const viewportArea = window.innerWidth * window.innerHeight;
-      const isSmallElement = area < viewportArea * 0.1;
-      if (hasDirectText) score += 20;
-      if (hasImages) score += 15;
-      if (isInteractive) score += 25;
-      if (hasFewChildren) score += 10;
-      if (isSmallElement) score += 5;
-      if (area > viewportArea * 0.3) score -= 30;
-      if (element.hasAttribute('data-section')) score -= 15;
-      if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(tagName)) score += 20;
-      if (['p', 'span', 'label'].includes(tagName)) score += 15;
-      if (tagName === 'div' && !hasDirectText && element.children.length > 2) score -= 10;
-
-      return { element, score };
-    });
-    scoredElements.sort((a, b) => b.score - a.score);
-    return scoredElements[0]?.element || validElements[0];
-  };
-
-  const isTextElement = (element) => {
-    const elementType = getElementType(element);
-    return elementType === 'Text';
-  };
-
-  const isButtonElement = (element) => {
-    const elementType = getElementType(element);
-    return elementType === 'Button';
-  };
-
-  const updateButtonText = (element, newText) => {
-    const textNodes = [];
-    const walker = document.createTreeWalker(
-      element,
-      NodeFilter.SHOW_TEXT,
-      null
-    );
-
-    let node;
-    while (node = walker.nextNode()) {
-      if (node.textContent && node.textContent.trim()) {
-        textNodes.push(node);
-      }
-    }
-
-    if (textNodes.length > 0) {
-      textNodes[0].textContent = newText;
-      for (let i = 1; i < textNodes.length; i++) {
-        textNodes[i].textContent = '';
-      }
-    } else {
-      element.textContent = newText;
-    }
-  };
-
-  const makeEditable = (element, clickEvent) => {
-    if (!isTextElement(element)) return;
-    
-    originalContent = element.textContent;
-    element.contentEditable = 'true';
-    
-    if (!element.dataset.webildOriginalWhiteSpace) {
-      const computedStyle = window.getComputedStyle(element);
-      element.dataset.webildOriginalWhiteSpace = computedStyle.whiteSpace;
-      element.dataset.webildOriginalWordWrap = computedStyle.wordWrap;
-      element.dataset.webildOriginalOverflowWrap = computedStyle.overflowWrap;
-      element.dataset.webildOriginalOverflow = computedStyle.overflow;
-    }
-    
-    element.style.whiteSpace = 'pre-wrap';
-    element.style.wordWrap = 'break-word';
-    element.style.overflowWrap = 'break-word';
-    element.style.overflow = 'visible';
-    
-    element.focus();
-    isEditing = true;
-    
-    window.parent.postMessage({
-      type: 'webild-text-editing-started',
-      data: { selector: getElementInfo(element).selector }
-    }, '*');
-    
-    const handleBeforeInput = (e) => {
-      // Prevent deletion if it would leave the element empty
-      const currentText = element.textContent || '';
-      const inputType = e.inputType;
-      
-      // Check if this is a delete operation that would leave the element empty
-      if ((inputType === 'deleteContentBackward' || inputType === 'deleteContentForward' || inputType === 'deleteByCut') && currentText.length <= 1) {
-        e.preventDefault();
-        element.textContent = ' ';
-        // Move cursor to the beginning
-        const range = document.createRange();
-        const sel = window.getSelection();
-        range.setStart(element.firstChild || element, 0);
-        range.collapse(true);
-        sel.removeAllRanges();
-        sel.addRange(range);
-      }
-    };
-    
-    const handleInput = () => {
-      const elementInfo = getElementInfo(element);
-      let currentText = element.textContent;
-      
-      // Ensure there's always at least a space to keep the element editable
-      if (currentText === '' || currentText === null || currentText.length === 0) {
-        element.textContent = ' ';
-        currentText = ' ';
-        // Move cursor to the beginning
-        try {
-          const range = document.createRange();
-          const sel = window.getSelection();
-          range.setStart(element.firstChild || element, 0);
-          range.collapse(true);
-          sel.removeAllRanges();
-          sel.addRange(range);
-        } catch (e) {
-          // Ignore cursor positioning errors
-        }
-      }
-
-      window.parent.postMessage({
-        type: 'webild-element-changed',
-        data: {
-          type: 'updateText',
-          selector: elementInfo.selector,
-          oldValue: originalContent,
-          newValue: currentText,
-          elementType: elementInfo.elementType,
-          sectionId: elementInfo.sectionId,
-          timestamp: Date.now()
-        }
-      }, '*');
-      
-      if (currentText !== originalContent) {
-        window.parent.postMessage({
-          type: 'webild-text-changed',
-          data: { 
-            selector: elementInfo.selector,
-            hasChanges: true
-          }
-        }, '*');
-      }
-    };
-    
-    element.addEventListener('beforeinput', handleBeforeInput);
-    element.addEventListener('input', handleInput);
-    element.dataset.inputHandler = 'true';
-    element.dataset.beforeInputHandler = 'true';
-    
-    if (clickEvent && element.childNodes.length > 0) {
-      try {
-        let range = null;
-        
-        if (document.caretRangeFromPoint) {
-          range = document.caretRangeFromPoint(clickEvent.clientX, clickEvent.clientY);
-        } else if (document.caretPositionFromPoint) {
-          const position = document.caretPositionFromPoint(clickEvent.clientX, clickEvent.clientY);
-          if (position) {
-            range = document.createRange();
-            range.setStart(position.offsetNode, position.offset);
-            range.collapse(true);
-          }
-        }
-        
-        if (range) {
-          const selection = window.getSelection();
-          selection.removeAllRanges();
-          selection.addRange(range);
-        }
-      } catch (e) {
-        console.warn('[Webild] Could not set caret position:', e);
-      }
-    }
-  };
-  
-  const makeUneditable = (element, save = false) => {
-    if (!element || element.contentEditable !== 'true') return;
-    
-    element.contentEditable = 'false';
-    isEditing = false;
-    
-    if (element.dataset.webildOriginalWhiteSpace) {
-      element.style.whiteSpace = element.dataset.webildOriginalWhiteSpace === 'normal' ? '' : element.dataset.webildOriginalWhiteSpace;
-      delete element.dataset.webildOriginalWhiteSpace;
-    }
-    if (element.dataset.webildOriginalWordWrap) {
-      element.style.wordWrap = element.dataset.webildOriginalWordWrap === 'normal' ? '' : element.dataset.webildOriginalWordWrap;
-      delete element.dataset.webildOriginalWordWrap;
-    }
-    if (element.dataset.webildOriginalOverflowWrap) {
-      element.style.overflowWrap = element.dataset.webildOriginalOverflowWrap === 'normal' ? '' : element.dataset.webildOriginalOverflowWrap;
-      delete element.dataset.webildOriginalOverflowWrap;
-    }
-    if (element.dataset.webildOriginalOverflow) {
-      element.style.overflow = element.dataset.webildOriginalOverflow === 'visible' ? '' : element.dataset.webildOriginalOverflow;
-      delete element.dataset.webildOriginalOverflow;
-    }
-    
-    if (element.dataset.beforeInputHandler === 'true') {
-      element.removeEventListener('beforeinput', () => {});
-      delete element.dataset.beforeInputHandler;
-    }
-    
-    if (element.dataset.inputHandler === 'true') {
-      element.removeEventListener('input', () => {});
-      delete element.dataset.inputHandler;
-    }
-    
-    window.parent.postMessage({
-      type: 'webild-text-editing-ended',
-      data: { selector: getElementInfo(element).selector }
-    }, '*');
-    
-    if (save && originalContent !== element.textContent) {
-      const elementInfo = getElementInfo(element);
-      let finalText = element.textContent;
-      
-      // Trim the final text and convert space-only to empty string for saving
-      if (finalText === ' ' || finalText.trim() === '') {
-        finalText = '';
-        // Update the actual element text to empty for display
-        element.textContent = '';
-      }
-      
-      const change = {
-        type: 'updateText',
-        selector: elementInfo.selector,
-        oldValue: originalContent,
-        newValue: finalText,
-        elementType: elementInfo.elementType,
-        sectionId: elementInfo.sectionId,
-        timestamp: Date.now()
-      };
-
-      saveChangeToStorage(change);
-
-      window.parent.postMessage({
-        type: 'webild-element-changed',
-        data: change
-      }, '*');
-    } else if (!save && originalContent !== null) {
-      element.textContent = originalContent;
-    }
-    
-    originalContent = null;
-  };
-  
-  const createHoverOverlay = (element) => {
-    const rect = element.getBoundingClientRect();
-    const overlay = document.createElement('div');
-    overlay.className = 'webild-hover-overlay';
-    overlay.style.cssText = \`
-      position: fixed !important;
-      top: \${rect.top - 2}px !important;
-      left: \${rect.left - 2}px !important;
-      width: \${rect.width + 4}px !important;
-      height: \${rect.height + 4}px !important;
-      background-color: rgba(90, 113, 230, 0.15) !important;
-      pointer-events: none !important;
-      z-index: 999998 !important;
-      transition: all 0.15s ease !important;
-    \`;
-    document.body.appendChild(overlay);
-    return overlay;
-  };
-  
-  const removeHoverOverlay = () => {
-    if (hoverOverlay) {
-      hoverOverlay.remove();
-      hoverOverlay = null;
-    }
-  };
-  
-  const showElementTypeLabel = (element, elementType) => {
-    if (!elementType) return;
-
-    removeElementTypeLabel();
-
-    const rect = element.getBoundingClientRect();
-    elementTypeLabel = document.createElement('div');
-    elementTypeLabel.className = 'webild-element-type-label';
-    const ariaLabel = element.getAttribute('aria-label');
-    let labelText;
-    
-    if (elementType === 'Div') {
-      labelText = 'Div';
-    } else if (elementType === 'Article') {
-      labelText = 'Article';
-    } else if (elementType === 'Section') {
-      labelText = ariaLabel || 'Section';
-    } else {
-      labelText = elementType;
-    }
-    
-    elementTypeLabel.textContent = labelText;
-    document.body.appendChild(elementTypeLabel);
-    const labelRect = elementTypeLabel.getBoundingClientRect();
-    let labelTop = rect.top - labelRect.height - 2;
-    let labelLeft = rect.left - 3;
-    let isLabelOnTop = true;
-    if (labelTop < 0) {
-      labelTop = rect.bottom + 1;
-      isLabelOnTop = false;
-    }
-    if (labelTop + labelRect.height > window.innerHeight) {
-      labelTop = rect.bottom - labelRect.height;
-      isLabelOnTop = false;
-      if (labelTop < 0) {
-        labelTop = rect.top;
-        isLabelOnTop = true;
-      }
-    }
-    if (labelLeft + labelRect.width > window.innerWidth) {
-      labelLeft = window.innerWidth - labelRect.width;
-    }
-    if (labelLeft < 0) {
-      labelLeft = 0;
-    }
-    if (isLabelOnTop) {
-      elementTypeLabel.classList.add('label-top');
-    } else {
-      elementTypeLabel.classList.add('label-bottom');
-    }
-
-    elementTypeLabel.style.cssText = \`
-      left: \${labelLeft}px !important;
-      top: \${labelTop}px !important;
-      transform: none !important;
-    \`;
-  };
-  
-  const removeElementTypeLabel = () => {
-    if (elementTypeLabel) {
-      elementTypeLabel.remove();
-      elementTypeLabel = null;
-    }
-  };
-  
-  const handleMouseOver = (e) => {
-    if (!isActive) return;
-
-    lastMouseX = e.clientX;
-    lastMouseY = e.clientY;
-
-    const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;
-
-    if (!isValidElement(target) || target === hoveredElement || target === selectedElement) {
-      return;
-    }
-    
-    if (hoveredElement && hoveredElement !== selectedElement) {
-      hoveredElement.classList.remove(hoverClass);
-      if (hoveredElement.dataset.webildOriginalPosition) {
-        hoveredElement.style.position = hoveredElement.dataset.webildOriginalPosition === 'none' ? '' : hoveredElement.dataset.webildOriginalPosition;
-        delete hoveredElement.dataset.webildOriginalPosition;
-      }
-      removeHoverOverlay();
-      removeElementTypeLabel();
-    }
-    
-    hoveredElement = target;
-    
-    const computedStyle = window.getComputedStyle(target);
-    const currentPosition = computedStyle.position;
-    
-    if (currentPosition === 'static' || currentPosition === '') {
-      hoveredElement.dataset.webildOriginalPosition = currentPosition || 'none';
-      hoveredElement.style.position = 'relative';
-    }
-    
-    hoveredElement.classList.add(hoverClass);
-    
-    if ((!selectedElement || selectedElement !== target) && !isScrolling) {
-      hoverOverlay = createHoverOverlay(target);
-    }
-    
-    const elementType = getElementType(target);
-    showElementTypeLabel(target, elementType);
-    
-    window.parent.postMessage({
-      type: 'webild-element-hover',
-      data: getElementInfo(target, false)
-    }, '*');
-  };
-  
-  const handleMouseOut = (e) => {
-    if (!isActive) return;
-    
-    if (hoveredElement && hoveredElement !== selectedElement) {
-      hoveredElement.classList.remove(hoverClass);
-      
-      if (hoveredElement.dataset.webildOriginalPosition) {
-        hoveredElement.style.position = hoveredElement.dataset.webildOriginalPosition === 'none' ? '' : hoveredElement.dataset.webildOriginalPosition;
-        delete hoveredElement.dataset.webildOriginalPosition;
-      }
-      
-      removeHoverOverlay();
-      removeElementTypeLabel();
-      
-      hoveredElement = null;
-      
-      window.parent.postMessage({
-        type: 'webild-element-hover',
-        data: null
-      }, '*');
-    }
-  };
-  
-  const handleClick = (e) => {
-  if (!isActive) return;
-
-  if (isEditing) {
-    e.stopPropagation();
-    return;
-  }
-
-  e.preventDefault();
-  e.stopPropagation();
-
-  const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;  
-  if (!isValidElement(target)) return;
-    
-    if (selectedElement && selectedElement !== target) {
-      makeUneditable(selectedElement, false);
-      selectedElement.classList.remove(selectedClass);
-      selectedElement.classList.remove(hoverClass);
-      
-      if (selectedElement.dataset.webildOriginalPosition) {
-        selectedElement.style.position = selectedElement.dataset.webildOriginalPosition === 'none' ? '' : selectedElement.dataset.webildOriginalPosition;
-        delete selectedElement.dataset.webildOriginalPosition;
-      }
-      
-      removeHoverOverlay();
-      removeElementTypeLabel();
-    }
-    
-    if (selectedElement === target) {
-      if (target.dataset.webildOriginalPosition) {
-        target.style.position = target.dataset.webildOriginalPosition === 'none' ? '' : target.dataset.webildOriginalPosition;
-        delete target.dataset.webildOriginalPosition;
-      }
-      
-      removeHoverOverlay();
-      removeElementTypeLabel();
-      
-      selectedElement = null;
-      window.parent.postMessage({
-        type: 'webild-element-selected',
-        data: null
-      }, '*');
-      return;
-    }
-    
-    selectedElement = target;
-    selectedElement.classList.add(selectedClass);
-    
-    removeHoverOverlay();
-    removeElementTypeLabel();
-    
-    if (hoveredElement === target) {
-      hoveredElement.classList.remove(hoverClass);
-      hoveredElement = null;
-    }
-    
-    const elementInfo = getElementInfo(target, true);
-    selectedElement.dataset.webildSelector = elementInfo.selector;
-    showElementTypeLabel(target, elementInfo.elementType);
-    
-    window.parent.postMessage({
-      type: 'webild-element-selected',
-      data: elementInfo
-    }, '*');
-    
-    if (isTextElement(target)) {
-      setTimeout(() => makeEditable(target, e), 50);
-    }
-  };
-  
-  const handleKeyDown = (e) => {
-    if (!isActive) return;
-    if (!isEditing || !selectedElement) return;
-    
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      makeUneditable(selectedElement, true);
-    } else if (e.key === 'Escape') {
-      e.preventDefault();
-      makeUneditable(selectedElement, false);
-    }
-  };
-  
-  const handleBlur = (e) => {
-    if (!isActive) return;
-    if (isEditing && selectedElement && e.target === selectedElement) {
-      makeUneditable(selectedElement, true);
-    }
-  };
-  
-  let lastMouseX = 0;
-  let lastMouseY = 0;
-
-  const handleScroll = () => {
-    if (!isActive) return;
-    
-    if (isEditing) return;
-    
-    if (selectedElement) {
-      makeUneditable(selectedElement, false);
-      selectedElement.classList.remove(selectedClass);
-      if (selectedElement.dataset.webildOriginalPosition) {
-        selectedElement.style.position = selectedElement.dataset.webildOriginalPosition === 'none' ? '' : selectedElement.dataset.webildOriginalPosition;
-        delete selectedElement.dataset.webildOriginalPosition;
-      }
-      selectedElement = null;
-
-      window.parent.postMessage({
-        type: 'webild-element-selected',
-        data: null
-      }, '*');
-    }
-
-    if (hoveredElement) {
-      hoveredElement.classList.remove(hoverClass);
-      if (hoveredElement.dataset.webildOriginalPosition) {
-        hoveredElement.style.position = hoveredElement.dataset.webildOriginalPosition === 'none' ? '' : hoveredElement.dataset.webildOriginalPosition;
-        delete hoveredElement.dataset.webildOriginalPosition;
-      }
-      hoveredElement = null;
-
-      window.parent.postMessage({
-        type: 'webild-element-hover',
-        data: null
-      }, '*');
-    }
-
-    removeHoverOverlay();
-    removeElementTypeLabel();
-
-    isScrolling = true;
-
-    if (scrollTimeout) {
-      clearTimeout(scrollTimeout);
-    }
-
-    scrollTimeout = setTimeout(() => {
-      isScrolling = false;
-
-      if (lastMouseX > 0 && lastMouseY > 0) {
-        const target = getMostSpecificElement(lastMouseX, lastMouseY);
-        if (target && isValidElement(target) && target !== selectedElement) {
-          hoveredElement = target;
-
-          const computedStyle = window.getComputedStyle(target);
-          const currentPosition = computedStyle.position;
-
-          if (currentPosition === 'static' || currentPosition === '') {
-            hoveredElement.dataset.webildOriginalPosition = currentPosition || 'none';
-            hoveredElement.style.position = 'relative';
-          }
-
-          hoveredElement.classList.add(hoverClass);
-          hoverOverlay = createHoverOverlay(target);
-
-          const elementType = getElementType(target);
-          showElementTypeLabel(target, elementType);
-
-          window.parent.postMessage({
-            type: 'webild-element-hover',
-            data: getElementInfo(target, false)
-          }, '*');
-        }
-      }
-    }, 150);
-
-    window.parent.postMessage({
-      type: 'webild-iframe-scroll'
-    }, '*');
-  };
-  
-  const getStorageKey = () => {
-    const url = new URL(window.location.href);
-    const pathParts = url.pathname.split('/').filter(Boolean);
-    return \`webild-changes-\${pathParts.join('-')}\`;
-  };
-
-  const saveChangeToStorage = (change) => {
-    try {
-      const storageKey = getStorageKey();
-      const existingChanges = JSON.parse(localStorage.getItem(storageKey) || '[]');
-
-      const filteredChanges = existingChanges.filter(c => {
-        return !(c.oldValue === change.oldValue && c.sectionId === change.sectionId);
-      });
-      filteredChanges.push(change);
-
-      localStorage.setItem(storageKey, JSON.stringify(filteredChanges));
-
-      window.parent.postMessage({
-        type: 'webild-change-saved-locally',
-        data: { change, allChanges: filteredChanges }
-      }, '*');
-    } catch (error) {
-      console.error('Failed to save change to localStorage:', error);
-    }
-  };
-
-  const clearLocalChanges = () => {
-    try {
-      const storageKey = getStorageKey();
-      localStorage.removeItem(storageKey);
-      window.parent.postMessage({
-        type: 'webild-local-changes-cleared',
-        data: {}
-      }, '*');
-    } catch (error) {
-      console.error('Failed to clear local changes:', error);
-    }
-  };
-
-  const handleMessage = (e) => {
-    if (!e.data || !e.data.type) return;
-
-    if (e.data.type === 'webild-activate-editor') {
-      if (!isActive) {
-        isActive = true;
-        window.parent.postMessage({ type: 'webild-editor-activated' }, '*');
-      }
-      return;
-    }
-
-    if (e.data.type === 'webild-deactivate-editor') {
-      if (isActive) {
-        isActive = false;
-
-        if (selectedElement) {
-          makeUneditable(selectedElement, false);
-          selectedElement.classList.remove(selectedClass);
-          selectedElement = null;
-        }
-        if (hoveredElement) {
-          hoveredElement.classList.remove(hoverClass);
-          hoveredElement = null;
-        }
-
-        removeHoverOverlay();
-        removeElementTypeLabel();
-        window.parent.postMessage({ type: 'webild-editor-deactivated' }, '*');
-      }
-      return;
-    }
-
-    if (e.data.type === 'webild-clear-local-changes') {
-      clearLocalChanges();
-      return;
-    }
-
-    if (e.data.type === 'webild-cancel-changes') {
-      try {
-        const storageKey = getStorageKey();
-        const savedChanges = localStorage.getItem(storageKey);
-        if (savedChanges) {
-          const changes = JSON.parse(savedChanges);
-          changes.forEach(change => {
-            try {
-              const element = document.querySelector(change.selector);
-              if (!element) return;
-
-              if (change.type === 'updateText') {
-                if (isTextElement(element)) {
-                  element.textContent = change.oldValue;
-                }
-              } else if (change.type === 'updateButton') {
-                if (isButtonElement(element)) {
-                  updateButtonText(element, change.oldValue);
-                }
-              } else if (change.type === 'replaceImage') {
-                const revertTag = element.tagName.toLowerCase();
-                const isBackground = revertTag !== 'img' && revertTag !== 'video';
-                if (isBackground) {
-                  element.style.backgroundImage = change.oldValue ? 'url(' + change.oldValue + ')' : '';
-                } else {
-                  const oldMediaType = getMediaTypeFromUrl(change.oldValue);
-                  if (revertTag === 'video' && oldMediaType === 'image') {
-                    swapMediaElement(element, 'img', change.oldValue);
-                  } else if (revertTag === 'img' && oldMediaType === 'video') {
-                    swapMediaElement(element, 'video', change.oldValue);
-                  } else if (revertTag === 'video') {
-                    element.src = change.oldValue;
-                    element.load();
-                  } else {
-                    element.src = change.oldValue;
-                  }
-                }
-              }
-            } catch (err) {
-              console.warn('[Webild] Failed to revert change:', err);
-            }
-          });
-        }
-        clearLocalChanges();
-      } catch (error) {
-        console.error('[Webild] Failed to cancel changes:', error);
-      }
-      return;
-    }
-
-    if (e.data.type === 'webild-update-text') {
-      const { selector, newValue, oldValue, sectionId } = e.data.data;
-      try {
-        let element = null;
-        
-        if (selectedElement && isTextElement(selectedElement)) {
-          element = selectedElement;
-        }
-        else if (selector) {
-          try {
-            element = document.querySelector(selector);
-          } catch (err) {
-            console.warn('[Webild] Invalid selector:', selector);
-          }
-        }
-        
-        if (!element && sectionId) {
-          const sectionElement = document.querySelector('[data-section="' + sectionId + '"]');
-          if (sectionElement) {
-            const textElements = sectionElement.querySelectorAll('h1, h2, h3, h4, h5, h6, p, span, a, button, div');
-            for (let i = 0; i < textElements.length; i++) {
-              const el = textElements[i];
-              if (isTextElement(el) && el.textContent.trim() === (oldValue || '').trim()) {
-                element = el;
-                const newSelector = getUniqueSelector(element, true);
-                if (newSelector) {
-                  element.dataset.webildSelector = newSelector;
-                }
-                break;
-              }
-            }
-          }
-        }
-        
-        if (element && isTextElement(element)) {
-          element.textContent = newValue;
-          const finalSelector = element.dataset.webildSelector || getUniqueSelector(element, true);
-          
-          window.parent.postMessage({
-            type: 'webild-text-update-success',
-            data: {
-              selector: finalSelector,
-              newValue: newValue
-            }
-          }, '*');
-        } else {
-          window.parent.postMessage({
-            type: 'webild-text-update-failed',
-            data: { selector, newValue }
-          }, '*');
-        }
-      } catch (error) {
-        window.parent.postMessage({
-          type: 'webild-text-update-failed',
-          data: { selector, newValue, error: error.message }
-        }, '*');
-      }
-      return;
-    }
-
-    if (e.data.type === 'webild-update-button') {
-      const { selector, text, href } = e.data.data;
-      try {
-        const element = document.querySelector(selector);
-        if (element && isButtonElement(element)) {
-          if (text !== undefined) {
-            updateButtonText(element, text);
-          }
-          if (href !== undefined) {
-            if (element.tagName.toLowerCase() === 'a') {
-              element.href = href;
-            } else {
-              element.setAttribute('data-href', href);
-            }
-          }
-        }
-      } catch (error) {
-        console.error('[Webild] Invalid selector for button update:', selector, error);
-      }
-      return;
-    }
-
-    if (!isActive) return;
-
-    if (e.data.type === 'webild-replace-image') {
-      const { selector, newSrc, isBackground, allowMediaTypeSwap } = e.data.data;
-      let element = null;
-
-      try {
-        element = document.querySelector(selector);
-      } catch {
-        window.parent.postMessage({
-          type: 'webild-image-replacement-error',
-          data: { selector, message: 'Invalid selector: ' + error.message, success: false }
-        }, '*');
-        return;
-      }
-
-      if (!element) {
-        window.parent.postMessage({
-          type: 'webild-image-replacement-error',
-          data: { selector, message: 'Element not found', success: false }
-        }, '*');
-        return;
-      }
-
-      try {
-        let replaced = false;
-        let oldValue = '';
-
-        if (isBackground) {
-          oldValue = window.getComputedStyle(element).backgroundImage;
-          element.style.backgroundImage = \`url('\${newSrc}')\`;
-          replaced = true;
-        } else if (element.tagName.toLowerCase() === 'img') {
-          oldValue = element.src;
-          const newMediaType = getMediaTypeFromUrl(newSrc);
-          if (newMediaType === 'video' && allowMediaTypeSwap) {
-            const swapped = swapMediaElement(element, 'video', newSrc);
-            if (selectedElement === element) selectedElement = swapped;
-            element = swapped;
-          } else {
-            element.src = newSrc;
-          }
-          replaced = true;
-        } else if (element.tagName.toLowerCase() === 'video') {
-          oldValue = element.src || element.currentSrc || '';
-          const newMediaType = getMediaTypeFromUrl(newSrc);
-          const sources = element.querySelectorAll('source');
-          if (newMediaType === 'image' && allowMediaTypeSwap) {
-            const swapped = swapMediaElement(element, 'img', newSrc);
-            if (selectedElement === element) selectedElement = swapped;
-            element = swapped;
-          } else {
-            if (sources.length > 0) {
-              sources.forEach(function(source) { source.src = newSrc; });
-              element.load();
-            } else {
-              element.src = newSrc;
-              element.load();
-            }
-          }
-          replaced = true;
-        } else {
-          const hasBackgroundImage = window.getComputedStyle(element).backgroundImage !== 'none';
-          if (hasBackgroundImage) {
-            oldValue = window.getComputedStyle(element).backgroundImage;
-            element.style.backgroundImage = \`url('\${newSrc}')\`;
-            replaced = true;
-          }
-        }
-
-        if (replaced) {
-          const elementInfo = getElementInfo(element);
-
-          let cleanOldValue = oldValue;
-          if (oldValue.includes('url(')) {
-            const urlMatch = oldValue.match(/url(['"]?([^'")]+)['"]?)/);
-            if (urlMatch) {
-              cleanOldValue = urlMatch[1];
-            }
-          }
-
-          cleanOldValue = extractOriginalUrl(cleanOldValue);
-
-          const change = {
-            type: 'replaceImage',
-            selector: selector,
-            oldValue: cleanOldValue,
-            newValue: newSrc,
-            elementType: elementInfo.elementType,
-            sectionId: elementInfo.sectionId,
-            timestamp: Date.now()
-          };
-
-          saveChangeToStorage(change);
-
-          window.parent.postMessage({
-            type: 'webild-element-changed',
-            data: change
-          }, '*');
-
-          window.parent.postMessage({
-            type: 'webild-image-replaced',
-            data: { selector, newSrc, success: true }
-          }, '*');
-        } else {
-          window.parent.postMessage({
-            type: 'webild-image-replacement-error',
-            data: { selector, message: 'Could not determine how to replace image', success: false }
-          }, '*');
-        }
-      } catch (error) {
-        window.parent.postMessage({
-          type: 'webild-image-replacement-error',
-          data: { selector, message: error.message || 'Failed to replace image', success: false }
-        }, '*');
-      }
-    }
-  };
-  
-  document.addEventListener('mouseover', handleMouseOver, true);
-  document.addEventListener('mouseout', handleMouseOut, true);
-  document.addEventListener('click', handleClick, true);
-  document.addEventListener('keydown', handleKeyDown, true);
-  document.addEventListener('blur', handleBlur, true);
-  window.addEventListener('scroll', handleScroll, true);
-  window.addEventListener('message', handleMessage, true);
-  
-  let lastPathname = window.location.pathname;
-  
-  const notifyPageChange = () => {
-    window.parent.postMessage({
-      type: 'webild-page-changed',
-      data: { pathname: window.location.pathname }
-    }, '*');
-  };
-  
-  window.addEventListener('popstate', () => {
-    if (lastPathname !== window.location.pathname) {
-      lastPathname = window.location.pathname;
-      notifyPageChange();
-    }
-  }, true);
-  
-  const urlCheckInterval = setInterval(() => {
-    if (lastPathname !== window.location.pathname) {
-      lastPathname = window.location.pathname;
-      notifyPageChange();
-    }
-  }, 500);
-  
-  notifyPageChange();
-  
-  window.webildCleanup = () => {
-    isActive = false;
-    
-    if (selectedElement) {
-      makeUneditable(selectedElement, false);
-    }
-    
-    removeHoverOverlay();
-    removeElementTypeLabel();
-    
-    if (urlCheckInterval) {
-      clearInterval(urlCheckInterval);
-    }
-    
-    document.removeEventListener('mouseover', handleMouseOver, true);
-    document.removeEventListener('mouseout', handleMouseOut, true);
-    document.removeEventListener('click', handleClick, true);
-    document.removeEventListener('keydown', handleKeyDown, true);
-    document.removeEventListener('blur', handleBlur, true);
-    window.removeEventListener('scroll', handleScroll, true);
-    window.removeEventListener('message', handleMessage, true);
-    
-    document.querySelectorAll('.' + hoverClass).forEach(el => {
-      el.classList.remove(hoverClass);
-    });
-    document.querySelectorAll('.' + selectedClass).forEach(el => {
-      el.classList.remove(selectedClass);
-    });
-    
-    const styleEl = document.getElementById('webild-inspector-styles');
-    if (styleEl) styleEl.remove();
-    
-    hoveredElement = null;
-    selectedElement = null;
-  };
-  
-  window.parent.postMessage({ type: 'webild-editor-ready' }, '*');
-})();
-`
+              (function() {
+                try {
+                  const theme = localStorage.getItem('theme') || 'light';
+                  document.documentElement.setAttribute('data-theme', theme);
+                } catch (e) {}
+              })()
+            `,
           }}
         />
       
@@ -2798,7 +1398,6 @@ export default function RootLayout({
           }}
         />
       </body>
-      </ServiceWrapper>
     </html>
   );
-}
\ No newline at end of file
+}
-- 
2.49.1


From def1d8aa941dd42a536ea4b1d2a8c860a540e3e0 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 9 Mar 2026 14:22:10 +0000
Subject: [PATCH 4/8] Update src/app/le-restaurant/page.tsx

---
 src/app/le-restaurant/page.tsx | 151 ++++++++++++++++++---------------
 1 file changed, 84 insertions(+), 67 deletions(-)

diff --git a/src/app/le-restaurant/page.tsx b/src/app/le-restaurant/page.tsx
index 0fdd15e..b7dfad5 100644
--- a/src/app/le-restaurant/page.tsx
+++ b/src/app/le-restaurant/page.tsx
@@ -1,52 +1,56 @@
 "use client";
 
-import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import HeroSplit from "@/components/sections/hero/HeroSplit";
 import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
 import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
-import MetricCardFourteen from "@/components/sections/metrics/MetricCardFourteen";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import { Heart, Coffee } from "lucide-react";
+import { Sparkles, Home, Coffee, ChefHat } from "lucide-react";
 
-export default function AboutPage() {
+export default function RestaurantPage() {
   const navItems = [
     { name: "Accueil", id: "home" },
-    { name: "Le Restaurant", id: "le-restaurant" },
+    { name: "Le Restaurant", id: "/le-restaurant" },
     { name: "Menu", id: "menu" },
-    { name: "Galerie", id: "gallery" },
+    { name: "Galerie", id: "/gallery" },
     { name: "Contact", id: "contact" }
   ];
 
   const handleNavClick = (id: string) => {
     if (id === "home") {
       window.location.href = "/";
-    } else if (id === "le-restaurant") {
+    } else if (id === "/le-restaurant") {
       window.location.href = "/le-restaurant";
+    } else if (id === "/gallery") {
+      window.location.href = "/gallery";
+    } else if (id === "menu" || id === "contact") {
+      const element = document.getElementById(id);
+      if (element) {
+        element.scrollIntoView({ behavior: "smooth" });
+      }
     }
   };
 
   const footerColumns = [
     {
-      title: "Navigation",
-      items: [
+      title: "Navigation",      items: [
         { label: "Accueil", href: "/" },
         { label: "À Propos", href: "/le-restaurant" },
-        { label: "Galerie", href: "/#gallery" },
-        { label: "Contact", href: "/#contact" }
+        { label: "Galerie", href: "/gallery" },
+        { 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: "#contact" }
       ]
     },
     {
-      title: "Horaires",
-      items: [
+      title: "Horaires",      items: [
         { label: "Mardi-Dimanche : 12h00-14h30", href: "#" },
         { label: "19h00-22h30", href: "#" },
         { label: "Fermé le lundi", href: "#" }
@@ -61,7 +65,7 @@ export default function AboutPage() {
       borderRadius="soft"
       contentWidth="compact"
       sizing="largeSmallSizeMediumTitles"
-      background="aurora"
+      background="circleGradient"
       cardStyle="glass-depth"
       primaryButtonStyle="gradient"
       secondaryButtonStyle="layered"
@@ -71,23 +75,40 @@ export default function AboutPage() {
         <NavbarStyleCentered
           navItems={navItems}
           button={{
-            text: "Réserver une table",
-            onClick: () => window.location.href = "/#contact"
+            text: "Réserver une table",            onClick: () => handleNavClick("contact")
           }}
           brandName="Caffè Mazzo"
         />
       </div>
 
-      <div id="about" data-section="about">
-        <TestimonialAboutCard
+      <div id="hero" data-section="hero">
+        <HeroSplit
+          title="Bienvenue au Cœur de Caffè Mazzo"
+          description="Découvrez l'histoire d'une famille de passionnés culinaires qui ont transformé une vision en réalité gastronomique. Depuis 2010, Caffè Mazzo incarne l'essence de la gastronomie italienne en Auvergne."
+          background={{ variant: "plain" }}
           tag="Notre Histoire"
-          tagIcon={Heart}
-          title="Caffè Mazzo : L'essence de l'Italie en Auvergne"
-          description="Marco & Sofia Mazzo"
-          subdescription="Propriétaires & Chefs"
+          tagIcon={Sparkles}
+          buttons={[
+            { text: "Réserver une table", href: "#contact" },
+            { text: "Voir la galerie", href: "/gallery" }
+          ]}
+          imageSrc="http://img.b2bpic.net/free-photo/table-set-dinning-table_1339-3439.jpg"
+          imageAlt="Intérieur élégant de Caffè Mazzo"
+          mediaAnimation="slide-up"
+          imagePosition="right"
+        />
+      </div>
+
+      <div id="ambiance" data-section="ambiance">
+        <TestimonialAboutCard
+          tag="L'Ambiance"
+          tagIcon={Home}
+          title="Un Lieu de Vie, Un Lieu de Partage"
+          description="Atmosphère Chaleureuse & Raffinée"
+          subdescription="Chaque détail de notre restaurant respire la chaleur italienne et l'élégance française. Des murs aux teintes chaudes aux éclairages tamisés, Caffè Mazzo est conçu pour créer des moments inoubliables."
           icon={Coffee}
-          imageSrc="http://img.b2bpic.net/free-photo/table-set-dinning-table_1339-3439.jpg?_wi=2"
-          imageAlt="Intérieur chaleureux de Caffè Mazzo"
+          imageSrc="http://img.b2bpic.net/free-photo/glass-candlestick-with-silver-candle-other-decor-stuff-are-desk_8353-9850.jpg"
+          imageAlt="Ambiance de Caffè Mazzo"
           mediaAnimation="slide-up"
           useInvertedBackground={false}
         />
@@ -96,32 +117,20 @@ export default function AboutPage() {
       <div id="philosophy" data-section="philosophy">
         <FeatureCardMedia
           title="Notre Philosophie Culinaire"
-          description="Découvrez les principes qui guident chaque création culinaire chez Caffè Mazzo"
-          tag="Nos Valeurs"
+          description="Trois piliers fondamentaux guident notre approche gastronomique"
+          tag="Valeurs"
           features={[
             {
-              id: "1",
-              title: "Ingrédients Authentiques",
-              description: "Nous sélectionnons nos ingrédients directement auprès de producteurs italiens partenaires. Chaque tomate, chaque pâte, chaque herbe aromatique est choisie avec soin.",
-              tag: "Sourcing",
-              imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-salad-with-sliced-little-vegetables-inside-plate-dark-blue-desk_140725-50581.jpg?_wi=2",
-              imageAlt: "Ingrédients premium italiens"
+              id: "1",              title: "Authenticité Italienne",              description: "Nos recettes sont inspirées des traditions familiales transmises de génération en génération. Chaque plat raconte une histoire italienne.",              tag: "Fondamental",              imageSrc: "http://img.b2bpic.net/free-photo/pasta-with-vegetables_23-2148948649.jpg",              imageAlt: "Cuisine italienne authentique"
             },
             {
-              id: "2",
-              title: "Tradition Revisitée",
-              description: "Les recettes de Marco sont inspirées par trois générations de gastronomie italienne. Chaque plat respecte les fondamentaux tout en apportant une touche personnelle.",
-              tag: "Héritage",
-              imageSrc: "http://img.b2bpic.net/free-photo/stuffed-beans-with-pork-salted-eggs-asian-cuisine_1150-23665.jpg?_wi=2",
-              imageAlt: "Recettes familiales italiennes"
+              id: "2",              title: "Produits Frais & Locaux",              description: "Nous sélectionnons nos ingrédients auprès de producteurs locaux de confiance. La qualité prime toujours sur la quantité.",              tag: "Engagement",              imageSrc: "http://img.b2bpic.net/free-photo/fresh-vegetables-market_23-2148648706.jpg",              imageAlt: "Marché local et produits frais"
             },
             {
-              id: "3",
-              title: "Créativité Gastronomique",
-              description: "Sofia apporte sa vision créative à chaque assiette. L'équipe innove constamment pour proposer des menu saisonniers reflétant l'excellence culinaire.",
-              tag: "Innovation",
-              imageSrc: "http://img.b2bpic.net/free-photo/shrimp-salad-with-glass-white-wine_140725-4174.jpg?_wi=2",
-              imageAlt: "Créations culinaires innovantes"
+              id: "3",              title: "Créativité & Innovation",              description: "Tout en respectant la tradition, Marco et Sofia intègrent une touche contemporaine à chaque création culinaire.",              tag: "Évolution",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-food-plate_23-2148948616.jpg",              imageAlt: "Présentation gastronomique créative"
+            },
+            {
+              id: "4",              title: "Service d'Excellence",              description: "Notre équipe est formée pour vous offrir une expérience inoubliable avec professionnalisme et bienveillance.",              tag: "Hospitalité",              imageSrc: "http://img.b2bpic.net/free-photo/sommelier-pouring-wine_23-2148950265.jpg",              imageAlt: "Service professionnel et accueillant"
             }
           ]}
           textboxLayout="default"
@@ -130,34 +139,42 @@ export default function AboutPage() {
         />
       </div>
 
-      <div id="restaurant-info" data-section="restaurant-info">
-        <MetricCardFourteen
-          title="Caffè Mazzo : Une destination culinaire incontournable pour les amateurs de gastronomie italienne authentique"
-          tag="Informations"
-          tagAnimation="slide-up"
-          metrics={[
+      <div id="design" data-section="design">
+        <FeatureCardMedia
+          title="Espaces & Ambiances"
+          description="Caffè Mazzo offre plusieurs espaces pour vos événements et repas"
+          tag="Lieux"
+          features={[
             {
-              id: "1",
-              value: "Depuis 2018",
-              description: "Caffè Mazzo propose une cuisine italienne gastronomique avec l'authenticité comme fondation."
+              id: "1",              title: "Salle Principale",              description: "Notre salle de 60 couverts avec son décor chaleureux et ses lumières tamisées. Idéale pour les repas en couple ou en famille.",              tag: "Intimité",              imageSrc: "http://img.b2bpic.net/free-photo/restaurant-interior_23-2148948635.jpg",              imageAlt: "Salle principale"
             },
             {
-              id: "2",
-              value: "Équipe de 12",
-              description: "Marco, Sofia et leur équipe dévouée travaillent chaque jour pour offrir une expérience exceptionnelle."
+              id: "2",              title: "Terrasse d'Été",              description: "Notre terrasse méditerranéenne avec vue sur la ville. Parfaite pour les apéritifs et les repas estivaux.",              tag: "Détente",              imageSrc: "http://img.b2bpic.net/free-photo/outdoor-restaurant_23-2148948720.jpg",              imageAlt: "Terrasse extérieure"
             },
             {
-              id: "3",
-              value: "50 Places",
-              description: "Notre salle intimiste accueille les clients dans une ambiance chaleureuse et raffinée."
+              id: "3",              title: "Bar à Vin",              description: "Un espace dédié pour déguster nos sélections de vins italiens et français, avec vue sur la cuisine ouverte.",              tag: "Convivialité",              imageSrc: "http://img.b2bpic.net/free-photo/wine-bar_23-2148948589.jpg",              imageAlt: "Bar à vin"
             },
             {
-              id: "4",
-              value: "4.8/5",
-              description: "Notation moyenne de nos clients satisfaits qui apprécient notre engagement envers l'excellence."
+              id: "4",              title: "Salon Privé",              description: "Un espace de 20 couverts réservé pour les événements privés, réunions d'affaires ou anniversaires intimes.",              tag: "Exclusivité",              imageSrc: "http://img.b2bpic.net/free-photo/private-dining_23-2148948654.jpg",              imageAlt: "Salon privé"
             }
           ]}
-          metricsAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={true}
+          animationType="scale-rotate"
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCTA
+          tag="Prêt à Nous Visiter ?"
+          tagIcon={ChefHat}
+          title="Réservez Votre Visite Dès Aujourd'hui"
+          description="Découvrez en personne l'ambiance unique de Caffè Mazzo. Marco et Sofia vous accueillent chaleureusement du mardi au dimanche."
+          buttons={[
+            { text: "Réserver une Table", href: "#" },
+            { text: "Voir la Galerie", href: "/gallery" }
+          ]}
+          background={{ variant: "plain" }}
           useInvertedBackground={false}
         />
       </div>
@@ -171,4 +188,4 @@ export default function AboutPage() {
       </div>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}
-- 
2.49.1


From cb0305fdd83e9ef6ca8105c4ba364b2822cdaed2 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 9 Mar 2026 14:22:11 +0000
Subject: [PATCH 5/8] Update src/app/menu/page.tsx

---
 src/app/menu/page.tsx | 284 ++++++++++++++++++++++++++----------------
 1 file changed, 180 insertions(+), 104 deletions(-)

diff --git a/src/app/menu/page.tsx b/src/app/menu/page.tsx
index aaaa90b..1ffca30 100644
--- a/src/app/menu/page.tsx
+++ b/src/app/menu/page.tsx
@@ -2,48 +2,61 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import HeroSplit from "@/components/sections/hero/HeroSplit";
 import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
-import MetricCardFourteen from "@/components/sections/metrics/MetricCardFourteen";
+import ProductCardOne from "@/components/sections/product/ProductCardOne";
 import ContactCTA from "@/components/sections/contact/ContactCTA";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import Link from "next/link";
-import { ChefHat } from "lucide-react";
+import { Sparkles, ChefHat, Wine, Cake } from "lucide-react";
 
 export default function MenuPage() {
   const navItems = [
-    { name: "Accueil", id: "/" },
-    { name: "Le Restaurant", id: "/about" },
+    { name: "Accueil", id: "home" },
+    { name: "Le Restaurant", id: "le-restaurant" },
     { name: "Menu", id: "/menu" },
-    { name: "Galerie", id: "/galerie" },
-    { name: "Contact", id: "/contact" },
+    { name: "Galerie", id: "gallery" },
+    { name: "Contact", id: "contact" }
   ];
 
+  const handleNavClick = (id: string) => {
+    if (id === "home") {
+      window.location.href = "/";
+    } else if (id === "le-restaurant") {
+      window.location.href = "/le-restaurant";
+    } else if (id === "/menu") {
+      window.location.href = "/menu";
+    } else {
+      const element = document.getElementById(id);
+      if (element) {
+        element.scrollIntoView({ behavior: "smooth" });
+      }
+    }
+  };
+
   const footerColumns = [
     {
-      title: "Navigation",
-      items: [
+      title: "Navigation",      items: [
         { label: "Accueil", href: "/" },
-        { label: "À Propos", href: "/about" },
+        { label: "À Propos", href: "/le-restaurant" },
         { label: "Menu", href: "/menu" },
-        { label: "Galerie", href: "/galerie" },
-      ],
+        { label: "Galerie", href: "/#gallery" },
+        { 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: "#contact" }
+      ]
     },
     {
-      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 +66,7 @@ export default function MenuPage() {
       borderRadius="soft"
       contentWidth="compact"
       sizing="largeSmallSizeMediumTitles"
-      background="aurora"
+      background="circleGradient"
       cardStyle="glass-depth"
       primaryButtonStyle="gradient"
       secondaryButtonStyle="layered"
@@ -63,59 +76,45 @@ export default function MenuPage() {
         <NavbarStyleCentered
           navItems={navItems}
           button={{
-            text: "Réserver une table",
-            href: "/contact",
+            text: "Réserver une table",            onClick: () => handleNavClick("contact")
           }}
           brandName="Caffè Mazzo"
         />
       </div>
 
-      <div id="featured-dishes" data-section="featured-dishes">
+      <div id="hero" data-section="hero">
+        <HeroSplit
+          title="Notre Menu Complet"
+          description="Découvrez toutes nos créations culinaires, des antipasti aux desserts italiens. Une expérience gastronomique authentique dans chaque assiette."
+          background={{ variant: "plain" }}
+          tag="Menu Complet"
+          tagIcon={Sparkles}
+          buttons={[
+            { text: "Réserver une table", href: "#contact" },
+            { text: "Retour à l'accueil", href: "/" }
+          ]}
+          imageSrc="http://img.b2bpic.net/free-photo/papaya-crevettes-salads-with-tomatoes-sea-food-with-fresh-prawns-cockles-with-spicy-sauce_114579-106.jpg"
+          imageAlt="Menu Caffè Mazzo"
+          mediaAnimation="slide-up"
+          imagePosition="right"
+        />
+      </div>
+
+      <div id="antipasti" data-section="antipasti">
         <FeatureCardMedia
-          title="Nos Plats Emblématiques"
-          description="Une sélection de nos créations culinaires les plus populaires et raffinées"
-          tag="Spécialités"
+          title="Antipasti"
+          description="Les entrées traditionnelles qui annoncent une belle soirée culinaire"
+          tag="Entrées"
           features={[
             {
-              id: "1",
-              title: "Risotto de Foie Gras aux Morilles",
-              description:
-                "Risotto crémeux infusé de foie gras poêlé et morilles fraîches. Une symphonie de saveurs automnales.",
-              tag: "Spécialité Maison",
-              imageSrc:
-                "http://img.b2bpic.net/free-photo/top-view-delicious-salad-with-sliced-little-vegetables-inside-plate-dark-blue-desk_140725-50581.jpg?_wi=3",
-              imageAlt: "Risotto de foie gras aux morilles",
+              id: "1",              title: "Bresaola avec Roquette",              description: "Fines tranches de viande séchée, roquette fraîche et parmesan râpé. Un classique élégant.",              tag: "Charcuterie",              imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-salad-with-sliced-little-vegetables-inside-plate-dark-blue-desk_140725-50581.jpg",              imageAlt: "Bresaola avec roquette"
             },
             {
-              id: "2",
-              title: "Ravioli Maison",
-              description:
-                "Ravioli frais préparés quotidiennement, garnis de ricotta et épinards, nappés d'une sauce beurre et sauge.",
-              tag: "Classique Italien",
-              imageSrc:
-                "http://img.b2bpic.net/free-photo/stuffed-beans-with-pork-salted-eggs-asian-cuisine_1150-23665.jpg?_wi=3",
-              imageAlt: "Ravioli maison à la ricotta",
+              id: "2",              title: "Calamari Fritti",              description: "Calamar frais frit à la perfection, servi avec sauce marinara maison.",              tag: "Fruits de Mer",              imageSrc: "http://img.b2bpic.net/free-photo/shrimp-salad-with-glass-white-wine_140725-4174.jpg",              imageAlt: "Calamari fritti"
             },
             {
-              id: "3",
-              title: "Gnocchi à la Truffe",
-              description:
-                "Gnocchi fondants relevés d'huile de truffe noire et parmesan affiné. Délicatesse garantie.",
-              tag: "Premium",
-              imageSrc:
-                "http://img.b2bpic.net/free-photo/shrimp-salad-with-glass-white-wine_140725-4174.jpg?_wi=3",
-              imageAlt: "Gnocchi à la truffe",
-            },
-            {
-              id: "4",
-              title: "Lasagnes Traditionnelles",
-              description:
-                "Lasagnes généreuses préparées selon la recette familiale italienne de trois générations.",
-              tag: "Héritage Familial",
-              imageSrc:
-                "http://img.b2bpic.net/free-photo/view-delicious-cuisine-dish_23-2149460211.jpg?_wi=2",
-              imageAlt: "Lasagnes traditionnelles",
-            },
+              id: "3",              title: "Burrata et Tomates",              description: "Fromage frais et crémeux avec tomates cerises et basilic frais. Saveurs méditerranéennes.",              tag: "Fromage",              imageSrc: "http://img.b2bpic.net/free-photo/view-delicious-cuisine-dish_23-2149460211.jpg",              imageAlt: "Burrata et tomates"
+            }
           ]}
           textboxLayout="default"
           useInvertedBackground={true}
@@ -123,71 +122,148 @@ export default function MenuPage() {
         />
       </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={[
+      <div id="fresh-pastas" data-section="fresh-pastas">
+        <FeatureCardMedia
+          title="Pâtes Fraîches"
+          description="Nos spécialités de pâtes maison, préparées chaque jour avec passion"
+          tag="Plats Principaux"
+          features={[
             {
-              id: "1",
-              value: "23 Rue de l'Eminee",
-              description:
-                "Clermont-Ferrand, 63000 - Localisation idéale entre tradition et modernité",
+              id: "1",              title: "Homemade Ravioli",              description: "Ravioli frais préparés quotidiennement, garnis de ricotta et épinards, nappés d'une sauce beurre et sauge.",              tag: "Signature",              imageSrc: "http://img.b2bpic.net/free-photo/stuffed-beans-with-pork-salted-eggs-asian-cuisine_1150-23665.jpg",              imageAlt: "Ravioli maison"
             },
             {
-              id: "2",
-              value: "04 73 44 22 22",
-              description:
-                "Joignez-nous pour réserver votre table ou poser vos questions",
+              id: "2",              title: "Fettuccine Carbonara",              description: "La vraie recette romaine avec œuf, guanciale et pecorino. Authentique et irrésistible.",              tag: "Classique",              imageSrc: "http://img.b2bpic.net/free-photo/fried-meat-with-potato-onin-mixed-with-greens-mint-side-view_141793-2367.jpg",              imageAlt: "Fettuccine Carbonara"
             },
             {
-              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",
-            },
+              id: "3",              title: "Pappardelle au Cinghiale",              description: "Larges rubans de pâtes avec ragù de sanglier mijoté lentement. Saveur intense et délicate.",              tag: "Gibier",              imageSrc: "http://img.b2bpic.net/free-photo/male-chef-kitchen-cooking-dish-frying-pan_23-2149646198.jpg",              imageAlt: "Pappardelle au cinghiale"
+            }
           ]}
-          metricsAnimation="slide-up"
+          textboxLayout="default"
           useInvertedBackground={false}
+          animationType="slide-up"
         />
       </div>
 
-      <div id="reservation-cta" data-section="reservation-cta">
+      <div id="risottos" data-section="risottos">
+        <FeatureCardMedia
+          title="Risottos"
+          description="Créations gourmandes mêlant tradition et innovation"
+          tag="Créations Spéciales"
+          features={[
+            {
+              id: "1",              title: "Risotto de Foie Gras aux Morilles",              description: "Risotto crémeux infusé de foie gras poêlé et morilles fraîches. Une symphonie de saveurs automnales.",              tag: "Premium",              imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-salad-with-sliced-little-vegetables-inside-plate-dark-blue-desk_140725-50581.jpg",              imageAlt: "Risotto de foie gras"
+            },
+            {
+              id: "2",              title: "Risotto al Nero di Seppia",              description: "Risotto noir à l'encre de seiche, avec noix de Saint-Jacques et notes iodées. Spectaculaire et savoureux.",              tag: "Fruits de Mer",              imageSrc: "http://img.b2bpic.net/free-photo/shrimp-salad-with-glass-white-wine_140725-4174.jpg",              imageAlt: "Risotto al nero di seppia"
+            },
+            {
+              id: "3",              title: "Risotto aux Truffes",              description: "Arborio généreusement garni de truffe noire, parmesan et beurre frais. Luxe et simplicité.",              tag: "Truffe",              imageSrc: "http://img.b2bpic.net/free-photo/delicious-cake-glass-arrangement_23-2149030741.jpg",              imageAlt: "Risotto aux truffes"
+            }
+          ]}
+          textboxLayout="default"
+          useInvertedBackground={true}
+          animationType="slide-up"
+        />
+      </div>
+
+      <div id="traditional-italian" data-section="traditional-italian">
+        <FeatureCardMedia
+          title="Plats Traditionnels Italiens"
+          description="Nos interprétations des grands classiques de la cuisine italienne"
+          tag="Classiques"
+          features={[
+            {
+              id: "1",              title: "Gnocchi à la Truffe",              description: "Gnocchi fondants relevés d'huile de truffe noire et parmesan affiné. Délicatesse garantie.",              tag: "Spécialité",              imageSrc: "http://img.b2bpic.net/free-photo/shrimp-salad-with-glass-white-wine_140725-4174.jpg",              imageAlt: "Gnocchi à la truffe"
+            },
+            {
+              id: "2",              title: "Lasagnes Traditionnelles",              description: "Lasagnes généreuses préparées selon la recette familiale italienne de trois générations.",              tag: "Héritage Familial",              imageSrc: "http://img.b2bpic.net/free-photo/view-delicious-cuisine-dish_23-2149460211.jpg",              imageAlt: "Lasagnes traditionnelles"
+            },
+            {
+              id: "3",              title: "Breaded Escalope",              description: "Escalope de veau panée et frite, servie avec citron frais et légumes de saison. Croustillante et tendre.",              tag: "Viande",              imageSrc: "http://img.b2bpic.net/free-photo/fried-meat-with-potato-onin-mixed-with-greens-mint-side-view_141793-2367.jpg",              imageAlt: "Breaded Escalope"
+            }
+          ]}
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="slide-up"
+        />
+      </div>
+
+      <div id="desserts" data-section="desserts">
+        <FeatureCardMedia
+          title="Desserts Italiens"
+          description="Les douceurs qui couronnent votre repas avec délice"
+          tag="Finales Gourmandes"
+          features={[
+            {
+              id: "1",              title: "Mille-feuilles",              description: "Feuilletage croustillant, crème pâtissière généreuse et glaçage au sucre. L'élégance en trois couches.",              tag: "Classique",              imageSrc: "http://img.b2bpic.net/free-photo/delicious-cake-glass-arrangement_23-2149030741.jpg",              imageAlt: "Mille-feuilles"
+            },
+            {
+              id: "2",              title: "Panna Cotta",              description: "Crème italienne suave et délicate, garnie d'une coulis de fruits rouges. Douceur absolue.",              tag: "Saveur Légère",              imageSrc: "http://img.b2bpic.net/free-photo/tasty-buns-lie-white-plates-with-golden-design_8353-798.jpg",              imageAlt: "Panna cotta"
+            },
+            {
+              id: "3",              title: "Tiramisu Maison",              description: "Le grand classique italien : mascarpone, café et cacao. Réconfort et élégance en une bouchée.",              tag: "Intemporel",              imageSrc: "http://img.b2bpic.net/free-photo/glass-candlestick-with-silver-candle-other-decor-stuff-are-desk_8353-9850.jpg",              imageAlt: "Tiramisu maison"
+            }
+          ]}
+          textboxLayout="default"
+          useInvertedBackground={true}
+          animationType="slide-up"
+        />
+      </div>
+
+      <div id="beverages" data-section="beverages">
+        <ProductCardOne
+          title="Boissons & Vins d'Italie"
+          description="Une sélection de breuvages pour accompagner votre repas"
+          tag="Sélection Premium"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="scale-rotate"
+          gridVariant="three-columns-all-equal-width"
+          products={[
+            {
+              id: "1",              name: "Vino Rosso Toscano",              price: "Verre 12€ | Bouteille 45€",              imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-salad-with-sliced-little-vegetables-inside-plate-dark-blue-desk_140725-50581.jpg",              imageAlt: "Vin rouge toscan"
+            },
+            {
+              id: "2",              name: "Prosecco di Valdobbiadene",              price: "Verre 10€ | Bouteille 38€",              imageSrc: "http://img.b2bpic.net/free-photo/shrimp-salad-with-glass-white-wine_140725-4174.jpg",              imageAlt: "Prosecco"
+            },
+            {
+              id: "3",              name: "Chianti Classico Riserva",              price: "Verre 14€ | Bouteille 55€",              imageSrc: "http://img.b2bpic.net/free-photo/view-delicious-cuisine-dish_23-2149460211.jpg",              imageAlt: "Chianti Classico"
+            },
+            {
+              id: "4",              name: "Barolo Piemontese",              price: "Verre 15€ | Bouteille 60€",              imageSrc: "http://img.b2bpic.net/free-photo/fried-meat-with-potato-onin-mixed-with-greens-mint-side-view_141793-2367.jpg",              imageAlt: "Barolo Piemontese"
+            },
+            {
+              id: "5",              name: "Pinot Grigio Friuli",              price: "Verre 11€ | Bouteille 42€",              imageSrc: "http://img.b2bpic.net/free-photo/delicious-cake-glass-arrangement_23-2149030741.jpg",              imageAlt: "Pinot Grigio"
+            },
+            {
+              id: "6",              name: "Amaretto & Digestifs",              price: "Verre 8€",              imageSrc: "http://img.b2bpic.net/free-photo/tasty-buns-lie-white-plates-with-golden-design_8353-798.jpg",              imageAlt: "Digestifs italiens"
+            }
+          ]}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
         <ContactCTA
-          tag="Prêt à Déguster ?"
+          tag="Prêt à Réserver ?"
           tagIcon={ChefHat}
           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."
+          description="Vivez une expérience gastronomique inoubliable avec notre menu complet. Notre équipe vous accueille chaleureusement du mardi au dimanche."
           buttons={[
-            {
-              text: "Réserver une Table",
-              href: "/contact",
-            },
-            {
-              text: "Voir le Menu Complet",
-              href: "/menu",
-            },
+            { text: "Réserver une Table", href: "#" },
+            { text: "Retour à l'accueil", href: "/" }
           ]}
-          background={{
-            variant: "plain",
-          }}
+          background={{ variant: "plain" }}
           useInvertedBackground={false}
         />
       </div>
 
       <div id="footer" data-section="footer">
         <FooterBase
-          columns={footerColumns}
           logoText="Caffè Mazzo"
           copyrightText="© 2025 Caffè Mazzo | Restaurant Gastronomique - Clermont-Ferrand"
+          columns={footerColumns}
         />
       </div>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}
-- 
2.49.1


From 6db7d3c0e71b9a8b8312c82e3242020ff725cff6 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 9 Mar 2026 14:22:11 +0000
Subject: [PATCH 6/8] Update src/app/page.tsx

---
 src/app/page.tsx | 35 ++++++++++++++---------------------
 1 file changed, 14 insertions(+), 21 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6282005..e1d4923 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -11,37 +11,24 @@ import ProductCardOne from "@/components/sections/product/ProductCardOne";
 import MetricCardFourteen from "@/components/sections/metrics/MetricCardFourteen";
 import ContactCTA from "@/components/sections/contact/ContactCTA";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import { Sparkles, Heart, Coffee, Quote, ChefHat } from "lucide-react";
+import { Sparkles, Heart, Coffee, Quote, ChefHat, MapPin, Phone, Clock, Instagram, Facebook } from "lucide-react";
 
 export default function HomePage() {
   const navItems = [
-    { name: "Accueil", id: "home" },
+    { name: "Accueil", id: "/" },
     { name: "Le Restaurant", id: "le-restaurant" },
     { name: "Menu", id: "menu" },
     { name: "Galerie", id: "gallery" },
     { name: "Contact", id: "contact" }
   ];
 
-  const handleNavClick = (id: string) => {
-    if (id === "home") {
-      window.location.href = "/";
-    } else if (id === "le-restaurant") {
-      window.location.href = "/le-restaurant";
-    } else if (id === "menu" || id === "gallery" || id === "contact") {
-      const element = document.getElementById(id);
-      if (element) {
-        element.scrollIntoView({ behavior: "smooth" });
-      }
-    }
-  };
-
   const footerColumns = [
     {
       title: "Navigation",      items: [
         { label: "Accueil", href: "/" },
-        { label: "À Propos", href: "/le-restaurant" },
-        { label: "Galerie", href: "#gallery" },
-        { label: "Contact", href: "#contact" }
+        { label: "À Propos", href: "#le-restaurant" },
+        { label: "Menu", href: "#menu" },
+        { label: "Galerie", href: "#gallery" }
       ]
     },
     {
@@ -57,6 +44,12 @@ export default function HomePage() {
         { label: "19h00-22h30", href: "#" },
         { label: "Fermé le lundi", href: "#" }
       ]
+    },
+    {
+      title: "Réseaux",      items: [
+        { label: "Instagram", href: "https://instagram.com" },
+        { label: "Facebook", href: "https://facebook.com" }
+      ]
     }
   ];
 
@@ -77,7 +70,7 @@ export default function HomePage() {
         <NavbarStyleCentered
           navItems={navItems}
           button={{
-            text: "Réserver une table",            onClick: () => handleNavClick("contact")
+            text: "Réserver une table",            href: "#contact"
           }}
           brandName="Caffè Mazzo"
         />
@@ -101,7 +94,7 @@ export default function HomePage() {
         />
       </div>
 
-      <div id="about" data-section="about">
+      <div id="le-restaurant" data-section="about">
         <TestimonialAboutCard
           tag="Notre Histoire"
           tagIcon={Heart}
@@ -252,4 +245,4 @@ export default function HomePage() {
       </div>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}
-- 
2.49.1


From 555c0f42dc51d2584e792cf36f0b6be4ce392bf6 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 9 Mar 2026 14:22:11 +0000
Subject: [PATCH 7/8] Add src/app/reservation/page.tsx

---
 src/app/reservation/page.tsx | 223 +++++++++++++++++++++++++++++++++++
 1 file changed, 223 insertions(+)
 create mode 100644 src/app/reservation/page.tsx

diff --git a/src/app/reservation/page.tsx b/src/app/reservation/page.tsx
new file mode 100644
index 0000000..3c06e8a
--- /dev/null
+++ b/src/app/reservation/page.tsx
@@ -0,0 +1,223 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import Input from "@/components/form/Input";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import { Calendar, Clock, Users, Phone, Mail } from "lucide-react";
+
+export default function ReservationPage() {
+  const [formData, setFormData] = useState({
+    name: "",    phone: "",    numberOfPeople: "",    date: "",    time: ""});
+
+  const [submitted, setSubmitted] = useState(false);
+
+  const navItems = [
+    { 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: [
+        { label: "Accueil", href: "/" },
+        { label: "À Propos", href: "/le-restaurant" },
+        { label: "Réservation", href: "/reservation" },
+        { label: "Contact", href: "/contact" }
+      ]
+    },
+    {
+      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: "/reservation" }
+      ]
+    },
+    {
+      title: "Horaires",      items: [
+        { label: "Mardi-Dimanche : 12h00-14h30", href: "#" },
+        { label: "19h00-22h30", href: "#" },
+        { label: "Fermé le lundi", href: "#" }
+      ]
+    }
+  ];
+
+  const handleInputChange = (field: string, value: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Reservation submitted:", formData);
+    setSubmitted(true);
+    setTimeout(() => {
+      setFormData({ name: "", phone: "", numberOfPeople: "", date: "", time: "" });
+      setSubmitted(false);
+    }, 3000);
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="background-highlight"
+      borderRadius="soft"
+      contentWidth="compact"
+      sizing="largeSmallSizeMediumTitles"
+      background="circleGradient"
+      cardStyle="glass-depth"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="layered"
+      headingFontWeight="medium"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={navItems}
+          button={{
+            text: "Réserver une table",            onClick: () => window.location.href = "/reservation"
+          }}
+          brandName="Caffè Mazzo"
+        />
+      </div>
+
+      <div className="min-h-screen flex items-center justify-center py-20 px-4">
+        <div className="w-full max-w-2xl">
+          <div className="text-center mb-12">
+            <h1 className="text-4xl md:text-5xl font-bold mb-4">Réservez une Table</h1>
+            <p className="text-lg text-foreground/80 mb-2">Vivez une expérience culinaire inoubliable chez Caffè Mazzo</p>
+            <p className="text-sm text-foreground/60">Ouvert du mardi au dimanche • Fermé le lundi</p>
+          </div>
+
+          {!submitted ? (
+            <form onSubmit={handleSubmit} className="space-y-6 bg-card rounded-xl p-8 shadow-lg">
+              {/* Name */}
+              <div>
+                <label htmlFor="name" className="block text-sm font-medium mb-2 text-foreground/90">
+                  Nom <span className="text-red-500">*</span>
+                </label>
+                <Input
+                  value={formData.name}
+                  onChange={(value) => handleInputChange("name", value)}
+                  type="text"
+                  placeholder="Votre nom complet"
+                  required
+                  ariaLabel="Nom"
+                />
+              </div>
+
+              {/* Phone */}
+              <div>
+                <label htmlFor="phone" className="block text-sm font-medium mb-2 text-foreground/90">
+                  Téléphone <span className="text-red-500">*</span>
+                </label>
+                <Input
+                  value={formData.phone}
+                  onChange={(value) => handleInputChange("phone", value)}
+                  type="tel"
+                  placeholder="04 XX XX XX XX"
+                  required
+                  ariaLabel="Téléphone"
+                />
+              </div>
+
+              {/* Number of People */}
+              <div>
+                <label htmlFor="numberOfPeople" className="block text-sm font-medium mb-2 text-foreground/90">
+                  Nombre de personnes <span className="text-red-500">*</span>
+                </label>
+                <Input
+                  value={formData.numberOfPeople}
+                  onChange={(value) => handleInputChange("numberOfPeople", value)}
+                  type="number"
+                  placeholder="Nombre de convives"
+                  required
+                  ariaLabel="Nombre de personnes"
+                />
+              </div>
+
+              {/* Date */}
+              <div>
+                <label htmlFor="date" className="block text-sm font-medium mb-2 text-foreground/90">
+                  Date <span className="text-red-500">*</span>
+                </label>
+                <Input
+                  value={formData.date}
+                  onChange={(value) => handleInputChange("date", value)}
+                  type="date"
+                  required
+                  ariaLabel="Date de réservation"
+                />
+              </div>
+
+              {/* Time */}
+              <div>
+                <label htmlFor="time" className="block text-sm font-medium mb-2 text-foreground/90">
+                  Heure <span className="text-red-500">*</span>
+                </label>
+                <Input
+                  value={formData.time}
+                  onChange={(value) => handleInputChange("time", value)}
+                  type="time"
+                  required
+                  ariaLabel="Heure de réservation"
+                />
+              </div>
+
+              <button
+                type="submit"
+                className="w-full bg-primary-cta hover:bg-primary-cta/90 text-background font-semibold py-3 px-6 rounded-lg transition-colors duration-200"
+              >
+                Confirmer la Réservation
+              </button>
+            </form>
+          ) : (
+            <div className="bg-green-50 border border-green-200 rounded-xl p-8 text-center">
+              <div className="text-4xl mb-4">✓</div>
+              <h2 className="text-2xl font-bold mb-2 text-green-800">Réservation Confirmée!</h2>
+              <p className="text-green-700 mb-4">Merci {formData.name}! Nous avons bien reçu votre réservation.</p>
+              <p className="text-sm text-green-600">Un email de confirmation vous sera envoyé à votre numéro de téléphone.</p>
+            </div>
+          )}
+
+          {/* Contact Info */}
+          <div className="mt-12 grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="bg-card rounded-lg p-6">
+              <div className="flex items-start gap-4">
+                <Phone className="w-6 h-6 text-primary-cta flex-shrink-0 mt-1" />
+                <div>
+                  <h3 className="font-semibold mb-1">Téléphone</h3>
+                  <p className="text-foreground/80">04 73 44 22 22</p>
+                </div>
+              </div>
+            </div>
+            <div className="bg-card rounded-lg p-6">
+              <div className="flex items-start gap-4">
+                <Calendar className="w-6 h-6 text-primary-cta flex-shrink-0 mt-1" />
+                <div>
+                  <h3 className="font-semibold mb-1">Horaires</h3>
+                  <p className="text-foreground/80">Mardi-Dimanche</p>
+                  <p className="text-sm text-foreground/60">12h00-14h30, 19h00-22h30</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          logoText="Caffè Mazzo"
+          copyrightText="© 2025 Caffè Mazzo | Restaurant Gastronomique - Clermont-Ferrand"
+          columns={footerColumns}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
-- 
2.49.1


From 240246e85370f273aba538dfb0dc8b8f8a21a866 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 9 Mar 2026 14:22:12 +0000
Subject: [PATCH 8/8] Update src/app/styles/variables.css

---
 src/app/styles/variables.css | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css
index e44a749..e4f2533 100644
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #8B0000;
-  --primary-cta: #C41E3A;
+  --background: #f6f0e9;
+  --card: #efe7dd;
+  --foreground: #2b180a;
+  --primary-cta: #8B3A1A;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #556B2F;
   --secondary-cta-text: #8B0000;
-  --accent: #556B2F;
-  --background-accent: #D4AF37;
+  --accent: #D4AF37;
+  --background-accent: #94877c;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
-- 
2.49.1