From d76856cdf6ca1b641becc3d6f3e0a8c5d58e0f84 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 10 Jun 2026 17:45:57 +0000
Subject: [PATCH] Add src/app/products/page.tsx

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

diff --git a/src/app/products/page.tsx b/src/app/products/page.tsx
new file mode 100644
index 0000000..73d4135
--- /dev/null
+++ b/src/app/products/page.tsx
@@ -0,0 +1,342 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
+
+export default function ProductsPage() {
+  const updatedNavItems = [
+    { name: "Home", id: "#hero" },
+    { name: "About", id: "#about" },
+    { name: "Products", id: "/products" },
+    { name: "Reviews", id: "#reviews" },
+    { name: "Services", id: "/services" },
+    { name: "Contact", id: "#contact" },
+  ];
+
+  const updatedFooterColumns = [
+    {
+      items: [
+        { label: "Home", href: "#hero" },
+        { label: "About Us", href: "#about" },
+        { label: "Products", href: "/products" },
+      ],
+    },
+    {
+      items: [
+        { label: "Reviews", href: "#reviews" },
+        { label: "Contact", href: "#contact" },
+        { label: "Reservations", href: "/services" },
+      ],
+    },
+    {
+      items: [
+        { label: "Privacy Policy", href: "#" },
+        { label: "Terms of Service", href: "#" },
+      ],
+    },
+  ];
+
+  const imagePlaceholder = "http://img.b2bpic.net/free-photo/menu-restaurant-still-life_23-2149405629.jpg";
+
+  const milkshakes = [
+    { id: "ms1", name: "Nutella", price: "dh35.00", variant: "Milk-Shake", imageSrc: imagePlaceholder },
+    { id: "ms2", name: "Café", price: "dh35.00", variant: "Milk-Shake", imageSrc: imagePlaceholder },
+    { id: "ms3", name: "Chocolat", price: "dh35.00", variant: "Milk-Shake", imageSrc: imagePlaceholder },
+    { id: "ms4", name: "Vanille", price: "dh35.00", variant: "Milk-Shake", imageSrc: imagePlaceholder },
+    { id: "ms5", name: "Cornflakes", price: "dh35.00", variant: "Milk-Shake", imageSrc: imagePlaceholder },
+    { id: "ms6", name: "Fraise", price: "dh35.00", variant: "Milk-Shake", imageSrc: imagePlaceholder },
+    { id: "ms7", name: "Caramel", price: "dh35.00", variant: "Milk-Shake", imageSrc: imagePlaceholder },
+    { id: "ms8", name: "Lotus", price: "dh35.00", variant: "Milk-Shake", imageSrc: imagePlaceholder },
+    { id: "ms9", name: "Kinder", price: "dh35.00", variant: "Milk-Shake", imageSrc: imagePlaceholder },
+    { id: "ms10", name: "Oreo", price: "dh35.00", variant: "Milk-Shake", imageSrc: imagePlaceholder },
+    { id: "ms11", name: "Kitkat", price: "dh35.00", variant: "Milk-Shake", imageSrc: imagePlaceholder },
+    { id: "ms12", name: "M&M's", price: "dh35.00", variant: "Milk-Shake", imageSrc: imagePlaceholder },
+    { id: "ms13", name: "Snickers", price: "dh35.00", variant: "Milk-Shake", imageSrc: imagePlaceholder }
+  ];
+
+  const jusNaturels = [
+    { id: "jn1", name: "Orange", price: "dh25.00", variant: "Jus Naturels", imageSrc: imagePlaceholder },
+    { id: "jn2", name: "Mangue", price: "dh30.00", variant: "Jus Naturels", imageSrc: imagePlaceholder },
+    { id: "jn3", name: "Citron", price: "dh30.00", variant: "Jus Naturels", imageSrc: imagePlaceholder },
+    { id: "jn4", name: "Ananas", price: "dh30.00", variant: "Jus Naturels", imageSrc: imagePlaceholder },
+    { id: "jn5", name: "Fraise", price: "dh30.00", variant: "Jus Naturels", imageSrc: imagePlaceholder },
+    { id: "jn6", name: "Avocat", price: "dh30.00", variant: "Jus Naturels", imageSrc: imagePlaceholder },
+    { id: "jn7", name: "Panaché", price: "dh35.00", variant: "Jus Naturels", imageSrc: imagePlaceholder }
+  ];
+
+  const mojitos = [
+    { id: "mj1", name: "Virgin Mojito", price: "dh30.00", variant: "Mojito", imageSrc: imagePlaceholder },
+    { id: "mj2", name: "Blue Mojito", price: "dh30.00", variant: "Mojito", imageSrc: imagePlaceholder },
+    { id: "mj3", name: "Fraise", price: "dh30.00", variant: "Mojito", imageSrc: imagePlaceholder },
+    { id: "mj4", name: "Mangue", price: "dh30.00", variant: "Mojito", imageSrc: imagePlaceholder },
+    { id: "mj5", name: "Blueberry", price: "dh30.00", variant: "Mojito", imageSrc: imagePlaceholder },
+    { id: "mj6", name: "Ananas", price: "dh30.00", variant: "Mojito", imageSrc: imagePlaceholder },
+    { id: "mj7", name: "Pina Colada", price: "dh30.00", variant: "Mojito", imageSrc: imagePlaceholder },
+    { id: "mj8", name: "Passion Fruit", price: "dh30.00", variant: "Mojito", imageSrc: imagePlaceholder },
+    { id: "mj9", name: "Tropical", price: "dh30.00", variant: "Mojito", imageSrc: imagePlaceholder },
+    { id: "mj10", name: "Red Mix Fruit", price: "dh30.00", variant: "Mojito", imageSrc: imagePlaceholder }
+  ];
+
+  const sodas = [
+    { id: "s1", name: "Coca-Cola", price: "dh10.00", variant: "Sodas", imageSrc: imagePlaceholder },
+    { id: "s2", name: "Fanta", price: "dh10.00", variant: "Sodas", imageSrc: imagePlaceholder },
+    { id: "s3", name: "Hawai", price: "dh10.00", variant: "Sodas", imageSrc: imagePlaceholder },
+    { id: "s4", name: "Schweppes Citron", price: "dh10.00", variant: "Sodas", imageSrc: imagePlaceholder },
+    { id: "s5", name: "Cura-Calès", price: "dh10.00", variant: "Sodas", imageSrc: imagePlaceholder },
+    { id: "s6", name: "Sprite", price: "dh10.00", variant: "Sodas", imageSrc: imagePlaceholder },
+    { id: "s7", name: "Poms", price: "dh10.00", variant: "Sodas", imageSrc: imagePlaceholder }
+  ];
+
+  const eauMineral = [
+    { id: "em1", name: "Eau Minéral (33 cl)", price: "dh10.00", variant: "Eau Minéral", imageSrc: imagePlaceholder }
+  ];
+
+  const kidsCombo = [
+    { id: "kc1", name: "Cheese Burger, Frites, Jus", price: "Price varies", variant: "Kids Combo", imageSrc: imagePlaceholder }
+  ];
+
+  const icedCoffee = [
+    { id: "ic1", name: "Iced Coffee Aromatisé (Caramel, chocolate, vanilla)", price: "dh30.00", variant: "Iced Coffee", imageSrc: imagePlaceholder },
+    { id: "ic2", name: "Iced Latte (Sans sucre, sans saveur)", price: "dh30.00", variant: "Iced Coffee", imageSrc: imagePlaceholder },
+    { id: "ic3", name: "Iced Americano", price: "Price varies", variant: "Iced Coffee", imageSrc: imagePlaceholder }
+  ];
+
+  const nespresso = [
+    { id: "n1", name: "Ispirazione Roma", price: "dh20.00", variant: "Nespresso", imageSrc: imagePlaceholder },
+    { id: "n2", name: "Ispirazione Napoli", price: "dh20.00", variant: "Nespresso", imageSrc: imagePlaceholder },
+    { id: "n3", name: "Decaffeinato Ispirazione Ristretto Italiano", price: "dh20.00", variant: "Nespresso", imageSrc: imagePlaceholder }
+  ];
+
+  const meatDishes = [
+    { id: "m1", name: "Mixed Beef And Chicken With Choice Of Sauce", price: "dh130.00", variant: "Meat", imageSrc: imagePlaceholder },
+    { id: "m2", name: "Sliced Beef Tenderloin With Choice Of Sauce", price: "dh130.00", variant: "Meat", imageSrc: imagePlaceholder },
+    { id: "m3", name: "Veal Fillet Medallion With Three Mushrooms", price: "dh160.00", variant: "Meat", imageSrc: imagePlaceholder },
+    { id: "m4", name: "Veal Tenderloin With Choice Of Sauce", price: "dh180.00", variant: "Meat", imageSrc: imagePlaceholder },
+    { id: "m5", name: "Ribeye Steak Of Beef Bordelaise", price: "dh150.00", variant: "Meat", imageSrc: imagePlaceholder },
+    { id: "m6", name: "Confit Lamb Shank", price: "dh190.00", variant: "Meat", imageSrc: imagePlaceholder }
+  ];
+
+  const chickenDishes = [
+    { id: "c1", name: "Sliced Chicken With Choice Of Sauce (Whole grain mustard, mushrooms)", price: "dh100.00", variant: "Chicken", imageSrc: imagePlaceholder },
+    { id: "c2", name: "Pollo Parmigiana (Breaded chicken with tomato sauce and gratinated cheese)", price: "dh100.00", variant: "Chicken", imageSrc: imagePlaceholder },
+    { id: "c3", name: "Chicken Breast Stuffed With Spinach And Ricotta", price: "dh100.00", variant: "Chicken", imageSrc: imagePlaceholder }
+  ];
+
+  const fishDishes = [
+    { id: "f1", name: "Skewers Fish Marinated Of Herbs", price: "dh130.00", variant: "Fish", imageSrc: imagePlaceholder },
+    { id: "f2", name: "John Dory Fish Normandy Style", price: "dh140.00", variant: "Fish", imageSrc: imagePlaceholder },
+    { id: "f3", name: "Prawns With Charmoula Sauce", price: "dh140.00", variant: "Fish", imageSrc: imagePlaceholder },
+    { id: "f4", name: "Fisherman's Skillet Provençal Style", price: "dh140.00", variant: "Fish", imageSrc: imagePlaceholder },
+    { id: "f5", name: "Sautéed Calamari With Garlic, Parsley & Lemon", price: "dh140.00", variant: "Fish", imageSrc: imagePlaceholder },
+    { id: "f6", name: "Salmon Fillet With Lemon Butter", price: "dh150.00", variant: "Fish", imageSrc: imagePlaceholder },
+    { id: "f7", name: "Trio Of Grilled Fish/Provençal Style", price: "dh170.00", variant: "Fish", imageSrc: imagePlaceholder },
+    { id: "f8", name: "Sole Fillet Stuffed With Prawns", price: "dh170.00", variant: "Fish", imageSrc: imagePlaceholder },
+    { id: "f9", name: "Spring Fish Stew", price: "dh190.00", variant: "Fish", imageSrc: imagePlaceholder },
+    { id: "f10", name: "Assortment Of Grilled Fish Vanisca Style", price: "dh200.00", variant: "Fish", imageSrc: imagePlaceholder }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="expand-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="mediumSmall"
+      sizing="medium"
+      background="blurBottom"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={updatedNavItems}
+            brandName="VANISCA"
+          />
+        </div>
+
+        <div id="products-hero" data-section="products-hero">
+          <ContactCTA
+            useInvertedBackground={false}
+            background={{ variant: "radial-gradient" }}
+            tag="Our Full Offerings"
+            title="Explore Our Diverse Menu"
+            description="From refreshing beverages to exquisite main courses, discover the culinary delights crafted by VANISCA."
+            buttons={[]}
+            buttonAnimation="slide-up"
+          />
+        </div>
+
+        <div id="milkshakes" data-section="milkshakes">
+          <ProductCardFour
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={false}
+            products={milkshakes}
+            title="Milk-Shakes"
+            description="Indulge in our creamy and delightful milk-shakes, available in a variety of classic and unique flavors."
+            tag="Drinks"
+          />
+        </div>
+
+        <div id="jus-naturels" data-section="jus-naturels">
+          <ProductCardFour
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={false}
+            products={jusNaturels}
+            title="Jus Naturels (Natural Juices)"
+            description="Freshly squeezed juices to invigorate your senses, made with the finest natural ingredients."
+            tag="Drinks"
+          />
+        </div>
+
+        <div id="mojitos" data-section="mojitos">
+          <ProductCardFour
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={false}
+            products={mojitos}
+            title="Mojitos"
+            description="Our refreshing mojitos, crafted with a perfect blend of mint, lime, and your favorite fruit flavors."
+            tag="Drinks"
+          />
+        </div>
+
+        <div id="sodas" data-section="sodas">
+          <ProductCardFour
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={false}
+            products={sodas}
+            title="Sodas"
+            description="A selection of popular sodas to quench your thirst."
+            tag="Drinks"
+          />
+        </div>
+
+        <div id="eau-mineral" data-section="eau-mineral">
+          <ProductCardFour
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={false}
+            products={eauMineral}
+            title="Eau Minéral (Mineral Water)"
+            description="Refreshing mineral water, available in convenient sizes."
+            tag="Drinks"
+          />
+        </div>
+
+        <div id="kids-combo" data-section="kids-combo">
+          <ProductCardFour
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={false}
+            products={kidsCombo}
+            title="Kids Combo"
+            description="Delicious and fun meal combinations perfect for our younger guests."
+            tag="Kids Menu"
+          />
+        </div>
+
+        <div id="iced-coffee" data-section="iced-coffee">
+          <ProductCardFour
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={false}
+            products={icedCoffee}
+            title="Iced Coffee"
+            description="Cool down with our selection of expertly crafted iced coffees, from classic lattes to flavored delights."
+            tag="Coffee"
+          />
+        </div>
+
+        <div id="nespresso" data-section="nespresso">
+          <ProductCardFour
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={false}
+            products={nespresso}
+            title="Nespresso"
+            description="Experience the rich and aromatic flavors of our premium Nespresso selections."
+            tag="Coffee"
+          />
+        </div>
+
+        <div id="meat" data-section="meat">
+          <ProductCardFour
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={false}
+            products={meatDishes}
+            title="Meat Dishes"
+            description="Savor our succulent meat dishes, prepared with the finest cuts and your choice of delicious sauces."
+            tag="Main Courses"
+          />
+        </div>
+
+        <div id="chicken" data-section="chicken">
+          <ProductCardFour
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={false}
+            products={chickenDishes}
+            title="Chicken Dishes"
+            description="Enjoy our tender and flavorful chicken creations, from classic recipes to unique culinary twists."
+            tag="Main Courses"
+          />
+        </div>
+
+        <div id="fish" data-section="fish">
+          <ProductCardFour
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={false}
+            products={fishDishes}
+            title="Fish Dishes"
+            description="Delight in our fresh and exquisitely prepared fish and seafood, featuring the best catches of the day."
+            tag="Main Courses"
+          />
+        </div>
+
+        <div id="contact" data-section="contact">
+          <ContactCTA
+            useInvertedBackground={false}
+            background={{ variant: "radial-gradient" }}
+            tag="Reservations & Location"
+            title="Your Table Awaits at VANISCA"
+            description="Ready for an unforgettable dining experience in Agadir Bay? Make a reservation or find us using the directions below. We look forward to welcoming you!"
+            buttons={[
+              { text: "Get Directions", href: "https://maps.app.goo.gl/example" },
+              { text: "Call Now", href: "tel:+212528202202" },
+            ]}
+            buttonAnimation="slide-up"
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            columns={updatedFooterColumns}
+            logoText="VANISCA"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}