Deploy

2026-07-28 12:39:46 +00:00
parent b108c7ee39
commit 7520cc2a10
1 changed files with 74 additions and 0 deletions
@@ -0,0 +1,74 @@
+'use client'
+import { useVulaContent } from '@/hooks/useVulaContent'
+import { Mail, MapPin, MessageCircle, Phone } from 'lucide-react'
+import Button from '@/components/ui/Button'
+
+export default function VisitOurWorkshopSection() {
+  const { items, loading } = useVulaContent('business_hours')
+  if (loading) return <div className="flex justify-center py-16"><div className="w-8 h-8 rounded-full border-2 border-current border-t-transparent animate-spin" /></div>
+  if (items.length === 0) return null
+  const address = '123 Marula Lane, Pretoria, 0002'
+  const phone = '+27 12 345 6789'
+  const email = 'hello@ngemanaturals.co.za'
+  const mapSrc = `https://www.google.com/maps?q=${encodeURIComponent('123 Marula Lane, Pretoria, South Africa')}&output=embed`
+  return (
+    <section id="visit-us" data-vula-section="visitourworkshop" data-vula-cms="business_hours" className="py-20 bg-[#f4f5f2]">
+      <div className="container mx-auto px-4">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
+          <div>
+            <div className="mb-6">
+              <p className="text-sm uppercase tracking-wider text-[#6b8e23] mb-2">Hamba Lapha</p>
+              <h2 className="text-4xl font-bold text-[#2c331f]">Come See Us</h2>
+              <p className="mt-4 text-[#8b5a3c] max-w-md">Witness the cold-press process, pick up fresh batches, and connect personally with Mama Ngema.</p>
+            </div>
+            <div className="space-y-4">
+              {items.map((item) => {
+                const d = item.data as { day_of_week?: string; open_time?: string; close_time?: string; is_closed?: boolean; note?: string }
+                return (
+                  <div key={item.id} className="flex items-center justify-between bg-white rounded-xl px-5 py-3 shadow-md">
+                    <span className="font-medium text-[#2c331f]">{d.day_of_week}</span>
+                    {d.is_closed ? (
+                      <span className="text-sm text-[#ea580c]">Closed</span>
+                    ) : (
+                      <span className="text-sm text-[#6b8e23]">{d.open_time} – {d.close_time}</span>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+            <div className="mt-8 space-y-3">
+              <div className="flex items-center gap-2 text-[#8b5a3c]">
+                <MapPin className="w-5 h-5" />
+                <span>{address}</span>
+              </div>
+              <div className="flex items-center gap-2 text-[#8b5a3c]">
+                <Phone className="w-5 h-5" />
+                <span>{phone}</span>
+              </div>
+              <div className="flex items-center gap-2 text-[#8b5a3c]">
+                <Mail className="w-5 h-5" />
+                <span>{email}</span>
+              </div>
+              <Button variant="outline" size="sm" className="mt-2">
+                <MessageCircle className="w-4 h-4 mr-2" />
+                WhatsApp Us
+              </Button>
+            </div>
+          </div>
+          <div className="relative h-80 lg:h-full min-h-[300px] rounded-3xl overflow-hidden shadow-xl">
+            <iframe
+              src={mapSrc}
+              width="100%"
+              height="100%"
+              style={{ border: 0 }}
+              allowFullScreen
+              loading="lazy"
+              referrerPolicy="no-referrer-when-downgrade"
+              title="Ngema Naturals Workshop Map"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}