Coffee Roastery Hero Section with CTA & Testimonial

<section class="overflow-hidden relative"
  data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(1)">
  <div class="pointer-events-none absolute inset-0">
    <div class="absolute -left-32 top-32 h-96 w-96 rounded-full bg-amber-800/10 blur-3xl"></div>
    <div class="absolute -right-32 top-48 h-80 w-80 rounded-full bg-orange-700/10 blur-3xl"></div>
  </div>

  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-12 pb-20 md:pb-28">
    <div
      class="relative grid grid-cols-1 lg:grid-cols-12 gap-y-10 lg:gap-12 items-center [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll">
      <!-- Copy -->
      <div class="lg:col-span-7 lg:my-20 my-16">
        <div
          class="mb-6 inline-flex items-center gap-2 rounded-full border border-amber-700/30 bg-amber-900/20 px-3 py-1.5 text-xs text-amber-200/90 font-sans">
          <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="h-3.5 w-3.5">
            <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" class=""></path>
          </svg>
          Single-origin beans sourced directly from farms
        </div>

        <h1 class="sm:text-6xl lg:text-7xl leading-[1.05] text-5xl font-medium tracking-tight">
          Craft Coffee
          <span class="block font-medium italic text-amber-400 font-script mt-2">
                Roasted with Purpose
              </span>
        </h1>

        <p class="mt-6 max-w-xl text-base sm:text-lg text-neutral-300/90 font-sans">
          From bean to cup, we honor the journey. Each batch is small,
          thoughtful, and roasted to unlock the unique character of every
          origin.
        </p>

        <div class="mt-8 flex items-center gap-4">
          <a href="#"
            class="group relative w-auto cursor-pointer select-none text-base leading-7 flex transition-all duration-200 ease-out focus:outline-none hover:brightness-95 active:brightness-90 font-semibold text-[#1a1614] bg-amber-400 border-0 pt-3 pr-8 pb-3 pl-8 rotate-[-1.5deg] items-center justify-center rounded font-sans">
            <span class="relative z-10 flex items-center gap-2">
                  Explore Our Beans
                  <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="h-4 w-4 transition-transform group-hover:translate-x-0.5">
                    <path d="M5 12h14" class=""></path>
                    <path d="m12 5 7 7-7 7" class=""></path>
                  </svg>
                </span>
            <span aria-hidden="true" class="pointer-events-none absolute border border-[#1a1614] bottom-1 left-1 w-[calc(100%-1px)] h-[calc(100%-1px)] transition-all duration-200 ease-out group-hover:bottom-0.5 group-hover:left-0.5 rounded"></span>
          </a>
          <button class="inline-flex items-center gap-2 text-sm text-neutral-300 hover:text-amber-400 transition font-sans">
                <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="h-5 w-5">
                  <circle cx="12" cy="12" r="10" class=""></circle>
                  <polygon points="10 8 16 12 10 16 10 8" class=""></polygon>
                </svg>
                Watch Our Process
              </button>
        </div>

        <!-- Metrics -->
        <div class="mt-10 flex flex-wrap items-center gap-x-10 gap-y-6">
          <div class="flex items-center gap-3">
            <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="h-5 w-5 text-amber-400">
              <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 class="">
              <p class="text-3xl tracking-tight font-medium font-sans">
                4.9
              </p>
              <span class="text-xs text-neutral-400 font-sans">
                    from 2,400+ reviews
                  </span>
            </div>
          </div>
          <div class="hidden sm:block h-8 w-px bg-amber-900/30"></div>
          <div class="flex items-center gap-2">
            <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="h-5 w-5 text-amber-400">
              <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6" class=""></path>
              <path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18" class=""></path>
              <path d="M4 22h16" class=""></path>
              <path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22" class=""></path>
              <path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22" class=""></path>
              <path d="M18 2H6v7a6 6 0 0 0 12 0V2Z" class=""></path>
            </svg>
            <p class="text-sm text-neutral-300 font-sans">
              2024 Best Craft Roastery
            </p>
          </div>
        </div>
      </div>

      <!-- Visual -->
      <div class="lg:col-span-5 relative">
        <div class="relative ml-8">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/b4de7807-d550-431a-b3c2-07885c82aef4_1600w.jpg" alt="Forest-inspired coffee bag under studio spotlight" class="z-10 w-full max-w-md object-cover rounded-xl relative shadow-2xl">
        </div>
        <p
          class="absolute right-0 top-12 hidden lg:block max-w-[11rem] text-right text-sm text-neutral-300/90 font-sans">
          Every bean tells a story. Let us share ours with you.
        </p>
      </div>
    </div>

    <!-- Testimonial Strip -->
    <div
      class="mt-16 rounded-2xl border border-amber-900/30 bg-amber-950/20 backdrop-blur-sm [animation:fadeSlideIn_0.8s_ease-out_0.3s_both] animate-on-scroll">
      <div class="flex flex-col md:flex-row gap-6 px-6 py-5 items-center justify-between">
        <div class="flex items-center gap-4">
          <img src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?q=80&amp;w=200&amp;h=200&amp;fit=crop&amp;crop=faces" alt="Customer" class="w-11 h-11 object-cover ring-amber-700/30 ring-2 rounded-full">
          <p class="text-sm text-neutral-300 font-sans">
            "The depth of flavor is incredible. You can taste the care in
            every cup." —
            <span class="font-medium text-white">Elena Martinez</span>
          </p>
        </div>
        <div class="hidden md:block h-px w-full bg-amber-900/30 md:h-8 md:w-px"></div>
        <div class="flex items-center gap-6 text-sm text-neutral-300 font-sans">
          <div class="flex items-center gap-2">
            <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="h-4 w-4 text-amber-400">
              <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path>
              <circle cx="9" cy="7" r="4" class=""></circle>
              <path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path>
              <path d="M16 3.13a4 4 0 0 1 0 7.75" class=""></path>
            </svg>
            <span>Trusted by 12,000+ coffee lovers</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>