Deploy

src/components/sections/ContactSection.tsx

@@ -0,0 +1,67 @@
+'use client'
+import { useState } from 'react'
+import Button from '@/components/ui/Button'
+import Input from '@/components/ui/Input'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
+import { Mail, MapPin, Phone } from 'lucide-react'
+
+export default function ContactSection() {
+  const [formData, setFormData] = useState({ name: '', email: '', message: '' })
+  const handleSubmit = (e: React.FormEvent) => { e.preventDefault() }
+  const update = (field: string) => (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
+    setFormData(prev => ({ ...prev, [field]: e.target.value }))
+  const contactMethods = [
+    { icon: MapPin, label: 'Address', value: '85 Waterkant Street, Cape Town 8001' },
+    { icon: Phone, label: 'Phone', value: '+27 21 555 0199' },
+    { icon: Mail, label: "Email", value: "hola@laroc.co.za" },
+  ]
+  return (
+    <section data-vula-section="contact" id="contact" className="py-20 lg:py-28 bg-neutral-50">
+      <div className="container mx-auto px-4 max-w-7xl">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
+          <div>
+            <h2 className="text-3xl lg:text-4xl font-semibold tracking-tight text-[#111827] mb-6">Get in Touch</h2>
+            <p className="text-lg text-neutral-600 leading-relaxed mb-8">
+              Reserve a table, ask about private events, or simply say hello. Our team is ready to welcome you.
+            </p>
+            <div className="space-y-4">
+              {contactMethods.map((method, idx) => {
+                const Icon = method.icon
+                return (
+                  <div key={idx} className="flex items-start gap-3">
+                    <div className="p-2 rounded-lg bg-[#dc2626]/10 text-[#dc2626]">
+                      <Icon className="w-5 h-5" />
+                    </div>
+                    <div>
+                      <p className="font-medium text-[#111827]">{method.label}</p>
+                      <p className="text-neutral-600">{method.value}</p>
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+          <Card className="shadow-[var(--shadow-card)] border border-neutral-100">
+            <CardHeader>
+              <CardTitle className="text-2xl text-[#111827]">Send a Message</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <form onSubmit={handleSubmit} className="space-y-4">
+                <Input placeholder="Your Name" value={formData.name} onChange={update('name')} />
+                <Input type="email" placeholder="Email Address" value={formData.email} onChange={update('email')} />
+                <textarea
+                  placeholder="Your Message"
+                  rows={4}
+                  value={formData.message}
+                  onChange={update('message')}
+                  className="w-full px-3 py-2 rounded-lg border border-border bg-white text-foreground placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-[#dc2626]"
+                />
+                <Button type="submit" variant="primary" className="bg-[#dc2626] hover:bg-[#b91c1c] text-white">Send Message</Button>
+              </form>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+  )
+}