Deploy

src/components/sections/ContactSection.tsx

@@ -0,0 +1,62 @@
+'use client'
+import { Mail, MapPin, MessageCircle, Phone } from 'lucide-react'
+import Input from "@/components/ui/Input"
+import Button from "@/components/ui/Button"
+import { useState } from "react"
+
+export default function ContactSection() {
+  const [formData, setFormData] = useState({ name: "", email: "", message: "" })
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+  }
+  const contactDetails = [
+    { icon: MapPin, label: "Address", value: "42 Buitenkant Street, Cape Town City Centre, 8001" },
+    { icon: Phone, label: "Phone", value: "+27 21 555 0199" },
+    { icon: Mail, label: "Email", value: "hello@kaparoast.co.za" },
+    { icon: MessageCircle, label: "WhatsApp", value: "+27 82 123 4567" },
+  ]
+  return (
+    <section data-vula-section="contact" id="contact" className="py-20 bg-gray-50">
+      <div className="container mx-auto px-4 max-w-6xl">
+        <h2 className="text-3xl font-bold text-center mb-12 text-[#111827]">Get in Touch</h2>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+          <div>
+            <h3 className="text-xl font-semibold mb-6 text-[#111827]">Contact Details</h3>
+            <div className="space-y-4">
+              {contactDetails.map((item, i) => {
+                const Icon = item.icon
+                return (
+                  <div key={i} className="flex items-start gap-3">
+                    <Icon className="w-5 h-5 text-[#8b5a3c] mt-0.5" />
+                    <div>
+                      <p className="font-medium text-[#111827]">{item.label}</p>
+                      <p className="text-[#4b5563]">{item.value}</p>
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+          <div>
+            <h3 className="text-xl font-semibold mb-6 text-[#111827]">Send a Message</h3>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label htmlFor="name" className="block text-sm font-medium text-[#374151] mb-1">Name</label>
+                <Input id="name" value={formData.name} onChange={e => setFormData({...formData, name: e.target.value})} required />
+              </div>
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-[#374151] mb-1">Email</label>
+                <Input id="email" type="email" value={formData.email} onChange={e => setFormData({...formData, email: e.target.value})} required />
+              </div>
+              <div>
+                <label htmlFor="message" className="block text-sm font-medium text-[#374151] mb-1">Message</label>
+                <textarea id="message" rows={4} value={formData.message} onChange={e => setFormData({...formData, message: e.target.value})} className="w-full rounded-lg border border-[#e5e7eb] bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#8b5a3c]" required />
+              </div>
+              <Button variant="primary" type="submit" className="w-full bg-[#8b5a3c] hover:bg-[#7a4a2e]">Send Message</Button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}