Deploy

src/components/sections/ExclusiveSuitesSection.tsx

@@ -0,0 +1,92 @@
+'use client'
+
+import Image from 'next/image'
+import Link from 'next/link'
+import { useMedusaProducts } from '@/hooks/useMedusaProducts'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
+import { Star, Users } from 'lucide-react'
+import Button from '@/components/ui/Button'
+
+const CURRENCY_SYMBOLS: Record<string, string> = { zar: 'R', usd: '$', eur: '€', gbp: '£', kes: 'KSh', ngn: '₦', ghs: '₵' }
+const formatPrice = (amount: number, code?: string) => {
+  const sym = CURRENCY_SYMBOLS[(code ?? '').toLowerCase()] ?? (code?.toUpperCase() ?? '')
+  return `${sym}${(amount / 100).toFixed(2)}`
+}
+
+export default function ExclusiveSuitesSection() {
+  const { products: suites, isLoading } = useMedusaProducts(6)
+
+  return (
+    <section data-vula-section="exclusivesuites" id="suites" className="py-24 bg-[#f2f4f5]">
+      <div className="max-w-7xl mx-auto px-4">
+        <div className="text-center mb-16 max-w-2xl mx-auto">
+          <h2 className="text-4xl md:text-5xl font-bold text-[#1f2b33] mb-4" style={{ fontFamily: 'Sora, sans-serif' }}>
+            Six sanctuaries, <span className="text-[#d4af37]">each a world apart</span>
+          </h2>
+          <p className="text-lg text-[#36454F]/70 leading-relaxed">
+            Every suite is a private hideaway — handcrafted with local stone, reclaimed timber, and panoramic glass overlooking the bushveld.
+          </p>
+        </div>
+
+        {isLoading ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <div key={i} className="bg-white rounded-3xl overflow-hidden shadow-soft animate-pulse">
+                <div className="h-64 bg-[#d4dadd]"></div>
+                <div className="p-6 space-y-3">
+                  <div className="h-6 bg-[#d4dadd] rounded w-3/4"></div>
+                  <div className="h-4 bg-[#d4dadd] rounded w-full"></div>
+                  <div className="h-4 bg-[#d4dadd] rounded w-1/2"></div>
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {suites?.slice(0, 6).map((suite) => {
+              const price = suite.variants?.[0]?.prices?.[0]
+              return (
+                <Card key={suite.id} className="bg-white rounded-3xl overflow-hidden shadow-soft border-0 group cursor-pointer transition-all duration-300 hover:-translate-y-2 hover:shadow-xl">
+                  <div className="relative h-64 overflow-hidden">
+                    <Image
+                      src={suite.thumbnail || 'https://images.pexels.com/photos/9146381/pexels-photo-9146381.jpeg?auto=compress&cs=tinysrgb&h=350'}
+                      alt={suite.title}
+                      fill
+                      sizes="(max-width: 768px) 100vw, 33vw"
+                      className="object-cover transition-transform duration-500 group-hover:scale-105"
+                    />
+                    <div className="absolute top-4 left-4 bg-white/90 backdrop-blur-sm rounded-full px-3 py-1 text-sm font-medium text-[#36454F]">
+                      <span className="flex items-center gap-1"><Users size={14} /> Up to 2 guests</span>
+                    </div>
+                  </div>
+                  <CardHeader className="pb-2">
+                    <CardTitle className="text-2xl font-semibold text-[#1f2b33]">{suite.title}</CardTitle>
+                  </CardHeader>
+                  <CardContent className="space-y-3">
+                    <p className="text-[#36454F]/70 leading-relaxed">{suite.description?.substring(0, 120)}…</p>
+                    {price && (
+                      <p className="text-[#16a34a] font-bold text-xl">{formatPrice(price.amount, price.currency_code)}<span className="text-sm font-normal text-[#36454F]/60"> / night</span></p>
+                    )}
+                    <Link href={`/booking/${suite.id}`}>
+                      <span className="inline-block mt-2 bg-[#d4af37] text-[#1f2b33] px-6 py-2 rounded-full font-semibold text-sm hover:bg-[#c49f2e] transition-colors">
+                        View Suite
+                      </span>
+                    </Link>
+                  </CardContent>
+                </Card>
+              )
+            })}
+          </div>
+        )}
+
+        <div className="text-center mt-12">
+          <Link href="/booking">
+            <Button variant="default" size="lg" className="bg-[#36454F] text-[#f2f4f5] hover:bg-[#2a3844] rounded-full px-10">
+              Explore All Suites
+            </Button>
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}