bender/540ee5aa-491d-4705-bf16-0321d5d762fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add src/app/products/page.tsx

Browse Source
This commit is contained in:
bender
2026-06-10 17:45:57 +00:00
parent 6f9fa4080b
commit d76856cdf6
1 changed files with 342 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

342
src/app/products/page.tsx Normal file
View File

@@ -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>
);
}