Deploy

2026-07-14 19:12:54 +00:00
parent f852123cba
commit ccf097204e
1 changed files with 65 additions and 0 deletions
@@ -0,0 +1,65 @@
+import Image from "next/image"
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/Card"
+import Badge from "@/components/ui/Badge"
+
+const experiences = [
+  {
+    title: "Self-Catering Chalets",
+    description: "Fully equipped kitchens, private braai areas, and verandas shaded by ancient knobthorn trees – your home in the bush.",
+    image: "https://images.pexels.com/photos/30817410/pexels-photo-30817410.jpeg?auto=compress&cs=tinysrgb&h=350"
+  },
+  {
+    title: "Guided Walking Trails",
+    description: "Daily walks with our rangers – learn to identify tracks, calls, and the quiet rhythms of the thornveld.",
+    image: "https://images.pexels.com/photos/30817410/pexels-photo-30817410.jpeg?auto=compress&cs=tinysrgb&h=350"
+  },
+  {
+    title: "Dawn Birding",
+    description: "Early mornings alive with kingfishers, hornbills, and rollers. Our guides know every perch.",
+    image: "https://images.pexels.com/photos/30817410/pexels-photo-30817410.jpeg?auto=compress&cs=tinysrgb&h=350"
+  },
+  {
+    title: "Sundowner Drives",
+    description: "Evening game drives ending on a panoramic ridge with homemade rusks and the setting sun painting the Lowveld.",
+    image: "https://images.pexels.com/photos/30817410/pexels-photo-30817410.jpeg?auto=compress&cs=tinysrgb&h=350"
+  }
+]
+
+export default function ThornveldExperiencesSection() {
+  return (
+    <section data-vula-section="thornveldexperiences" id="thornveld-experiences" className="py-20 bg-[#f7f9f4]">
+      <div className="container mx-auto px-4">
+        <div className="relative mb-12">
+          <h2 className="font-heading text-3xl md:text-4xl text-[#1b210d] mb-4">Life in the Thornveld</h2>
+          <p className="font-body italic text-lg text-[#8b5a3c] max-w-2xl">
+            Four ways to slow down and sink into the bush.
+          </p>
+          <Badge className="absolute -top-2 right-4 rotate-6 bg-[#6b8e23] text-white px-3 py-1 text-sm rounded-full shadow-md">
+            Since 1998
+          </Badge>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+          {experiences.map((exp, idx) => (
+            <Card key={idx} className="rounded-xl shadow-md border border-[#dee2d4] overflow-hidden bg-white">
+              <div className="relative h-48 w-full overflow-hidden">
+                <Image
+                  src={exp.image}
+                  alt={exp.title}
+                  fill
+                  className="object-cover hover:scale-105 transition-transform duration-500 ease-out"
+                  sizes="(max-width: 768px) 100vw, 25vw"
+                />
+              </div>
+              <CardHeader>
+                <CardTitle className="font-heading text-xl text-[#1b210d]">{exp.title}</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="font-body italic text-[#8b5a3c]">{exp.description}</p>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}