Deploy

2026-07-14 19:09:00 +00:00
parent 0b9695cb92
commit a50cda1f21
1 changed files with 51 additions and 0 deletions
@@ -0,0 +1,51 @@
 'use client'
 export default function DiscerningGuestVoicesSection() {
  const testimonials = [
    {
      initials: 'C.R.',
      city: 'Zürich',
      quote: 'The silence at dawn is something I have never experienced. Our guide tracked a pack of wild dogs across the riverbed — a private sighting that will stay with me forever.'
    },
    {
      initials: 'A.L.',
      city: 'New York',
      quote: 'Every meal felt like an event — the chef came to our table each evening to explain the ingredients sourced from the region. The wine cellar alone is worth the journey.'
    },
    {
      initials: 'E.H.',
      city: 'Tokyo',
      quote: 'The treatment room opens onto the bushveld. During my massage, a herd of elephants passed within fifty metres. I have never felt so connected to a place.'
    }
  ]
  return (
    <section id="guest-voices" data-vula-section="discerningguests" data-vula-cms="testimonials" className="py-20 bg-[#f2f4f5]">
      <div className="container mx-auto px-4 max-w-5xl">
        <h2 className="text-3xl md:text-4xl font-light text-[#36454F] mb-4 text-center">
          What our <span className="font-semibold text-[#d4af37]">guests</span> carry home
        </h2>
        <p className="text-[#1f2b33] text-center max-w-xl mx-auto mb-12 text-lg leading-relaxed">
          Intimate reflections — shared in confidence, offered here with permission.
        </p>
        <div className="space-y-12">
          {testimonials.map((t, i) => (
            <div key={i} className="relative pl-8 md:pl-16">
              <div className="absolute left-0 top-0 bottom-0 w-1 bg-[#16a34a] rounded-full" />
              <div className="space-y-3">
                <p className="text-[#1f2b33] text-lg leading-relaxed italic">
                  &ldquo;{t.quote}&rdquo;
                </p>
                <div className="flex items-center gap-2 text-sm text-[#1f2b33]/70">
                  <span className="font-medium">{t.initials}</span>
                  <span className="text-[#d4af37]">·</span>
                  <span>{t.city}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
 }