Blog Sidebar

<section class="ws-blog bg-[var(--ws-blog-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="grid gap-12 lg:grid-cols-3">
      <!-- Articles -->
      <div class="lg:col-span-2">
        <h2 class="text-2xl font-bold text-[var(--ws-blog-text)]">Latest articles</h2>
        <div class="mt-8 space-y-10">
          <article class="flex flex-col gap-4 sm:flex-row sm:gap-6">
            <div class="aspect-[3/2] w-full rounded-xl bg-gradient-to-br from-slate-200 to-slate-300 sm:w-48 sm:flex-shrink-0" aria-hidden="true"></div>
            <div>
              <span class="text-xs font-semibold text-[var(--ws-blog-accent)]">Engineering</span>
              <h3 class="mt-1 text-lg font-semibold text-[var(--ws-blog-text)]"><a href="#" class="hover:text-[var(--ws-blog-accent)]">Building scalable design systems with Tailwind</a></h3>
              <p class="mt-2 text-sm text-[var(--ws-blog-text-soft)]">Learn how to structure your Tailwind CSS for large-scale applications with consistent patterns and tokens.</p>
              <time class="mt-3 block text-xs text-[var(--ws-blog-text-muted)]">Mar 8, 2026</time>
            </div>
          </article>

          <article class="flex flex-col gap-4 sm:flex-row sm:gap-6">
            <div class="aspect-[3/2] w-full rounded-xl bg-gradient-to-br from-slate-200 to-slate-300 sm:w-48 sm:flex-shrink-0" aria-hidden="true"></div>
            <div>
              <span class="text-xs font-semibold text-[var(--ws-blog-accent)]">Product</span>
              <h3 class="mt-1 text-lg font-semibold text-[var(--ws-blog-text)]"><a href="#" class="hover:text-[var(--ws-blog-accent)]">Introducing Webspire CLI v2</a></h3>
              <p class="mt-2 text-sm text-[var(--ws-blog-text-soft)]">Add production-ready UI patterns to any project with a single command. Here's what's new.</p>
              <time class="mt-3 block text-xs text-[var(--ws-blog-text-muted)]">Mar 5, 2026</time>
            </div>
          </article>

          <article class="flex flex-col gap-4 sm:flex-row sm:gap-6">
            <div class="aspect-[3/2] w-full rounded-xl bg-gradient-to-br from-slate-200 to-slate-300 sm:w-48 sm:flex-shrink-0" aria-hidden="true"></div>
            <div>
              <span class="text-xs font-semibold text-[var(--ws-blog-accent)]">Tutorial</span>
              <h3 class="mt-1 text-lg font-semibold text-[var(--ws-blog-text)]"><a href="#" class="hover:text-[var(--ws-blog-accent)]">From zero to landing page in 10 minutes</a></h3>
              <p class="mt-2 text-sm text-[var(--ws-blog-text-soft)]">A step-by-step guide to composing a complete landing page using Webspire patterns.</p>
              <time class="mt-3 block text-xs text-[var(--ws-blog-text-muted)]">Mar 1, 2026</time>
            </div>
          </article>
        </div>
      </div>

      <!-- Sidebar -->
      <aside class="lg:sticky lg:top-8 lg:self-start">
        <div class="rounded-xl border border-[var(--ws-blog-border)] p-6">
          <h3 class="text-sm font-semibold uppercase tracking-wider text-[var(--ws-blog-text)]">Categories</h3>
          <ul class="mt-4 space-y-2">
            <li><a href="#" class="flex justify-between text-sm text-[var(--ws-blog-text-soft)] hover:text-[var(--ws-blog-accent)]"><span>Engineering</span><span class="text-[var(--ws-blog-text-muted)]">12</span></a></li>
            <li><a href="#" class="flex justify-between text-sm text-[var(--ws-blog-text-soft)] hover:text-[var(--ws-blog-accent)]"><span>Product</span><span class="text-[var(--ws-blog-text-muted)]">8</span></a></li>
            <li><a href="#" class="flex justify-between text-sm text-[var(--ws-blog-text-soft)] hover:text-[var(--ws-blog-accent)]"><span>Tutorial</span><span class="text-[var(--ws-blog-text-muted)]">15</span></a></li>
            <li><a href="#" class="flex justify-between text-sm text-[var(--ws-blog-text-soft)] hover:text-[var(--ws-blog-accent)]"><span>Design</span><span class="text-[var(--ws-blog-text-muted)]">6</span></a></li>
            <li><a href="#" class="flex justify-between text-sm text-[var(--ws-blog-text-soft)] hover:text-[var(--ws-blog-accent)]"><span>Company</span><span class="text-[var(--ws-blog-text-muted)]">4</span></a></li>
          </ul>
        </div>

        <div class="mt-6 rounded-xl border border-[var(--ws-blog-border)] p-6">
          <h3 class="text-sm font-semibold uppercase tracking-wider text-[var(--ws-blog-text)]">Recent posts</h3>
          <ul class="mt-4 space-y-4">
            <li><a href="#" class="block text-sm font-medium text-[var(--ws-blog-text)] hover:text-[var(--ws-blog-accent)]">Building scalable design systems</a><time class="text-xs text-[var(--ws-blog-text-muted)]">Mar 8, 2026</time></li>
            <li><a href="#" class="block text-sm font-medium text-[var(--ws-blog-text)] hover:text-[var(--ws-blog-accent)]">Introducing Webspire CLI v2</a><time class="text-xs text-[var(--ws-blog-text-muted)]">Mar 5, 2026</time></li>
            <li><a href="#" class="block text-sm font-medium text-[var(--ws-blog-text)] hover:text-[var(--ws-blog-accent)]">From zero to landing page</a><time class="text-xs text-[var(--ws-blog-text-muted)]">Mar 1, 2026</time></li>
          </ul>
        </div>
      </aside>
    </div>
  </div>
</section>