From 30cdfa64b37ba426ccee0456691c3fe49ba225c9 Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Tue, 23 Jun 2026 08:39:04 +0000
Subject: [PATCH] Deploy

---
 .../sections/MenuPreviewSection.tsx           | 80 +++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 src/components/sections/MenuPreviewSection.tsx

diff --git a/src/components/sections/MenuPreviewSection.tsx b/src/components/sections/MenuPreviewSection.tsx
new file mode 100644
index 0000000..69d2719
--- /dev/null
+++ b/src/components/sections/MenuPreviewSection.tsx
@@ -0,0 +1,80 @@
+'use client'
+import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/components/ui/Card'
+import Button from '@/components/ui/Button'
+import Badge from '@/components/ui/Badge'
+import { useMedusaProducts } from '@/hooks/useMedusaProducts'
+import { useMedusaCart } from '@/hooks/useMedusaCart'
+import Link from 'next/link'
+
+export default function MenuPreviewSection() {
+  const { products, isLoading } = useMedusaProducts(3)
+  const { addToCart } = useMedusaCart()
+
+  if (isLoading) {
+    return (
+      <section data-vula-section="menupreview" id="menu" className="py-20 bg-neutral-50">
+        <div className="container mx-auto px-4 max-w-7xl text-center">
+          <p className="text-neutral-500">Loading menu...</p>
+        </div>
+      </section>
+    )
+  }
+
+  const featured = products?.slice(0, 3) || []
+
+  return (
+    <section id="menu" className="py-20 bg-neutral-50">
+      <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-[#ea580c] mb-2">Taste the Coast</p>
+          <h2 className="text-3xl md:text-4xl font-semibold tracking-tight text-[#111827]">Featured Menu</h2>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {featured.map((item) => {
+            const variant = item.variants?.[0]
+            const price = variant?.prices?.[0]
+            const priceDisplay = price
+              ? `${(price.amount / 100).toFixed(2)} ${price.currency_code?.toUpperCase() || 'ZAR'}`
+              : 'Price on request'
+
+            return (
+              <Card key={item.id} className="rounded-xl border border-neutral-100 shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-lifted)] hover:-translate-y-0.5 transition-all duration-200 ease-out">
+                <CardHeader className="p-0">
+                  {item.thumbnail && (
+                    <div className="aspect-video overflow-hidden rounded-t-xl">
+                      <img src={item.thumbnail} alt={item.title} className="w-full h-full object-cover hover:scale-105 transition-transform duration-500 ease-out" />
+                    </div>
+                  )}
+                </CardHeader>
+                <CardContent className="p-6 space-y-2">
+                  <CardTitle className="text-lg font-semibold text-[#111827]">{item.title}</CardTitle>
+                  <p className="text-sm text-neutral-500 leading-relaxed line-clamp-2">{item.description}</p>
+                  <p className="text-xl font-bold text-[#ea580c]">{priceDisplay}</p>
+                </CardContent>
+                <CardFooter className="p-6 pt-0">
+                  {variant && (
+                    <Button
+                      variant="default"
+                      size="sm"
+                      className="w-full bg-[#ea580c]"
+                      onClick={() => addToCart(variant.id, 1)}
+                    >
+                      Add to Order
+                    </Button>
+                  )}
+                </CardFooter>
+              </Card>
+            )
+          })}
+        </div>
+        <div className="text-center mt-10">
+          <Link href="/menu">
+            <Button variant="secondary" className="border-[#ea580c] text-[#ea580c] hover:bg-[#ea580c] hover:text-white transition-all duration-200">
+              View Full Menu
+            </Button>
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}