About Base

<section class="ws-about bg-[var(--ws-about-bg)] px-6 py-20">
  <div class="mx-auto max-w-7xl">
    <!-- Content + Image -->
    <div class="grid items-center gap-12 lg:grid-cols-2">
      <div>
        <h2 class="text-3xl font-bold tracking-tight text-[var(--ws-about-text)] sm:text-4xl">About Us</h2>
        <p class="mt-6 text-base leading-relaxed text-[var(--ws-about-text-soft)]">We are a team of designers and engineers passionate about building tools that help teams ship better products faster. Founded in 2020, we started with a simple idea: design systems should be accessible to everyone, not just large organizations with dedicated teams.</p>
        <p class="mt-4 text-base leading-relaxed text-[var(--ws-about-text-soft)]">Today, our platform serves thousands of teams worldwide, providing structured patterns, tokens, and workflows that turn weeks of design-dev handoff into minutes of copy-paste implementation. We believe the best design systems are the ones people actually use.</p>
      </div>
      <div class="flex aspect-[4/3] items-center justify-center rounded-2xl bg-gradient-to-br from-amber-100 to-orange-100 dark:from-amber-900 dark:to-orange-900" role="img" aria-label="About us image">
        <svg class="h-16 w-16 text-amber-300" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"/></svg>
      </div>
    </div>

    <!-- Stats -->
    <div class="mt-16 grid grid-cols-1 gap-8 border-t border-[var(--ws-about-border)] pt-12 sm:grid-cols-3">
      <div class="text-center">
        <p class="text-4xl font-bold text-[var(--ws-about-accent)]">10+</p>
        <p class="mt-1 text-sm text-[var(--ws-about-text-soft)]">Years of Experience</p>
      </div>
      <div class="text-center">
        <p class="text-4xl font-bold text-[var(--ws-about-accent)]">5,000+</p>
        <p class="mt-1 text-sm text-[var(--ws-about-text-soft)]">Happy Customers</p>
      </div>
      <div class="text-center">
        <p class="text-4xl font-bold text-[var(--ws-about-accent)]">25+</p>
        <p class="mt-1 text-sm text-[var(--ws-about-text-soft)]">Countries Served</p>
      </div>
    </div>
  </div>
</section>