Trial CTA with reassurance

Build a conversion block with Tailwind CSS centred on a neutral-50 background. Stack a small uppercase label, a large tight headline of no more than seven words, and a single paragraph of supporting copy at a comfortable measure. Under it, a primary dark button and a ghost link with an arrow, side by side and wrapping on small screens. Below the buttons, a row of four reassurance items laid out as a responsive grid: each has a check glyph in a small green-tinted circle, a bold micro-heading and a muted second line — no card required, cancel in one click, data export any time, and a real person answering support. Finish with a bordered strip holding four small avatars overlapping on the left and a line of text saying how many teams started this week, with the number in medium weight.

<section class="bg-neutral-50 px-6 py-24">
  <div class="mx-auto max-w-2xl text-center">
    <p class="text-xs font-medium uppercase tracking-[0.2em] text-neutral-400">Start today</p>
    <h2 class="mt-4 text-4xl font-semibold leading-tight tracking-tight text-neutral-900 sm:text-5xl">Try it on your own data</h2>
    <p class="mx-auto mt-5 max-w-lg leading-relaxed text-neutral-500">
      Fourteen days with every feature switched on. Connect a source, build one report, and decide whether it earns a place in your stack.
    </p>

    <div class="mt-8 flex flex-wrap items-center justify-center gap-3">
      <a href="#" class="rounded-xl bg-neutral-900 px-7 py-3.5 text-sm font-medium text-white transition hover:bg-neutral-800">Start free trial</a>
      <a href="#" class="rounded-xl px-5 py-3.5 text-sm font-medium text-neutral-700 underline-offset-4 transition hover:underline">Book a walkthrough <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="M14 4h6v6M20 4l-9 9"/><path d="M18 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6"/></svg></a>
    </div>
  </div>

  <div class="mx-auto mt-14 grid max-w-4xl gap-6 sm:grid-cols-2 lg:grid-cols-4">
    <div class="flex gap-3">
      <span class="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-green-100 text-xs text-green-700"><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="m5 12.5 4.25 4.25L19 7"/></svg></span>
      <div>
        <p class="text-sm font-medium text-neutral-900">No card required</p>
        <p class="mt-0.5 text-sm text-neutral-500">Billing only starts if you ask it to.</p>
      </div>
    </div>
    <div class="flex gap-3">
      <span class="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-green-100 text-xs text-green-700"><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="m5 12.5 4.25 4.25L19 7"/></svg></span>
      <div>
        <p class="text-sm font-medium text-neutral-900">Cancel in one click</p>
        <p class="mt-0.5 text-sm text-neutral-500">In settings, not on a phone call.</p>
      </div>
    </div>
    <div class="flex gap-3">
      <span class="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-green-100 text-xs text-green-700"><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="m5 12.5 4.25 4.25L19 7"/></svg></span>
      <div>
        <p class="text-sm font-medium text-neutral-900">Export any time</p>
        <p class="mt-0.5 text-sm text-neutral-500">CSV and Parquet, including on the free plan.</p>
      </div>
    </div>
    <div class="flex gap-3">
      <span class="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-green-100 text-xs text-green-700"><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="m5 12.5 4.25 4.25L19 7"/></svg></span>
      <div>
        <p class="text-sm font-medium text-neutral-900">Support from engineers</p>
        <p class="mt-0.5 text-sm text-neutral-500">Median first reply: 41 minutes.</p>
      </div>
    </div>
  </div>

  <div class="mx-auto mt-12 flex max-w-md items-center justify-center gap-3 rounded-full border border-neutral-200 bg-white px-5 py-3">
    <span class="flex">
      <span class="grid h-7 w-7 place-items-center rounded-full bg-neutral-900 text-[10px] font-medium text-white ring-2 ring-white">RM</span>
      <span class="-ml-2 grid h-7 w-7 place-items-center rounded-full bg-amber-500 text-[10px] font-medium text-white ring-2 ring-white">JP</span>
      <span class="-ml-2 grid h-7 w-7 place-items-center rounded-full bg-green-600 text-[10px] font-medium text-white ring-2 ring-white">DK</span>
      <span class="-ml-2 grid h-7 w-7 place-items-center rounded-full bg-neutral-400 text-[10px] font-medium text-white ring-2 ring-white">MO</span>
    </span>
    <p class="text-sm text-neutral-600"><span class="font-medium text-neutral-900">128 teams</span> started a trial this week</p>
  </div>
</section>