Merge version_2 into main

Merge version_2 into main

src/app/page.tsx

@@ -6,9 +6,7 @@ import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloating
 import HeroBillboard from "@/components/sections/hero/HeroBillboard";
 import TextAbout from "@/components/sections/about/TextAbout";
 import ProductCardOne from "@/components/sections/product/ProductCardOne";
-import MetricCardFourteen from "@/components/sections/metrics/MetricCardFourteen";
 import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
-import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
 import ContactText from "@/components/sections/contact/ContactText";
 import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
 import { Sparkles } from "lucide-react";
@@ -16,85 +14,75 @@ import { Sparkles } from "lucide-react";
 export default function ItalianRestaurantPage() {
     return (
         <ThemeProvider
-            defaultButtonVariant="icon-arrow"
+            defaultButtonVariant="shift-hover"
-            defaultTextAnimation="background-highlight"
+            defaultTextAnimation="entrance-slide"
             borderRadius="soft"
-            contentWidth="medium"
+            contentWidth="mediumLarge"
-            sizing="mediumLarge"
+            sizing="large"
-            background="floatingGradient"
+            background="noise"
-            cardStyle="glass-elevated"
+            cardStyle="soft-shadow"
-            primaryButtonStyle="shadow"
+            primaryButtonStyle="diagonal-gradient"
-            secondaryButtonStyle="layered"
+            secondaryButtonStyle="solid"
-            headingFontWeight="semibold"
+            headingFontWeight="bold"
         >
             <ReactLenis root>
                 <div id="nav" data-section="nav">
                     <NavbarLayoutFloatingInline
-                        brandName="Bella Italia"
+                        brandName="Le Chat Botté"
                         navItems={[
                             { name: "Menu", id: "menu" },
-                            { name: "About", id: "about" },
+                            { name: "À Propos", id: "about" },
-                            { name: "Reservations", id: "contact" },
+                            { name: "Réservations", id: "contact" },
-                            { name: "Reviews", id: "testimonials" }
+                            { name: "Avis", id: "testimonials" }
                         ]}
                         button={{
-                            text: "Book a Table",
+                            text: "Réserver une Table",                            href: "#contact"
-                            href: "contact"
                         }}
                     />
                 </div>
 
                 <div id="hero" data-section="hero">
                     <HeroBillboard
-                        title="Welcome to Bella Italia"
+                        title="Bienvenue au Chat Botté"
-                        description="Authentic Italian cuisine crafted with passion and tradition. Experience the flavors of Italy in every dish."
+                        description="Crêperie artisanale et restaurant chaleureux. Découvrez nos galettes et crêpes bretonnes, élaborées avec passion et des ingrédients frais."
                         background={{ variant: "sparkles-gradient" }}
-                        tag="Fine Dining"
+                        tag="Cuisine Bretonne"
                         tagIcon={Sparkles}
-                        imageSrc="https://img.b2bpic.net/premium-photo/tasted-famous-italian-food_119101-260.jpg?id=6608694"
+                        imageSrc="https://images.unsplash.com/photo-1594953935397-9e7f7b7f2f2f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80"
-                        imageAlt="Elegant Italian restaurant dining room"
+                        imageAlt="Delicious crepes and galettes"
                         buttons={[
-                            { text: "Reserve Now", href: "contact" },
+                            { text: "Voir le Menu", href: "#menu" },
-                            { text: "View Menu", href: "menu" }
+                            { text: "Réserver", href: "#contact" }
                         ]}
                     />
                 </div>
 
                 <div id="about" data-section="about">
                     <TextAbout
-                        title="At Bella Italia, we honor the rich culinary traditions of Italy while celebrating the art of fine dining. Every dish tells a story of tradition, craftsmanship, and love for food."
+                        title="Au Chat Botté, nous célébrons la richesse de la gastronomie bretonne avec un savoir-faire artisanal. Chaque galette et crêpe est une invitation au voyage gustatif."
                         useInvertedBackground={false}
                         buttons={[
-                            { text: "Learn More", href: "#" }
+                            { text: "Notre Histoire", href: "#" }
                         ]}
                     />
                 </div>
 
                 <div id="menu" data-section="menu">
                     <ProductCardOne
-                        title="Featured Dishes"
+                        title="Nos Spécialités Bretonnes"
-                        description="Discover our signature dishes, carefully crafted using authentic Italian recipes and premium ingredients."
+                        description="Découvrez nos galettes salées et crêpes sucrées, préparées avec des ingrédients locaux de première qualité."
                         products={[
                             {
-                                id: "1",
+                                id: "1",                                name: "Galette Complète",                                price: "12€",                                imageSrc: "https://images.unsplash.com/photo-1549590885-3b1a8d5f3d3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80",                                imageAlt: "Galette Complète with ham, cheese, and egg"
-                                name: "Tagliatelle al Ragù",
-                                price: "$28",
-                                imageSrc: "https://img.b2bpic.net/free-photo/italian-spaghetti-tomato-sauce-with-parmesan-inside-blue-plate-top-view_114579-1556.jpg",
-                                imageAlt: "Tagliatelle al Ragù with meat sauce"
                             },
                             {
-                                id: "2",
+                                id: "2",                                name: "Galette Forestière",                                price: "14€",                                imageSrc: "https://images.unsplash.com/photo-1594953935397-9e7f7b7f2f2f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80",                                imageAlt: "Galette Forestière with mushrooms, cream, and ham"
-                                name: "Risotto ai Funghi",
-                                price: "$26",
-                                imageSrc: "https://img.b2bpic.net/free-photo/pasta-tomato-sauce-with-chopped-parmesan-tomato-basilic_114579-919.jpg",
-                                imageAlt: "Creamy mushroom risotto"
                             },
                             {
-                                id: "3",
+                                id: "3",                                name: "Crêpe Sucre Beurre",                                price: "6€",                                imageSrc: "https://images.unsplash.com/photo-1544837333-d9d5f7b4e3f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80",                                imageAlt: "Crêpe with sugar and butter"
-                                name: "Tiramisu Tradizionale",
+                            },
-                                price: "$12",
+                            {
-                                imageSrc: "https://img.b2bpic.net/free-photo/top-view-chicken-spaghetti-with-bell-peppers-parsley_140725-312.jpg",
+                                id: "4",                                name: "Crêpe Chocolat Chantilly",                                price: "8€",                                imageSrc: "https://images.unsplash.com/photo-1544837333-d9d5f7b4e3f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80",                                imageAlt: "Crêpe with chocolate and whipped cream"
-                                imageAlt: "Classic tiramisu dessert"
                             }
                         ]}
                         gridVariant="three-columns-all-equal-width"
@@ -104,67 +92,22 @@ export default function ItalianRestaurantPage() {
                     />
                 </div>
 
-                <div id="impact" data-section="impact">
-                    <MetricCardFourteen
-                        title="Celebrating Our Success"
-                        tag="By The Numbers"
-                        metrics={[
-                            {
-                                id: "1",
-                                value: "25+",
-                                description: "Years of excellence in authentic Italian cuisine and hospitality"
-                            },
-                            {
-                                id: "2",
-                                value: "50,000+",
-                                description: "Happy customers who have enjoyed memorable dining experiences at Bella Italia"
-                            }
-                        ]}
-                        metricsAnimation="slide-up"
-                        useInvertedBackground={true}
-                    />
-                </div>
-
                 <div id="testimonials" data-section="testimonials">
                     <TestimonialCardTen
-                        title="What Our Guests Say"
+                        title="Ce que nos Clients Disent"
-                        description="Experience the warmth and authenticity that our visitors cherish about Bella Italia."
+                        description="Découvrez les témoignages de ceux qui ont savouré l'expérience unique du Chat Botté."
                         testimonials={[
                             {
-                                id: "1",
+                                id: "1",                                title: "Un Voyage en Bretagne",                                quote: "Les galettes sont délicieuses et généreuses, un vrai voyage en Bretagne ! L'ambiance est cosy et le service impeccable. J'adore !",                                name: "Sophie Dubois",                                role: "Cliente fidèle",                                imageSrc: "https://img.b2bpic.net/free-photo/portrait-woman-chef-uniform-hat-standing-with-crossed-arms-looking-camera-copy-space_329181-12790.jpg",                                imageAlt: "Sophie Dubois"
-                                title: "An Unforgettable Evening",
-                                quote: "The pasta was absolutely divine! Every bite transported me straight to Italy. The ambiance, the service, everything was perfect. We'll definitely be back.",
-                                name: "Maria Rossi",
-                                role: "Food Critic",
-                                imageSrc: "https://img.b2bpic.net/free-photo/culinary-expert-commercial-kitchen-prepares-dish-with-fresh-basil-parsley_482257-124314.jpg",
-                                imageAlt: "Maria Rossi"
                             },
                             {
-                                id: "2",
+                                id: "2",                                title: "Adresse Incontournable",                                quote: "Une adresse incontournable pour les amateurs de crêpes. La pâte est parfaite et les garnitures originales. On y retourne toujours avec plaisir !",                                name: "Marc Lemaire",                                role: "Gourmet averti",                                imageSrc: "https://img.b2bpic.net/free-photo/side-view-chef-putting-some-spices-plate_23-2148726590.jpg",                                imageAlt: "Marc Lemaire"
-                                title: "Authentic Italian Magic",
-                                quote: "This is the most authentic Italian restaurant I've found in the city. The chef clearly knows his craft, and it shows in every plate. A true gem!",
-                                name: "Giovanni Ferrari",
-                                role: "Restaurant Enthusiast",
-                                imageSrc: "https://img.b2bpic.net/free-photo/chef-white-uniform-garnishes-plated-dish-with-herbs-spices_482257-121123.jpg",
-                                imageAlt: "Giovanni Ferrari"
                             },
                             {
-                                id: "3",
+                                id: "3",                                title: "Ma Crêperie Préférée",                                quote: "J'ai découvert Le Chat Botté par hasard et c'est devenu ma crêperie préférée. Les produits sont frais et la qualité est constante. Bravo à toute l'équipe !",                                name: "Chloé Martin",                                role: "Nouvelle Adepte",                                imageSrc: "https://img.b2bpic.net/free-photo/chef-preparing-dish_23-2149372134.jpg",                                imageAlt: "Chloé Martin"
-                                title: "Perfect for Special Occasions",
-                                quote: "We celebrated our anniversary here and it was spectacular. The attention to detail, the wine pairings, the warmth of the staff – simply extraordinary.",
-                                name: "Elena Marchetti",
-                                role: "Couple",
-                                imageSrc: "https://img.b2bpic.net/free-photo/close-up-chef-cooking-restaurant-kitchen_329181-16131.jpg",
-                                imageAlt: "Elena Marchetti"
                             },
                             {
-                                id: "4",
+                                id: "4",                                title: "Expérience Culinaire Exceptionnelle",                                quote: "L'ambiance familiale et les saveurs authentiques font du Chat Botté une expérience culinaire exceptionnelle. Idéal pour un repas entre amis ou en famille.",                                name: "Thomas Bernard",                                role: "Client régulier",                                imageSrc: "https://img.b2bpic.net/free-photo/caucasian-female-chef-uniform_23-2149506692.jpg",                                imageAlt: "Thomas Bernard"
-                                title: "Worth Every Visit",
-                                quote: "I've been coming to Bella Italia for three years now. The consistency, quality, and passion never wavers. It's become my second home.",
-                                name: "Antonio Bianchi",
-                                role: "Regular Guest",
-                                imageSrc: "https://img.b2bpic.net/free-photo/chef-workg-together-professional-kitchen_23-2149727992.jpg",
-                                imageAlt: "Antonio Bianchi"
                             }
                         ]}
                         textboxLayout="default"
@@ -172,39 +115,13 @@ export default function ItalianRestaurantPage() {
                     />
                 </div>
 
-                <div id="comparison" data-section="comparison">
-                    <FeatureCardSixteen
-                        title="What Sets Us Apart"
-                        description="Traditional Italian dining elevated with modern hospitality and exceptional service."
-                        animationType="slide-up"
-                        textboxLayout="default"
-                        useInvertedBackground={false}
-                        negativeCard={{
-                            items: [
-                                "Frozen pre-made ingredients",
-                                "Inconsistent flavors",
-                                "Rushed service",
-                                "Limited wine selection"
-                            ]
-                        }}
-                        positiveCard={{
-                            items: [
-                                "Fresh ingredients sourced daily from Italy",
-                                "Consistent excellence in every dish",
-                                "Attentive, unhurried service",
-                                "Curated selection of Italian wines"
-                            ]
-                        }}
-                    />
-                </div>
-
                 <div id="contact" data-section="contact">
                     <ContactText
-                        text="Ready to experience authentic Italian cuisine? Reserve your table at Bella Italia and join us for an evening of culinary excellence."
+                        text="Envie de déguster nos délicieuses galettes et crêpes ? Réservez votre table au Chat Botté pour une expérience gourmande inoubliable."
                         background={{ variant: "plain" }}
                         buttons={[
-                            { text: "Make a Reservation", href: "https://example.com/reservations" },
+                            { text: "Réserver une Table", href: "#contact" },
-                            { text: "Contact Us", href: "mailto:info@bellaitalia.com" }
+                            { text: "Nous Contacter", href: "mailto:info@lechatbotte.com" }
                         ]}
                         useInvertedBackground={false}
                     />
@@ -212,12 +129,12 @@ export default function ItalianRestaurantPage() {
 
                 <div id="footer" data-section="footer">
                     <FooterLogoReveal
-                        logoText="Bella Italia"
+                        logoText="Le Chat Botté"
-                        leftLink={{ text: "Privacy Policy", href: "#privacy" }}
+                        leftLink={{ text: "Politique de Confidentialité", href: "#privacy" }}
-                        rightLink={{ text: "Contact Us", href: "#contact" }}
+                        rightLink={{ text: "Nous Contacter", href: "#contact" }}
                     />
                 </div>
             </ReactLenis>
         </ThemeProvider>
     );
-}
+}

src/app/reservations-contact/page.tsx

@@ -0,0 +1,177 @@
+"use client";
+
+import React from "react";
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import HeroBillboard from "@/components/sections/hero/HeroBillboard";
+import ContactText from "@/components/sections/contact/ContactText";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import Input from "@/components/form/Input";
+import ButtonTextStagger from "@/components/button/ButtonTextStagger/ButtonTextStagger";
+
+export default function ReservationsContactPage() {
+    const [name, setName] = React.useState('');
+    const [email, setEmail] = React.useState('');
+    const [phone, setPhone] = React.useState('');
+    const [date, setDate] = React.useState('');
+    const [time, setTime] = React.useState('');
+    const [guests, setGuests] = React.useState('');
+    const [message, setMessage] = React.useState('');
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        // Handle reservation submission logic here
+        console.log({ name, email, phone, date, time, guests, message });
+        alert('Reservation request submitted!');
+        // Reset form
+        setName('');
+        setEmail('');
+        setPhone('');
+        setDate('');
+        setTime('');
+        setGuests('');
+        setMessage('');
+    };
+
+    return (
+        <ThemeProvider
+            defaultButtonVariant="icon-arrow"
+            defaultTextAnimation="background-highlight"
+            borderRadius="soft"
+            contentWidth="medium"
+            sizing="mediumLarge"
+            background="floatingGradient"
+            cardStyle="glass-elevated"
+            primaryButtonStyle="shadow"
+            secondaryButtonStyle="layered"
+            headingFontWeight="semibold"
+        >
+            <ReactLenis root>
+                <div id="nav" data-section="nav">
+                    <NavbarLayoutFloatingInline
+                        brandName="Bella Italia"
+                        navItems={[
+                            { name: "Menu", id: "menu" },
+                            { name: "About", id: "about" },
+                            { name: "Reservations", id: "/reservations-contact" },
+                            { name: "Gallery", id: "/gallery" },
+                            { name: "Legal", id: "/legal" },
+                            { name: "Reviews", id: "testimonials" }
+                        ]}
+                        button={{
+                            text: "Book a Table",                            href: "/reservations-contact"
+                        }}
+                    />
+                </div>
+
+                <div id="hero" data-section="hero">
+                    <HeroBillboard
+                        title="Réservations & Contact"
+                        description="Plan your visit or reach out to us for any inquiries. We look forward to hosting you at Bella Italia."
+                        background={{ variant: "plain" }}
+                        imageSrc="https://img.b2bpic.net/premium-photo/modern-style-dining-area_119101-267.jpg"
+                        imageAlt="Elegant restaurant interior with tables set"
+                        buttons={[
+                            { text: "Make a Reservation", href: "#reservation-form" },
+                            { text: "Contact Information", href: "#contact-info" }
+                        ]}
+                    />
+                </div>
+
+                <div id="reservation-form" data-section="reservation-form" className="py-24">
+                    <div className="container mx-auto px-4">
+                        <h2 className="text-4xl md:text-5xl font-semibold text-center mb-12">Make a Reservation</h2>
+                        <form onSubmit={handleSubmit} className="max-w-3xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6 bg-card p-8 rounded-lg shadow-xl">
+                            <Input
+                                type="text"
+                                placeholder="Full Name"
+                                value={name}
+                                onChange={setName}
+                                required
+                                ariaLabel="Full Name"
+                            />
+                            <Input
+                                type="email"
+                                placeholder="Email Address"
+                                value={email}
+                                onChange={setEmail}
+                                required
+                                ariaLabel="Email Address"
+                            />
+                            <Input
+                                type="tel"
+                                placeholder="Phone Number"
+                                value={phone}
+                                onChange={setPhone}
+                                ariaLabel="Phone Number"
+                            />
+                            <Input
+                                type="date"
+                                placeholder="Date"
+                                value={date}
+                                onChange={setDate}
+                                required
+                                ariaLabel="Reservation Date"
+                            />
+                            <Input
+                                type="time"
+                                placeholder="Time"
+                                value={time}
+                                onChange={setTime}
+                                required
+                                ariaLabel="Reservation Time"
+                            />
+                            <Input
+                                type="number"
+                                placeholder="Number of Guests"
+                                value={guests}
+                                onChange={setGuests}
+                                required
+                                ariaLabel="Number of Guests"
+                            />
+                            <div className="md:col-span-2">
+                                <textarea
+                                    className="w-full p-3 rounded-lg border border-gray-300 focus:ring-primary-cta focus:border-primary-cta bg-background-accent text-foreground transition-colors duration-300"
+                                    placeholder="Special Requests or Message"
+                                    rows={4}
+                                    value={message}
+                                    onChange={(e) => setMessage(e.target.value)}
+                                    aria-label="Special Requests"
+                                ></textarea>
+                            </div>
+                            <div className="md:col-span-2 flex justify-center mt-6">
+                                <ButtonTextStagger
+                                    type="submit"
+                                    text="Submit Reservation Request"
+                                    className="w-full md:w-auto px-8 py-3"
+                                />
+                            </div>
+                        </form>
+                    </div>
+                </div>
+
+                <div id="contact-info" data-section="contact-info">
+                    <ContactText
+                        text="Our team is here to assist you. Feel free to reach out with any questions or special requests."
+                        background={{ variant: "plain" }}
+                        buttons={[
+                            { text: "Call Us: +1 (234) 567-890", href: "tel:+1234567890" },
+                            { text: "Email Us: info@bellaitalia.com", href: "mailto:info@bellaitalia.com" },
+                            { text: "Visit Us: 123 Italian Way, Food City, IT 98765", href: "https://maps.app.goo.gl/YourRestaurantLocation" } // Placeholder for map link
+                        ]}
+                        useInvertedBackground={false}
+                    />
+                </div>
+
+                <div id="footer" data-section="footer">
+                    <FooterLogoReveal
+                        logoText="Bella Italia"
+                        leftLink={{ text: "Privacy Policy", href: "/legal" }}
+                        rightLink={{ text: "Contact Us", href: "/reservations-contact" }}
+                    />
+                </div>
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-inter-tight), sans-serif;
+  font-family: var(--font-inter), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-inter-tight), sans-serif;
+  font-family: var(--font-dm-sans), sans-serif;
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f5f5;
+  --background: #efebe5;
-  --card: #ffffff;
+  --card: #f7f2ea;
-  --foreground: #1c1c1c;
+  --foreground: #000000;
-  --primary-cta: #1c1c1c;
+  --primary-cta: #000000;
-  --primary-cta-text: #f5f5f5;
+  --primary-cta-text: #efebe5;
   --secondary-cta: #ffffff;
-  --secondary-cta-text: #1c1c1c;
+  --secondary-cta-text: #000000;
-  --accent: #e63946;
+  --accent: #ffffff;
-  --background-accent: #e8bea8;
+  --background-accent: #e1b875;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);