Deploy

2026-06-23 08:47:29 +00:00
parent c497fc1d89
commit 3aa7db94c5
1 changed files with 93 additions and 0 deletions
@@ -0,0 +1,93 @@
+'use client'
+
+import { useMedusaProducts } from "@/hooks/useMedusaProducts"
+import Image from "next/image"
+import Link from "next/link"
+import { Card, CardContent } from "@/components/ui/Card"
+import Button from "@/components/ui/Button"
+import Badge from "@/components/ui/Badge"
+
+const CURRENCY_SYMBOLS: Record<string, string> = { zar: "R", usd: "$", eur: "€", gbp: "£", kes: "KSh", ngn: "₦" }
+const formatPrice = (amount: number, code?: string) => {
+  const sym = CURRENCY_SYMBOLS[(code ?? "").toLowerCase()] ?? (code?.toUpperCase() ?? "")
+  return `${sym}${(amount / 100).toFixed(2)}`
+}
+
+const roomImages = [
+  "https://images.pexels.com/photos/15640157/pexels-photo-15640157.jpeg?auto=compress&cs=tinysrgb&h=350",
+  "https://images.pexels.com/photos/37930119/pexels-photo-37930119.jpeg?auto=compress&cs=tinysrgb&h=350",
+  "https://images.pexels.com/photos/29893445/pexels-photo-29893445.jpeg?auto=compress&cs=tinysrgb&h=350",
+  "https://images.pexels.com/photos/34515222/pexels-photo-34515222.jpeg?auto=compress&cs=tinysrgb&h=350",
+  "https://images.pexels.com/photos/34515222/pexels-photo-34515222.jpeg?auto=compress&cs=tinysrgb&h=350",
+  "https://images.pexels.com/photos/34515222/pexels-photo-34515222.jpeg?auto=compress&cs=tinysrgb&h=350",
+]
+
+export default function KwaNtofontofoRoomsSection() {
+  const { products: rooms, isLoading } = useMedusaProducts(6)
+
+  return (
+    <section data-vula-section="kwantofontoforooms" id="rooms" className="py-20 px-6 bg-[#FDF6EC]">
+      <div className="max-w-7xl mx-auto">
+        <h2 className="text-4xl font-bold text-[#2C1810] text-center mb-4">
+          Our Luxury Rooms
+        </h2>
+        <p className="text-center text-[#2C1810]/70 max-w-xl mx-auto mb-12">
+          Each room is uniquely themed, air-conditioned with en-suite facilities,
+          DStv, and a personal touch that makes you feel like royalty.
+        </p>
+
+        {isLoading && (
+          <div className="text-center text-[#2C1810] py-12">Loading rooms...</div>
+        )}
+
+        {!isLoading && rooms && rooms.length > 0 && (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
+            {rooms.map((room, index) => {
+              const price = room.variants?.[0]?.prices?.[0]
+              return (
+                <Card key={room.id} className="overflow-hidden shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-lifted)] hover:-translate-y-0.5 transition-all duration-200 ease-out">
+                  <div className="relative h-48 overflow-hidden">
+                    <Image
+                      src={roomImages[index % roomImages.length]}
+                      alt={room.title || "Room image"}
+                      fill
+                      sizes="(max-width: 768px) 100vw, 33vw"
+                      className="object-cover hover:scale-105 transition-transform duration-500 ease-out"
+                    />
+                  </div>
+                  <CardContent className="p-5">
+                    <h3 className="text-xl font-semibold text-[#2C1810] mb-2">{room.title}</h3>
+                    <p className="text-sm text-[#2C1810]/70 mb-3 line-clamp-2">{room.description}</p>
+                    <div className="flex items-center gap-2 mb-4">
+                      <Badge variant="outline" className="text-xs">En-suite</Badge>
+                      <Badge variant="outline" className="text-xs">Air-conditioned</Badge>
+                      <Badge variant="outline" className="text-xs">DStv</Badge>
+                    </div>
+                    <div className="flex items-center justify-between">
+                      {price && (
+                        <span className="text-lg font-bold text-[#C0392B]">
+                          {formatPrice(price.amount, price.currency_code)} / night
+                        </span>
+                      )}
+                      <Link href={`/booking/${room.id}`}>
+                        <Button variant="default" size="sm" className="bg-[#E67E22] hover:bg-[#d4731f]">
+                          View Room
+                        </Button>
+                      </Link>
+                    </div>
+                  </CardContent>
+                </Card>
+              )
+            })}
+          </div>
+        )}
+
+        {!isLoading && (!rooms || rooms.length === 0) && (
+          <div className="text-center text-[#2C1810] py-12">
+            <p>No rooms available at the moment. Please check back later.</p>
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}