Deploy

src/components/sections/FarmRhythmHoursSection.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import { useEmDashContent } from '@/hooks/useEmDashContent'
+
+export default function FarmRhythmHoursSection() {
+  const { items, loading } = useEmDashContent('business_hours')
+
+  if (loading) return <div className="flex justify-center py-16"><div className="w-8 h-8 rounded-full border-2 border-[#6b8e23] border-t-transparent animate-spin" /></div>
+  if (items.length === 0) return null
+
+  return (
+    <section id="farm-hours" data-vula-section="farmrhythmhours" data-vula-cms="business_hours" className="py-20 bg-white">
+      <div className="container mx-auto px-4 max-w-4xl">
+        <div className="text-center mb-12 max-w-[44ch] mx-auto">
+          <p className="text-[#36454F] uppercase tracking-widest text-sm font-medium mb-2">Farm rhythm</p>
+          <h2 className="font-serif text-4xl md:text-5xl text-[#2c331f] leading-tight">
+            Unhurried <span className="text-[#6b8e23]">hours</span>, generous welcome
+          </h2>
+          <p className="mt-4 text-[#36454F] text-lg leading-relaxed">
+            We keep the pace of farm life — early mornings for sunrise coffee, unhurried breakfasts, and quiet evenings.
+          </p>
+        </div>
+
+        <div className="bg-[#f4f5f2] rounded-[22px] shadow-2xl p-8 md:p-12 border-0">
+          <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 py-3 border-b border-[#daddd4] last:border-0">
+                  <div className="flex items-center gap-3">
+                    <span className="w-2 h-2 rounded-full bg-[#6b8e23]" />
+                    <span className="font-medium text-[#2c331f]">{d.day_of_week}</span>
+                  </div>
+                  <div className="text-right">
+                    {d.is_closed ? (
+                      <span className="text-[#36454F] italic">Closed</span>
+                    ) : (
+                      <span className="text-[#36454F]">
+                        {d.open_time && d.close_time ? `${d.open_time} – ${d.close_time}` : ''}
+                        {d.note && <span className="block text-xs text-[#6b8e23] mt-0.5">{d.note}</span>}
+                      </span>
+                    )}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+
+          <div className="mt-8 flex flex-wrap gap-2 text-sm text-[#36454F]">
+            <span className="inline-flex items-center gap-1"><span className="w-1.5 h-1.5 rounded-full bg-[#6b8e23]" /> Check‑in from 14:00</span>
+            <span className="inline-flex items-center gap-1"><span className="w-1.5 h-1.5 rounded-full bg-[#6b8e23]" /> Check‑out by 11:00</span>
+            <span className="inline-flex items-center gap-1"><span className="w-1.5 h-1.5 rounded-full bg-[#6b8e23]" /> Breakfast 08:00–10:00</span>
+          </div>
+          <p className="mt-4 text-sm text-[#36454F]">
+            * Seasonal variations may apply — always confirm at time of booking.
+          </p>
+        </div>
+      </div>
+    </section>
+  )
+}