Deploy

src/components/sections/SowetoBaseSection.tsx

@@ -0,0 +1,83 @@
+'use client'
+
+import { useVulaContent } from '@/hooks/useVulaContent'
+import Image from 'next/image'
+import { Mail, MapPin, Phone } from 'lucide-react'
+import Button from '@/components/ui/Button'
+
+export default function SowetoBaseSection() {
+  const { items, loading } = useVulaContent('business_hours')
+
+  if (loading) return (
+    <section className="py-16 flex justify-center bg-white">
+      <div className="w-8 h-8 rounded-full border-2 border-current border-t-transparent animate-spin text-[#d4af37]" />
+    </section>
+  )
+  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="soweto-base" data-vula-section="sowetobase" data-vula-cms="business_hours" className="py-20 bg-white">
+      <div className="container mx-auto px-4">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+          <div className="relative h-80 lg:h-auto overflow-hidden border-2 border-[#18181b] shadow-[8px_8px_0_0_#d4af37]">
+            <Image
+              src="https://images.pexels.com/photos/4612678/pexels-photo-4612678.jpeg?auto=compress&cs=tinysrgb&h=350"
+              alt="Soweto landscape"
+              fill
+              sizes="(max-width: 768px) 100vw, 50vw"
+              className="object-cover"
+            />
+          </div>
+          <div className="flex flex-col justify-center space-y-8">
+            <div>
+              <h2 className="text-4xl font-black uppercase tracking-tight text-[#18181b]">Soweto Base</h2>
+              <p className="text-lg text-[#d4af37] font-semibold mt-2">Based in Soweto, Mzansi. Amaproud.</p>
+            </div>
+            <div className="space-y-4 text-lg text-[#18181b]">
+              <div className="flex items-start gap-3">
+                <MapPin className="w-6 h-6 text-[#d4af37] flex-shrink-0 mt-1" />
+                <div>
+                  <p className="font-bold">Kasi Wear Studio</p>
+                  <p>123 Vilakazi Street, Orlando West</p>
+                  <p>Soweto, 1804, Gauteng, South Africa</p>
+                </div>
+              </div>
+              <div className="flex items-center gap-3">
+                <Phone className="w-6 h-6 text-[#d4af37]" />
+                <a href="tel:+27723456789" className="hover:text-[#d4af37]">+27 72 345 6789</a>
+              </div>
+              <div className="flex items-center gap-3">
+                <Mail className="w-6 h-6 text-[#d4af37]" />
+                <a href="mailto:info@kasiwear.co.za" className="hover:text-[#d4af37]">info@kasiwear.co.za</a>
+              </div>
+            </div>
+            <div className="border-t-2 border-[#d4af37] pt-6">
+              <h3 className="text-2xl font-bold uppercase tracking-wide mb-4 text-[#18181b]">Trading Hours</h3>
+              <div className="grid grid-cols-1 gap-2 text-lg">
+                {hours.map((h, idx) => (
+                  <div key={idx} className="flex justify-between border-b border-gray-200 py-1">
+                    <span className="font-medium text-[#18181b]">{h.day_of_week}</span>
+                    {h.is_closed ? (
+                      <span className="text-red-600 font-bold">Closed</span>
+                    ) : (
+                      <span className="text-[#18181b]">{h.open_time} – {h.close_time}</span>
+                    )}
+                    {h.note && <span className="text-sm text-gray-500 ml-2">{h.note}</span>}
+                  </div>
+                ))}
+              </div>
+            </div>
+            <Button
+              variant="default"
+              className="bg-[#d4af37] text-black font-extrabold uppercase tracking-wider px-8 py-4 rounded-none border-2 border-[#d4af37] hover:bg-black hover:text-[#d4af37] w-fit"
+            >
+              Visit Us
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}