37 lines
1.5 KiB
TypeScript
37 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { Card } from "@/components/ui/Card"
|
|
import { TextAnimation } from "@/components/ui/TextAnimation"
|
|
|
|
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" },
|
|
]
|
|
|
|
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"
|
|
/>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{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>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
} |