Responsive 3-Column Coffee Brand Feature Section

<div class="xl:mt-20 xl:mb-20 [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll bg-[#2a1f1d] max-w-7xl border-amber-900/30 border rounded-3xl mt-20 mr-auto mb-20 ml-auto pt-8 pr-8 pb-8 pl-8" data-element-locator="html &gt; body:nth-of-type(1) &gt; div:nth-of-type(2)">
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 gap-x-6 gap-y-6">
        <!-- Left -->
        <div class="overflow-hidden bg-center bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/70fcd867-fd43-4c84-9ad4-393392e5c36e_800w.jpg)] bg-cover rounded-2xl ring-amber-900/30 ring-1 relative">
          <div class="sm:h-[520px] sm:p-8 flex flex-col pt-6 pr-6 pb-6 pl-6 relative">
            <div class="flex items-center gap-3">
              <div>
                <p class="text-sm text-amber-300 font-sans">Our Promise</p>
                <p class="text-xs sm:text-sm mt-1 text-neutral-400 font-sans">
                  Ethical &amp; Sustainable
                </p>
              </div>
            </div>
            <div class="mt-auto">
              <div class="sm:text-4xl text-2xl text-white tracking-tight mb-4 font-sans font-medium">
                Coffee with
                <span class="inline text-amber-400 ml-2 font-sans font-medium">
                  Conscience
                </span>
              </div>
              <div class="flex items-center gap-2 text-neutral-200 mb-6">
                <div class="flex items-center gap-1">
                  <div class="h-2 w-2 rounded-full bg-amber-500"></div>
                  <div class="h-2 w-2 rounded-full bg-amber-600"></div>
                  <div class="h-2 w-2 rounded-full bg-amber-700"></div>
                </div>
                <p class="text-sm font-sans">Direct trade partnerships</p>
              </div>
              <div class="flex items-center gap-2 text-xs text-neutral-300 font-sans">
                Learn our story
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
                  <path d="M7 7h10v10" class=""></path>
                  <path d="M7 17 17 7" class=""></path>
                </svg>
              </div>
            </div>
          </div>
        </div>

        <!-- Middle -->
        <div class="sm:p-8 overflow-hidden border-amber-900/40 border bg-amber-950/20 rounded-2xl pt-6 pr-6 pb-6 pl-6 relative">
          <div class="relative">
            <p class="text-sm text-amber-400/80 font-sans">Proven Quality:</p>
            <h3 class="mt-2 text-2xl sm:text-3xl tracking-tight text-neutral-100 font-sans font-medium">
              <span class="text-amber-400 font-sans font-medium">98%</span>
              customer retention,
              <span class="text-amber-500 font-sans font-medium">5-star</span>
              average rating
            </h3>

            <p class="mt-8 text-sm text-amber-400/80 font-sans">
              Our Philosophy:
            </p>
            <div class="mt-4 space-y-3">
              <div class="flex items-center gap-3 text-sm text-neutral-200 font-sans">
                <span class="h-1.5 w-1.5 rounded-full bg-amber-500"></span>
                Small Batch Roasting
              </div>
              <div class="flex items-center gap-3 text-sm text-neutral-200 font-sans">
                <span class="h-1.5 w-1.5 rounded-full bg-amber-600"></span>
                Single-Origin Focus
              </div>
              <div class="flex items-center gap-3 text-sm text-neutral-200 font-sans">
                <span class="h-1.5 w-1.5 rounded-full bg-amber-700"></span>
                Farm-Direct Sourcing
              </div>
            </div>

            <div class="mt-8 rounded-xl border p-5 border-amber-900/40 bg-[#1a1614]/60">
              <div class="flex items-center gap-1 text-amber-400 mb-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
                  <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
                  <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
                  <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
                  <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
                  <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path>
                </svg>
              </div>
              <p class="text-sm text-neutral-300 mt-3 font-sans">
                "Roasted Roots elevated our coffee program. The quality and
                consistency are unmatched in the industry."
              </p>
              <div class="mt-4 flex items-center gap-3">
                <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&amp;w=200&amp;h=200&amp;fit=crop&amp;crop=faces" alt="" class="h-8 w-8 rounded-full object-cover">
                <div class="text-sm">
                  <p class="text-neutral-200 font-sans">James Wilson</p>
                  <p class="text-xs text-neutral-500 font-sans">
                    Head Barista, Brew Collective
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Right -->
        <div class="grid grid-rows-2 gap-6">
          <div class="sm:p-8 border-amber-900/40 border bg-amber-950/20 rounded-2xl pt-6 pr-6 pb-6 pl-6">
            <div class="flex items-center sm:block">
              <div class="relative h-28 w-28 sm:mx-auto">
                <div class="absolute inset-0 rounded-full bg-amber-500"></div>
                <div class="absolute inset-[10px] rounded-full bg-[#1a1614]/80 flex items-center justify-center">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-amber-400">
                    <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" class=""></path>
                    <path d="m9 12 2 2 4-4" class=""></path>
                  </svg>
                </div>
              </div>
              <div class="ml-5 sm:ml-0 sm:mt-6 text-center">
                <h4 class="text-lg font-medium tracking-tight text-white font-sans">
                  Quality Promise
                </h4>
                <p class="mt-2 text-sm text-neutral-400 font-sans">
                  Fresh roasted to order. If you're not satisfied, we'll make it
                  right.
                </p>
              </div>
            </div>
          </div>

          <div class="sm:p-8 border-amber-900/40 border bg-amber-950/20 rounded-2xl pt-6 pr-6 pb-6 pl-6">
            <div class="grid grid-cols-2 gap-4 mb-6">
              <div class="">
                <div class="text-2xl tracking-tight text-white font-sans font-medium">
                  8+
                </div>
                <p class="text-xs mt-1 text-neutral-400 font-sans">
                  Years roasting
                </p>
              </div>
              <div class="">
                <div class="text-2xl tracking-tight text-white font-sans font-medium">
                  48h
                </div>
                <p class="text-xs mt-1 text-neutral-400 font-sans">
                  Roast to ship
                </p>
              </div>
            </div>

            <div class="space-y-3">
              <div class="flex items-center justify-between text-sm font-sans">
                <span class="text-neutral-300 font-sans">Bean Quality</span>
                <span class="text-amber-500 font-sans">Premium</span>
              </div>
              <div class="flex items-center justify-between text-sm font-sans">
                <span class="text-neutral-300 font-sans">Roast Profile</span>
                <span class="text-amber-500 font-sans">Custom</span>
              </div>
              <div class="flex items-center justify-between text-sm font-sans">
                <span class="text-neutral-300 font-sans">Sustainability</span>
                <span class="text-amber-500 font-sans">Certified</span>
              </div>
            </div>

            <div class="mt-6 pt-4 border-t border-amber-900/30">
              <div class="flex items-center gap-2 text-xs text-neutral-300 font-sans">
                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-green-400">
                  <path d="M20 6 9 17l-5-5" class=""></path>
                </svg>
                Fair Trade Certified
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>