Hero sections

<section class="demo-hero-section sl-stack sl-text-center sl-py-12 sl-px-6">
  <p class="demo-kicker">A new place to begin</p>
  <h2>Small start.<br />Big possibilities.</h2>
  <p class="sl-text-lg sl-text-muted sl-measure sl-mx-auto">
    Build a thoughtful home for your next idea. Start with good defaults and make every
    detail your own.
  </p>
  <div class="sl-cluster sl-justify-center sl-gap-4">
    <a class="sl-btn" href="/getting-started/">Start creating ↗</a
    ><a class="sl-btn sl-btn--outline" href="/components/">See the pieces</a>
  </div>
</section>

<section class="sl-grid sl-md:cols-2 sl-gap-8 sl-items-center">
  <div class="sl-stack">
    <span class="sl-badge">Built for your ideas</span>
    <h2 class="sl-text-xl">A considered foundation.<br />A fresh perspective.</h2>
    <p class="sl-text-muted">Let your content lead. Keep the structure simple.</p>
    <a class="sl-btn" href="/layouts/">Explore layouts ↗</a>
  </div>
  <div class="demo-art demo-art-lavender demo-art-large" aria-hidden="true">
    <span></span><span></span><span></span>
  </div>
</section>

<section class="sl-card sl-stack sl-gap-6 sl-py-12">
  <h3 class="sl-text-xl sl-split" aria-label="Make room for possibility">
    <span class="sl-word" aria-hidden="true" style="--sl-i: 0">Make</span>
    <span class="sl-word" aria-hidden="true" style="--sl-i: 1">room</span>
    <span class="sl-word" aria-hidden="true" style="--sl-i: 2">for</span>
    <span class="sl-word" aria-hidden="true" style="--sl-i: 3">possibility</span>
  </h3>
  <p class="sl-text-lg sl-text-muted">
    A build-time word split with native CSS scroll timelines.
  </p>
  <div class="sl-cluster">
    <a class="sl-btn sl-hover-sheen" href="/getting-started/"
      >Start building
      <svg
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        aria-hidden="true"
      >
        <path d="M5 12h14m-6-6 6 6-6 6" /></svg></a
    ><a class="sl-link sl-link--underline" href="/components/">Explore the library</a>
  </div>
</section>

<section class="sl-alert sl-cluster sl-justify-between">
  <div class="sl-stack">
    <span class="sl-badge">New collection</span>
    <h3 class="sl-text-xl sl-reveal-text">Small pieces. Fresh possibilities.</h3>
  </div>
  <a class="sl-btn sl-btn--outline sl-hover-lift" href="/components/"
    >See what's inside
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      aria-hidden="true"
    >
      <path d="M5 12h14m-6-6 6 6-6 6" /></svg
  ></a>
</section>