App download CTA with QR

Create an app download call-to-action with Tailwind CSS as a dark rounded-2xl panel split into two columns. The left column holds a small label, a heading about picking up where you left off, a short paragraph, two store buttons drawn as bordered blocks with a glyph and stacked labels, and a muted line listing supported versions. The right column is a white rounded-2xl tile centred on the panel holding a QR code drawn purely in CSS — a grid of small squares with three larger finder squares in the corners built from nested divs — and under it a caption reading "Point your camera here". Hide the QR tile below the sm breakpoint since a phone cannot scan its own screen, and hide nothing on desktop. Keep the panel inside a max-w-5xl container with generous padding.

<section class="mx-auto max-w-5xl px-6 py-16">
  <div class="grid items-center gap-10 rounded-2xl bg-neutral-900 p-10 text-white sm:grid-cols-[1fr_auto]">
    <div>
      <p class="text-xs font-medium uppercase tracking-[0.2em] text-neutral-500">Mobile</p>
      <h2 class="mt-4 text-3xl font-semibold leading-tight tracking-tight">Carry the workspace in your pocket</h2>
      <p class="mt-4 max-w-md leading-relaxed text-neutral-400">
        Approvals, comments and the full audit trail — the same account, synced the moment you unlock the screen.
      </p>

      <div class="mt-8 flex flex-wrap gap-3">
        <a href="#" class="flex items-center gap-3 rounded-xl border border-neutral-700 px-5 py-3 transition hover:bg-neutral-800">
          <span class="text-xl"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m12 3 9 9-9 9-9-9 9-9Z"/><path d="m12 7 5 5-5 5-5-5 5-5Z"/></svg></span>
          <span class="text-left leading-tight">
            <span class="block text-[10px] uppercase tracking-widest text-neutral-500">Download on the</span>
            <span class="block text-sm font-medium">App Store</span>
          </span>
        </a>
        <a href="#" class="flex items-center gap-3 rounded-xl border border-neutral-700 px-5 py-3 transition hover:bg-neutral-800">
          <span class="text-xl"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m9 7 9 5-9 5V7Z" fill="currentColor" stroke="none"/></svg></span>
          <span class="text-left leading-tight">
            <span class="block text-[10px] uppercase tracking-widest text-neutral-500">Get it on</span>
            <span class="block text-sm font-medium">Google Play</span>
          </span>
        </a>
      </div>

      <p class="mt-6 text-xs text-neutral-500">Requires iOS 16 or Android 11. 24 MB download.</p>
    </div>

    <div class="hidden justify-self-center rounded-2xl bg-white p-5 text-center sm:block">
      <div class="relative grid h-40 w-40 grid-cols-9 grid-rows-9 gap-[3px]">
        <span class="col-span-1 row-span-1 bg-neutral-900"></span><span></span><span class="bg-neutral-900"></span><span class="bg-neutral-900"></span><span></span><span class="bg-neutral-900"></span><span></span><span class="bg-neutral-900"></span><span></span>
        <span></span><span class="bg-neutral-900"></span><span></span><span class="bg-neutral-900"></span><span class="bg-neutral-900"></span><span></span><span class="bg-neutral-900"></span><span></span><span class="bg-neutral-900"></span>
        <span class="bg-neutral-900"></span><span></span><span class="bg-neutral-900"></span><span></span><span class="bg-neutral-900"></span><span class="bg-neutral-900"></span><span></span><span class="bg-neutral-900"></span><span></span>
        <span></span><span class="bg-neutral-900"></span><span></span><span class="bg-neutral-900"></span><span></span><span></span><span class="bg-neutral-900"></span><span></span><span class="bg-neutral-900"></span>
        <span class="bg-neutral-900"></span><span></span><span class="bg-neutral-900"></span><span></span><span class="bg-neutral-900"></span><span class="bg-neutral-900"></span><span></span><span class="bg-neutral-900"></span><span></span>
        <span></span><span class="bg-neutral-900"></span><span></span><span class="bg-neutral-900"></span><span class="bg-neutral-900"></span><span></span><span class="bg-neutral-900"></span><span></span><span class="bg-neutral-900"></span>
        <span class="bg-neutral-900"></span><span></span><span class="bg-neutral-900"></span><span></span><span></span><span class="bg-neutral-900"></span><span></span><span class="bg-neutral-900"></span><span class="bg-neutral-900"></span>
        <span></span><span class="bg-neutral-900"></span><span></span><span class="bg-neutral-900"></span><span class="bg-neutral-900"></span><span></span><span class="bg-neutral-900"></span><span></span><span></span>
        <span class="bg-neutral-900"></span><span></span><span class="bg-neutral-900"></span><span></span><span class="bg-neutral-900"></span><span></span><span class="bg-neutral-900"></span><span></span><span class="bg-neutral-900"></span>

        <span class="absolute left-0 top-0 grid h-12 w-12 place-items-center border-[5px] border-neutral-900 bg-white"><span class="h-3 w-3 bg-neutral-900"></span></span>
        <span class="absolute right-0 top-0 grid h-12 w-12 place-items-center border-[5px] border-neutral-900 bg-white"><span class="h-3 w-3 bg-neutral-900"></span></span>
        <span class="absolute bottom-0 left-0 grid h-12 w-12 place-items-center border-[5px] border-neutral-900 bg-white"><span class="h-3 w-3 bg-neutral-900"></span></span>
      </div>
      <p class="mt-4 text-xs font-medium text-neutral-500">Point your camera here</p>
    </div>
  </div>
</section>