Testimonial Section with CTA and Performance Metrics

<section class="sm:py-24 16 pb-16 max-w-4xl">
  <div class="mb-12">
    <div class="text-center mb-12 fade-in-up animate">
      <!-- Top meta row -->
      <div class="mb-6">
        <div
          class="flex items-center justify-between text-[13px] sm:text-sm font-medium uppercase tracking-tight text-black">
          <span class="">PROOF</span>
          <span class="">(04)</span>
        </div>
        <div class="mt-2 h-px w-full bg-black"></div>
      </div>

      <!-- Header layout -->
      <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 text-left items-center">
        <!-- Left: Giant word -->
        <div class="lg:col-span-7 fade-in-left animate">
          <h3
            class="text-[32px] sm:text-[48px] lg:text-[64px] xl:text-[80px] leading-[0.9] uppercase font-semibold tracking-tight">
            What Clients Says. </h3>
        </div>

        <!-- Right: Description + CTA -->
        <div class="lg:col-span-5 fade-in-right animate">
          <p class="sm:text-lg text-black/60 max-w-3xl mt-0 mr-auto mb-6 ml-0">What our clients say about working with
            us. Real feedback from real partnerships that drive exceptional results.</p>
          <div class="flex justify-start">
            <a href="#"
              class="inline-flex items-center gap-3 ring-1 ring-black/10 hover:shadow-2xl transition bg-black/5 rounded-full pt-2 pr-2 pb-2 pl-2 shadow">
              <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-black">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 <path d="m22 2-7 20-4-9-9-4Z" class=""></path>
              <path d="M22 2 11 13" class=""></path>
            </svg>
          </span>
              <span class="px-3 text-sm font-medium">Get Started</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div
    class="grid grid-cols-1 lg:grid-cols-3 gap-0 rounded-2xl overflow-hidden shadow-sm ring-1 ring-black/10 fade-in-up animate">
    <!-- Left Testimonial -->
    <div class="relative overflow-hidden text-white bg-black pt-6 pr-6 pb-6 pl-6">
      <div class="flex gap-2 mb-4 items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1.5">
          <path d="M7 7h3v10H5V9a2 2 0 0 1 2-2Zm9 0h3v10h-5V9a2 2 0 0 1 2-2Z" class=""></path>
        </svg>
      </div>
      <div class="flex items-center gap-1 mb-4 text-white">
        <svg class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor">
          <path
            d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"
            class=""></path>
        </svg>
        <svg class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor">
          <path
            d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"
            class=""></path>
        </svg>
        <svg class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor">
          <path
            d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"
            class=""></path>
        </svg>
        <svg class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor">
          <path
            d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"
            class=""></path>
        </svg>
        <svg class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor">
          <path
            d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"
            class=""></path>
        </svg>
      </div>
      <p class="text-base leading-relaxed mb-6">Sakura transformed our brand identity beyond what we imagined.
        Professional, creative, and delivered on time. Our online presence has never looked better.</p>
      <div class="flex items-center justify-between">
        <div class="">
          <div class="text-sm font-medium">Emma Collins</div>
          <div class="text-xs mt-1 text-white/70">CEO, Powersurge</div>
        </div>
        <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=64&amp;h=64&amp;fit=crop&amp;crop=faces" alt="Emma Collins" class="w-8 h-8 object-cover rounded-full" style="">
      </div>
    </div>

    <!-- Center Highlight Testimonial -->
    <div class="relative overflow-hidden text-black bg-white pt-6 pr-6 pb-6 pl-6">
      <div class="flex items-center gap-3 mb-4">
        <img src="https://images.unsplash.com/photo-1607746882042-944635dfe10e?w=64&amp;h=64&amp;fit=crop&amp;crop=faces" alt="Michael Brooks" class="w-6 h-6 object-cover rounded-full">
        <div class="">
          <div class="text-sm font-medium">Michael Brooks</div>
          <div class="text-xs text-black/70">CTO, Warpspeed</div>
        </div>
      </div>
      <div class="flex gap-1 text-black mb-4 items-center">
        <svg class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor">
          <path
            d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"
            class=""></path>
        </svg>
        <svg class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor">
          <path
            d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"
            class=""></path>
        </svg>
        <svg class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor">
          <path
            d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"
            class=""></path>
        </svg>
        <svg class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor">
          <path
            d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"
            class=""></path>
        </svg>
        <svg class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor">
          <path
            d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"
            class=""></path>
        </svg>
      </div>
      <p class="leading-relaxed relative z-10 text-base">Working with Sakura was incredible. The sleek design resonates
        with customers and has greatly improved our user experience since launch.</p>
    </div>

    <!-- Right Testimonial -->
    <div class="relative overflow-hidden text-white bg-black pt-6 pr-6 pb-6 pl-6">
      <div class="flex items-center gap-2 mb-4">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1.5">
          <path d="M7 7h3v10H5V9a2 2 0 0 1 2-2Zm9 0h3v10h-5V9a2 2 0 0 1 2-2Z" class=""></path>
        </svg>
      </div>
      <div class="flex items-center gap-1 mb-4 text-white">
        <svg class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor">
          <path
            d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"
            class=""></path>
        </svg>
        <svg class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor">
          <path
            d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"
            class=""></path>
        </svg>
        <svg class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor">
          <path
            d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"
            class=""></path>
        </svg>
        <svg class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor">
          <path
            d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"
            class=""></path>
        </svg>
        <svg class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor">
          <path
            d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"
            class=""></path>
        </svg>
      </div>
      <p class="text-base leading-relaxed mb-6">From strategy to launch, Sakura was with us every step. Their creativity
        and expertise helped us stand out in a crowded market.</p>
      <div class="flex items-center justify-between">
        <div>
          <div class="text-sm font-medium">Emily Harris</div>
          <div class="text-xs mt-1 text-white/70">CEO, Boltshift</div>
        </div>
        <img src="https://images.unsplash.com/photo-1544723795-3fb6469f5b39?w=64&amp;h=64&amp;fit=crop&amp;crop=faces" alt="Emily Harris" class="w-8 h-8 object-cover rounded-full">
      </div>
    </div>

    <!-- Metrics Row with Line Separator -->
    <div class="lg:col-span-3 border-t border-black/10">
      <div class="grid grid-cols-1 sm:grid-cols-3 gap-0">
        <div class="text-white bg-black border-black/10 border-r pt-6 pr-6 pb-6 pl-6 scale-in stagger-delay-1 animate">
          <div class="text-3xl sm:text-4xl font-semibold tracking-tight mb-2">4.6s</div>
          <div class="text-xs text-white/70">Average page load time across projects</div>
        </div>
        <div class="p-6 border-r bg-black text-white border-black/10 scale-in stagger-delay-2 animate">
          <div class="text-3xl sm:text-4xl font-semibold tracking-tight mb-2">18+</div>
          <div class="text-xs text-white/70">Countries where our designs are used</div>
        </div>
        <div class="p-6 bg-black text-white scale-in stagger-delay-3 animate">
          <div class="text-3xl sm:text-4xl font-semibold tracking-tight mb-2">72%</div>
          <div class="text-xs text-white/70">Average conversion rate improvement</div>
        </div>
      </div>
    </div>
  </div>
</section>