Deploy

src/components/sections/MashobaneContactSection.tsx

@@ -0,0 +1,122 @@
+'use client'
+
+import { useEmDashContent } from "@/hooks/useEmDashContent"
+import { Clock, Mail, MapPin, Phone } from 'lucide-react'
+import Button from "@/components/ui/Button"
+import Input from "@/components/ui/Input"
+
+export default function MashobaneContactSection() {
+  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-[#000080] border-t-transparent animate-spin" />
+      </div>
+    )
+  }
+
+  if (items.length === 0) return null
+
+  return (
+    <section
+      id="contact"
+      data-vula-section="mashobanecontact"
+      data-vula-cms="business_hours"
+      className="bg-[#ffffff] py-20 px-6"
+    >
+      <div className="max-w-6xl mx-auto">
+        <div className="grid md:grid-cols-2 gap-12">
+          {/* Contact Details */}
+          <div>
+            <h2 className="text-3xl font-bold text-[#000080] mb-6">Contact Us</h2>
+            <div className="space-y-6">
+              <div className="flex items-start gap-4">
+                <MapPin className="w-6 h-6 text-[#d4af37] mt-1 shrink-0" />
+                <div>
+                  <p className="font-semibold text-[#111827]">Mashobane & Associates</p>
+                  <p className="text-[#36454F]">
+                    123 Aliwal Street<br />
+                    Durban Central<br />
+                    KwaZulu-Natal, 4001
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-center gap-4">
+                <Phone className="w-6 h-6 text-[#d4af37]" />
+                <a href="tel:+27311234567" className="text-[#000080] hover:underline">+27 31 123 4567</a>
+              </div>
+              <div className="flex items-center gap-4">
+                <Mail className="w-6 h-6 text-[#d4af37]" />
+                <a href="mailto:info@mashobanelaw.co.za" className="text-[#000080] hover:underline">info@mashobanelaw.co.za</a>
+              </div>
+              <div className="flex items-start gap-4">
+                <Clock className="w-6 h-6 text-[#d4af37] mt-1 shrink-0" />
+                <div>
+                  <p className="font-semibold text-[#111827] mb-2">Office Hours</p>
+                  <div className="space-y-1 text-[#36454F]">
+                    {items.map((item) => {
+                      const d = item.data as {
+                        day_of_week?: string
+                        open_time?: string
+                        close_time?: string
+                        is_closed?: boolean
+                        note?: string
+                      }
+                      return (
+                        <div key={item.id} className="flex justify-between gap-4">
+                          <span className="font-medium">{d.day_of_week}</span>
+                          {d.is_closed ? (
+                            <span className="text-red-600">Closed</span>
+                          ) : (
+                            <span>
+                              {d.open_time} – {d.close_time}
+                              {d.note && <span className="text-sm text-[#d4af37] ml-1">({d.note})</span>}
+                            </span>
+                          )}
+                        </div>
+                      )
+                    })}
+                  </div>
+                  <p className="text-sm mt-2 text-[#36454F]/70">Public holiday hours may vary.</p>
+                </div>
+              </div>
+            </div>
+            {/* Enquiry form */}
+            <div className="mt-10">
+              <h3 className="text-xl font-semibold text-[#000080] mb-4">Send a Quick Enquiry</h3>
+              <form className="space-y-4">
+                <Input type="text" placeholder="Your Name" className="border-[#36454F]/30 focus:border-[#000080]" />
+                <Input type="email" placeholder="Email Address" className="border-[#36454F]/30 focus:border-[#000080]" />
+                <textarea
+                  rows={4}
+                  placeholder="Your message..."
+                  className="w-full rounded-lg border border-[#36454F]/30 px-4 py-3 focus:outline-none focus:border-[#000080] resize-none text-sm"
+                />
+                <Button
+                  variant="default"
+                  className="bg-[#000080] hover:bg-[#000080]/90 text-white px-6 py-3"
+                >
+                  Send Message
+                </Button>
+              </form>
+            </div>
+          </div>
+          {/* Google Map */}
+          <div className="rounded-xl overflow-hidden shadow-[var(--shadow-lifted)] h-[400px] md:h-auto min-h-[350px]">
+            <iframe
+              title="Mashobane & Associates Location"
+              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3459.283764550128!2d31.0219316154755!3d-29.858578681946!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1ef7a9c5e3e4c5df%3A0x5f5c5e5f5e5f5e5f!2sDurban+Central%2C+Durban!5e0!3m2!1sen!2sza!4v1"
+              width="100%"
+              height="100%"
+              style={{ border: 0 }}
+              allowFullScreen
+              loading="lazy"
+              referrerPolicy="no-referrer-when-downgrade"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}