Add src/app/menu/page.tsx

This commit is contained in:
2026-03-19 10:46:02 +00:00
parent 1c3490426d
commit 6d69ba4e9d

96
src/app/menu/page.tsx Normal file
View File

@@ -0,0 +1,96 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
const assetMap: Record<string, { url: string; alt?: string }> = {
"product-espresso": {
"url": "https://pixabay.com/get/gf71dbf3ecb82b48876a1a7407baff43e32aeafaa6e02694a3bea260bfa13b60f0b36703799ea9c452568cd4d18d2ab3bedb5815b7bcbd20aab9f9af9eef27fad_1280.jpg", "alt": "classic espresso shot"
},
"product-latte": {
"url": "https://pixabay.com/get/g829a4d843bbc5ded8bcec2fcd256c4b9be3686f36f9e8c9096947b82da3fadff949885d08557b6324b0fbb57cfc5b40118365cca59ee91b21d9cf0e6bb5bb226_1280.jpg", "alt": "creamy latte art mug"
},
"product-cappuccino": {
"url": "https://pixabay.com/get/g998cc4010d6e7ceae8492c17dd4682b1073fe2d30d8140387712ac33d186958649f180503554f81cc51c0425ca3ed8c1499008fe7176eef99d12e723876ebb02_1280.jpg", "alt": "cappuccino with foam and cinnamon"
},
"product-croissant": {
"url": "https://pixabay.com/get/g0605d179f182d23ae56255f5447d95ee8b411cc14ae6f006c035dd6173dee32141af9bc0d4a1cde0c6b29d8bdc3220854c5ec5d227bc58a4191899efbaf44b1f_1280.jpg", "alt": "freshly baked croissant pastry"
},
"product-muffin": {
"url": "https://pixabay.com/get/gf4c1e327f91c786dc66827e4dcbeea8b919fd7cd29d564e31ce08920240bb0611e1842267357b228b56f5e47b5489eac85f451ef3f762741bdb2781bc978e927_1280.jpg", "alt": "blueberry muffin baked goods"
},
"product-iced-americano": {
"url": "https://pixabay.com/get/gcfa7b717a7e78fa77566c0f9133ff71203f0b3f1db3eecc6afd0cd23faeb3f62db6b5fd97358d754763f725e5c6e35269517d2ff4959436f915b1f883daef494_1280.jpg", "alt": "iced americano glass cold coffee"
}
};
function resolveAsset(id: string) {
const asset = assetMap[id.replace('asset://', '')];
return asset ? { src: asset.url, alt: asset.alt } : { src: '', alt: '' };
}
export default function MenuPage() {
return (
<ThemeProvider
defaultButtonVariant="directional-hover"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="medium"
sizing="largeSmall"
background="circleGradient"
cardStyle="layered-gradient"
primaryButtonStyle="double-inset"
secondaryButtonStyle="solid"
headingFontWeight="extrabold"
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Home", id: "/" },
{ name: "Menu", id: "/menu" },
{ name: "About Us", id: "/about" },
{ name: "Reviews", id: "reviews" },
{ name: "Contact", id: "contact" }
]}
button={{
text: "Order Now", href: "#contact"
}}
brandName="Brew Bliss"
/>
</div>
<div id="menu" data-section="menu">
<ProductCardOne
title="Our Signature Brews"
description="Discover our handcrafted coffee and delightful pastries, made fresh daily with the finest ingredients."
products={[
{ id: "1", name: "Classic Espresso", price: "$3.50", imageSrc: resolveAsset("asset://product-espresso").src, imageAlt: resolveAsset("asset://product-espresso").alt },
{ id: "2", name: "Creamy Latte", price: "$5.00", imageSrc: resolveAsset("asset://product-latte").src, imageAlt: resolveAsset("asset://product-latte").alt },
{ id: "3", name: "Cappuccino Delight", price: "$4.75", imageSrc: resolveAsset("asset://product-cappuccino").src, imageAlt: resolveAsset("asset://product-cappuccino").alt },
{ id: "4", name: "Fresh Croissant", price: "$4.20", imageSrc: resolveAsset("asset://product-croissant").src, imageAlt: resolveAsset("asset://product-croissant").alt },
{ id: "5", name: "Blueberry Muffin", price: "$3.80", imageSrc: resolveAsset("asset://product-muffin").src, imageAlt: resolveAsset("asset://product-muffin").alt },
{ id: "6", name: "Iced Americano", price: "$4.00", imageSrc: resolveAsset("asset://product-iced-americano").src, imageAlt: resolveAsset("asset://product-iced-americano").alt }
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="Brew Bliss"
columns={[
{ title: "Menu", items: [{ label: "Espresso", href: "/menu" }, { label: "Lattes", href: "/menu" }, { label: "Pastries", href: "/menu" }] },
{ title: "Company", items: [{ label: "Our Story", href: "/about" }, { label: "Reviews", href: "/#reviews" }, { label: "Contact", href: "/#contact" }] },
{ title: "Follow Us", items: [{ label: "Instagram", href: "https://instagram.com/brewbliss" }, { label: "Facebook", href: "https://facebook.com/brewbliss" }] }
]}
copyrightText="© 2024 Brew Bliss. All rights reserved."
/>
</div>
</ThemeProvider>
);
}