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>
  )
 }