Deploy

src/components/sections/EarthlyComfortsSection.tsx

@@ -0,0 +1,61 @@
+import { Leaf, Sun, UtensilsCrossed, Wind } from 'lucide-react'
+
+export default function EarthlyComfortsSection() {
+  const amenities = [
+    {
+      icon: Leaf,
+      title: "Nature-Inspired Spa",
+      description:
+        "Treatments using local botanicals — aloe, baobab oil, and wild honey — in an open-air spa overlooking the plains.",
+    },
+    {
+      icon: Sun,
+      title: "Open-Air Lounges",
+      description:
+        "Unwind on shaded verandas with woven loungers, crackling fire pits, and endless views of the savanna.",
+    },
+    {
+      icon: UtensilsCrossed,
+      title: "Farm-to-Table Dining",
+      description:
+        "Our kitchen sources produce from nearby farms and our own herb garden — expect grilled nyama choma, fresh sukuma wiki, and seasonal fruits.",
+    },
+    {
+      icon: Wind,
+      title: "Guided Nature Walks",
+      description:
+        "Walk with Maasai guides who name every bird, plant, and track — a calm, educational way to read the landscape.",
+    },
+  ]
+
+  return (
+    <section data-vula-section="earthlycomforts" id="earthly-comforts" className="py-20 px-4 bg-[#FDF6EC]">
+      <div className="max-w-6xl mx-auto">
+        <h2 className="text-4xl font-bold text-[#2C1810] text-center mb-4">
+          Simple Comforts, Deeply Rooted
+        </h2>
+        <p className="text-lg text-[#2C1810]/80 text-center max-w-xl mx-auto mb-12">
+          Every detail at Masai Suites is intentional — from the linens to the
+          meals — grounding you in a sense of ease.
+        </p>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+          {amenities.map((item, idx) => {
+            const Icon = item.icon
+            return (
+              <div
+                key={idx}
+                className="rounded-xl overflow-hidden bg-white shadow-md p-6 text-center"
+              >
+                <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-[#C0392B]/10 mb-4">
+                  <Icon className="w-6 h-6 text-[#C0392B]" />
+                </div>
+                <h3 className="text-lg font-bold text-[#2C1810] mb-2">{item.title}</h3>
+                <p className="text-sm text-[#2C1810]/70">{item.description}</p>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}