Deploy

2026-06-23 08:39:02 +00:00
parent e1d8d2d4ff
commit dbacff1ca6
1 changed files with 111 additions and 0 deletions
@@ -0,0 +1,111 @@
+'use client'
+
+import { Clock, MapPin, Phone, Truck } from 'lucide-react'
+import Image from 'next/image'
+import { useEmDashContent } from '@/hooks/useEmDashContent'
+import Button from '@/components/ui/Button'
+
+export default function LocationSection() {
+  const { items, loading } = useEmDashContent('business_hours')
+
+  if (loading) {
+    return (
+      <div className="flex justify-center py-16 bg-[#121212]">
+        <div className="w-8 h-8 rounded-full border-2 border-[#4A9EFF] border-t-transparent animate-spin" />
+      </div>
+    )
+  }
+
+  if (items.length === 0) return null
+
+  const hours = items.map(item => item.data as {
+    day_of_week?: string
+    open_time?: string
+    close_time?: string
+    is_closed?: boolean
+    note?: string
+  })
+
+  return (
+    <section id="visit-us" data-vula-section="location" data-vula-cms="business_hours" className="py-20 bg-[#121212] text-[#F5F5F5]">
+      <div className="container mx-auto px-4 max-w-6xl">
+        <div className="grid lg:grid-cols-2 gap-12 items-start">
+          {/* Info side */}
+          <div>
+            <h2 className="text-4xl font-bold mb-4 text-[#F5F5F5]">Durban Roots, Nationwide Reach</h2>
+            <p className="text-lg mb-8 text-[#A0A0A0]">
+              Born in Durban, shipping to every corner of Mzansi. Our doors are open &mdash; come through.
+            </p>
+
+            <div className="space-y-6 mb-8">
+              <div className="flex items-start gap-4">
+                <MapPin className="w-5 h-5 text-[#64B5F6] mt-1 shrink-0" />
+                <div>
+                  <p className="font-semibold">Flagship</p>
+                  <p className="text-sm text-[#A0A0A0]">Durban Central, KZN, 4001</p>
+                </div>
+              </div>
+
+              <div className="flex items-start gap-4">
+                <Truck className="w-5 h-5 text-[#64B5F6] mt-1 shrink-0" />
+                <div>
+                  <p className="font-semibold">Shipping</p>
+                  <p className="text-sm text-[#A0A0A0]">Door-to-door nationwide &mdash; R65 flat rate in KZN, R95 rest of SA.</p>
+                </div>
+              </div>
+
+              <div className="flex items-start gap-4">
+                <Phone className="w-5 h-5 text-[#64B5F6] mt-1 shrink-0" />
+                <div>
+                  <p className="font-semibold">WhatsApp</p>
+                  <a href="https://wa.me/27311234567" target="_blank" rel="noopener noreferrer" className="text-sm text-[#4A9EFF] hover:underline">+27 31 123 4567</a>
+                </div>
+              </div>
+            </div>
+
+            {/* Operating Hours */}
+            <h3 className="text-xl font-semibold mb-4 flex items-center gap-2">
+              <Clock className="w-5 h-5 text-[#FFB74D]" />
+              Operating Hours
+            </h3>
+            <div className="bg-[#1e1e1e] rounded-xl overflow-hidden border border-[#333]">
+              {hours.map((h, i) => (
+                <div
+                  key={i}
+                  className={`flex justify-between px-5 py-3 text-sm ${
+                    i % 2 === 0 ? 'bg-[#1a1a1a]' : 'bg-[#1e1e1e]'
+                  }`}
+                >
+                  <span className="font-medium text-[#F5F5F5]">{h.day_of_week}</span>
+                  <span className="text-[#A0A0A0]">
+                    {h.is_closed
+                      ? 'Closed'
+                      : `${h.open_time} – ${h.close_time}`}
+                    {h.note && <span className="block text-xs text-[#FFB74D] mt-0.5">{h.note}</span>}
+                  </span>
+                </div>
+              ))}
+            </div>
+            <p className="text-xs text-[#666] mt-2">* Public holiday hours may differ.</p>
+          </div>
+
+          {/* Map placeholder */}
+          <div className="relative h-72 lg:h-full min-h-[300px] rounded-xl overflow-hidden bg-[#1e1e1e] border border-[#333]">
+            <Image
+              src="https://images.pexels.com/photos/11358630/pexels-photo-11358630.jpeg?auto=compress&cs=tinysrgb&h=350"
+              alt="Durban city skyline"
+              fill
+              className="object-cover"
+              sizes="(max-width: 768px) 100vw, 50vw"
+            />
+            <div className="absolute inset-0 bg-gradient-to-t from-[#121212]/60 to-transparent" />
+            <div className="absolute bottom-6 left-6 text-[#F5F5F5]">
+              <p className="font-semibold">Our Home</p>
+              <p className="text-sm text-[#A0A0A0]">Durban, South Africa</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}