Startup Launch Hero — 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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

<!--
Snippet Name: Startup Launch Hero — Neo-Brutalism
Description: Brutalist launch hero with a giant headline, live countdown ticker, offset-shadow CTAs, and a stacked product-card collage.
Author: DevSnips Contributors
Usage Example: Drop at the top of a launch/announcement landing page. The countdown updates itself via an inline scoped script.
-->
<section class="relative w-full overflow-hidden" data-launch="nb">

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

  <div class="mx-auto max-w-6xl px-5 py-16 sm:px-8 sm:py-24">

    <!-- Launch banner -->
    <div class="mb-8 flex flex-wrap items-center gap-3">
      <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]">★ Public Beta</span>
      <span class="font-mono text-[11px] font-bold uppercase tracking-wider">Launches in</span>
      <span data-countdown class="inline-flex items-center gap-1 font-mono text-[11px] font-bold">
        <span class="border-2 border-black bg-white px-2 py-1 tabular-nums shadow-[2px_2px_0_0_#000]" data-cd-d>02</span><span>:</span>
        <span class="border-2 border-black bg-white px-2 py-1 tabular-nums shadow-[2px_2px_0_0_#000]" data-cd-h>14</span><span>:</span>
        <span class="border-2 border-black bg-white px-2 py-1 tabular-nums shadow-[2px_2px_0_0_#000]" data-cd-m>23</span><span>:</span>
        <span class="border-2 border-black bg-[#FF4FA3] px-2 py-1 text-white tabular-nums shadow-[2px_2px_0_0_#000]" data-cd-s>09</span>
      </span>
    </div>

    <!-- Headline + layout -->
    <div class="grid grid-cols-1 gap-10 lg:grid-cols-[1.15fr_1fr] lg:items-center">
      <!-- Left: copy -->
      <div>
        <h1 class="font-archivo text-[56px] font-extrabold uppercase leading-[1.05] tracking-tight sm:text-[88px]">
          <span class="border-b-4 border-black">Ship</span><br>
          <span class="inline-block bg-[#FFE600] px-2">faster</span><br>
          <span>than the<br>big guys.</span>
        </h1>
        <p class="mt-6 max-w-md font-mono text-[13px] font-medium leading-relaxed text-black/80">
          Flowbase Beta gives startups the support stack enterprises charge six figures for —
          AI triage, SLAs, audit logs, and a UI your team will actually open on Monday.
        </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-6 py-3.5 font-mono text-[13px] font-bold uppercase text-white shadow-[6px_6px_0_0_#000] transition-transform duration-100 hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-[2px_2px_0_0_#000] focus:outline-none focus-visible:ring-4 focus-visible:ring-[#FF4FA3]">
            Claim your beta spot
            <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-6 py-3.5 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] focus:outline-none focus-visible:ring-4 focus-visible:ring-[#00C2FF]">
            Read the changelog
          </a>
        </div>

        <!-- beta stats strip -->
        <dl class="mt-10 grid grid-cols-3 gap-px border-2 border-black bg-black">
          <div class="bg-white px-4 py-3">
            <dt class="font-mono text-[10px] font-bold uppercase tracking-wider text-black/60">Beta teams</dt>
            <dd class="font-archivo mt-1 text-2xl font-extrabold">1,240</dd>
          </div>
          <div class="bg-white px-4 py-3">
            <dt class="font-mono text-[10px] font-bold uppercase tracking-wider text-black/60">Tickets/day</dt>
            <dd class="font-archivo mt-1 text-2xl font-extrabold">38k</dd>
          </div>
          <div class="bg-white px-4 py-3">
            <dt class="font-mono text-[10px] font-bold uppercase tracking-wider text-black/60">CSAT</dt>
            <dd class="font-archivo mt-1 text-2xl font-extrabold">98%</dd>
          </div>
        </dl>
      </div>

      <!-- Right: stacked product card collage -->
      <div class="relative h-[360px] sm:h-[420px]">
        <!-- back card: analytics -->
        <div class="absolute right-0 top-0 w-[78%] border-2 border-black bg-white p-4 shadow-[8px_8px_0_0_#000]">
          <div class="flex items-center justify-between">
            <p class="font-mono text-[10px] font-bold uppercase tracking-wider">/ weekly volume</p>
            <span class="border-2 border-black bg-[#00E676] px-2 py-0.5 font-mono text-[10px] font-bold uppercase">+24%</span>
          </div>
          <!-- bars -->
          <div class="mt-4 flex h-28 items-end gap-2">
            <div class="w-full border-2 border-black bg-[#FFE600]" style="height:38%"></div>
            <div class="w-full border-2 border-black bg-[#FFE600]" style="height:62%"></div>
            <div class="w-full border-2 border-black bg-[#FFE600]" style="height:48%"></div>
            <div class="w-full border-2 border-black bg-[#FF4FA3]" style="height:88%"></div>
            <div class="w-full border-2 border-black bg-[#FF4FA3]" style="height:72%"></div>
            <div class="w-full border-2 border-black bg-black" style="height:100%"></div>
            <div class="w-full border-2 border-black bg-black" style="height:54%"></div>
          </div>
          <div class="mt-3 flex justify-between font-mono text-[10px] font-bold uppercase text-black/50">
            <span>MON</span><span>TUE</span><span>WED</span><span>THU</span><span>FRI</span><span>SAT</span><span>SUN</span>
          </div>
        </div>

        <!-- front card: ticket -->
        <div class="absolute bottom-0 left-0 w-[64%] border-2 border-black bg-[#FFE600] p-4 shadow-[8px_8px_0_0_#000]">
          <div class="flex items-center justify-between">
            <span class="border-2 border-black bg-white px-2 py-0.5 font-mono text-[10px] font-bold">#A-128</span>
            <span class="border-2 border-black bg-black px-2 py-0.5 font-mono text-[10px] font-bold uppercase text-[#00E676]">AI</span>
          </div>
          <p class="font-archivo mt-3 text-lg font-extrabold leading-tight">"How do I export audit logs via the API?"</p>
          <div class="mt-3 border-2 border-black bg-white p-2">
            <p class="font-mono text-[10px] font-bold uppercase text-black/60">AI suggested reply</p>
            <p class="font-mono mt-1 text-[11px] leading-relaxed">Use <span class="bg-black px-1 text-white">GET /v2/audit</span> with a date range — sample below.</p>
          </div>
        </div>

        <!-- floating chip -->
        <div class="absolute right-2 bottom-6 border-2 border-black bg-[#00C2FF] px-3 py-2 font-mono text-[11px] font-bold uppercase shadow-[4px_4px_0_0_#000]">
          ↳ auto-tagged
        </div>
      </div>
    </div>
  </div>

  <!-- scoped countdown ticker -->
  <script>
    (function () {
      const root = document.currentScript.closest('[data-launch]');
      const target = new Date(Date.now() + 1000 * 60 * 60 * 54); // ~2.25d
      const d = root.querySelector('[data-cd-d]');
      const h = root.querySelector('[data-cd-h]');
      const m = root.querySelector('[data-cd-m]');
      const s = root.querySelector('[data-cd-s]');
      const pad = n => String(n).padStart(2, '0');
      function tick() {
        const diff = Math.max(0, target - Date.now());
        const t = Math.floor(diff / 1000);
        if (d) d.textContent = pad(Math.floor(t / 86400));
        if (h) h.textContent = pad(Math.floor((t % 86400) / 3600));
        if (m) m.textContent = pad(Math.floor((t % 3600) / 60));
        if (s) s.textContent = pad(t % 60);
      }
      tick(); setInterval(tick, 1000);
    })();
  </script>
</section>