Call to Action

<link rel="preload" as="image" href="/images/dashboard.png"/>
<section class="px-4 py-10">
  <div class="mx-auto grid max-w-6xl grid-cols-1 items-center gap-6 overflow-hidden rounded-lg border border-slate-200 p-6 md:grid-cols-2 md:gap-12 md:px-10">
    <div class="space-y-4">
      <div class="space-y-2">
        <h2 class="text-xl font-bold tracking-tight text-slate-950 md:text-3xl">Get started with Campfire today!</h2>
        <p class="text-base text-slate-600">Join over 4,000 bookmarkers who have saved over 100,000 links.</p>
      </div>
      <button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-blue-700/75 focus:ring-blue-600 bg-blue-600 text-white hover:bg-blue-700 hover:border-blue-700 px-3 py-1.5 text-sm font-medium rounded-md">
        <span>Sign Up for Free</span>
      </button>
    </div>
    <div class="relative h-80">
      <img src="/images/dashboard.png" class="absolute left-0 top-0 h-96 max-w-none rounded-lg border border-slate-200 bg-slate-100 object-cover object-center" alt="Campfire dashboard"/>
    </div>
  </div>
</section>