SaaS Product Hero — Vercel

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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148

<!--
Snippet Name: SaaS Product Hero — Vercel
Description: Minimal monochrome SaaS product hero with a left-aligned headline, dual CTAs, trust logos, and a framed product UI preview with hairline borders.
Author: DevSnips Contributors
Usage Example: Drop at the top of a dark product landing page. Swap the headline, CTAs, and the mock UI preview.
-->
<section class="relative w-full" data-hero="vc">

  <!-- Grid backdrop -->
  <div class="vc-grid-bg pointer-events-none absolute inset-x-0 top-0 -z-10 h-[520px]" aria-hidden="true"></div>

  <div class="mx-auto max-w-6xl px-6 pb-20 pt-16 sm:pt-24">

    <!-- Announcement pill -->
    <div class="mb-8">
      <a href="#" class="vc-mono inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.03] px-3 py-1 text-[12px] text-white/60 transition-colors hover:border-white/20 hover:text-white">
        <span class="vc-dot"></span>
        Introducing Flowbase 3.0 — workflow automations
        <svg class="h-3 w-3 text-white/40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
      </a>
    </div>

    <!-- Headline block -->
    <div class="max-w-3xl">
      <h1 class="font-g text-[44px] font-semibold leading-[1.02] tracking-tight sm:text-[64px]">
        Ship support that<br>
        <span class="bg-gradient-to-r from-white to-white/40 bg-clip-text text-transparent">moves at dev speed.</span>
      </h1>
      <p class="mt-6 max-w-xl font-g text-[16px] leading-relaxed text-white/50 sm:text-[17px]">
        Flowbase unifies your tickets, AI replies, and customer history into one fast workspace.
        Built for teams who treat support like a product surface — not a cost center.
      </p>

      <!-- CTAs -->
      <div class="mt-8 flex flex-col gap-3 sm:flex-row sm:items-center">
        <a href="#" class="font-g inline-flex items-center justify-center gap-2 rounded-lg bg-white px-5 py-3 text-[14px] font-medium text-black transition-colors hover:bg-white/90 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/40">
          Start free — no card
          <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
        </a>
        <a href="#" class="font-g inline-flex items-center justify-center gap-2 rounded-lg border border-white/10 bg-white/[0.02] px-5 py-3 text-[14px] text-white/80 transition-colors hover:border-white/20 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-white/30">
          <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polygon points="6 4 20 12 6 20 6 4"/></svg>
          Watch 2-min demo
        </a>
      </div>

      <!-- Trust line -->
      <div class="mt-10 flex flex-col gap-3">
        <p class="vc-mono text-[11px] uppercase tracking-wider text-white/35">Trusted by fast-moving teams</p>
        <div class="flex flex-wrap items-center gap-x-6 gap-y-3 text-white/40">
          <span class="font-g text-[15px] font-semibold tracking-tight">Vercel</span>
          <span class="font-g text-[15px] font-semibold tracking-tight">Linear</span>
          <span class="font-g text-[15px] font-semibold tracking-tight">Raycast</span>
          <span class="font-g text-[15px] font-semibold tracking-tight">Resend</span>
          <span class="font-g text-[15px] font-semibold tracking-tight">Cal.com</span>
        </div>
      </div>
    </div>

    <!-- Product preview frame -->
    <div class="relative mt-16">
      <div class="overflow-hidden rounded-[14px] border border-white/10 bg-[#0a0a0a] shadow-[0_0_0_1px_rgba(255,255,255,0.02),0_20px_60px_-20px_rgba(0,0,0,0.9)]">
        <!-- Window chrome -->
        <div class="flex items-center justify-between border-b border-white/[0.07] px-4 py-3">
          <div class="flex items-center gap-2">
            <span class="h-2.5 w-2.5 rounded-full bg-white/15"></span>
            <span class="h-2.5 w-2.5 rounded-full bg-white/15"></span>
            <span class="h-2.5 w-2.5 rounded-full bg-white/15"></span>
          </div>
          <div class="vc-mono rounded-md border border-white/10 bg-white/[0.04] px-3 py-1 text-[11px] text-white/40">app.flowbase.io/inbox</div>
          <span class="vc-dot"></span>
        </div>

        <!-- App body: sidebar + inbox -->
        <div class="grid grid-cols-1 sm:grid-cols-[180px_1fr]">
          <aside class="hidden border-r border-white/[0.07] p-3 sm:block">
            <nav class="space-y-1" role="navigation">
              <a href="#" class="flex items-center gap-2 rounded-md bg-white/[0.06] px-2.5 py-2 text-[13px] text-white">
                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.5 5.5 2 12l3.5 6.5h17L22 12 18.5 5.5z"/></svg>
                Inbox <span class="vc-mono ml-auto rounded bg-white/10 px-1.5 text-[10px] text-white/70">128</span>
              </a>
              <a href="#" class="flex items-center gap-2 rounded-md px-2.5 py-2 text-[13px] text-white/50 hover:bg-white/[0.04]">
                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>
                Conversations
              </a>
              <a href="#" class="flex items-center gap-2 rounded-md px-2.5 py-2 text-[13px] text-white/50 hover:bg-white/[0.04]">
                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
                Automations
              </a>
              <a href="#" class="flex items-center gap-2 rounded-md px-2.5 py-2 text-[13px] text-white/50 hover:bg-white/[0.04]">
                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M3 3v18h18"/><path d="M7 14l4-4 4 4 5-5"/></svg>
                Insights
              </a>
            </nav>
          </aside>

          <div class="divide-y divide-white/[0.06]">
            <div class="flex items-start gap-3 px-4 py-3.5 hover:bg-white/[0.02]">
              <span class="vc-mono mt-0.5 shrink-0 rounded border border-white/10 bg-white/[0.04] px-1.5 py-0.5 text-[10px] text-white/50">#A1</span>
              <div class="min-w-0 flex-1">
                <div class="flex items-center justify-between gap-2">
                  <p class="font-g truncate text-[13px] text-white">Payment failed on annual plan</p>
                  <span class="vc-mono shrink-0 text-[11px] text-white/35">2m</span>
                </div>
                <p class="font-g mt-1 truncate text-[12px] text-white/50">Myria Co. · assigned to you · SLA breaching</p>
              </div>
              <span class="h-2 w-2 shrink-0 rounded-full bg-[#50e3c2] shadow-[0_0_8px_#50e3c2]" aria-hidden="true"></span>
            </div>
            <div class="flex items-start gap-3 px-4 py-3.5 hover:bg-white/[0.02]">
              <span class="vc-mono mt-0.5 shrink-0 rounded border border-white/10 bg-white/[0.04] px-1.5 py-0.5 text-[10px] text-white/50">#A2</span>
              <div class="min-w-0 flex-1">
                <div class="flex items-center justify-between gap-2">
                  <p class="font-g truncate text-[13px] text-white">SSO login redirects to wrong org</p>
                  <span class="vc-mono shrink-0 text-[11px] text-white/35">14m</span>
                </div>
                <p class="font-g mt-1 truncate text-[12px] text-white/50">Northbeam · waiting on customer</p>
              </div>
            </div>
            <div class="flex items-start gap-3 px-4 py-3.5 hover:bg-white/[0.02]">
              <span class="vc-mono mt-0.5 shrink-0 rounded border border-white/10 bg-white/[0.04] px-1.5 py-0.5 text-[10px] text-white/50">#A3</span>
              <div class="min-w-0 flex-1">
                <div class="flex items-center justify-between gap-2">
                  <p class="font-g truncate text-[13px] text-white">How to export audit logs via API?</p>
                  <span class="vc-mono shrink-0 text-[11px] text-white/35">1h</span>
                </div>
                <p class="font-g mt-1 truncate text-[12px] text-white/50">Loop Labs · auto-replied by AI</p>
              </div>
            </div>
            <div class="flex items-start gap-3 px-4 py-3.5 hover:bg-white/[0.02]">
              <span class="vc-mono mt-0.5 shrink-0 rounded border border-white/10 bg-white/[0.04] px-1.5 py-0.5 text-[10px] text-white/50">#A4</span>
              <div class="min-w-0 flex-1">
                <div class="flex items-center justify-between gap-2">
                  <p class="font-g truncate text-[13px] text-white">Feature request: split-view macro</p>
                  <span class="vc-mono shrink-0 text-[11px] text-white/35">3h</span>
                </div>
                <p class="font-g mt-1 truncate text-[12px] text-white/50">Pulumi · tagged by triage bot</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="absolute -right-3 -top-3 hidden rounded-lg border border-white/10 bg-[#0a0a0a] px-3 py-2 shadow-[0_0_0_1px_rgba(255,255,255,0.02),0_20px_60px_-20px_rgba(0,0,0,0.9)] sm:block">
        <p class="vc-mono text-[10px] uppercase tracking-wider text-white/40">Median first reply</p>
        <p class="font-g mt-0.5 text-[18px] font-semibold text-white">1m 42s</p>
      </div>
    </div>
  </div>
</section>