Deploy

src/components/sections/MenuHighlightsSection.tsx

@@ -0,0 +1,83 @@
+'use client'
+
+import { useMedusaProducts } from "@/hooks/useMedusaProducts"
+import Link from "next/link"
+import Image from "next/image"
+import { Card, CardHeader, CardTitle, CardContent, CardFooter } from "@/components/ui/Card"
+import Badge from "@/components/ui/Badge"
+
+export default function MenuHighlightsSection() {
+  const { products, isLoading, error } = useMedusaProducts(6)
+
+  const formatPrice = (amount: number, code?: string) => {
+    const sym: Record<string, string> = { zar: "R", usd: "$", eur: "€", gbp: "£", kes: "KSh", ngn: "₦" }
+    const s = sym[(code ?? "").toLowerCase()] ?? (code?.toUpperCase() ?? "")
+    return `${s}${(amount / 100).toFixed(2)}`
+  }
+
+  return (
+    <section data-vula-section="menuhighlights" id="menu-highlights" className="py-24 bg-white">
+      <div className="max-w-7xl mx-auto px-6">
+        <div className="text-center mb-14">
+          <span className="text-sm uppercase tracking-[0.3em] text-[#d4af37] font-semibold">From Our Kitchen</span>
+          <h2 className="text-4xl md:text-5xl font-bold text-[#111827] mt-2">Menu Highlights</h2>
+          <p className="text-lg text-[#6b7280] mt-4 max-w-2xl mx-auto">
+            Wood-fired pizzas, hand-rolled pasta, and traditional desserts — all made with recipes from Calabria
+          </p>
+        </div>
+
+        {isLoading && (
+          <div className="flex justify-center items-center h-40">
+            <div className="w-8 h-8 border-4 border-[#dc2626] border-t-transparent rounded-full animate-spin" />
+          </div>
+        )}
+
+        {error && (
+          <p className="text-center text-red-500">Unable to load menu items. Please refresh.</p>
+        )}
+
+        {!isLoading && !error && products && (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {products.slice(0, 6).map((product) => {
+              const price = product.variants?.[0]?.prices?.[0]
+              return (
+                <Card key={product.id} className="rounded-xl border border-[#e5e7eb] bg-white shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-lifted)] hover:-translate-y-0.5 transition-all duration-200 ease-out overflow-hidden group">
+                  <div className="aspect-[4/3] overflow-hidden">
+                    <Image
+                      src={product.thumbnail || "https://images.pexels.com/photos/17375426/pexels-photo-17375426.jpeg?auto=compress&cs=tinysrgb&h=350"}
+                      alt={product.title}
+                      width={400}
+                      height={300}
+                      className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-500 ease-out"
+                    />
+                  </div>
+                  <CardHeader className="pb-2">
+                    <CardTitle className="text-xl text-[#111827]">{product.title}</CardTitle>
+                  </CardHeader>
+                  <CardContent className="text-sm text-[#6b7280] line-clamp-2 pb-4">
+                    {product.description}
+                  </CardContent>
+                  <CardFooter className="flex items-center justify-between pt-0">
+                    {price && (
+                      <span className="text-lg font-bold text-[#dc2626]">
+                        {formatPrice(price.amount, price.currency_code)}
+                      </span>
+                    )}
+                    <Badge className="bg-[#6b8e23]/10 text-[#6b8e23] font-medium">Signature</Badge>
+                  </CardFooter>
+                </Card>
+              )
+            })}
+          </div>
+        )}
+
+        <div className="text-center mt-12">
+          <Link href="/menu" className="inline-flex items-center gap-2 text-[#dc2626] font-semibold hover:underline underline-offset-4 transition-all duration-200">
+            View Full Menu
+            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" /></svg>
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}