Deploy

src/components/sections/RoomsSection.tsx

@@ -0,0 +1,116 @@
+'use client'
+
+import { useMedusaProducts } from "@/hooks/useMedusaProducts"
+import { Card, CardHeader, CardTitle, CardContent, CardFooter } from "@/components/ui/Card"
+import Button from "@/components/ui/Button"
+import Link from "next/link"
+import Image from "next/image"
+import { Star } from 'lucide-react'
+
+const CURRENCY_SYMBOLS: Record<string, string> = { zar: "R", usd: "$", eur: "€", gbp: "£" }
+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/24738158/pexels-photo-24738158.jpeg?auto=compress&cs=tinysrgb&h=350",
+  "https://images.pexels.com/photos/18652120/pexels-photo-18652120.jpeg?auto=compress&cs=tinysrgb&h=350",
+  "https://images.pexels.com/photos/1973889/pexels-photo-1973889.jpeg?auto=compress&cs=tinysrgb&h=350",
+]
+
+export default function RoomsSection() {
+  const { products: rooms, isLoading } = useMedusaProducts(6)
+
+  if (isLoading) {
+    return (
+      <section data-vula-section="rooms" id="rooms" className="py-20" style={{ backgroundColor: "#f9f7f4" }}>
+        <div className="container mx-auto px-4 text-center">
+          <div className="animate-pulse space-y-4">
+            <div className="h-8 bg-[#e2dfd4] rounded w-1/3 mx-auto" />
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-12">
+              {[1, 2, 3].map((i) => (
+                <div key={i} className="h-80 bg-[#e2dfd4] rounded-xl" />
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+    )
+  }
+
+  const displayRooms = (rooms ?? []).slice(0, 6).map((room, idx) => ({
+    ...room,
+    image: roomImages[idx % roomImages.length],
+  }))
+
+  return (
+    <section id="rooms" className="py-20 lg:py-28" style={{ backgroundColor: "#f9f7f4" }}>
+      <div className="container mx-auto px-4">
+        <div className="text-center mb-14">
+          <span className="inline-block text-[#16a34a] text-sm md:text-base tracking-widest uppercase font-semibold mb-2">
+            Venda-Inspired Accommodation
+          </span>
+          <h2 className="text-3xl md:text-5xl font-bold" style={{ color: "#211c0d" }}>
+            Six Rooms, Six Stories
+          </h2>
+          <p className="mt-4 max-w-2xl mx-auto" style={{ color: "#211c0d/80" }}>
+            Each suite handcrafted with locally woven textiles and named after Venda clans and landmarks.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {displayRooms.map((room) => {
+            const price = room.variants?.[0]?.prices?.[0]
+            return (
+              <Card key={room.id} className="group overflow-hidden rounded-2xl shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
+                <div className="relative h-60 overflow-hidden">
+                  <Image
+                    src={room.image}
+                    alt={room.title}
+                    fill
+                    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                    className="object-cover transition-transform duration-500 group-hover:scale-105"
+                  />
+                  {price && (
+                    <span className="absolute top-4 right-4 bg-[#18181b] text-white text-sm font-bold px-3 py-1 rounded-full">
+                      {formatPrice(price.amount, price.currency_code)} / night
+                    </span>
+                  )}
+                </div>
+                <CardHeader>
+                  <CardTitle className="text-xl font-bold" style={{ color: "#211c0d" }}>
+                    {room.title}
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-sm leading-relaxed line-clamp-3" style={{ color: "#211c0d/70" }}>
+                    {room.description ?? "Experience the authentic Venda charm in our carefully curated space."}
+                  </p>
+                  <div className="flex items-center gap-1 mt-4">
+                    {[...Array(5)].map((_, i) => (
+                      <Star key={i} className="w-4 h-4 fill-[#d4af37] text-[#d4af37]" />
+                    ))}
+                  </div>
+                </CardContent>
+                <CardFooter>
+                  <Link href={`/booking/${room.id}`} className="w-full">
+                    <Button variant="default" className="w-full">Book Now</Button>
+                  </Link>
+                </CardFooter>
+              </Card>
+            )
+          })}
+        </div>
+
+        <div className="text-center mt-12">
+          <Link href="/booking">
+            <Button variant="outline" size="lg">
+              View All Rooms &amp; Availability
+            </Button>
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}