Deploy

src/components/sections/PrivateDiningSection.tsx

@@ -0,0 +1,99 @@
+'use client'
+
+import { useCallback } from 'react'
+import Image from 'next/image'
+import Button from '@/components/ui/Button'
+import { Calendar, Mail, Phone, Star, Users } from 'lucide-react'
+
+export default function PrivateDiningSection() {
+  const handleEnquiry = useCallback(() => {
+    const subject = encodeURIComponent('Private Dining Enquiry - La Villa')
+    window.location.href = `mailto:dining@lavilla.com?subject=${subject}`
+  }, [])
+
+  const packages = [
+    {
+      icon: Users,
+      title: 'Corporate Events',
+      desc: 'Capacity up to 50 guests. AV equipment, custom menu, wine pairing available.',
+      capacity: '10–50 guests',
+    },
+    {
+      icon: Calendar,
+      title: 'Anniversary Celebrations',
+      desc: 'Intimate setting for up to 20 guests. Personalised menu and champagne toast.',
+      capacity: '2–20 guests',
+    },
+    {
+      icon: Star,
+      title: 'Birthday & Special Occasions',
+      desc: 'Choose our private terrace or wine cellar. Decoration and cake options.',
+      capacity: 'Up to 30 guests',
+    },
+  ]
+
+  return (
+    <section data-vula-section="privatedining" id="private-dining" className="bg-white py-24 px-6">
+      <div className="max-w-7xl mx-auto">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center mb-20">
+          <div>
+            <h2 className="text-4xl md:text-5xl font-serif font-bold text-[#722F37] mb-4">
+              Private Dining & Events
+            </h2>
+            <p className="text-lg text-neutral-600 mb-6 leading-relaxed">
+              La Villa offers three intimate private spaces: the Wine Cellar (up to 16 guests), the Terrace Room (up to 30), and the Grand Salon (up to 50). Each venue features customisable farm-to-table menus, sommelier-curated wine pairings, and dedicated event coordination.
+            </p>
+            <div className="flex flex-wrap gap-4">
+              <Button
+                variant="default"
+                className="bg-[#722F37] hover:bg-[#5a262c] text-white px-8 py-4 text-lg"
+                onClick={handleEnquiry}
+              >
+                <Phone className="w-5 h-5 mr-2" />
+                Enquire Now
+              </Button>
+              <Button
+                variant="secondary"
+                className="border-[#6b8e23] text-[#6b8e23] hover:bg-[#6b8e23] hover:text-white px-8 py-4 text-lg"
+                onClick={handleEnquiry}
+              >
+                <Mail className="w-5 h-5 mr-2" />
+                Email Us
+              </Button>
+            </div>
+          </div>
+          <div className="relative h-96 rounded-xl overflow-hidden shadow-[var(--shadow-lifted)]">
+            <Image
+              src="https://images.pexels.com/photos/36713237/pexels-photo-36713237.jpeg?auto=compress&cs=tinysrgb&h=350"
+              alt="Elegant private dining room at La Villa"
+              fill
+              sizes="(max-width: 1024px) 100vw, 50vw"
+              className="object-cover"
+            />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {packages.map((pkg, idx) => {
+            const Icon = pkg.icon
+            return (
+              <div
+                key={idx}
+                className="rounded-xl 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 p-6"
+              >
+                <div className="w-14 h-14 rounded-full bg-[#722F37]/10 flex items-center justify-center mb-4">
+                  <Icon className="w-7 h-7 text-[#722F37]" />
+                </div>
+                <h3 className="font-serif text-2xl font-semibold text-[#722F37] mb-2">{pkg.title}</h3>
+                <p className="text-neutral-600 mb-3">{pkg.desc}</p>
+                <p className="inline-block bg-[#d4af37]/20 text-[#d4af37] text-sm font-semibold px-3 py-1 rounded-full">
+                  {pkg.capacity}
+                </p>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}