Animated Coffee Subscription Pricing Table

<div class="sm:px-8 lg:px-10 lg:pt-20 lg:pb-20 max-w-7xl mr-auto mb-24 ml-auto pt-10 pr-6 pb-10 pl-6" data-element-locator="html &gt; body:nth-of-type(1) &gt; div:nth-of-type(3)">
      <div class="flex flex-col [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll text-center mb-16 items-center">
        <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-amber-500/10 ring-1 ring-amber-500/20 text-amber-300 text-sm font-medium mb-8 font-sans">
          <div class="h-2 w-2 rounded-full bg-amber-400 animate-pulse"></div>
          <span class="text-xs font-medium font-sans">Subscriptions</span>
        </div>
        <h2 class="text-4xl md:text-5xl text-white mb-6 font-sans font-medium tracking-tighter">
          Fresh Coffee
          <span class="bg-gradient-to-r from-amber-400 via-amber-500 to-orange-500 bg-clip-text text-transparent font-sans font-medium tracking-tighter">
            Delivered
          </span>
        </h2>
        <p class="leading-relaxed text-lg text-white/70 max-w-2xl mr-auto ml-auto">
          Choose a plan that fits your coffee ritual. Cancel or adjust anytime.
        </p>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 [animation:fadeSlideIn_0.8s_ease-out_0.3s_both] animate-on-scroll gap-x-8 gap-y-8">
        <!-- Starter -->
        <article class="relative overflow-hidden rounded-3xl bg-gradient-to-b from-[#2a1f1d]/90 via-[#2a1f1d]/95 to-[#1a1614]/90 border border-amber-900/30 shadow-lg backdrop-blur-xl transition-all duration-300 hover:shadow-2xl hover:shadow-amber-500/10 hover:border-amber-500/40">
          <div class="relative p-8">
            <div class="flex items-center justify-between mb-6">
              <div class="inline-flex items-center gap-2 text-white/60">
                <span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-white/[0.06] ring-1 ring-white/10 text-white/80 text-xs font-medium font-sans">
                  01
                </span>
                <div class="flex items-center gap-1">
                  <span class="h-1.5 w-1.5 rounded-full bg-amber-400/80"></span>
                  <span class="h-1.5 w-1.5 rounded-full bg-amber-400/40"></span>
                  <span class="h-1.5 w-1.5 rounded-full bg-amber-400/20"></span>
                </div>
              </div>
              <div class="inline-flex items-center gap-2 px-2 py-1 rounded-lg bg-white/[0.06] ring-1 ring-white/10 text-white/70 text-xs 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="">
                  <path d="M12 6v6l4 2" class=""></path>
                  <circle cx="12" cy="12" r="10" class=""></circle>
                </svg>
                Bi-weekly
              </div>
            </div>

            <div class="mb-8">
              <h3 class="text-2xl text-white mb-2 font-sans font-medium tracking-tight">
                Explorer
              </h3>
              <p class="text-white/60 text-sm mb-4 font-sans">
                Perfect for discovering new coffee origins and flavor profiles.
              </p>
              <div class="flex items-baseline gap-2">
                <span class="text-3xl text-white font-sans font-medium tracking-tight">
                  $24
                </span>
                <span class="text-white/50 text-sm font-sans">/shipment</span>
              </div>
            </div>

            <button class="w-full inline-flex items-center justify-center gap-2 h-12 px-6 rounded-2xl bg-white/[0.06] hover:bg-white/[0.12] text-white font-medium transition-all duration-200 ring-1 ring-white/10 hover:ring-white/20 mb-8 font-sans">
              Start Exploring
              <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="m9 18 6-6-6-6" class=""></path>
              </svg>
            </button>

            <div class="space-y-4">
              <p class="text-xs text-white/50 font-medium tracking-widest uppercase mb-4 font-sans">
                What's included
              </p>
              <ul class="space-y-3">
                <li class="flex items-start gap-3">
                  <div class="mt-0.5 h-5 w-5 rounded-full bg-amber-500/20 ring-1 ring-amber-500/30 flex items-center justify-center flex-shrink-0">
                    <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-amber-400">
                      <path d="M20 6 9 17l-5-5" class=""></path>
                    </svg>
                  </div>
                  <span class="text-sm text-white/80 font-sans">
                    12oz bag of single-origin coffee
                  </span>
                </li>
                <li class="flex items-start gap-3">
                  <div class="mt-0.5 h-5 w-5 rounded-full bg-amber-500/20 ring-1 ring-amber-500/30 flex items-center justify-center flex-shrink-0">
                    <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-amber-400">
                      <path d="M20 6 9 17l-5-5" class=""></path>
                    </svg>
                  </div>
                  <span class="text-sm text-white/80 font-sans">
                    Roasted within 48 hours of shipping
                  </span>
                </li>
                <li class="flex items-start gap-3">
                  <div class="mt-0.5 h-5 w-5 rounded-full bg-amber-500/20 ring-1 ring-amber-500/30 flex items-center justify-center flex-shrink-0">
                    <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-amber-400">
                      <path d="M20 6 9 17l-5-5" class=""></path>
                    </svg>
                  </div>
                  <span class="text-sm text-white/80 font-sans">
                    Tasting notes &amp; brewing guide
                  </span>
                </li>
                <li class="flex items-start gap-3">
                  <div class="mt-0.5 h-5 w-5 rounded-full bg-amber-500/20 ring-1 ring-amber-500/30 flex items-center justify-center flex-shrink-0">
                    <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-amber-400">
                      <path d="M20 6 9 17l-5-5" class=""></path>
                    </svg>
                  </div>
                  <span class="text-sm text-white/80 font-sans">
                    Free shipping
                  </span>
                </li>
              </ul>
            </div>
          </div>
        </article>

        <!-- Pro -->
        <article class="relative overflow-hidden rounded-3xl bg-gradient-to-b from-[#2a1f1d]/90 via-[#2a1f1d]/95 to-[#1a1614]/90 border border-amber-500/30 shadow-2xl shadow-amber-500/10 backdrop-blur-xl ring-1 ring-amber-500/20 transform scale-105">
          <div class="absolute -inset-2 bg-gradient-to-r from-amber-500/10 via-orange-500/10 to-amber-500/10 rounded-3xl blur-xl animate-pulse"></div>

          <div class="relative pt-8 pr-8 pb-8 pl-8">
            <div class="flex items-center justify-between mb-6">
              <div class="inline-flex items-center gap-2 text-white/60">
                <span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-amber-500/20 ring-1 ring-amber-500/30 text-amber-300 text-xs font-medium font-sans">
                  02
                </span>
                <div class="flex items-center gap-1">
                  <span class="h-1.5 w-1.5 rounded-full bg-amber-400"></span>
                  <span class="h-1.5 w-1.5 rounded-full bg-amber-400"></span>
                  <span class="h-1.5 w-1.5 rounded-full bg-amber-400/60"></span>
                </div>
              </div>
              <div class="inline-flex items-center gap-2 px-2 py-1 rounded-lg bg-amber-500/20 ring-1 ring-amber-500/30 text-amber-300 text-xs 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="">
                  <path d="M12 6v6l4 2" class=""></path>
                  <circle cx="12" cy="12" r="10" class=""></circle>
                </svg>
                Weekly
              </div>
            </div>

            <div class="mb-8">
              <h3 class="text-2xl text-white mb-2 font-sans font-medium tracking-tight">
                Enthusiast
              </h3>
              <p class="text-white/60 text-sm mb-4 font-sans">
                For serious coffee lovers who want variety and premium
                selections.
              </p>
              <div class="flex items-baseline gap-2">
                <span class="text-3xl text-white font-sans font-medium tracking-tight">
                  $38
                </span>
                <span class="text-white/50 text-sm font-sans">/shipment</span>
              </div>
            </div>

            <button class="w-full inline-flex items-center justify-center gap-2 h-12 px-6 rounded-2xl bg-gradient-to-r from-amber-500 to-amber-600 hover:from-amber-600 hover:to-amber-700 text-[#1a1614] font-semibold transition-all duration-200 shadow-lg shadow-amber-500/25 ring-1 ring-amber-500/30 mb-8 font-sans">
              Go Enthusiast
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
                <path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" class=""></path>
              </svg>
            </button>

            <div class="space-y-4">
              <p class="text-xs text-amber-300 font-medium tracking-widest uppercase mb-4 font-sans">
                Everything in Explorer, plus
              </p>
              <ul class="space-y-3">
                <li class="flex items-start gap-3">
                  <div class="mt-0.5 h-5 w-5 rounded-full bg-amber-500/20 ring-1 ring-amber-500/30 flex items-center justify-center flex-shrink-0">
                    <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-amber-400">
                      <path d="M20 6 9 17l-5-5" class=""></path>
                    </svg>
                  </div>
                  <span class="text-sm text-white/80 font-sans">
                    Two 12oz bags per shipment
                  </span>
                </li>
                <li class="flex items-start gap-3">
                  <div class="mt-0.5 h-5 w-5 rounded-full bg-amber-500/20 ring-1 ring-amber-500/30 flex items-center justify-center flex-shrink-0">
                    <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-amber-400">
                      <path d="M20 6 9 17l-5-5" class=""></path>
                    </svg>
                  </div>
                  <span class="text-sm text-white/80 font-sans">
                    Early access to limited releases
                  </span>
                </li>
                <li class="flex items-start gap-3">
                  <div class="mt-0.5 h-5 w-5 rounded-full bg-amber-500/20 ring-1 ring-amber-500/30 flex items-center justify-center flex-shrink-0">
                    <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-amber-400">
                      <path d="M20 6 9 17l-5-5" class=""></path>
                    </svg>
                  </div>
                  <span class="text-sm text-white/80 font-sans">
                    Priority customer support
                  </span>
                </li>
                <li class="flex items-start gap-3">
                  <div class="mt-0.5 h-5 w-5 rounded-full bg-amber-500/20 ring-1 ring-amber-500/30 flex items-center justify-center flex-shrink-0">
                    <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-amber-400">
                      <path d="M20 6 9 17l-5-5" class=""></path>
                    </svg>
                  </div>
                  <span class="text-sm text-white/80 font-sans">
                    15% discount on extras
                  </span>
                </li>
              </ul>
            </div>
          </div>
        </article>

        <!-- Connoisseur -->
        <article class="relative overflow-hidden rounded-3xl bg-gradient-to-b from-[#2a1f1d]/90 via-[#2a1f1d]/95 to-[#1a1614]/90 border border-amber-900/30 shadow-lg backdrop-blur-xl transition-all duration-300 hover:shadow-2xl hover:shadow-orange-500/10 hover:border-orange-500/40">
          <div class="relative p-8">
            <div class="flex items-center justify-between mb-6">
              <div class="inline-flex items-center gap-2 text-white/60">
                <span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-white/[0.06] ring-1 ring-white/10 text-white/80 text-xs font-medium font-sans">
                  03
                </span>
                <div class="flex items-center gap-1">
                  <span class="h-1.5 w-1.5 rounded-full bg-orange-400"></span>
                  <span class="h-1.5 w-1.5 rounded-full bg-orange-400"></span>
                  <span class="h-1.5 w-1.5 rounded-full bg-orange-400"></span>
                </div>
              </div>
              <div class="inline-flex items-center gap-2 px-2 py-1 rounded-lg bg-white/[0.06] ring-1 ring-white/10 text-white/70 text-xs 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="">
                  <path d="M12 6v6l4 2" class=""></path>
                  <circle cx="12" cy="12" r="10" class=""></circle>
                </svg>
                Custom
              </div>
            </div>

            <div class="mb-8">
              <h3 class="text-2xl text-white mb-2 font-sans font-medium tracking-tight">
                Connoisseur
              </h3>
              <p class="text-white/60 text-sm mb-4 font-sans">
                Curated selections and exclusive micro-lots for the discerning
                palate.
              </p>
              <div class="flex items-baseline gap-2">
                <span class="text-3xl text-white font-sans font-medium tracking-tight">
                  Custom
                </span>
                <span class="text-white/50 text-sm font-sans">pricing</span>
              </div>
            </div>

            <button class="w-full inline-flex items-center justify-center gap-2 h-12 px-6 rounded-2xl bg-white/[0.06] hover:bg-white/[0.12] text-white font-medium transition-all duration-200 ring-1 ring-white/10 hover:ring-white/20 mb-8 font-sans">
              Contact Us
              <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="M16 10a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 14.286V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" class=""></path>
                <path d="M20 9a2 2 0 0 1 2 2v10.286a.71.71 0 0 1-1.212.502l-2.202-2.202A2 2 0 0 0 17.172 19H10a2 2 0 0 1-2-2v-1" class=""></path>
              </svg>
            </button>

            <div class="space-y-4">
              <p class="text-xs text-white/50 font-medium tracking-widest uppercase mb-4 font-sans">
                Everything in Enthusiast, plus
              </p>
              <ul class="space-y-3">
                <li class="flex items-start gap-3">
                  <div class="mt-0.5 h-5 w-5 rounded-full bg-orange-500/20 ring-1 ring-orange-500/30 flex items-center justify-center flex-shrink-0">
                    <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-orange-400">
                      <path d="M20 6 9 17l-5-5" class=""></path>
                    </svg>
                  </div>
                  <span class="text-sm text-white/80 font-sans">
                    Exclusive micro-lot selections
                  </span>
                </li>
                <li class="flex items-start gap-3">
                  <div class="mt-0.5 h-5 w-5 rounded-full bg-orange-500/20 ring-1 ring-orange-500/30 flex items-center justify-center flex-shrink-0">
                    <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-orange-400">
                      <path d="M20 6 9 17l-5-5" class=""></path>
                    </svg>
                  </div>
                  <span class="text-sm text-white/80 font-sans">
                    Custom roast profiles available
                  </span>
                </li>
                <li class="flex items-start gap-3">
                  <div class="mt-0.5 h-5 w-5 rounded-full bg-orange-500/20 ring-1 ring-orange-500/30 flex items-center justify-center flex-shrink-0">
                    <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-orange-400">
                      <path d="M20 6 9 17l-5-5" class=""></path>
                    </svg>
                  </div>
                  <span class="text-sm text-white/80 font-sans">
                    Virtual cupping sessions
                  </span>
                </li>
                <li class="flex items-start gap-3">
                  <div class="mt-0.5 h-5 w-5 rounded-full bg-orange-500/20 ring-1 ring-orange-500/30 flex items-center justify-center flex-shrink-0">
                    <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-orange-400">
                      <path d="M20 6 9 17l-5-5" class=""></path>
                    </svg>
                  </div>
                  <span class="text-sm text-white/80 font-sans">
                    Dedicated coffee consultant
                  </span>
                </li>
              </ul>
            </div>
          </div>
        </article>
      </div>

      <div class="flex flex-col [animation:fadeSlideIn_0.8s_ease-out_0.4s_both] animate-on-scroll text-center mt-16 items-center">
        <p class="text-white/50 text-sm font-sans">
          Questions about subscriptions?
          <a href="#" class="text-amber-400 hover:text-amber-300 underline underline-offset-4 transition-colors font-sans">
            We're here to help
          </a>
        </p>
      </div>
    </div>