Deploy

src/components/sections/MenuSection.tsx

@@ -0,0 +1,95 @@
+'use client'
+
+import Image from 'next/image'
+import Link from 'next/link'
+import Button from '@/components/ui/Button'
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/Card'
+import { ArrowRight } from 'lucide-react'
+
+const sampleItems = [
+  {
+    id: '1',
+    title: 'Cape Malay Curry',
+    description: 'Slow-cooked lamb with apricots and fragrant spices, served with fluffy rice.',
+    price: 185,
+    currency: 'ZAR',
+    image: 'https://images.pexels.com/photos/23428079/pexels-photo-23428079.jpeg?auto=compress&cs=tinysrgb&h=350',
+  },
+  {
+    id: '2',
+    title: 'Bobotie',
+    description: 'Classic South African baked mince with golden egg topping, served with sambal.',
+    price: 165,
+    currency: 'ZAR',
+    image: 'https://images.pexels.com/photos/13642135/pexels-photo-13642135.jpeg?auto=compress&cs=tinysrgb&h=350',
+  },
+  {
+    id: '3',
+    title: 'Grilled Linefish',
+    description: 'Fresh line-caught fish of the day with lemon butter and seasonal vegetables.',
+    price: 220,
+    currency: 'ZAR',
+    image: 'https://images.pexels.com/photos/36601571/pexels-photo-36601571.jpeg?auto=compress&cs=tinysrgb&h=350',
+  },
+  {
+    id: '4',
+    title: 'Chakalaka & Pap',
+    description: 'Spicy vegetable relish with creamy maize pap – a township favourite.',
+    price: 95,
+    currency: 'ZAR',
+    image: 'https://images.pexels.com/photos/34862400/pexels-photo-34862400.jpeg?auto=compress&cs=tinysrgb&h=350',
+  },
+]
+
+export default function MenuSection() {
+  return (
+    <section data-vula-section="menu" 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-14">
+          <p className="text-sm font-semibold tracking-widest uppercase text-[#14b8a6]">From our kitchen</p>
+          <h2 className="text-3xl lg:text-4xl font-semibold tracking-tight text-[#111827] mt-2">
+            A Taste of Cape Town
+          </h2>
+          <p className="mt-4 text-lg text-neutral-600 max-w-xl mx-auto leading-relaxed">
+            Each dish is crafted with locally sourced ingredients and inspired by the city{"'"}s rich culinary heritage.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+          {sampleItems.map((item) => (
+            <Card key={item.id} className="border border-neutral-100 rounded-xl 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-[4/3] overflow-hidden">
+                <Image
+                  src={item.image}
+                  alt={item.title}
+                  width={400}
+                  height={300}
+                  className="object-cover w-full h-full hover:scale-105 transition-transform duration-500 ease-out"
+                />
+              </div>
+              <CardHeader className="px-5 pt-5 pb-0">
+                <CardTitle className="text-lg font-semibold text-[#111827]">{item.title}</CardTitle>
+              </CardHeader>
+              <CardContent className="px-5 pt-2 pb-2">
+                <p className="text-sm text-neutral-600 leading-relaxed line-clamp-2">{item.description}</p>
+              </CardContent>
+              <CardFooter className="px-5 pb-5 pt-2 flex items-center justify-between">
+                <span className="text-lg font-bold text-[#8b5a3c]">{item.price} {item.currency}</span>
+                <span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Dine-in / Takeaway</span>
+              </CardFooter>
+            </Card>
+          ))}
+        </div>
+
+        <div className="text-center mt-12">
+          <Link href="/menu">
+            <Button variant="default" size="lg" className="bg-[#d4af37] hover:bg-[#c49a2f] text-white rounded-xl px-8 py-4 font-semibold">
+              View Full Menu
+              <ArrowRight className="ml-2 w-5 h-5" />
+            </Button>
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}