Product Grid

<section class="site-section stack gap-xl" aria-labelledby="products-title">
  <header class="stack gap-md">
    <p class="eyebrow">
      Explore the library
    </p>
    <h2 id="products-title">
      A starting point for every idea
    </h2>
    <p class="site-lead muted">
      Go from a single interaction to a complete page with the same design foundation.
    </p>
  </header>
  <div class="site-card-grid">
    <article class="stack gap-md site-card">
      <p class="eyebrow">
        01 · Components
      </p>
      <h3>
        <a class="link-underline link-animated" href="/components">
          The everyday essentials
        </a>
      </h3>
      <p class="muted">
        Buttons, inputs, navigation, and feedback. Native building blocks for the details people use every day.
      </p>
      <p>
        <a class="link-underline link-animated" href="/components">
          Explore Components →
        </a>
      </p>
    </article>
    <article class="stack gap-md site-card">
      <p class="eyebrow">
        02 · Blocks
      </p>
      <h3>
        <a class="link-underline link-animated" href="/blocks">
          A bigger head start
        </a>
      </h3>
      <p class="muted">
        Responsive heroes, feature sections, and footers. Compose a complete page, then make it your own.
      </p>
      <p>
        <a class="link-underline link-animated" href="/blocks">
          Explore Blocks →
        </a>
      </p>
    </article>
    <article class="stack gap-md site-card">
      <p class="eyebrow">
        03 · Themes
      </p>
      <h3>
        <a class="link-underline link-animated" href="/docs/themes">
          Your own visual language
        </a>
      </h3>
      <p class="muted">
        Choose a palette and tune shared tokens to carry a consistent identity across every screen.
      </p>
      <p>
        <a class="link-underline link-animated" href="/docs/themes">
          Explore Themes →
        </a>
      </p>
    </article>
  </div>
</section>