vula-projects/vula-c66a1ba0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Deploy

Browse Source
This commit is contained in:
Vula Builder
2026-06-23 08:47:29 +00:00
parent c497fc1d89
commit 3aa7db94c5
1 changed files with 93 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/sections/KwaNtofontofoRoomsSection.tsx
+93
View File
@@ -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>
)
}