bender/f6653f69-4793-4874-b605-04ba7a3f53ff
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: bender:version_2_1780442569226
Branches Tags
bender:main bender:version_6_1780459697843 bender:version_5_1780459584649 bender:version_4_1780459096389 bender:version_3_1780456645084 bender:version_2_1780442569226 bender:version_1_1780440084894
...
pull from: bender:version_3_1780456645084
Branches Tags
bender:main bender:version_6_1780459697843 bender:version_5_1780459584649 bender:version_4_1780459096389 bender:version_3_1780456645084 bender:version_2_1780442569226 bender:version_1_1780440084894

2 Commits
version_2_ ... version_3_

Author SHA1 Message Date
kudinDmitriyUp
f49e25e232 Bob AI: Added images and purchase buttons to menu items 2026-06-03 03:18:26 +00:00
bender
a1c6d7e302 Merge version_2_1780442569226 into main 
Merge version_2_1780442569226 into main
 2026-06-02 23:24:36 +00:00
1 changed files with 40 additions and 32 deletions
Expand all files Collapse all files

42
src/pages/HomePage/sections/Menu.tsx
View File

@@ -5,11 +5,13 @@ import React from 'react';
import Tag from "@/components/ui/Tag";
import ScrollReveal from "@/components/ui/ScrollReveal";
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
import ImageOrVideo from "@/components/ui/ImageOrVideo";
import Button from "@/components/ui/Button";
export default function MenuSection(): React.JSX.Element {
return (
<div id="menu" data-webild-section="menu" className="py-24 bg-background">
<div className="container mx-auto px-4 max-w-4xl">
<div className="container mx-auto px-4 max-w-6xl">
<div className="text-center mb-16">
<Tag text="Our Menu" className="mb-4" />
<h2 className="text-4xl md:text-5xl font-bold text-foreground mb-6">Crafted for You</h2>
@@ -18,25 +20,31 @@ export default function MenuSection(): React.JSX.Element {
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-8">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{[
{ name: "Classic Espresso", description: "Rich, concentrated shot of pure coffee essence.", price: "$3.00" },
{ name: "Vanilla Bean Latte", description: "Smooth espresso blended with steamed milk and real vanilla bean syrup.", price: "$4.50" },
{ name: "Caramel Macchiato", description: "Steamed milk with vanilla-flavored syrup, marked with espresso and caramel drizzle.", price: "$4.75" },
{ name: "Mocha Frappuccino", description: "Coffee blended with mocha sauce, milk, and ice, topped with whipped cream.", price: "$5.00" },
{ name: "Nitro Cold Brew", description: "Our signature cold brew infused with nitrogen for a sweet flavor and velvety crema.", price: "$4.25" },
{ name: "Iced Americano", description: "Espresso shots topped with cold water produce a light layer of crema, then served over ice.", price: "$3.50" },
{ name: "Matcha Green Tea Latte", description: "Smooth and creamy matcha lightly sweetened and served with steamed milk.", price: "$4.50" },
{ name: "Chai Tea Latte", description: "Black tea infused with cinnamon, clove, and other warming spices, combined with steamed milk.", price: "$4.25" },
{ name: "Artisan Butter Croissant", description: "Flaky, buttery, and baked fresh daily.", price: "$3.25" },
{ name: "Blueberry Muffin", description: "Moist muffin bursting with fresh blueberries and topped with a crumbly streusel.", price: "$3.50" }
{ name: "Classic Espresso", description: "Rich, concentrated shot of pure coffee essence.", price: "$3.00", imageSrc: "https://images.unsplash.com/photo-1510591509098-f4fdc6d0ff04?auto=format&fit=crop&q=80&w=800" },
{ name: "Vanilla Bean Latte", description: "Smooth espresso blended with steamed milk and real vanilla bean syrup.", price: "$4.50", imageSrc: "https://images.unsplash.com/photo-1572442388796-11668a67e53d?auto=format&fit=crop&q=80&w=800" },
{ name: "Caramel Macchiato", description: "Steamed milk with vanilla-flavored syrup, marked with espresso and caramel drizzle.", price: "$4.75", imageSrc: "https://images.unsplash.com/photo-1485808191679-5f86510681a2?auto=format&fit=crop&q=80&w=800" },
{ name: "Mocha Frappuccino", description: "Coffee blended with mocha sauce, milk, and ice, topped with whipped cream.", price: "$5.00", imageSrc: "https://images.unsplash.com/photo-1572490122747-3968b75cc699?auto=format&fit=crop&q=80&w=800" },
{ name: "Nitro Cold Brew", description: "Our signature cold brew infused with nitrogen for a sweet flavor and velvety crema.", price: "$4.25", imageSrc: "https://images.unsplash.com/photo-1461023058943-07fcbe16d735?auto=format&fit=crop&q=80&w=800" },
{ name: "Iced Americano", description: "Espresso shots topped with cold water produce a light layer of crema, then served over ice.", price: "$3.50", imageSrc: "https://images.unsplash.com/photo-1517701550927-30cf4ba1dba5?auto=format&fit=crop&q=80&w=800" },
{ name: "Matcha Green Tea Latte", description: "Smooth and creamy matcha lightly sweetened and served with steamed milk.", price: "$4.50", imageSrc: "https://images.unsplash.com/photo-1536514072410-5019a3c69182?auto=format&fit=crop&q=80&w=800" },
{ name: "Chai Tea Latte", description: "Black tea infused with cinnamon, clove, and other warming spices, combined with steamed milk.", price: "$4.25", imageSrc: "https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&q=80&w=800" },
{ name: "Artisan Butter Croissant", description: "Flaky, buttery, and baked fresh daily.", price: "$3.25", imageSrc: "https://images.unsplash.com/photo-1555507036-ab1f4038808a?auto=format&fit=crop&q=80&w=800" },
{ name: "Blueberry Muffin", description: "Moist muffin bursting with fresh blueberries and topped with a crumbly streusel.", price: "$3.50", imageSrc: "https://images.unsplash.com/photo-1607958996333-41aef7caefaa?auto=format&fit=crop&q=80&w=800" }
].map((item, index) => (
<ScrollReveal key={index} variant="slide-up" className="flex flex-col border-b border-border pb-4">
<div className="flex justify-between items-baseline mb-2">
<h3 className="text-xl font-semibold text-foreground">{item.name}</h3>
<span className="text-lg font-medium text-foreground">{item.price}</span>
<ScrollReveal key={index} variant="slide-up" className="flex flex-col bg-card rounded-xl overflow-hidden border border-border">
<div className="h-48 w-full relative">
<ImageOrVideo imageSrc={item.imageSrc} className="w-full h-full object-cover" />
</div>
<div className="p-6 flex flex-col flex-grow">
<div className="flex justify-between items-start mb-2">
<h3 className="text-xl font-semibold text-foreground pr-4">{item.name}</h3>
<span className="text-lg font-bold text-foreground whitespace-nowrap">{item.price}</span>
</div>
<p className="text-muted-foreground text-sm mb-6 flex-grow">{item.description}</p>
<Button text="Purchase" variant="primary" className="w-full justify-center" />
</div>
<p className="text-muted-foreground text-sm">{item.description}</p>
</ScrollReveal>
))}
</div>