Deploy

2026-07-15 09:25:29 +00:00
parent c5d04f0191
commit 106f472f2e
1 changed files with 37 additions and 0 deletions
@@ -0,0 +1,37 @@
 import Image from 'next/image'
 import Link from 'next/link'
 import Button from '@/components/ui/Button'
 export default function UmkhontoSafariSection() {
  return (
    <section data-vula-section="umkhontosafari" id="umkhonto-safari" className="py-24 bg-[#f9f7f4]">
      <div className="max-w-7xl mx-auto px-4 grid md:grid-cols-2 gap-12 items-center">
        <div className="order-2 md:order-1 space-y-6">
          <h2 className="text-3xl md:text-4xl font-bold text-[#211c0d]">
            Umkhonto Safari — Venture with Purpose
          </h2>
          <p className="text-lg text-[#211c0d]/70 leading-relaxed">
            Named after the Zulu spear, our Umkhonto Safari cuts through the bush with reverence. Led by rangers from the local community, you&apos;ll track lion on foot, learn to read the stars, and taste veld herbs as your guide shares the hidden stories of these lands.
          </p>
          <p className="text-lg text-[#211c0d]/70 leading-relaxed">
            Choose from a dawn game drive — when the first light catches a leopard&apos;s spots — or a twilight walk to the pangolin burrows. For the culturally curious, we offer beadwork workshops with Zulu women and visits to the local sangoma (traditional healer). Every outing honours the land and its first people.
          </p>
          <Link href="/booking">
            <Button variant="default" size="lg" className="bg-[#d4af37] hover:bg-[#c49f2e] text-[#211c0d] font-semibold mt-4">
              Book a Safari
            </Button>
          </Link>
        </div>
        <div className="order-1 md:order-2 relative h-[400px] md:h-[500px] rounded-2xl overflow-hidden shadow-xl">
          <Image
            src="https://images.pexels.com/photos/15186497/pexels-photo-15186497.jpeg?auto=compress&cs=tinysrgb&h=350"
            alt="Guests on a game drive at sunset"
            fill
            sizes="(max-width: 768px) 100vw, 50vw"
            className="object-cover"
          />
        </div>
      </div>
    </section>
  )
 }