vula-projects/vula-c66a1ba0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Deploy

Browse Source
This commit is contained in:
Vula Builder
2026-06-23 08:47:33 +00:00
parent 162ce13e40
commit 78ff8619de
1 changed files with 100 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/sections/MenuPreview.tsx
+100
View File
@@ -0,0 +1,100 @@
'use client'
import { Card, CardHeader, CardTitle, CardContent, CardFooter } from "@/components/ui/Card"
import Button from "@/components/ui/Button"
import Badge from "@/components/ui/Badge"
import Image from "next/image"
export default function MenuPreview() {
const items = [
{
id: "1",
name: "Margherita Pizza",
description: "San Marzano tomatoes, fresh mozzarella, basil",
image: "https://images.pexels.com/photos/31596394/pexels-photo-31596394.jpeg?auto=compress&cs=tinysrgb&h=350",
price: 16.95,
badge: "Wood-Fired"
},
{
id: "2",
name: "Pappardelle al Ragu",
description: "Slow-braised beef & pork ragu over fresh pappardelle",
image: "https://images.pexels.com/photos/34380267/pexels-photo-34380267.jpeg?auto=compress&cs=tinysrgb&h=350",
price: 21.50,
badge: "House Special"
},
{
id: "3",
name: "Tiramisu",
description: "Espresso-soaked ladyfingers, mascarpone cream, cocoa",
image: "https://images.pexels.com/photos/35759996/pexels-photo-35759996.jpeg?auto=compress&cs=tinysrgb&h=350",
price: 10.00,
badge: "Dessert"
}
]
return (
<section data-vula-section="menupreview" id="menu" className="py-20 lg:py-28 bg-white">
<div className="container mx-auto px-4 max-w-7xl">
<div className="text-center mb-12">
<p className="text-sm font-semibold tracking-widest uppercase text-[#6b8e23] mb-3">
From Our Kitchen
</p>
<h2 className="text-3xl lg:text-4xl font-semibold tracking-tight text-[#111827]">
Signature Dishes
</h2>
<p className="mt-4 text-lg text-neutral-600 max-w-2xl mx-auto">
Handpicked favorites from Pino&apos;s menu — each crafted with imported Italian ingredients and generations of family tradition.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{items.map((item) => (
<Card key={item.id} className="rounded-xl border border-neutral-100 bg-white shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-lifted)] hover:-translate-y-0.5 transition-all duration-200 ease-out overflow-hidden">
<div className="aspect-video overflow-hidden">
<Image
src={item.image}
alt={item.name}
width={400}
height={300}
className="object-cover w-full h-full hover:scale-105 transition-transform duration-500 ease-out"
/>
</div>
<CardHeader className="p-6 pb-0">
<div className="flex items-center justify-between mb-1">
<CardTitle className="text-xl font-semibold text-[#111827]">{item.name}</CardTitle>
<Badge className="bg-[#d4af37]/10 text-[#d4af37] border-0">{item.badge}</Badge>
</div>
<CardDescription className="text-neutral-600 mt-2">{item.description}</CardDescription>
</CardHeader>
<CardContent className="p-6 pt-4">
<p className="text-2xl font-bold text-[#dc2626]">${Number(item.price || 0).toFixed(2)}</p>
</CardContent>
<CardFooter className="p-6 pt-0">
<Button
variant="default"
size="sm"
href="/order"
className="w-full bg-[#dc2626] hover:bg-[#b71c1c] text-white transition-all duration-200"
>
Add to Order
</Button>
</CardFooter>
</Card>
))}
</div>
<div className="text-center mt-12">
<Button
variant="secondary"
size="lg"
href="/menu"
className="border-2 border-[#6b8e23] text-[#6b8e23] px-8 py-3 rounded-lg font-semibold hover:bg-[#6b8e23] hover:text-white transition-all duration-200"
>
View Full Menu
</Button>
</div>
</div>
</section>
)
}