Update src/app/menu/page.tsx
This commit is contained in:
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user