vula-projects/vula-178c5c77
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:38:52 +00:00
parent 12618dec24
commit f715548d73
1 changed files with 88 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/sections/FeaturedMenuSection.tsx
+88
View File
@@ -0,0 +1,88 @@
'use client'
import { useMedusaProducts } from "@/hooks/useMedusaProducts"
import { Card, CardContent, CardFooter } from "@/components/ui/Card"
import Button from "@/components/ui/Button"
import Image from "next/image"
import Link from "next/link"
export default function FeaturedMenuSection() {
const { products = [], isLoading } = useMedusaProducts(4)
if (isLoading) {
return (
<section data-vula-section="featuredmenu" id="menu" className="py-20 lg:py-28 bg-neutral-50">
<div className="container mx-auto px-6 max-w-7xl">
<h2 className="text-3xl lg:text-4xl font-semibold tracking-tight text-center mb-12">Our Signature Dishes</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{[1,2,3,4].map(i => (
<div key={i} className="rounded-xl border border-neutral-200 bg-white p-6 h-64 animate-pulse">
<div className="bg-neutral-200 h-32 rounded-lg mb-4" />
<div className="bg-neutral-200 h-4 w-3/4 rounded mb-2" />
<div className="bg-neutral-200 h-3 w-1/2 rounded" />
</div>
))}
</div>
</div>
</section>
)
}
const menuItems = products.length > 0 ? products : [
{ id: "1", title: "Patatas Bravas", description: "Crispy potatoes with spicy tomato sauce & aioli", thumbnail: "https://images.pexels.com/photos/6979280/pexels-photo-6979280.jpeg?auto=compress&cs=tinysrgb&h=350", variants: [{ prices: [{ amount: 950, currency_code: "ZAR" }] }] },
{ id: "2", title: "Gambas al Ajillo", description: "Garlic sizzled prawns in olive oil & chili", thumbnail: "https://images.pexels.com/photos/35896397/pexels-photo-35896397.jpeg?auto=compress&cs=tinysrgb&h=350", variants: [{ prices: [{ amount: 1450, currency_code: "ZAR" }] }] },
{ id: "3", title: "Crema Catalana", description: "Caramelised custard with cinnamon & citrus", thumbnail: "https://images.pexels.com/photos/6979280/pexels-photo-6979280.jpeg?auto=compress&cs=tinysrgb&h=350", variants: [{ prices: [{ amount: 850, currency_code: "ZAR" }] }] },
{ id: "4", title: "Paella Valenciana", description: "Saffron rice with chicken, rabbit & vegetables", thumbnail: "https://images.pexels.com/photos/35896397/pexels-photo-35896397.jpeg?auto=compress&cs=tinysrgb&h=350", variants: [{ prices: [{ amount: 2200, currency_code: "ZAR" }] }] },
]
return (
<section id="menu" className="py-20 lg:py-28 bg-neutral-50">
<div className="container mx-auto px-6 max-w-7xl">
<div className="text-center mb-12">
<p className="text-sm font-semibold tracking-widest uppercase text-[#d4af37]">From Our Kitchen</p>
<h2 className="text-3xl lg:text-4xl font-semibold tracking-tight mt-2">Our Signature Dishes</h2>
<p className="text-base lg:text-lg text-neutral-600 mt-4 max-w-2xl mx-auto">
Each plate reflects Chef Antonio&apos;s journey from Seville&apos;s tapas bars to your table. Made with imported Spanish ingredients and local love.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{menuItems.slice(0,4).map((item) => {
const price = item.variants?.[0]?.prices?.[0]
return (
<Card key={item.id} className="overflow-hidden 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">
<div className="aspect-video overflow-hidden">
<Image
src={item.thumbnail || "https://images.pexels.com/photos/6979280/pexels-photo-6979280.jpeg?auto=compress&cs=tinysrgb&h=350"}
alt={item.title}
width={400}
height={300}
className="w-full h-full object-cover hover:scale-105 transition-transform duration-500 ease-out"
/>
</div>
<CardContent className="p-5 space-y-2">
<h3 className="text-lg font-semibold text-[#111827]">{item.title}</h3>
<p className="text-sm text-neutral-600 line-clamp-2">{item.description}</p>
</CardContent>
<CardFooter className="px-5 pb-5 pt-0 flex items-center justify-between">
<span className="text-[#ea580c] font-bold text-lg">
{price ? `R ${(price.amount / 100).toFixed(2)}` : "—"}
</span>
<Button variant="default" size="sm" className="bg-[#dc2626] text-white px-4 py-2 rounded-md font-medium hover:opacity-90 transition-all duration-200">
Order
</Button>
</CardFooter>
</Card>
)
})}
</div>
<div className="text-center mt-12">
<Link href="/menu">
<Button variant="secondary" size="lg" className="border-2 border-[#d4af37] text-[#d4af37] px-8 py-3 rounded-lg font-semibold hover:bg-[#d4af37] hover:text-white transition-all duration-200">
View Full Menu
</Button>
</Link>
</div>
</div>
</section>
)
}