Featured Articles Section with Topic Sidebar

<section class="relative z-10 animate-on-scroll is-visible">
      <div class="mx-auto max-w-7xl px-6 py-12 md:py-16">
        <div class="text-center">
          <h3 class="text-3xl md:text-4xl tracking-tight font-jakarta font-medium">Featured Reads in Emerging Tech</h3>
          <p class="mt-3 text-white/70 font-geist">Perspectives from our research desk and partner network.</p>
        </div>

        <div class="mt-10 grid grid-cols-1 lg:grid-cols-3 gap-6">
          <!-- Sidebar -->
          <aside class="bg-slate-50/5 border-white/10 border rounded-2xl pt-4 pr-4 pb-4 pl-4 hover-lift transition-all duration-300">
            <div class="flex items-center gap-2 text-sm text-white/70">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="library" class="lucide lucide-library size-4 text-indigo-300"><path d="m16 6 4 14" class=""></path><path d="M12 6v14" class=""></path><path d="M8 8v12" class=""></path><path d="M4 4v16" class=""></path></svg>
              <span class="font-geist">Topics</span>
            </div>
            <div class="mt-4 space-y-2">
              <button class="w-full text-left rounded-xl px-3 py-2 bg-white/10 border border-white/10 text-sm text-white/80 hover:bg-white/[0.14] transition-all duration-300 font-geist hover-scale">Decentralized Infra</button>
              <button class="w-full text-left rounded-xl px-3 py-2 bg-transparent border border-white/10 text-sm text-white/60 hover:text-white hover:bg-white/[0.06] transition-all duration-300 font-geist hover-scale">AI Tooling</button>
              <button class="w-full text-left rounded-xl px-3 py-2 bg-transparent border border-white/10 text-sm text-white/60 hover:text-white hover:bg-white/[0.06] transition-all duration-300 font-geist hover-scale">Fintech Rails</button>
              <button class="w-full text-left rounded-xl px-3 py-2 bg-transparent border border-white/10 text-sm text-white/60 hover:text-white hover:bg-white/[0.06] transition-all duration-300 font-geist hover-scale">Design Systems</button>
            </div>
            <button class="mt-4 inline-flex items-center gap-2 rounded-full border border-white/10 px-3 py-2 text-xs text-white/70 hover:text-white hover:border-white/20 transition-all duration-300 hover-scale">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="list" class="lucide lucide-list size-3.5"><path d="M3 5h.01" class=""></path><path d="M3 12h.01" class=""></path><path d="M3 19h.01" class=""></path><path d="M8 5h13" class=""></path><path d="M8 12h13" class=""></path><path d="M8 19h13" class=""></path></svg>
              <span class="font-geist">View all</span>
            </button>
          </aside>

          <!-- Primary Article -->
          <article class="lg:col-span-2 overflow-hidden border-white/10 border rounded-2xl hover-lift transition-all duration-500">
            <div class="grid grid-cols-1 md:grid-cols-2">
              <div class="relative overflow-hidden">
                <img class="md:h-full w-full h-60 object-cover transition-transform duration-700 hover:scale-110" alt="Abstract render" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/d4f956e9-293c-4b43-92be-b44d11094308_1600w.jpg">
                <div class="pointer-events-none absolute inset-0 ring-1 ring-white/10"></div>
              </div>
              <div class="md:p-8 bg-slate-50/5 pt-6 pr-6 pb-6 pl-6">
                <div class="flex items-center gap-2 text-xs text-indigo-300">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="line-chart" class="lucide lucide-line-chart size-4"><path d="M3 3v16a2 2 0 0 0 2 2h16" class=""></path><path d="m19 9-5 5-4-4-3 3" class=""></path></svg>
                  <span class="font-geist">Fintech Analysis</span>
                </div>
                <h4 class="mt-3 text-2xl tracking-tight font-jakarta font-medium transition-colors duration-300 hover:text-indigo-300">
                  Modeling Tokenized Cap Tables for Venture Deals
                </h4>
                <p class="mt-3 text-sm text-white/70 font-geist">
                  A practical approach to blending equity and on‑chain incentives, with risk scenarios and governance guardrails for scaled operations.
                </p>
                <div class="mt-5 flex flex-wrap gap-2">
                  <span class="rounded-full bg-white/10 px-3 py-1 text-xs text-white/70 font-geist transition-all duration-300 hover:bg-white/20 hover:text-white">Blockchain</span>
                  <span class="rounded-full bg-white/10 px-3 py-1 text-xs text-white/70 font-geist transition-all duration-300 hover:bg-white/20 hover:text-white">VC</span>
                  <span class="rounded-full bg-white/10 px-3 py-1 text-xs text-white/70 font-geist transition-all duration-300 hover:bg-white/20 hover:text-white">Modeling</span>
                </div>
              </div>
            </div>
          </article>
        </div>
      </div>
    </section>