Deploy

2026-07-27 17:52:36 +00:00
parent 3e291aa054
commit 917224e741
1 changed files with 134 additions and 0 deletions
@@ -0,0 +1,134 @@
+'use client'
+
+import { useVulaContent } from '@/hooks/useVulaContent'
+import { Camera, Clock, Globe, Mail, MapPin, MessageCircle, Phone, Shield } from 'lucide-react'
+
+import Image from 'next/image'
+
+export default function SowetoConnectSection() {
+  const { items, loading } = useVulaContent('business_hours')
+
+  // All hooks must be at the top — this is safe because done before early returns
+  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
+
+  const hours = items.map((item) => {
+    const d = item.data as {
+      day_of_week?: string
+      open_time?: string
+      close_time?: string
+      is_closed?: boolean
+      note?: string
+    }
+    return {
+      day: d.day_of_week || '',
+      open: d.open_time || '',
+      close: d.close_time || '',
+      closed: d.is_closed || false,
+      note: d.note || ''
+    }
+  })
+
+  return (
+    <section
+      id="contact"
+      data-vula-section="sowetoconnect"
+      data-vula-cms="business_hours"
+      className="bg-white py-20 px-6 border-t border-[#e7eaef]"
+    >
+      <div className="max-w-6xl mx-auto">
+        <h2 className="text-3xl md:text-5xl font-black uppercase tracking-tight text-[#18181b] mb-4">
+          Soweto Connect
+        </h2>
+        <p className="text-lg text-gray-600 mb-12 max-w-2xl">
+          Real brand. Real location. Real people. Reach us directly or come through — we serve from the heart of Soweto.
+        </p>
+
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {/* Business Hours */}
+          <div className="bg-gray-50 p-6 rounded-lg border border-[#e7eaef]">
+            <div className="flex items-center gap-2 mb-4">
+              <Clock className="w-5 h-5 text-[#d4af37]" />
+              <h3 className="font-bold text-lg text-[#18181b]">Opening Hours</h3>
+            </div>
+            <ul className="space-y-2">
+              {hours.map((h, i) => (
+                <li key={i} className="flex justify-between text-sm">
+                  <span className="font-medium text-gray-800">{h.day}</span>
+                  <span className={`${h.closed ? 'text-red-500' : 'text-gray-600'}`}>
+                    {h.closed ? 'Closed' : `${h.open} – ${h.close}`}
+                  </span>
+                </li>
+              ))}
+            </ul>
+            {hours.some((h) => h.note) && (
+              <p className="mt-3 text-xs text-gray-500 italic">{hours.find((h) => h.note)?.note}</p>
+            )}
+          </div>
+
+          {/* Mini Map – Soweto Roots */}
+          <div className="bg-gray-50 p-6 rounded-lg border border-[#e7eaef] col-span-1 lg:col-span-1">
+            <div className="flex items-center gap-2 mb-4">
+              <MapPin className="w-5 h-5 text-[#d4af37]" />
+              <h3 className="font-bold text-lg text-[#18181b]">Rooted in Soweto</h3>
+            </div>
+            <div className="relative w-full h-40 rounded overflow-hidden">
+              <Image
+                src="https://images.pexels.com/photos/4612678/pexels-photo-4612678.jpeg?auto=compress&cs=tinysrgb&h=350"
+                alt="Soweto township view"
+                fill
+                sizes="(max-width: 768px) 100vw, 50vw"
+                className="object-cover"
+              />
+            </div>
+            <p className="mt-3 text-sm text-gray-600">
+              Based in Orlando East, Soweto — every drop is packed from our community studio.
+            </p>
+          </div>
+
+          {/* Contact + Policies */}
+          <div className="bg-gray-50 p-6 rounded-lg border border-[#e7eaef]">
+            <div className="flex items-center gap-2 mb-4">
+              <Phone className="w-5 h-5 text-[#d4af37]" />
+              <h3 className="font-bold text-lg text-[#18181b]">Get in Touch</h3>
+            </div>
+            <div className="space-y-3">
+              <a href="https://wa.me/27761234567" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 text-sm text-gray-700 hover:text-[#d4af37] transition-colors duration-200">
+                <MessageCircle className="w-4 h-4 text-green-600" />
+                WhatsApp Us
+              </a>
+              <a href="tel:+27761234567" className="flex items-center gap-2 text-sm text-gray-700 hover:text-[#d4af37] transition-colors duration-200">
+                <Phone className="w-4 h-4" />
+                +27 76 123 4567
+              </a>
+              <a href="mailto:hello@mzansiwear.co.za" className="flex items-center gap-2 text-sm text-gray-700 hover:text-[#d4af37] transition-colors duration-200">
+                <Mail className="w-4 h-4" />
+                hello@mzansiwear.co.za
+              </a>
+            </div>
+            <div className="mt-6 pt-4 border-t border-[#e7eaef]">
+              <div className="flex items-center gap-2 mb-2">
+                <Shield className="w-4 h-4 text-[#d4af37]" />
+                <span className="font-semibold text-sm text-[#18181b]">Shipping & Returns</span>
+              </div>
+              <p className="text-xs text-gray-600 leading-relaxed">
+                Free shipping in SA on orders over R800. International shipping via DHL (7–14 days).
+                14-day return window for unworn items. Full policy at checkout.
+              </p>
+            </div>
+            <div className="flex gap-3 mt-4 pt-3 border-t border-[#e7eaef]">
+              <a href="#" className="text-[#18181b] hover:text-[#d4af37] transition-colors"><Camera className="w-5 h-5" /></a>
+              <a href="#" className="text-[#18181b] hover:text-[#d4af37] transition-colors"><Globe className="w-5 h-5" /></a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}