Deploy

src/components/sections/SereneSuitesSection.tsx

@@ -0,0 +1,98 @@
+'use client'
+
+import { useMedusaProducts } from "@/hooks/useMedusaProducts"
+import Image from "next/image"
+import Link from "next/link"
+
+export default function SereneSuitesSection() {
+  const { products: rooms, isLoading, error } = useMedusaProducts(6)
+
+  const formatPrice = (amount: number, code?: string) => {
+    const symbols: Record<string, string> = {
+      kes: "KSh",
+      usd: "$",
+      eur: "€",
+      gbp: "£",
+      zar: "R",
+    }
+    const sym = symbols[code?.toLowerCase() ?? ""] ?? (code?.toUpperCase() ?? "")
+    return `${sym}${(amount / 100).toFixed(2)}`
+  }
+
+  if (isLoading) {
+    return (
+      <section data-vula-section="serenesuites" id="serene-suites" className="py-20 px-4 bg-[#FDF6EC]">
+        <div className="max-w-6xl mx-auto text-center">
+          <p className="text-[#2C1810] animate-pulse">Loading rooms…</p>
+        </div>
+      </section>
+    )
+  }
+
+  if (error) {
+    return (
+      <section id="serene-suites" className="py-20 px-4 bg-[#FDF6EC]">
+        <div className="max-w-6xl mx-auto text-center">
+          <p className="text-[#2C1810]">Unable to load rooms. Please try again later.</p>
+        </div>
+      </section>
+    )
+  }
+
+  return (
+    <section id="serene-suites" 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">
+          Suites That Sink You Into Stillness
+        </h2>
+        <p className="text-lg text-[#2C1810]/80 text-center max-w-2xl mx-auto mb-12">
+          Every room at Masai Suites is designed as a haven — natural materials,
+          soft linens, and a quiet palette that lets the outside in.
+        </p>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {rooms?.map((room: any) => {
+            const price = room.variants?.[0]?.prices?.[0]
+            return (
+              <div
+                key={room.id}
+                className="rounded-xl overflow-hidden bg-white shadow-md"
+              >
+                <div className="h-48 w-full">
+                  {room.thumbnail ? (
+                    <Image
+                      src={room.thumbnail}
+                      alt={room.title}
+                      width={400}
+                      height={300}
+                      className="w-full h-full object-cover"
+                    />
+                  ) : (
+                    <div className="w-full h-full bg-[#E8DCD4]" />
+                  )}
+                </div>
+                <div className="p-5">
+                  <h3 className="text-xl font-bold text-[#2C1810] mb-2">{room.title}</h3>
+                  <p className="text-[#2C1810]/70 text-sm mb-3 line-clamp-2">
+                    {room.description}
+                  </p>
+                  {price && (
+                    <p className="text-lg font-semibold text-[#C0392B] mb-4">
+                      {formatPrice(price.amount, price.currency_code)}{" "}
+                      <span className="text-sm font-normal text-[#2C1810]/60">per night</span>
+                    </p>
+                  )}
+                  <Link
+                    href={`/booking/${room.id}`}
+                    className="inline-block w-full text-center py-2 px-4 rounded-full bg-[#F1C40F] text-black font-semibold hover:bg-[#D4AC0D] transition-colors duration-200"
+                  >
+                    Book Now
+                  </Link>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}