Deploy

src/components/sections/SixSanctuarySuitesSection.tsx

@@ -0,0 +1,57 @@
+import Image from 'next/image'
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card'
+
+export default function SixSanctuarySuitesSection() {
+  const suites = [
+    { name: 'Magma Suite', description: "Private plunge pool bathed in volcanic warmth, outdoor shower under an endless sky.", image: "https://images.pexels.com/photos/33315724/pexels-photo-33315724.jpeg?auto=compress&cs=tinysrgb&h=350" },
+    { name: 'Obsidian Suite', description: "Deep charcoal stone interiors, floor-to-ceiling glass, and a fire pit overlooking the bushveld.", image: "https://images.pexels.com/photos/33067642/pexels-photo-33067642.jpeg?auto=compress&cs=tinysrgb&h=350" },
+    { name: 'Cinder Suite', description: "Intimate loft with suspended hammock, private terrace, and sunrise-facing outdoor shower.", image: "https://images.pexels.com/photos/6462892/pexels-photo-6462892.jpeg?auto=compress&cs=tinysrgb&h=350" },
+    { name: 'Basalt Suite', description: "Two-bedroom sanctuary with a shared infinity pool and an open-plan lounge under thatch.", image: "https://images.pexels.com/photos/11255289/pexels-photo-11255289.jpeg?auto=compress&cs=tinysrgb&h=350" },
+    { name: 'Pumice Suite', description: "Minimalist design with natural textures, a secluded boma for stargazing, and a private butler.", image: "https://images.pexels.com/photos/18823961/pexels-photo-18823961.jpeg?auto=compress&cs=tinysrgb&h=350" },
+    { name: 'Tephra Suite', description: "Perched on a ridge with panoramic views, outdoor bath carved from a single rock.", image: "https://images.pexels.com/photos/16448674/pexels-photo-16448674.jpeg?auto=compress&cs=tinysrgb&h=350" },
+  ]
+
+  return (
+    <section data-vula-section="sixsanctuarysuites" id="luxury-suites" className="py-24 bg-[#0d0d08]">
+      <div className="max-w-7xl mx-auto px-6">
+        <div className="text-center mb-16">
+          <div className="inline-flex items-center gap-4 mb-6">
+            <span className="block w-14 h-px bg-[#6b8e23]" />
+            <p className="font-sans uppercase tracking-[0.2em] text-[#6b8e23] text-sm">Six Sanctuary Suites</p>
+            <span className="block w-14 h-px bg-[#6b8e23]" />
+          </div>
+          <h2 className="font-serif font-light text-4xl md:text-5xl text-[#f5f5dc] leading-tight">
+            Named after <span className="italic text-[#6b8e23]">volcanic</span> elements
+          </h2>
+          <p className="mt-4 max-w-2xl mx-auto text-[#eeeee7]/70">
+            Each suite is a private sanctuary with plunge pool, outdoor shower, and panoramic bush views — designed for intimacy and exclusivity.
+          </p>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {suites.map((suite) => (
+            <Card key={suite.name} className="bg-[#1a1a11] border-[#404030] hover:border-[#6b8e23]/50 transition-all duration-200">
+              <div className="relative h-56 overflow-hidden">
+                <Image
+                  src={suite.image}
+                  alt={suite.name}
+                  fill
+                  sizes="(max-width: 768px) 100vw, 33vw"
+                  className="object-cover"
+                />
+              </div>
+              <CardHeader>
+                <CardTitle className="text-[#f5f5dc] font-serif text-xl">{suite.name}</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-[#eeeee7]/70 text-sm leading-relaxed">{suite.description}</p>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+        <div className="text-center mt-12">
+          <p className="font-sans uppercase tracking-wider text-[#6b8e23] text-sm">Starting from R12 500 per night</p>
+        </div>
+      </div>
+    </section>
+  )
+}