Deploy

src/components/sections/BusinessHoursSection.tsx

@@ -0,0 +1,59 @@
+'use client'
+import { useVulaContent } from '@/hooks/useVulaContent'
+import { Clock } from 'lucide-react'
+
+export default function BusinessHoursSection() {
+  const { items, loading } = useVulaContent('business_hours')
+
+  if (loading) return <div className="flex justify-center py-16"><div className="h-8 w-8 rounded-full border-2 border-current border-t-transparent animate-spin" /></div>
+
+  if (items.length === 0) return null
+
+  return (
+    <section id="business-hours" data-vula-section="businesshours" data-vula-cms="business_hours" className="bg-[#F0F8FF] px-6 py-20">
+      <div className="mx-auto max-w-3xl">
+        <div className="flex items-end justify-between border-b border-[#1A2B3C]/20 pb-4">
+          <div>
+            <p className="text-xs uppercase tracking-[0.14em] text-[#0077BE]">Office hours</p>
+            <h2 className="mt-3 text-3xl font-black tracking-tight text-[#1A2B3C] lg:text-4xl">When to reach us</h2>
+          </div>
+          <Clock className="h-8 w-8 text-[#00A8CC]" />
+        </div>
+
+        <div className="mt-6 overflow-hidden rounded-lg border border-[#1A2B3C]/15">
+          <table className="w-full text-left text-sm">
+            <thead className="border-b border-[#1A2B3C]/15">
+              <tr>
+                <th className="px-4 py-3 text-xs uppercase tracking-[0.14em] text-[#1A2B3C]/60">Day</th>
+                <th className="px-4 py-3 text-xs uppercase tracking-[0.14em] text-[#1A2B3C]/60">Hours</th>
+                <th className="px-4 py-3 text-xs uppercase tracking-[0.14em] text-[#1A2B3C]/60">Note</th>
+              </tr>
+            </thead>
+            <tbody>
+              {items.map((item) => {
+                const d = item.data as { day_of_week?: string; open_time?: string; close_time?: string; is_closed?: boolean; note?: string }
+                return (
+                  <tr key={item.id} className="border-b border-[#1A2B3C]/10 last:border-0">
+                    <td className="px-4 py-3 font-semibold text-[#1A2B3C]">{d.day_of_week}</td>
+                    <td className="px-4 py-3 text-[#1A2B3C]/80">
+                      {d.is_closed ? (
+                        <span className="font-medium text-[#B00020]">Closed</span>
+                      ) : (
+                        <span className="tabular-nums">{d.open_time} – {d.close_time}</span>
+                      )}
+                    </td>
+                    <td className="px-4 py-3 text-[#1A2B3C]/60">{d.note ? d.note : '—'}</td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+
+        <p className="mt-4 text-sm text-[#1A2B3C]/60">
+          Consultations are by appointment. If the office is closed, email us and we will respond the next working day.
+        </p>
+      </div>
+    </section>
+  )
+}