Update src/app/page.tsx

Merge version_1 into main

src/app/about-us/page.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import MediaAbout from '@/components/sections/about/MediaAbout';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+
+export default function AboutUsPage() {
+  const navItems = [
+    { name: "Accueil", id: "/" },
+    { name: "Menu", id: "/menu" },
+    { name: "À Propos", id: "/about-us" },
+    { name: "Commander", id: "/order" },
+  ];
+
+  const footerColumns = [
+    {
+      title: "Navigation",      items: [
+        { label: "Accueil", href: "/" },
+        { label: "Menu", href: "/menu" },
+        { label: "À Propos", href: "/about-us" },
+        { label: "Commander", href: "/order" },
+      ],
+    },
+    {
+      title: "Information",      items: [
+        { label: "Contactez-nous", href: "/contact" },
+        { label: "Emplacement", href: "#" },
+        { label: "Carrières", href: "#" },
+      ],
+    },
+    {
+      title: "Légal",      items: [
+        { label: "Politique de Confidentialité", href: "#" },
+        { label: "Conditions d'Utilisation", href: "#" },
+      ],
+    },
+  ];
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="shift-hover"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="soft"
+        contentWidth="mediumSmall"
+        sizing="largeSmallSizeLargeTitles"
+        background="noise"
+        cardStyle="subtle-shadow"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="layered"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={navItems}
+            logoSrc="http://img.b2bpic.net/free-photo/grilled-lobster-tail-with-herbs-strawberries-black-plate_84443-94406.jpg"
+            logoAlt="Logo de Kokoye Bar & Grill"
+            brandName="Kokoye Bar & Grill"
+            button={{ text: "Réserver", href: "/order" }}
+          />
+        </div>
+
+        <div id="about-story" data-section="about-story">
+          <MediaAbout
+            title="Notre Histoire: Une Passion pour la Cuisine Tropicale"
+            description="Née d'une passion familiale pour les saveurs ensoleillées des Caraïbes, Kokoye Bar & Grill a été fondée avec l'ambition de partager l'authenticité de la cuisine haïtienne. Nos racines locales nous inspirent à utiliser les meilleurs ingrédients frais et à créer un lieu où chaque repas est une célébration de notre culture et de notre convivialité. Nous sommes fiers d'offrir une atmosphère chaleureuse et accueillante, où amis et familles peuvent se retrouver pour des moments inoubliables autour de plats savoureux. \n\n**Adresse:** 123 Rue de la Plage, Port-au-Prince, Haïti \n**Horaires d'Ouverture:** Mardi-Dimanche: 11h - 22h, Lundi: Fermé. \n\nVous nous trouverez facilement sur Google Maps en cherchant 'Kokoye Bar & Grill, Port-au-Prince'. Nous sommes impatients de vous accueillir!"
+            imageSrc="http://img.b2bpic.net/free-photo/beautiful-girl-white-dress-hat-sits-with-back-camera-exotic-beach-view-blue-ocean-sky-with-clouds_114579-24707.jpg"
+            imageAlt="Scène tropicale avec plage et mer"
+            useInvertedBackground={false}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterSimple
+            columns={footerColumns}
+            bottomLeftText="© 2024 Kokoye Bar & Grill. Tous droits réservés."
+            bottomRightText="Créé avec amour en Haïti."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/menu/page.tsx

@@ -2,187 +2,130 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import FooterSimple from '@/components/sections/footer/FooterSimple';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import Image from 'next/image';
+
+const menuItems = {
+  Burgers: [
+    { name: "Burger Créole", description: "Bœuf juteux, pikliz épicé, avocat, fromage local.", price: "15.00€", imageSrc: "http://img.b2bpic.net/free-photo/burger-with-salad_140725-7033.jpg" },
+    { name: "Burger Végétarien", description: "Galette de haricots noirs, oignons caramélisés, sauce maison.", price: "13.50€", imageSrc: "http://img.b2bpic.net/free-photo/vegetarian-burger_140725-7038.jpg" },
+    { name: "Slider Kokoye (x3)", description: "Mini-burgers, diverses saveurs, parfait pour partager.", price: "18.00€", imageSrc: "http://img.b2bpic.net/free-photo/mini-burgers_140725-7043.jpg" }
+  ],
+  Grillades: [
+    { name: "Poisson Gros Sel", description: "Poisson frais entier grillé, assaisonné aux herbes créoles.", price: "22.00€", imageSrc: "http://img.b2bpic.net/free-photo/fish-platter_140725-7048.jpg" },
+    { name: "Brochette de Crevettes", description: "Crevettes marinées et grillées, légumes de saison.", price: "19.50€", imageSrc: "http://img.b2bpic.net/free-photo/shrimp-skewers_140725-7053.jpg" },
+    { name: "Poulet Boucané", description: "Cuisse de poulet fumée et grillée, saveur authentique.", price: "17.00€", imageSrc: "http://img.b2bpic.net/free-photo/smoked-chicken_140725-7058.jpg" },
+    { name: "Côtes Levées de Porc", description: "Côtes de porc marinées aux épices tropicales, tendres à souhait.", price: "25.00€", imageSrc: "http://img.b2bpic.net/free-photo/pork-ribs_140725-7063.jpg" }
+  ],
+  Boissons: [
+    { name: "Jus de Corossol", description: "Jus frais et exotique, légèrement sucré.", price: "5.00€", imageSrc: "http://img.b2bpic.net/free-photo/soursop-juice_140725-7068.jpg" },
+    { name: "Limonade à la Menthe", description: "Rafraîchissante, faite maison avec de la menthe fraîche.", price: "4.50€", imageSrc: "http://img.b2bpic.net/free-photo/mint-lemonade_140725-7073.jpg" },
+    { name: "Bière Locale (Prestige)", description: "La bière iconique d'Haïti.", price: "6.00€", imageSrc: "http://img.b2bpic.net/free-photo/prestige-beer_140725-7078.jpg" },
+    { name: "Cocktail du Jour", description: "Demandez à votre serveur notre création spéciale.", price: "9.00€", imageSrc: "http://img.b2bpic.net/free-photo/cocktail-of-the-day_140725-7083.jpg" }
+  ],
+  Desserts: [
+    { name: "Salade de Fruits Exotiques", description: "Mélange frais de mangue, papaye, ananas, noix de coco.", price: "8.00€", imageSrc: "http://img.b2bpic.net/free-photo/exotic-fruit-salad_140725-7088.jpg" },
+    { name: "Gâteau Patate", description: "Gâteau traditionnel haïtien à base de patate douce.", price: "7.50€", imageSrc: "http://img.b2bpic.net/free-photo/sweet-potato-cake_140725-7093.jpg" },
+    { name: "Flan au Coco", description: "Flan crémeux à la noix de coco, une douceur tropicale.", price: "7.00€", imageSrc: "http://img.b2bpic.net/free-photo/coconut-flan_140725-7098.jpg" }
+  ]
+};
+
+export default function MenuPage() {
+  const navItems = [
+    { name: "Accueil", id: "/" },
+    { name: "Menu", id: "/menu" },
+    { name: "Commander", id: "/order" }
+  ];
+
+  const footerColumns = [
+    {
+      title: "Navigation",      items: [
+        { label: "Accueil", href: "/" },
+        { label: "Menu", href: "/menu" },
+        { label: "Commander", href: "/order" }
+      ]
+    }
+  ];
 
-export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="shift-hover"
-        defaultTextAnimation="entrance-slide"
-        borderRadius="soft"
-        contentWidth="mediumSmall"
-        sizing="largeSmallSizeLargeTitles"
-        background="noise"
-        cardStyle="subtle-shadow"
-        primaryButtonStyle="gradient"
-        secondaryButtonStyle="layered"
-        headingFontWeight="bold"
+      defaultButtonVariant="shift-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="mediumSmall"
+      sizing="largeSmallSizeLargeTitles"
+      background="noise"
+      cardStyle="subtle-shadow"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="layered"
+      headingFontWeight="bold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
-      navItems={[
-        {
-          name: "Accueil",
-          id: "/",
-        },
-        {
-          name: "Menu",
-          id: "/menu",
-        },
-        {
-          name: "À Propos",
-          id: "/about",
-        },
-        {
-          name: "Commander",
-          id: "/order",
-        },
-      ]}
-      logoSrc="http://img.b2bpic.net/free-photo/grilled-lobster-tail-with-herbs-strawberries-black-plate_84443-94406.jpg"
-      logoAlt="Logo de Kokoye Bar & Grill"
-      brandName="Kokoye Bar & Grill"
-      button={{
-        text: "Réserver",
-        href: "/order",
-      }}
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={navItems}
+            logoSrc="http://img.b2bpic.net/free-photo/grilled-lobster-tail-with-herbs-strawberries-black-plate_84443-94406.jpg"
+            logoAlt="Logo de Kokoye Bar & Grill"
+            brandName="Kokoye Bar & Grill"
+            button={{
+              text: "Réserver",              href: "/order"
+            }}
+          />
+        </div>
 
-  <div id="menu-products" data-section="menu-products">
-      <ProductCardTwo
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
-      products={[
-        {
-          id: "1",
-          brand: "Grillades",
-          name: "Tassot de Dinde",
-          price: "HTG 1200",
-          rating: 5,
-          reviewCount: "50",
-          imageSrc: "http://img.b2bpic.net/free-photo/kaeng-liang-bowl-with-spices-black-cement-floor_1150-35162.jpg",
-          imageAlt: "Tassot de dinde haïtien",
-        },
-        {
-          id: "2",
-          brand: "Fruits de Mer",
-          name: "Poisson Gros Sel",
-          price: "HTG 1800",
-          rating: 5,
-          reviewCount: "45",
-          imageSrc: "http://img.b2bpic.net/free-photo/tasty-mediterranean-mussels-with-copy-space_23-2148393649.jpg",
-          imageAlt: "Poisson entier grillé",
-        },
-        {
-          id: "3",
-          brand: "Classiques",
-          name: "Griot",
-          price: "HTG 1350",
-          rating: 5,
-          reviewCount: "60",
-          imageSrc: "http://img.b2bpic.net/free-photo/beef-fried-thai-food-white-plate-with-spring-onion-kaffir-lime-leaves-chilies-salad-chili-paste-cup_1150-21290.jpg",
-          imageAlt: "Griot de porc haïtien",
-        },
-        {
-          id: "4",
-          brand: "Poulet",
-          name: "Poulet Créole",
-          price: "HTG 1100",
-          rating: 4,
-          reviewCount: "30",
-          imageSrc: "http://img.b2bpic.net/free-photo/grilles-chicken-steak-with-teriyaki-sauce_1339-5199.jpg",
-          imageAlt: "Poulet en sauce créole",
-        },
-        {
-          id: "5",
-          brand: "Apéritifs",
-          name: "Accras de Morue",
-          price: "HTG 600",
-          rating: 5,
-          reviewCount: "25",
-          imageSrc: "http://img.b2bpic.net/free-photo/vertical-closeup-shot-potato-wedges_181624-42187.jpg",
-          imageAlt: "Accras de morue croustillants",
-        },
-        {
-          id: "6",
-          brand: "Soupes",
-          name: "Soupe Joumou",
-          price: "HTG 850",
-          rating: 5,
-          reviewCount: "35",
-          imageSrc: "http://img.b2bpic.net/free-photo/side-close-up-view-soup-pumpkin-soup-board-spoon-oil-citrus-fruits-tomatoes_140725-71899.jpg",
-          imageAlt: "Soupe Joumou traditionnelle",
-        },
-      ]}
-      title="Notre Menu Authentique"
-      description="Découvrez une explosion de saveurs caribéennes avec nos plats signature, préparés avec passion et ingrédients frais."
-    />
-  </div>
+        <main className="min-h-screen pt-28 pb-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
+          <h1 className="text-4xl md:text-5xl font-extrabold text-center mb-12 text-foreground">
+            Notre Menu Gourmand
+          </h1>
 
-  <div id="footer" data-section="footer">
-      <FooterSimple
-      columns={[
-        {
-          title: "Navigation",
-          items: [
-            {
-              label: "Accueil",
-              href: "/",
-            },
-            {
-              label: "Menu",
-              href: "/menu",
-            },
-            {
-              label: "À Propos",
-              href: "/about",
-            },
-            {
-              label: "Commander",
-              href: "/order",
-            },
-          ],
-        },
-        {
-          title: "Information",
-          items: [
-            {
-              label: "Contactez-nous",
-              href: "/contact",
-            },
-            {
-              label: "Emplacement",
-              href: "#",
-            },
-            {
-              label: "Carrières",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Légal",
-          items: [
-            {
-              label: "Politique de Confidentialité",
-              href: "#",
-            },
-            {
-              label: "Conditions d'Utilisation",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      bottomLeftText="© 2024 Kokoye Bar & Grill. Tous droits réservés."
-      bottomRightText="Créé avec amour en Haïti."
-    />
-  </div>
+          {Object.entries(menuItems).map(([category, items]) => (
+            <section key={category} className="mb-16">
+              <h2 className="text-3xl md:text-4xl font-bold text-center mb-8 text-primary-cta">
+                {category}
+              </h2>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                {items.map((item, index) => (
+                  <div
+                    key={index}
+                    className="bg-card p-6 rounded-lg shadow-lg flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-4"
+                  >
+                    {item.imageSrc && (
+                      <div className="relative w-full h-48 md:w-32 md:h-32 flex-shrink-0 rounded-md overflow-hidden">
+                        <Image
+                          src={item.imageSrc}
+                          alt={item.name}
+                          layout="fill"
+                          objectFit="cover"
+                          className="rounded-md"
+                        />
+                      </div>
+                    )}
+                    <div className="flex-grow text-center md:text-left">
+                      <h3 className="text-xl font-semibold text-foreground mb-1">
+                        {item.name}
+                      </h3>
+                      <p className="text-sm text-foreground/80 mb-2">
+                        {item.description}
+                      </p>
+                      <p className="text-lg font-bold text-primary-cta">
+                        {item.price}
+                      </p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </section>
+          ))}
+        </main>
+
+        <div id="footer" data-section="footer">
+          <FooterSimple
+            columns={footerColumns}
+            bottomLeftText="© 2024 Kokoye Bar & Grill. Tous droits réservés."
+            bottomRightText="Créé avec amour en Haïti."
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/page.tsx

@@ -13,6 +13,37 @@ import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCar
 import { Leaf, Smile, Sun } from "lucide-react";
 
 export default function LandingPage() {
+  const navItems = [
+    { name: "Accueil", id: "/" },
+    { name: "Menu", id: "/menu" },
+    { name: "À Propos", id: "/about-us" }, // Updated link for the new About Us page
+    { name: "Commander", id: "/order" },
+  ];
+
+  const footerColumns = [
+    {
+      title: "Navigation",      items: [
+        { label: "Accueil", href: "/" },
+        { label: "Menu", href: "/menu" },
+        { label: "À Propos", href: "/about-us" }, // Updated link for the new About Us page
+        { label: "Commander", href: "/order" },
+      ],
+    },
+    {
+      title: "Information",      items: [
+        { label: "Contactez-nous", href: "/contact" },
+        { label: "Emplacement", href: "#" },
+        { label: "Carrières", href: "#" },
+      ],
+    },
+    {
+      title: "Légal",      items: [
+        { label: "Politique de Confidentialité", href: "#" },
+        { label: "Conditions d'Utilisation", href: "#" },
+      ],
+    },
+  ];
+
   return (
     <ThemeProvider
         defaultButtonVariant="shift-hover"
@@ -29,16 +60,7 @@ export default function LandingPage() {
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
-      navItems={[
-        {
-          name: "Accueil",          id: "/"},
-        {
-          name: "Menu",          id: "/menu"},
-        {
-          name: "À Propos",          id: "/about"},
-        {
-          name: "Commander",          id: "/order"},
-      ]}
+      navItems={navItems}
       logoSrc="http://img.b2bpic.net/free-photo/grilled-lobster-tail-with-herbs-strawberries-black-plate_84443-94406.jpg"
       logoAlt="Logo de Kokoye Bar & Grill"
       brandName="Kokoye Bar & Grill"
@@ -197,38 +219,7 @@ export default function LandingPage() {
 
   <div id="footer" data-section="footer">
       <FooterSimple
-      columns={[
-        {
-          title: "Navigation",          items: [
-            {
-              label: "Accueil",              href: "/"},
-            {
-              label: "Menu",              href: "/menu"},
-            {
-              label: "À Propos",              href: "/about"},
-            {
-              label: "Commander",              href: "/order"},
-          ],
-        },
-        {
-          title: "Information",          items: [
-            {
-              label: "Contactez-nous",              href: "/contact"},
-            {
-              label: "Emplacement",              href: "#"},
-            {
-              label: "Carrières",              href: "#"},
-          ],
-        },
-        {
-          title: "Légal",          items: [
-            {
-              label: "Politique de Confidentialité",              href: "#"},
-            {
-              label: "Conditions d'Utilisation",              href: "#"},
-          ],
-        },
-      ]}
+      columns={footerColumns}
       bottomLeftText="© 2024 Kokoye Bar & Grill. Tous droits réservés."
       bottomRightText="Créé avec amour en Haïti."
     />