Deploy

2026-06-04 11:25:14 +00:00
parent 2b9c2b6f68
commit df2b7d7a2d
1 changed files with 81 additions and 0 deletions
@@ -0,0 +1,81 @@
+'use client'
+
+import { useState } from 'react'
+import Button from '@/components/ui/Button'
+import Input from '@/components/ui/Input'
+import { Mail, MapPin, Phone } from 'lucide-react'
+
+export default function ContactSection() {
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+  const [message, setMessage] = useState('')
+  const [sent, setSent] = useState(false)
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    setSent(true)
+  }
+
+  const contactInfo = [
+    { icon: MapPin, label: "Sandton, Johannesburg, 2196", href: null },
+    { icon: Phone, label: "+27 11 234 5678", href: "tel:+27112345678" },
+    { icon: Mail, label: "info@mtungwapartners.co.za", href: "mailto:info@mtungwapartners.co.za" }
+  ]
+
+  return (
+    <section data-vula-section="contact" id="contact" className="py-20 lg:py-28 bg-neutral-50">
+      <div className="mx-auto max-w-6xl px-4">
+        <div className="grid grid-cols-1 gap-12 lg:grid-cols-2">
+          <div>
+            <span className="text-sm font-semibold tracking-widest uppercase text-neutral-400">Get in Touch</span>
+            <h2 className="mt-3 text-3xl lg:text-4xl font-semibold tracking-tight text-[#111827]">Contact Our Team</h2>
+            <p className="mt-4 text-lg leading-relaxed text-neutral-600">Reach out for a confidential consultation. Our attorneys are ready to assist with your legal matters.</p>
+            <div className="mt-8 space-y-6">
+              {contactInfo.map((item, idx) => {
+                const Icon = item.icon
+                return (
+                  <div key={idx} className="flex items-start gap-4">
+                    <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-[#000080]/10 text-[#000080]">
+                      <Icon className="h-5 w-5" />
+                    </div>
+                    <div>
+                      {item.href ? (
+                        <a href={item.href} className="text-[#111827] underline-offset-2 hover:underline transition-all duration-200">{item.label}</a>
+                      ) : (
+                        <p className="text-[#111827]">{item.label}</p>
+                      )}
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+          <div className="rounded-xl border border-neutral-100 bg-white p-8 shadow-[var(--shadow-card)]">
+            {sent ? (
+              <div className="text-center py-12">
+                <h3 className="text-2xl font-semibold text-[#111827]">Message Sent</h3>
+                <p className="mt-4 text-neutral-600">We will respond within 24 hours.</p>
+              </div>
+            ) : (
+              <form onSubmit={handleSubmit} className="space-y-6">
+                <Input placeholder="Your Name" value={name} onChange={(e) => setName(e.target.value)} required />
+                <Input type="email" placeholder="Email Address" value={email} onChange={(e) => setEmail(e.target.value)} required />
+                <textarea
+                  placeholder="How can we help?"
+                  value={message}
+                  onChange={(e) => setMessage(e.target.value)}
+                  rows={5}
+                  required
+                  className="w-full rounded-lg border border-neutral-200 bg-white px-4 py-3 text-neutral-900 placeholder-neutral-400 shadow-[var(--shadow-surface)] transition-all duration-200 focus:border-[#000080] focus:ring-2 focus:ring-[#000080]/20"
+                />
+                <Button type="submit" variant="default" className="w-full bg-[#000080] text-white hover:opacity-90">
+                  Send Message
+                </Button>
+              </form>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}