Deploy

src/components/sections/FirmContactSection.tsx

@@ -0,0 +1,70 @@
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card'
+import { Mail, MapPin, Phone } from 'lucide-react'
+
+export default function FirmContactSection() {
+  const channels = [
+    { icon: Phone, label: 'Phone', value: "+27 33 342 1155", href: "tel:+27333421155" },
+    { icon: Mail, label: "Email", value: "info@gumedepartners.co.za", href: 'mailto:info@gumedepartners.co.za' },
+  ]
+
+  return (
+    <section data-vula-section="firmcontact" id="firm-contact" className="bg-[#F0F8FF] px-6 py-20">
+      <div className="mx-auto max-w-6xl">
+        <div className="max-w-2xl">
+          <p className="text-xs uppercase tracking-[0.14em] text-[#0077BE]">Contact</p>
+          <h2 className="mt-3 text-4xl font-black tracking-tight text-[#1A2B3C]">Find us in the capital of KwaZulu-Natal</h2>
+          <p className="mt-3 text-lg text-[#1A2B3C]/70">
+            Prefer to speak directly? Call, email, or visit our Church Street offices — we are based in Pietermaritzburg and serve all of KwaZulu-Natal.
+          </p>
+        </div>
+
+        <div className="mt-10 grid gap-8 lg:grid-cols-5">
+          <div className="lg:col-span-2">
+            <Card className="h-full bg-transparent border-[#1A2B3C]/15 hover:border-[#0077BE] transition-colors duration-200">
+              <CardHeader>
+                <CardTitle className="text-[#1A2B3C]">Contact details</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-5">
+                <div className="flex items-start gap-3">
+                  <MapPin className="mt-0.5 h-5 w-5 shrink-0 text-[#0077BE]" />
+                  <div>
+                    <p className="text-sm font-semibold text-[#1A2B3C]">Office</p>
+                    <p className="mt-1 text-sm text-[#1A2B3C]/70">
+                      2nd Floor, 251 Church Street
+                      <br />
+                      Pietermaritzburg, KwaZulu-Natal, 3201
+                    </p>
+                  </div>
+                </div>
+                {channels.map((channel) => {
+                  const Icon = channel.icon
+                  return (
+                    <div key={channel.label} className="flex items-start gap-3">
+                      <Icon className="mt-0.5 h-5 w-5 shrink-0 text-[#0077BE]" />
+                      <div>
+                        <p className="text-sm font-semibold text-[#1A2B3C]">{channel.label}</p>
+                        <a href={channel.href} className="mt-1 inline-block text-sm text-[#1A2B3C]/70 transition-colors duration-200 hover:text-[#0077BE]">
+                          {channel.value}
+                        </a>
+                      </div>
+                    </div>
+                  )
+                })}
+              </CardContent>
+            </Card>
+          </div>
+
+          <div className="relative min-h-[320px] overflow-hidden rounded-lg border border-[#1A2B3C]/15 lg:col-span-3">
+            <iframe
+              title="Gumede and Partners — 251 Church Street, Pietermaritzburg"
+              src="https://www.google.com/maps?q=251%20Church%20Street%2C%20Pietermaritzburg%2C%203201&output=embed"
+              className="absolute inset-0 h-full w-full"
+              loading="lazy"
+              referrerPolicy="no-referrer-when-downgrade"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}