<section class="py-32">
  <div class="container">
    <div class="text-center">
      <div class="text-3xl font-bold md:text-5xl lg:text-7xl">
        <p class="flex flex-wrap items-center justify-center">
          Begin hiring<span class="mx-4 inline-flex items-center -space-x-4"><span
              class="relative flex shrink-0 overflow-hidden rounded-full size-11 border lg:size-16"></span><span
              class="relative flex shrink-0 overflow-hidden rounded-full size-11 border lg:size-16"></span><span
              class="relative flex shrink-0 overflow-hidden rounded-full size-11 border lg:size-16"></span></span>quickly.
          At no cost at all.
        </p>
      </div>
      <button
        class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-zinc-900 text-white hover:bg-zinc-900/90 h-11 rounded-md px-8 mt-10">
        Get started for free
      </button>
    </div>
  </div>
</section>

<section class="py-32">
  <div class="container">
    <div class="flex flex-col items-center gap-6 border-y py-14 text-center md:py-20">
      <q class="block max-w-4xl text-2xl font-medium lg:text-3xl">Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Illo nesciunt iste distinctio
        corporis, alias illum.</q>
      <div class="flex flex-col items-center gap-2 sm:flex-row">
        <img src="/images/placeholders/logos/figma.svg" alt="shadcn" class="h-7" />
        <p class="font-medium">John Doe, Founder &amp; CEO of Company</p>
      </div>
    </div>
  </div>
</section>

<section class="py-32">
  <div class="container">
    <div class="flex flex-col gap-6">
      <div class="grid grid-cols-1 items-stretch gap-x-0 gap-y-4 lg:grid-cols-3 lg:gap-4">
        <img src="/images/placeholders/minima/placeholder-1.jpg" alt="placeholder"
          class="h-72 w-full rounded-md object-cover lg:h-auto" />
        <div
          class="rounded-lg border bg-card text-card-foreground shadow-sm col-span-2 flex items-center justify-center p-6">
          <div class="flex flex-col gap-4">
            <q class="text-xl font-medium lg:text-3xl">Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque
              eveniet suscipit
              corporis sequi usdam alias fugiat iusto perspiciatis.</q>
            <div class="flex flex-col items-start">
              <p>John Doe</p>
              <p class="text-zinc-600">CEO, Company Name</p>
            </div>
          </div>
        </div>
      </div>
      <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
        <div class="rounded-lg border bg-card text-card-foreground shadow-sm">
          <div class="p-6 px-6 pt-6 leading-7 text-foreground/70">
            <q>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsa, eveniet inventore!
              Omnis incidunt vel iste.</q>
          </div>
          <div class="flex items-center p-6 pt-0">
            <div class="flex gap-4 leading-5">
              <span class="relative flex shrink-0 overflow-hidden size-9 rounded-full ring-1 ring-input"></span>
              <div class="text-sm">
                <p class="font-medium">John Doe</p>
                <p class="text-zinc-600">CEO, Company Name</p>
              </div>
            </div>
          </div>
        </div>
        <div class="rounded-lg border bg-card text-card-foreground shadow-sm">
          <div class="p-6 px-6 pt-6 leading-7 text-foreground/70">
            <q>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsa, eveniet inventore!
              Omnis incidunt vel iste.</q>
          </div>
          <div class="flex items-center p-6 pt-0">
            <div class="flex gap-4 leading-5">
              <span class="relative flex shrink-0 overflow-hidden size-9 rounded-full ring-1 ring-input"></span>
              <div class="text-sm">
                <p class="font-medium">John Doe</p>
                <p class="text-zinc-600">CEO, Company Name</p>
              </div>
            </div>
          </div>
        </div>
        <div class="rounded-lg border bg-card text-card-foreground shadow-sm">
          <div class="p-6 px-6 pt-6 leading-7 text-foreground/70">
            <q>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsa, eveniet inventore!
              Omnis incidunt vel iste.</q>
          </div>
          <div class="flex items-center p-6 pt-0">
            <div class="flex gap-4 leading-5">
              <span class="relative flex shrink-0 overflow-hidden size-9 rounded-full ring-1 ring-input"></span>
              <div class="text-sm">
                <p class="font-medium">John Doe</p>
                <p class="text-zinc-600">CEO, Company Name</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>