Deploy

2026-06-23 08:38:58 +00:00
parent c70aa7b88f
commit beb986ba1e
1 changed files with 91 additions and 0 deletions
@@ -0,0 +1,91 @@
+'use client'
+
+import { useEmDashContent } from "@/hooks/useEmDashContent"
+import { Car, Clock, MapPin } from 'lucide-react'
+
+export default function KwaNtofontofoLocationSection() {
+  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-[#d4af37] border-t-transparent animate-spin" />
+      </div>
+    )
+  }
+
+  if (items.length === 0) return null
+
+  return (
+    <section
+      id="location"
+      data-vula-section="kwantofontofolocation"
+      data-vula-cms="business_hours"
+      className="bg-white py-16 px-4"
+    >
+      <div className="max-w-5xl mx-auto">
+        <h2 className="text-3xl font-bold text-gray-900 mb-6 text-center">Our Location</h2>
+        <div className="grid md:grid-cols-2 gap-8">
+          {/* Address and Map */}
+          <div className="space-y-4">
+            <div className="flex items-start gap-3">
+              <MapPin className="w-5 h-5 text-[#d4af37] mt-1" />
+              <div>
+                <p className="font-semibold">Address</p>
+                <p className="text-gray-600">44 Rutherford Circle, Bisley, Pietermaritzburg, 3201, KwaZulu-Natal</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3">
+              <Car className="w-5 h-5 text-[#d4af37] mt-1" />
+              <div>
+                <p className="font-semibold">Convenience &amp; Safety</p>
+                <p className="text-gray-600">
+                  Opposite the Bisley Nature Reserve. Just 1 km from Pietermaritzburg Airport. Secure parking under burglar alarm.
+                </p>
+              </div>
+            </div>
+            {/* Embedded Map */}
+            <div className="w-full h-64 rounded-xl overflow-hidden border border-gray-200">
+              <iframe
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3453.678!2d30.361!3d-29.627!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1ef6f2f2f2f2f2f%3A0x1234567890abcdef!2s44+Rutherford+Circle%2C+Bisley%2C+Pietermaritzburg%2C+3201!5e0!3m2!1sen!2sza!4v1234567890"
+                width="100%"
+                height="100%"
+                style={{ border: 0 }}
+                allowFullScreen
+                loading="lazy"
+                referrerPolicy="no-referrer-when-downgrade"
+                title="KwaNtofontofo Guest House location"
+              />
+            </div>
+          </div>
+
+          {/* Business Hours from CMS */}
+          <div className="bg-neutral-50 rounded-xl p-6 border border-gray-200">
+            <div className="flex items-center gap-2 mb-4">
+              <Clock className="w-5 h-5 text-[#d4af37]" />
+              <h3 className="text-xl font-semibold text-gray-900">Business Hours</h3>
+            </div>
+            <ul className="space-y-2">
+              {items.map((item) => {
+                const d = item.data as { day_of_week?: string; open_time?: string; close_time?: string; is_closed?: boolean; note?: string }
+                return (
+                  <li key={item.id} className="flex justify-between text-gray-700">
+                    <span className="font-medium">{d.day_of_week || ""}</span>
+                    <span>
+                      {d.is_closed ? (
+                        <span className="text-red-500">Closed</span>
+                      ) : (
+                        <span>{d.open_time} – {d.close_time}</span>
+                      )}
+                    </span>
+                  </li>
+                )
+              })}
+            </ul>
+            <p className="text-sm text-gray-500 mt-4">* Public holidays may differ. Please enquire.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}