Deploy

src/components/sections/ThemedSuitesSection.tsx

@@ -0,0 +1,85 @@
+'use client'
+
+import { useState } from 'react'
+import { useMedusaProducts } from '@/hooks/useMedusaProducts'
+import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@/components/ui/Card'
+import Button from '@/components/ui/Button'
+import { BedDouble, Snowflake, Tv, Wifi } from 'lucide-react'
+import Image from 'next/image'
+
+export default function ThemedSuitesSection() {
+  const { products: suites, isLoading } = useMedusaProducts(6)
+  if (isLoading) return null
+
+  const fallbackImage = 'https://images.pexels.com/photos/12961892/pexels-photo-12961892.jpeg?auto=compress&cs=tinysrgb&h=350'
+  const amenities = ['Air-conditioning', 'En-suite bathroom', 'DStv', 'Free WiFi', 'Tea & Coffee']
+
+  return (
+    <section data-vula-section="themedsuites" id="themed-suites" className="py-16 md:py-24 bg-muted">
+      <div className="container mx-auto px-4">
+        <div className="text-center mb-12">
+          <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-2">
+            Themed Luxury Suites
+          </h2>
+          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+            Each room tells a story &mdash; African royalty &amp; nature inspire every detail
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {suites.map((suite) => {
+            const price = suite.variants?.[0]?.prices?.[0]
+            const formattedPrice = price
+              ? `R${(price.amount / 100).toFixed(0)}`
+              : 'From R950'
+            const imgUrl = suite.thumbnail || fallbackImage
+
+            return (
+              <Card key={suite.id} className="hover:shadow-[var(--shadow-lifted)] hover:-translate-y-0.5 transition-all duration-200 ease-out">
+                <CardHeader className="p-0 overflow-hidden rounded-t-xl">
+                  <div className="aspect-video relative">
+                    <Image
+                      src={imgUrl}
+                      alt={suite.title || 'Suite'}
+                      fill
+                      sizes="(max-width: 768px) 100vw, 33vw"
+                      className="object-cover"
+                    />
+                  </div>
+                </CardHeader>
+                <CardContent className="pt-4">
+                  <CardTitle className="text-xl font-bold mb-2">{suite.title}</CardTitle>
+                  <p className="text-muted-foreground text-sm line-clamp-2 mb-3">
+                    {suite.description || 'Experience bespoke luxury in this uniquely themed room.'}
+                  </p>
+                  <div className="flex flex-wrap gap-2 mb-3">
+                    {amenities.slice(0, 3).map((a) => (
+                      <span key={a} className="inline-flex items-center gap-1 text-xs bg-[#d4af37]/10 text-[#8b5a3c] px-2 py-1 rounded-full">
+                        <BedDouble className="w-3 h-3" />
+                        {a}
+                      </span>
+                    ))}
+                  </div>
+                  <p className="text-lg font-semibold text-[#d4af37]">{formattedPrice}<span className="text-sm text-muted-foreground font-normal"> / night</span></p>
+                </CardContent>
+                <CardFooter className="pt-0">
+                  <a href={`/booking/${suite.id}`} className="block w-full">
+                    <Button variant="default" className="w-full">
+                      Book Now
+                    </Button>
+                  </a>
+                </CardFooter>
+              </Card>
+            )
+          })}
+        </div>
+
+        <div className="text-center mt-8">
+          <a href="/booking" className="inline-block border-2 border-[#d4af37] text-[#d4af37] font-semibold px-8 py-3 rounded-lg hover:bg-[#d4af37] hover:text-white transition-all duration-200">
+            View All Suites &amp; Availability
+          </a>
+        </div>
+      </div>
+    </section>
+  )
+}