Free Trial CTA — Neo-Brutalism

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

<!--
Snippet Name: Free Trial CTA — Neo-Brutalism
Description: Brutalist full-bleed free trial CTA banner with a giant headline, checklist strip, and offset-shadow CTAs.
Author: DevSnips Contributors
Usage Example: Drop near the end of a landing page to drive trial signups.
-->
<section class="relative w-full overflow-hidden" data-cta="nb">

  <div class="pointer-events-none absolute inset-0 -z-10 nb-grid-bg opacity-[0.08]" aria-hidden="true"></div>

  <div class="mx-auto max-w-6xl px-5 py-16 sm:px-8 sm:py-24">
    <div class="relative border-2 border-black bg-white p-8 shadow-[10px_10px_0_0_#000] sm:p-12">

      <!-- rotated guarantee sticker -->
      <span class="absolute -right-4 -top-6 hidden rotate-6 border-2 border-black bg-[#00E676] px-3 py-2 font-mono text-[11px] font-bold uppercase shadow-[4px_4px_0_0_#000] sm:block">★ 14-day guarantee</span>

      <div class="grid grid-cols-1 gap-10 lg:grid-cols-[1.4fr_1fr] lg:items-center">
        <!-- Left: headline + CTAs -->
        <div>
          <span class="border-2 border-black bg-black px-3 py-1.5 font-mono text-[11px] font-bold uppercase tracking-wider text-[#FFE600] shadow-[3px_3px_0_0_#000]">/ free trial</span>
          <h2 class="font-archivo mt-6 text-[44px] font-extrabold uppercase leading-[1.1] tracking-tight sm:text-[72px]">
            <span class="bg-[#FFE600] px-2">Try it.</span><br>
            <span>Then ship it.</span>
          </h2>
          <p class="font-mono mt-5 max-w-md text-[13px] font-medium leading-relaxed text-black/75">
            14 days, the entire Scale plan, no credit card. Wire it up to your events in under five minutes and watch the inbox clear itself.
          </p>

          <!-- CTAs -->
          <div class="mt-8 flex flex-col gap-3 sm:flex-row">
            <a href="#" class="inline-flex items-center justify-center gap-2 border-2 border-black bg-black px-7 py-4 font-mono text-[13px] font-bold uppercase text-white shadow-[6px_6px_0_0_#FF4FA3] transition-transform duration-100 hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-[2px_2px_0_0_#FF4FA3] focus:outline-none focus-visible:ring-4 focus-visible:ring-[#FF4FA3]">
              Start free trial
              <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
            </a>
            <a href="#" class="inline-flex items-center justify-center gap-2 border-2 border-black bg-white px-7 py-4 font-mono text-[13px] font-bold uppercase text-black shadow-[6px_6px_0_0_#00C2FF] transition-transform duration-100 hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-[2px_2px_0_0_#00C2FF]">
              Book a demo
            </a>
          </div>
        </div>

        <!-- Right: no-card checklist -->
        <div class="border-2 border-black bg-[#FFFDF5] p-6">
          <p class="font-mono text-[11px] font-bold uppercase tracking-wider text-black/60">/ what you get</p>
          <ul class="mt-4 space-y-3" role="list">
            <li class="flex items-start gap-3">
              <span class="flex h-6 w-6 shrink-0 items-center justify-center border-2 border-black bg-[#00E676] shadow-[2px_2px_0_0_#000]"><svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" aria-hidden="true"><path d="M5 12l5 5L20 6"/></svg></span>
              <span class="font-mono text-[12px] font-bold uppercase">No credit card</span>
            </li>
            <li class="flex items-start gap-3">
              <span class="flex h-6 w-6 shrink-0 items-center justify-center border-2 border-black bg-[#00E676] shadow-[2px_2px_0_0_#000]"><svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" aria-hidden="true"><path d="M5 12l5 5L20 6"/></svg></span>
              <span class="font-mono text-[12px] font-bold uppercase">Full Scale plan unlocked</span>
            </li>
            <li class="flex items-start gap-3">
              <span class="flex h-6 w-6 shrink-0 items-center justify-center border-2 border-black bg-[#00E676] shadow-[2px_2px_0_0_#000]"><svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" aria-hidden="true"><path d="M5 12l5 5L20 6"/></svg></span>
              <span class="font-mono text-[12px] font-bold uppercase">5-min setup, sample data</span>
            </li>
            <li class="flex items-start gap-3">
              <span class="flex h-6 w-6 shrink-0 items-center justify-center border-2 border-black bg-[#00E676] shadow-[2px_2px_0_0_#000]"><svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" aria-hidden="true"><path d="M5 12l5 5L20 6"/></svg></span>
              <span class="font-mono text-[12px] font-bold uppercase">Cancel anytime — keep your data</span>
            </li>
          </ul>
          <div class="mt-6 flex items-center gap-3 border-t-2 border-black pt-4">
            <div class="flex -space-x-2">
              <span class="h-7 w-7 border-2 border-black bg-[#FF4FA3]"></span>
              <span class="h-7 w-7 border-2 border-black bg-[#00C2FF]"></span>
              <span class="h-7 w-7 border-2 border-black bg-[#FFE600]"></span>
            </div>
            <p class="font-mono text-[11px] font-bold uppercase text-black/70">4,200+ teams started this week</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>