Deploy
This commit is contained in:
Vula Builder
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user