Deploy

2026-07-14 18:35:20 +00:00
parent 44ebf67358
commit 4536e88317
1 changed files with 60 additions and 0 deletions
@@ -0,0 +1,60 @@
 'use client'
 export default function GuestReverieTestimonialsSection() {
  const testimonials = [
    {
      name: 'Eleanor Vance',
      role: 'Guest from London',
      quote: 'Waking to the roar of a lion across the river — I have never felt so alive.',
    },
    {
      name: 'Mateo Silva',
      role: 'Travel writer, São Paulo',
      quote: 'The ranger knew every bird by its call. That kind of intimacy with the bush is rare.',
    },
    {
      name: 'Yuki Tanaka',
      role: 'Bespoke travel curator, Tokyo',
      quote: 'Six suites, infinite privacy. Every detail whispers care.',
    },
  ]
  return (
    <section
      id="guest-testimonials"
      data-vula-section="guesttestimonials"
      className="py-20 bg-[#17170f] border-t border-white/10"
    >
      <div className="max-w-5xl mx-auto px-6 text-center">
        {/* Eyebrow */}
        <div className="flex items-center justify-center gap-4 mb-4">
          <div className="w-14 h-px bg-[#f5f5dc]" />
          <span className="text-[#6b8e23] font-sans uppercase tracking-[0.15em] text-sm">
            Guest Reverie
          </span>
          <div className="w-14 h-px bg-[#f5f5dc]" />
        </div>
        <h2 className="text-3xl md:text-4xl font-light text-[#eeeee7] font-serif mb-12">
          Whispers from the Wild
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {testimonials.map((t, i) => (
            <div
              key={i}
              className="border border-white/10 rounded-[8px] p-6 bg-[#17170f] text-left"
            >
              <p className="text-[#eeeee7]/85 font-sans text-sm leading-relaxed mb-4">
                &ldquo;{t.quote}&rdquo;
              </p>
              <p className="text-[#eeeee7] font-serif text-base">{t.name}</p>
              <p className="text-[#6b8e23] font-sans uppercase tracking-wider text-xs mt-1">
                {t.role}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
 }