Deploy

src/components/sections/RoomsSection.tsx

@@ -0,0 +1,89 @@
+'use client'
+
+import Image from "next/image"
+import Link from "next/link"
+import { useMedusaProducts } from "@/hooks/useMedusaProducts"
+import { Card, CardHeader, CardTitle, CardContent, CardFooter } from "@/components/ui/Card"
+import Button from "@/components/ui/Button"
+import Badge from "@/components/ui/Badge"
+
+export default function RoomsSection() {
+  const { products: rooms, isLoading } = useMedusaProducts(6)
+
+  const formatPrice = (amount: number, code?: string) => {
+    const symbols: Record<string, string> = { kes: "KSh", usd: "$", eur: "\u20ac", gbp: "\u00a3" }
+    const sym = symbols[(code ?? "").toLowerCase()] ?? (code?.toUpperCase() ?? "")
+    return `${sym}${(amount / 100).toFixed(2)}`
+  }
+
+  return (
+    <section data-vula-section="rooms" id="our-rooms" className="py-24 bg-[#17120f]">
+      <div className="max-w-7xl mx-auto px-4">
+        <div className="text-center mb-16">
+          <div className="flex items-center justify-center gap-4 mb-6">
+            <span className="block w-14 h-px bg-[#d4af37]" />
+            <span className="text-[10px] tracking-[0.25em] uppercase text-[#d4af37] font-sans">The Suites</span>
+            <span className="block w-14 h-px bg-[#d4af37]" />
+          </div>
+          <h2 className="text-4xl md:text-5xl font-light font-serif text-[#eeeae7]">
+            Where <span className="italic text-[#d4af37]">craft</span> meets comfort
+          </h2>
+          <p className="mt-4 text-[#eeeae7]/60 max-w-xl mx-auto">
+            Each of our six signature suites is a harmonious fusion of contemporary elegance and handcrafted Maasai detail.
+          </p>
+        </div>
+
+        {isLoading ? (
+          <div className="flex justify-center py-16">
+            <div className="w-8 h-8 border-2 border-[#d4af37] border-t-transparent rounded-full animate-spin" />
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {rooms?.slice(0, 6).map((room) => {
+              const price = room.variants?.[0]?.prices?.[0]
+              return (
+                <Card key={room.id} className="bg-[#1e1a16] border border-[#403630] rounded-lg overflow-hidden">
+                  <div className="relative aspect-[4/3] overflow-hidden">
+                    <Image
+                      src={room.thumbnail || "https://images.pexels.com/photos/27720736/pexels-photo-27720736.jpeg?auto=compress&cs=tinysrgb&h=350"}
+                      alt={room.title}
+                      fill
+                      sizes="(max-width: 768px) 100vw, 33vw"
+                      className="object-cover transition-transform duration-500 hover:scale-105"
+                    />
+                    {price && (
+                      <Badge variant="accent" className="absolute top-3 left-3 bg-[#6b8e23]/80 text-[#eeeae7] text-xs">
+                        From {formatPrice(price.amount, price.currency_code)} / night
+                      </Badge>
+                    )}
+                  </div>
+                  <CardHeader className="p-4">
+                    <CardTitle className="text-lg font-serif text-[#eeeae7]">{room.title}</CardTitle>
+                  </CardHeader>
+                  <CardContent className="px-4 pb-2">
+                    <p className="text-sm text-[#eeeae7]/60 line-clamp-2">{room.description}</p>
+                  </CardContent>
+                  <CardFooter className="p-4 pt-2">
+                    <Link href={"/booking/" + room.id}>
+                      <Button variant="outline" size="sm" className="border-[#d4af37] text-[#d4af37] hover:bg-[#d4af37]/10 w-full">
+                        Book This Room
+                      </Button>
+                    </Link>
+                  </CardFooter>
+                </Card>
+              )
+            })}
+          </div>
+        )}
+
+        <div className="text-center mt-12">
+          <Link href="/rooms">
+            <Button variant="ghost" className="text-[#d4af37] border border-[#d4af37]/30 hover:bg-[#d4af37]/10">
+              View All Rooms &mdash; Personalise Your Stay
+            </Button>
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}