Deploy

2026-07-15 09:25:29 +00:00
parent 8d7ab776bf
commit 69d57838a8
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>
  )
 }