Deploy

2026-06-23 08:47:18 +00:00
parent 3653a6d4f2
commit 4189e781c7
1 changed files with 144 additions and 0 deletions
@@ -0,0 +1,144 @@
+'use client'
+
+import { useEmDashContent } from '@/hooks/useEmDashContent'
+import { Clock, Mail, MapPin, Phone } from 'lucide-react'
+
+interface BusinessHour {
+  day_of_week: string
+  open_time?: string
+  close_time?: string
+  is_closed?: boolean
+  note?: string
+}
+
+export default function ContactSection() {
+  const { items, loading } = useEmDashContent('business_hours')
+
+  if (loading) {
+    return (
+      <div className="flex justify-center py-16">
+        <div className="w-8 h-8 rounded-full border-2 border-current border-t-transparent animate-spin" />
+      </div>
+    )
+  }
+
+  if (items.length === 0) return null
+
+  const hours = items.map((item) => item.data as BusinessHour)
+
+  // Static contact info (these could also come from CMS but are hardcoded per brief)
+  const address = '23 Mary Fitzgerald Street, Newtown, Johannesburg, 2001'
+  const phone = '+27 11 832 4500'
+  const email = 'info@mashobanefirm.co.za'
+
+  return (
+    <section
+      id="contact"
+      data-vula-section="contact"
+      data-vula-cms="business_hours"
+      className="py-20 bg-white"
+    >
+      <div className="container mx-auto px-4 max-w-7xl">
+        <div className="text-center mb-14">
+          <h2 className="text-4xl font-bold text-[#111827] mb-4">Get in Touch</h2>
+          <p className="text-lg text-[#36454F] max-w-2xl mx-auto">
+            We&apos;re here for you. Call, email, or visit our offices in Newtown.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
+          {/* Left — Contact details */}
+          <div className="space-y-8">
+            <div className="flex items-start gap-4">
+              <div className="p-3 rounded-full bg-[#000080]/10 shrink-0">
+                <MapPin className="w-6 h-6 text-[#000080]" />
+              </div>
+              <div>
+                <h3 className="font-semibold text-[#111827]">Office Address</h3>
+                <p className="text-[#36454F]">{address}</p>
+                <p className="text-sm text-[#16a34a] mt-1">
+                  <a
+                    href="https://maps.google.com/?q=23+Mary+Fitzgerald+Street+Newtown+Johannesburg"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="underline underline-offset-2 hover:no-underline"
+                  >
+                    View on Google Maps
+                  </a>
+                </p>
+              </div>
+            </div>
+
+            <div className="flex items-start gap-4">
+              <div className="p-3 rounded-full bg-[#000080]/10 shrink-0">
+                <Phone className="w-6 h-6 text-[#000080]" />
+              </div>
+              <div>
+                <h3 className="font-semibold text-[#111827]">Phone</h3>
+                <p className="text-[#36454F]">
+                  <a href={`tel:${phone}`} className="hover:text-[#16a34a] transition-colors duration-200">{phone}</a>
+                </p>
+                <p className="text-sm text-[#16a34a] mt-1">
+                  <a
+                    href="https://wa.me/27118324500"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="underline underline-offset-2 hover:no-underline"
+                  >
+                    WhatsApp Us
+                  </a>
+                </p>
+              </div>
+            </div>
+
+            <div className="flex items-start gap-4">
+              <div className="p-3 rounded-full bg-[#000080]/10 shrink-0">
+                <Mail className="w-6 h-6 text-[#000080]" />
+              </div>
+              <div>
+                <h3 className="font-semibold text-[#111827]">Email</h3>
+                <p className="text-[#36454F]">
+                  <a href={`mailto:${email}`} className="hover:text-[#16a34a] transition-colors duration-200">{email}</a>
+                </p>
+              </div>
+            </div>
+
+            <div className="flex items-start gap-4">
+              <div className="p-3 rounded-full bg-[#000080]/10 shrink-0">
+                <Clock className="w-6 h-6 text-[#000080]" />
+              </div>
+              <div>
+                <h3 className="font-semibold text-[#111827]">Office Hours</h3>
+                <div className="space-y-1">
+                  {hours.map((h, i) => (
+                    <div key={i} className="flex justify-between text-[#36454F] text-sm">
+                      <span className="font-medium">{h.day_of_week}</span>
+                      {h.is_closed ? (
+                        <span className="text-[#16a34a]">Closed</span>
+                      ) : (
+                        <span>{h.open_time} – {h.close_time}</span>
+                      )}
+                      {h.note && <span className="text-xs italic ml-2">({h.note})</span>}
+                    </div>
+                  ))}
+                </div>
+                <p className="text-xs text-[#36454F] mt-2">Closed on South African public holidays.</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Right — Map placeholder */}
+          <div className="rounded-xl overflow-hidden shadow-[var(--shadow-lifted)] border border-[#e5e7eb]">
+            <div className="aspect-[4/3] bg-[#f3f4f6] flex items-center justify-center">
+              <div className="text-center p-8">
+                <MapPin className="w-12 h-12 text-[#000080] mx-auto mb-2" />
+                <p className="text-[#36454F] font-medium">Map loaded here</p>
+                <p className="text-sm text-[#6b7280]">23 Mary Fitzgerald Street, Newtown, Johannesburg</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}