Animated Feature Grid Section with Central Showcase Card

<div class="lg:px-8 max-w-7xl mx-auto px-8">
  <!-- Header -->
  <section class="relative">
    <div class="md:mb-16 grid md:grid-cols-12 mb-16 gap-x-6 gap-y-6 items-end">
      <!-- Left: Meta + Title + Subtitle -->
      <div class="md:col-span-8 space-y-4">
        <!-- Eyebrow: Number + Label -->
        <div
          class="inline-flex text-[13px] [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll font-medium gap-x-2 gap-y-2 items-center">
          <span class="tabular-nums text-[20px] leading-none text-blue-300/80">02</span>
          <span class="text-blue-300/40">/</span>
          <span class="uppercase text-[11px] tracking-widest text-blue-200/90">WHY US</span>
        </div>

        <!-- Title -->
        <h2
          class="sm:text-5xl lg:text-6xl [animation:fadeSlideIn_0.8s_ease-out_0.2s_both] animate-on-scroll text-4xl font-light text-white tracking-tight">
          Everything you need to launch in days, not weeks</h2>

        <!-- Subtitle -->
        <p
          class="sm:text-base [animation:fadeSlideIn_0.8s_ease-out_0.3s_both] animate-on-scroll text-sm text-zinc-400 max-w-2xl">
          We release updates every week—from tiny polish to big features—so your experience keeps getting better without
          the wait.
        </p>

        <!-- CTA (shown on mobile too) -->
        <div class="sm:hidden pt-2">
          <a href="#"
            class="inline-flex h-11 items-center rounded-full bg-white text-neutral-900 px-5 text-[15px] font-medium shadow-sm ring-1 ring-white/10 hover:bg-white/90">
            View all changelogs
          </a>
        </div>
      </div>

      <!-- Right: Primary / Secondary CTAs -->
      <div class="md:col-span-4 flex md:justify-end [animation:fadeSlideIn_0.8s_ease-out_0.4s_both] animate-on-scroll">
        <div class="hidden sm:flex items-center gap-3">
          <a href="#"
            class="inline-flex items-center text-[15px] hover:bg-white/90 font-medium text-neutral-900 bg-white h-11 rounded-full ring-white/10 ring-1 pr-5 pl-5 shadow-sm">Start
            for free</a>
          <a href="#"
            class="inline-flex items-center text-[15px] hover:bg-white/5 font-medium text-white h-11 rounded-full ring-white/15 ring-1 pr-5 pl-5">Learn
            more</a>
        </div>
      </div>
    </div>
  </section>

  <!-- Feature Layout -->
  <div
    class="grid grid-cols-1 md:grid-cols-12 auto-rows-fr [animation:fadeSlideIn_0.8s_ease-out_0.2s_both] animate-on-scroll gap-x-6 gap-y-6 items-stretch">
    <!-- Left column features -->
    <div
      class="md:col-span-3 grid grid-rows-3 auto-rows-fr [animation:fadeSlideIn_0.8s_ease-out_0.5s_both] animate-on-scroll h-full gap-x-6 gap-y-6">
      <article
        class="rounded-2xl border border-white/10 bg-white/[0.04] hover:bg-white/[0.06] transition backdrop-blur p-5 h-full">
        <div class="flex gap-3 items-start h-full">
          <div class="flex-1">
            <h3 class="text-white text-lg font-medium tracking-tight">
              High Conversions
            </h3>
            <p class="mt-1 text-sm text-white/60 leading-relaxed">
              Get more sales with a page that builds trust fast.
            </p>
          </div>
        </div>
      </article>

      <article
        class="rounded-2xl border border-white/10 bg-white/[0.04] hover:bg-white/[0.06] transition backdrop-blur p-5 h-full">
        <div class="flex items-start gap-3 h-full">
          <div class="flex-1">
            <h3 class="text-white text-lg font-medium tracking-tight">
              Brand Consistency
            </h3>
            <p class="mt-1 text-sm text-white/60 leading-relaxed">
              Easily match your brand in minutes.
            </p>
          </div>
        </div>
      </article>

      <article
        class="rounded-2xl border border-white/10 bg-white/[0.04] hover:bg-white/[0.06] transition backdrop-blur p-5 h-full">
        <div class="flex items-start gap-3 h-full">
          <div class="flex-1">
            <h3 class="text-white text-lg font-medium tracking-tight">
              Flexible Content
            </h3>
            <p class="mt-1 text-sm text-white/60 leading-relaxed">
              Swap sections and layouts with drag-and-drop ease.
            </p>
          </div>
        </div>
      </article>
    </div>

    <!-- Center visual -->
    <section
      class="md:col-span-6 flex md:py-14 self-stretch [animation:fadeSlideIn_0.8s_ease-out_0.6s_both] animate-on-scroll pt-14 pb-14 items-stretch justify-center">
      <div class="relative w-full h-full">
        <!-- ✨ Clean Floating Badge (Top Right) -->
        <div
          class="absolute -top-14 -right-4 sm:w-[280px] bg-[#1C1C1E] border border-white/10 rounded-xl shadow-lg p-4 z-20">
          <div class="flex items-start justify-between gap-3">
            <div
              class="inline-flex items-center justify-center w-8 h-8 rounded-lg ring-1 shrink-0 bg-blue-500/10 ring-blue-500/20">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-400" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2">
                <polyline points="20 6 9 17 4 12" class=""></polyline>
              </svg>
            </div>
            <button aria-label="Dismiss" class="text-white/70 hover:text-white transition-colors p-1 -mr-1 rounded-md">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M18 6 6 18" class=""></path>
            <path d="m6 6 12 12" class=""></path>
          </svg>
        </button>
          </div>
          <div class="mt-3">
            <h4 class="text-white text-base font-semibold tracking-tight">
              Funo Design System
            </h4>
            <p class="text-slate-300 text-sm mt-1">
              Built with modern components and best practices for your brand.
            </p>
          </div>
          <div class="absolute right-6 -bottom-2 w-4 h-4 rotate-45 bg-[#1C1C1E] border-r border-b border-white/10">
          </div>
        </div>

        <!-- 🌟 Brand Showcase Card -->
        <div
          class="group overflow-hidden transition-all duration-500 bg-[#0F0F11] border-white/10 border ring-white/5 ring-1 rounded-2xl relative h-full flex hover:border-blue-500/40 hover:ring-blue-500/30">
          <div
            class="absolute -bottom-12 -right-12 h-48 w-48 rounded-full blur-3xl transition-all duration-700 group-hover:scale-110 bg-blue-500/10">
          </div>

          <div class="flex-1 flex flex-col pt-6 pr-6 pb-6 pl-6">
            <div class="flex mb-4 items-start justify-between">
              <span class="inline-flex items-center gap-1.5 text-xs font-medium text-white bg-white/5 ring-1 ring-white/10 rounded-lg px-2.5 py-1">
            <div class="h-1.5 w-1.5 rounded-full bg-blue-400"></div>
            Brand System
          </span>
              <div class="flex items-center gap-2">
                <div class="w-2 h-2 rounded-full bg-blue-400"></div>
                <span class="text-xs text-slate-400">Active</span>
              </div>
            </div>

            <h3 class="text-lg font-semibold tracking-tight text-white mb-3">
              Modern Design Components
            </h3>
            <p class="leading-relaxed text-sm text-slate-300 mb-4">
              Pre-built components ready to use. Consistent styling, responsive layouts, and seamless integration with
              your brand identity.
            </p>

            <!-- Component Preview -->
            <div class="bg-[#1C1C1E] rounded-xl p-4 mb-4 ring-1 ring-white/10 flex-1">
              <div class="space-y-3">
                <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
                  <div class="flex items-center gap-3">
                    <div
                      class="w-10 h-10 rounded-lg flex items-center justify-center ring-1 bg-blue-500/20 ring-blue-500/30">
                      <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-400" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2">
                        <path
                          d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
                          class=""></path>
                      </svg>
                    </div>
                    <div class="">
                      <div class="text-white text-sm font-medium">Component Library</div>
                      <div class="text-slate-400 text-xs">50+ ready-to-use blocks</div>
                    </div>
                  </div>
                  <div class="text-xs font-medium text-blue-400">Active</div>
                </div>

                <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
                  <div class="flex items-center gap-3">
                    <div
                      class="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center ring-1 ring-blue-500/30">
                      <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-400" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2">
                        <rect width="18" height="18" x="3" y="3" rx="2" class=""></rect>
                        <path d="M9 3v18" class=""></path>
                      </svg>
                    </div>
                    <div>
                      <div class="text-white text-sm font-medium">Responsive Grid</div>
                      <div class="text-slate-400 text-xs">Mobile-first approach</div>
                    </div>
                  </div>
                  <div class="text-blue-400 text-xs font-medium">Ready</div>
                </div>

                <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
                  <div class="flex items-center gap-3">
                    <div
                      class="w-10 h-10 rounded-lg bg-purple-500/20 flex items-center justify-center ring-1 ring-purple-500/30">
                      <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-purple-400" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M12 2v20M2 12h20" class=""></path>
                      </svg>
                    </div>
                    <div>
                      <div class="text-white text-sm font-medium">Design Tokens</div>
                      <div class="text-slate-400 text-xs">Consistent theming</div>
                    </div>
                  </div>
                  <div class="text-purple-400 text-xs font-medium">Setup</div>
                </div>
              </div>
            </div>

            <!-- CTA Button -->
            <div class="mt-auto flex items-center gap-2">
              <button class="flex-1 transition-colors flex text-sm font-medium text-white bg-blue-600 h-11 rounded-lg items-center justify-center hover:bg-blue-700">
            Explore Components
          </button>
              <button class="bg-white/5 hover:bg-white/10 transition-colors w-11 h-11 rounded-lg flex items-center justify-center ring-1 ring-white/10">
            <svg xmlns="http://www.w3.org/2000/svg" class="text-white" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" class=""></path>
              <circle cx="12" cy="12" r="3" class=""></circle>
            </svg>
          </button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Right column features -->
    <div
      class="md:col-span-3 grid grid-rows-3 auto-rows-fr [animation:fadeSlideIn_0.8s_ease-out_0.7s_both] animate-on-scroll h-full gap-x-6 gap-y-6">
      <article
        class="rounded-2xl border border-white/10 bg-white/[0.04] hover:bg-white/[0.06] transition backdrop-blur p-5 h-full">
        <div class="flex items-start gap-3 h-full">
          <div class="flex-1">
            <h3 class="text-white text-lg font-medium tracking-tight">
              Fast Launch
            </h3>
            <p class="mt-1 text-sm text-white/60 leading-relaxed">
              Go live in days, not weeks. No delays, no devs.
            </p>
          </div>
        </div>
      </article>

      <article
        class="rounded-2xl border border-white/10 bg-white/[0.04] hover:bg-white/[0.06] transition backdrop-blur p-5 h-full">
        <div class="flex items-start gap-3 h-full">
          <div class="flex-1">
            <h3 class="text-white text-lg font-medium tracking-tight">
              Perfect everywhere
            </h3>
            <p class="mt-1 text-sm text-white/60 leading-relaxed">
              Pixel-perfect across desktop, tablet, and mobile.
            </p>
          </div>
        </div>
      </article>

      <article
        class="rounded-2xl border border-white/10 bg-white/[0.04] hover:bg-white/[0.06] transition backdrop-blur p-5 h-full">
        <div class="flex items-start gap-3 h-full">
          <div class="flex-1">
            <h3 class="text-white text-lg font-medium tracking-tight">
              No Code Needed
            </h3>
            <p class="mt-1 text-sm text-white/60 leading-relaxed">
              Zero tech stress — just plug, tweak, and publish.
            </p>
          </div>
        </div>
      </article>
    </div>
  </div>

  <!-- Mobile CTA -->
  <div class="mt-8 sm:hidden">
    <a href="#"
      class="inline-flex h-11 items-center rounded-full bg-white text-neutral-900 px-5 text-[15px] font-medium shadow-sm ring-1 ring-white/10 hover:bg-white/90 w-full justify-center">
      Get started
    </a>
  </div>
</div>