SaaS Feature Grid — 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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

<!--
Snippet Name: SaaS Feature Grid — Neo-Brutalism
Description: Brutalist 6-up feature grid with hard borders, rotating bright accent panels, numbered tags, and offset shadows.
Author: DevSnips Contributors
Usage Example: Drop into a product features section. Reorder features or swap accent colors per card.
-->
<section class="relative w-full px-5 py-16 sm:px-8 sm:py-24" data-features="nb">

  <div class="mx-auto max-w-6xl">

    <!-- Section header -->
    <div class="mb-12 flex flex-col items-start justify-between gap-6 border-b-4 border-black pb-8 sm:flex-row sm:items-end">
      <div>
        <span class="border-2 border-black bg-[#00C2FF] px-2.5 py-1 font-mono text-[11px] font-bold uppercase tracking-wider shadow-[3px_3px_0_0_#000]">/ features</span>
        <h2 class="font-archivo mt-5 text-[40px] font-extrabold uppercase leading-[0.95] tracking-tight sm:text-[56px]">
          Everything<br>your team needs.
        </h2>
      </div>
      <p class="max-w-sm font-mono text-[13px] font-medium leading-relaxed text-black/70">
        Six pillars that turn a messy inbox into a system. No plugins. No yearly upgrades.
        Built in from day one.
      </p>
    </div>

    <!-- Grid -->
    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
      <!-- card template -->
      <article class="group border-2 border-black bg-white p-6 shadow-[8px_8px_0_0_#000] transition-transform duration-100 hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-[2px_2px_0_0_#000]">
        <div class="flex items-center justify-between">
          <div class="flex h-14 w-14 items-center justify-center border-2 border-black bg-[#FFE600] shadow-[3px_3px_0_0_#000]">
            <svg class="h-7 w-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M12 2a10 10 0 1 0 10 10"/><path d="M22 2 12 12"/></svg>
          </div>
          <span class="font-mono text-[11px] font-bold uppercase tracking-wider text-black/40">01</span>
        </div>
        <h3 class="font-archivo mt-5 text-xl font-extrabold uppercase leading-tight">AI triage</h3>
        <p class="font-mono mt-2 text-[12px] font-medium leading-relaxed text-black/70">Auto-routes every ticket to the right team and drafts a reply in under 3 seconds.</p>
      </article>

      <article class="group border-2 border-black bg-white p-6 shadow-[8px_8px_0_0_#000] transition-transform duration-100 hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-[2px_2px_0_0_#000] sm:translate-y-6">
        <div class="flex items-center justify-between">
          <div class="flex h-14 w-14 items-center justify-center border-2 border-black bg-[#FF4FA3] shadow-[3px_3px_0_0_#000]">
            <svg class="h-7 w-7 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
          </div>
          <span class="font-mono text-[11px] font-bold uppercase tracking-wider text-black/40">02</span>
        </div>
        <h3 class="font-archivo mt-5 text-xl font-extrabold uppercase leading-tight">SLA engine</h3>
        <p class="font-mono mt-2 text-[12px] font-medium leading-relaxed text-black/70">Per-plan SLAs with breach alerts and automatic escalation to on-call engineers.</p>
      </article>

      <article class="group border-2 border-black bg-white p-6 shadow-[8px_8px_0_0_#000] transition-transform duration-100 hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-[2px_2px_0_0_#000]">
        <div class="flex items-center justify-between">
          <div class="flex h-14 w-14 items-center justify-center border-2 border-black bg-[#00E676] shadow-[3px_3px_0_0_#000]">
            <svg class="h-7 w-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M3 3v18h18"/><path d="M7 14l4-4 4 4 5-5"/></svg>
          </div>
          <span class="font-mono text-[11px] font-bold uppercase tracking-wider text-black/40">03</span>
        </div>
        <h3 class="font-archivo mt-5 text-xl font-extrabold uppercase leading-tight">Live insights</h3>
        <p class="font-mono mt-2 text-[12px] font-medium leading-relaxed text-black/70">Realtime dashboards for volume, CSAT, and tag trends — exportable to CSV in one click.</p>
      </article>

      <article class="group border-2 border-black bg-white p-6 shadow-[8px_8px_0_0_#000] transition-transform duration-100 hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-[2px_2px_0_0_#000] sm:translate-y-6">
        <div class="flex items-center justify-between">
          <div class="flex h-14 w-14 items-center justify-center border-2 border-black bg-[#00C2FF] shadow-[3px_3px_0_0_#000]">
            <svg class="h-7 w-7 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
          </div>
          <span class="font-mono text-[11px] font-bold uppercase tracking-wider text-black/40">04</span>
        </div>
        <h3 class="font-archivo mt-5 text-xl font-extrabold uppercase leading-tight">Audit logs</h3>
        <p class="font-mono mt-2 text-[12px] font-medium leading-relaxed text-black/70">Tamper-evidence logs for every action, streamed to your SIEM via secure webhook.</p>
      </article>

      <article class="group border-2 border-black bg-white p-6 shadow-[8px_8px_0_0_#000] transition-transform duration-100 hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-[2px_2px_0_0_#000]">
        <div class="flex items-center justify-between">
          <div class="flex h-14 w-14 items-center justify-center border-2 border-black bg-black shadow-[3px_3px_0_0_#000]">
            <svg class="h-7 w-7 text-[#FFE600]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="0"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
          </div>
          <span class="font-mono text-[11px] font-bold uppercase tracking-wider text-black/40">05</span>
        </div>
        <h3 class="font-archivo mt-5 text-xl font-extrabold uppercase leading-tight">Enterprise SSO</h3>
        <p class="font-mono mt-2 text-[12px] font-medium leading-relaxed text-black/70">SAML + SCIM provisioning for Okta, Entra, and Google Workspace out of the box.</p>
      </article>

      <article class="group border-2 border-black bg-white p-6 shadow-[8px_8px_0_0_#000] transition-transform duration-100 hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-[2px_2px_0_0_#000] sm:translate-y-6">
        <div class="flex items-center justify-between">
          <div class="flex h-14 w-14 items-center justify-center border-2 border-black bg-[#FFE600] shadow-[3px_3px_0_0_#000]">
            <svg class="h-7 w-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h10"/></svg>
          </div>
          <span class="font-mono text-[11px] font-bold uppercase tracking-wider text-black/40">06</span>
        </div>
        <h3 class="font-archivo mt-5 text-xl font-extrabold uppercase leading-tight">Workflow builder</h3>
        <p class="font-mono mt-2 text-[12px] font-medium leading-relaxed text-black/70">Drag-and-drop automations that branch on intent, sentiment, and customer tier.</p>
      </article>
    </div>

    <!-- footer CTA strip -->
    <div class="mt-12 flex flex-col items-start justify-between gap-4 border-2 border-black bg-black p-6 sm:flex-row sm:items-center">
      <p class="font-archivo text-xl font-extrabold uppercase text-white sm:text-2xl">Want the full tour?</p>
      <a href="#" class="inline-flex items-center gap-2 border-2 border-black bg-[#FFE600] px-5 py-3 font-mono text-[12px] font-bold uppercase shadow-[4px_4px_0_0_#FF4FA3] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[1px_1px_0_0_#FF4FA3]">
        Book a 20-min call
        <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>
    </div>
  </div>
</section>