Deploy

src/components/sections/ContactSection.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import { useState } from 'react'
+import Button from '@/components/ui/Button'
+import Input from '@/components/ui/Input'
+import { Mail, MapPin, MessageCircle, Phone } from 'lucide-react'
+
+export default function ContactSection() {
+  const [submitted, setSubmitted] = useState(false)
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    setSubmitted(true)
+  }
+  return (
+    <section data-vula-section="contact" id="contact" className="py-20 bg-[#f9fafb]">
+      <div className="max-w-6xl mx-auto px-4">
+        <h2 className="text-3xl lg:text-4xl font-bold tracking-tight text-center mb-12 text-[#dc2626]">Get in Touch</h2>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+          <div>
+            <div className="space-y-4 mb-8">
+              <div className="flex items-center gap-3">
+                <MapPin className="w-5 h-5 text-[#ea580c]" />
+                <span className="text-[#111827]">45 Florida Road, Morningside, Durban, 4001</span>
+              </div>
+              <div className="flex items-center gap-3">
+                <Phone className="w-5 h-5 text-[#ea580c]" />
+                <span className="text-[#111827]">+27 31 123 4567</span>
+              </div>
+              <div className="flex items-center gap-3">
+                <Mail className="w-5 h-5 text-[#ea580c]" />
+                <span className="text-[#111827]">info@durbancurry.co.za</span>
+              </div>
+            </div>
+            <a
+              href="https://wa.me/27731234567"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 bg-[#25D366] text-white px-6 py-3 rounded-lg font-semibold hover:opacity-90 transition-all duration-200"
+            >
+              <MessageCircle className="w-5 h-5" />
+              WhatsApp Us
+            </a>
+          </div>
+          <div>
+            {submitted ? (
+              <p className="text-lg text-[#16a34a] font-semibold">Thank you! We'll be in touch soon.</p>
+            ) : (
+              <form onSubmit={handleSubmit} className="space-y-4">
+                <Input placeholder="Your name" className="w-full" required />
+                <Input type="email" placeholder="Email address" className="w-full" required />
+                <textarea
+                  placeholder="Your message"
+                  className="w-full border border-[#e5e7eb] rounded-lg p-3 resize-none h-32 focus:outline-none focus:ring-2 focus:ring-[#ea580c]"
+                  required
+                />
+                <Button variant="default" size="lg" className="w-full bg-[#ea580c] hover:opacity-90">
+                  Send Message
+                </Button>
+              </form>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}