Deploy

2026-06-23 08:38:52 +00:00
parent 12618dec24
commit f715548d73
1 changed files with 88 additions and 0 deletions
@@ -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>
+  )
+}