bender/a37f030d-6e8a-4f3d-9f23-1ce03c0e604b
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bob AI: Create the Menu page file and define its basic content struc

Browse Source
This commit is contained in:
vitalijmulika
2026-04-29 13:51:41 +03:00
parent 6a2deb101a
commit d525c5e6ee
1 changed files with 26 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/sections/MenuSection.tsx
View File

@@ -1,37 +1,43 @@
"use client";
import Card from "@/components/ui/Card"
import TextAnimation from "@/components/ui/TextAnimation"
import Card from "@/components/ui/Card";
import TextAnimation from "@/components/ui/TextAnimation";
import ImageOrVideo from "@/components/ui/ImageOrVideo";
export default function MenuSection() {
const items = [
{ title: "Espresso", description: "Rich, bold, and smooth.", price: "$3.50" },
{ title: "Cappuccino", description: "Perfectly steamed milk.", price: "$4.50" },
{ title: "Latte", description: "Creamy and comforting.", price: "$4.75" },
{ title: "Mocha", description: "Decadent chocolate blend.", price: "$5.00" },
{ title: "Americano", description: "Espresso with hot water.", price: "$3.75" },
{ title: "Flat White", description: "Velvety microfoam finish.", price: "$4.25" },
]
{ title: "Espresso", description: "Rich, bold, and smooth.", price: "$3.50", imageSrc: "/espresso.jpg" },
{ title: "Cappuccino", description: "Perfectly steamed milk.", price: "$4.50", imageSrc: "/cappuccino.jpg" },
{ title: "Latte", description: "Creamy and comforting.", price: "$4.75", imageSrc: "/latte.jpg" },
{ title: "Mocha", description: "Decadent chocolate blend.", price: "$5.00", imageSrc: "/mocha.jpg" },
{ title: "Americano", description: "Espresso with hot water.", price: "$3.75", imageSrc: "/americano.jpg" },
{ title: "Flat White", description: "Velvety microfoam finish.", price: "$4.25", imageSrc: "/flat-white.jpg" },
];
return (
<section id="menu" className="py-24 bg-background">
<div className="max-w-6xl mx-auto px-6">
<TextAnimation
tag="h2"
text="Our Menu"
variant="fade-blur"
className="text-4xl font-bold text-foreground mb-12 text-center luxury-serif"
<TextAnimation
tag="h2"
text="Our Menu"
variant="fade-blur"
className="text-5xl font-bold text-foreground mb-16 text-center luxury-serif"
/>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
{items.map((item, i) => (
<Card key={i} className="p-6 flex flex-col gap-4">
<h3 className="text-xl font-bold text-foreground">{item.title}</h3>
<p className="text-muted-foreground">{item.description}</p>
<span className="text-lg font-bold text-primary-cta">{item.price}</span>
<Card key={i} className="p-8 flex flex-col gap-6 hover:-translate-y-2 transition-transform duration-300">
<div className="h-64 overflow-hidden rounded-lg">
<ImageOrVideo imageSrc={item.imageSrc} className="w-full h-full object-cover" />
</div>
<div className="flex flex-col gap-2">
<h3 className="text-2xl font-bold text-foreground luxury-serif">{item.title}</h3>
<p className="text-muted-foreground text-lg">{item.description}</p>
<span className="text-xl font-bold text-primary-cta mt-2">{item.price}</span>
</div>
</Card>
))}
</div>
</div>
</section>
)
);
}