Deploy

src/components/sections/MaasaiSuitesRoomsSection.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+import { useMedusaProducts } from "@/hooks/useMedusaProducts"
+import { Card } from "@/components/ui/Card"
+import Button from "@/components/ui/Button"
+import Image from "next/image"
+import Link from "next/link"
+
+const CURRENCY_SYMBOLS: Record<string, string> = { kes: "KSh", usd: "$", eur: "€", gbp: "£" }
+const formatPrice = (amount: number, code?: string) => {
+  const sym = CURRENCY_SYMBOLS[(code ?? "").toLowerCase()] ?? (code?.toUpperCase() ?? "")
+  return `${sym}${(amount / 100).toLocaleString()}`
+}
+
+export default function MaasaiSuitesRoomsSection() {
+  const { products: rooms, isLoading } = useMedusaProducts(6)
+
+  if (isLoading) {
+    return (
+      <section data-vula-section="maasaisuitesrooms" id="rooms" className="py-20 bg-[#f9f4f4]">
+        <div className="max-w-7xl mx-auto px-4 text-center">
+          <div className="animate-pulse space-y-4">
+            <div className="h-8 bg-[#e2d4d4] rounded w-1/3 mx-auto" />
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12">
+              {[1,2,3].map(i => <div key={i} className="h-64 bg-[#e2d4d4] rounded-xl" />)}
+            </div>
+          </div>
+        </div>
+      </section>
+    )
+  }
+
+  return (
+    <section id="rooms" className="py-20 bg-[#f9f4f4]">
+      <div className="max-w-7xl mx-auto px-4">
+        <h2 className="font-bricolage text-3xl md:text-5xl font-bold text-[#210d0d] text-center mb-4">
+          Handcrafted Suites with a View
+        </h2>
+        <p className="font-lora text-center text-[#210d0d]/70 max-w-2xl mx-auto mb-12 italic">
+          Each room weaves Maasai artisanry with modern comfort — overlooking the endless savannah.
+        </p>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {rooms?.map((room) => {
+            const price = room.variants?.[0]?.prices?.[0]
+            return (
+              <Card key={room.id} className="overflow-hidden rounded-xl shadow-md bg-white border border-[#e2d4d4] transition-all duration-200 ease-out hover:shadow-lg hover:-translate-y-1">
+                <div className="relative h-56 overflow-hidden">
+                  <Image
+                    src={room.thumbnail ?? "https://images.pexels.com/photos/20944033/pexels-photo-20944033.jpeg?auto=compress&cs=tinysrgb&h=350"}
+                    alt={room.title}
+                    fill
+                    sizes="(max-width: 768px) 100vw, 50vw"
+                    className="object-cover hover:scale-105 transition-transform duration-500 ease-out"
+                  />
+                </div>
+                <div className="p-5">
+                  <h3 className="font-bricolage text-xl font-semibold text-[#210d0d] mb-2">{room.title}</h3>
+                  <p className="font-lora text-sm text-[#210d0d]/70 mb-4 leading-relaxed">
+                    {room.description?.substring(0, 120)}...
+                  </p>
+                  <div className="flex items-center justify-between">
+                    {price && (
+                      <span className="font-bricolage text-lg font-bold text-[#d4af37]">
+                        {formatPrice(price.amount, price.currency_code)} /night
+                      </span>
+                    )}
+                    <Link href={`/booking/${room.id}`}>
+                      <Button variant="outline" size="sm" className="border-[#dc2626] text-[#dc2626] hover:bg-[#dc2626] hover:text-[#f9f4f4] rounded-lg transition-all duration-200 ease-out">
+                        Book Now
+                      </Button>
+                    </Link>
+                  </div>
+                </div>
+              </Card>
+            )
+          })}
+        </div>
+        <div className="text-center mt-12">
+          <Link href="/booking">
+            <Button variant="default" size="lg" className="bg-[#dc2626] hover:bg-[#b71c1c] text-[#f9f4f4] px-8 py-3 rounded-xl shadow-md transition-all duration-200 ease-out">
+              Explore All Suites
+            </Button>
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}