Enterprise SaaS Footer — 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

<!--
Snippet Name: Enterprise SaaS Footer — Vercel
Description: Dark enterprise SaaS footer with a newsletter form, link grid, status pill, compliance badges, and legal bar.
Author: DevSnips Contributors
Usage Example: Drop at the bottom of any dark product page. The newsletter form is keyboard accessible.
-->
<footer class="relative w-full border-t border-white/10 bg-[#050505] px-6 pt-16" data-footer="vc">

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

    <!-- Top: brand + newsletter -->
    <div class="grid grid-cols-1 gap-10 pb-12 sm:grid-cols-2">
      <div class="max-w-sm">
        <div class="flex items-center gap-2.5">
          <svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2 2 19h20L12 2z"/></svg>
          <span class="font-g text-[16px] font-semibold tracking-tight text-white">Flowbase</span>
        </div>
        <p class="font-g mt-4 text-[14px] leading-relaxed text-white/50">The support platform built for software teams. From first ticket to enterprise rollout.</p>
        <div class="mt-5 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.03] px-3 py-1.5">
          <span class="vc-dot"></span>
          <span class="vc-mono text-[11px] text-white/60">All systems operational</span>
          <span class="vc-mono text-[11px] text-white/35">· 99.99%</span>
        </div>
      </div>

      <!-- Newsletter -->
      <form class="sm:justify-self-end" data-newsletter>
        <label for="footer-email" class="vc-mono text-[11px] uppercase tracking-wider text-white/45">Get the changelog</label>
        <div class="mt-3 flex w-full max-w-sm flex-col gap-2 sm:flex-row">
          <input id="footer-email" type="email" required placeholder="you@company.com"
            class="vc-mono w-full rounded-lg border border-white/10 bg-white/[0.03] px-3 py-2.5 text-[13px] text-white placeholder:text-white/35 focus:border-white/25 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/20">
          <button type="submit" class="font-g inline-flex shrink-0 items-center justify-center gap-2 rounded-lg bg-white px-4 py-2.5 text-[13px] font-medium text-black transition-colors hover:bg-white/90">
            Subscribe
            <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>
          </button>
        </div>
        <p class="vc-mono mt-2 text-[11px] text-white/35" data-newsletter-msg>Monthly. No spam. Unsubscribe in one click.</p>
      </form>
    </div>

    <!-- Link grid -->
    <nav class="grid grid-cols-2 gap-8 border-t border-white/[0.07] py-12 sm:grid-cols-3 lg:grid-cols-5" aria-label="Footer">
      <div>
        <h3 class="vc-mono text-[11px] font-medium uppercase tracking-wider text-white/40">Product</h3>
        <ul class="mt-4 space-y-3" role="list">
          <li><a href="#" class="font-g text-[14px] text-white/70 transition-colors hover:text-white">Features</a></li>
          <li><a href="#" class="font-g text-[14px] text-white/70 transition-colors hover:text-white">Integrations</a></li>
          <li><a href="#" class="font-g text-[14px] text-white/70 transition-colors hover:text-white">Changelog</a></li>
          <li><a href="#" class="font-g text-[14px] text-white/70 transition-colors hover:text-white">Roadmap</a></li>
          <li><a href="#" class="font-g text-[14px] text-white/70 transition-colors hover:text-white">Pricing</a></li>
        </ul>
      </div>
      <div>
        <h3 class="vc-mono text-[11px] font-medium uppercase tracking-wider text-white/40">Developers</h3>
        <ul class="mt-4 space-y-3" role="list">
          <li><a href="#" class="font-g text-[14px] text-white/70 transition-colors hover:text-white">Documentation</a></li>
          <li><a href="#" class="font-g text-[14px] text-white/70 transition-colors hover:text-white">API reference</a></li>
          <li><a href="#" class="font-g text-[14px] text-white/70 transition-colors hover:text-white">SDKs</a></li>
          <li><a href="#" class="font-g text-[14px] text-white/70 transition-colors hover:text-white">Status</a></li>
          <li><a href="#" class="font-g text-[14px] text-white/70 transition-colors hover:text-white">CLI</a></li>
        </ul>
      </div>
      <div>
        <h3 class="vc-mono text-[11px] font-medium uppercase tracking-wider text-white/40">Company</h3>
        <ul class="mt-4 space-y-3" role="list">
          <li><a href="#" class="font-g text-[14px] text-white/70 transition-colors hover:text-white">About</a></li>
          <li><a href="#" class="font-g text-[14px] text-white/70 transition-colors hover:text-white">Careers</a></li>
          <li><a href="#" class="font-g text-[14px] text-white/70 transition-colors hover:text-white">Customers</a></li>
          <li><a href="#" class="font-g text-[14px] text-white/70 transition-colors hover:text-white">Blog</a></li>
          <li><a href="#" class="font-g text-[14px] text-white/70 transition-colors hover:text-white">Press kit</a></li>
        </ul>
      </div>
      <div>
        <h3 class="vc-mono text-[11px] font-medium uppercase tracking-wider text-white/40">Resources</h3>
        <ul class="mt-4 space-y-3" role="list">
          <li><a href="#" class="font-g text-[14px] text-white/70 transition-colors hover:text-white">Help center</a></li>
          <li><a href="#" class="font-g text-[14px] text-white/70 transition-colors hover:text-white">Community</a></li>
          <li><a href="#" class="font-g text-[14px] text-white/70 transition-colors hover:text-white">Guides</a></li>
          <li><a href="#" class="font-g text-[14px] text-white/70 transition-colors hover:text-white">Templates</a></li>
          <li><a href="#" class="font-g text-[14px] text-white/70 transition-colors hover:text-white">Contact sales</a></li>
        </ul>
      </div>
      <div>
        <h3 class="vc-mono text-[11px] font-medium uppercase tracking-wider text-white/40">Legal</h3>
        <ul class="mt-4 space-y-3" role="list">
          <li><a href="#" class="font-g text-[14px] text-white/70 transition-colors hover:text-white">Privacy</a></li>
          <li><a href="#" class="font-g text-[14px] text-white/70 transition-colors hover:text-white">Terms</a></li>
          <li><a href="#" class="font-g text-[14px] text-white/70 transition-colors hover:text-white">Security</a></li>
          <li><a href="#" class="font-g text-[14px] text-white/70 transition-colors hover:text-white">DPA</a></li>
          <li><a href="#" class="font-g text-[14px] text-white/70 transition-colors hover:text-white">Sub-processors</a></li>
        </ul>
      </div>
    </nav>

    <!-- Compliance badges -->
    <div class="flex flex-wrap items-center gap-2 border-t border-white/[0.07] py-6">
      <span class="vc-mono rounded-md border border-white/10 bg-white/[0.03] px-2.5 py-1 text-[11px] text-white/60">SOC 2 Type II</span>
      <span class="vc-mono rounded-md border border-white/10 bg-white/[0.03] px-2.5 py-1 text-[11px] text-white/60">ISO 27001</span>
      <span class="vc-mono rounded-md border border-white/10 bg-white/[0.03] px-2.5 py-1 text-[11px] text-white/60">GDPR</span>
      <span class="vc-mono rounded-md border border-white/10 bg-white/[0.03] px-2.5 py-1 text-[11px] text-white/60">HIPAA</span>
      <span class="vc-mono ml-auto hidden text-[11px] text-white/35 sm:block">Hosted in EU & US · region-pinned</span>
    </div>

    <!-- Bottom bar -->
    <div class="flex flex-col items-start justify-between gap-4 border-t border-white/[0.07] py-6 sm:flex-row sm:items-center">
      <div class="flex items-center gap-4">
        <p class="vc-mono text-[11px] text-white/35">© 2026 Flowbase, Inc. All rights reserved.</p>
        <span class="vc-mono inline-flex items-center gap-1.5 rounded-md border border-white/10 bg-white/[0.03] px-2 py-0.5 text-[11px] text-white/55">
          <svg class="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/></svg>
          English (US)
        </span>
      </div>
      <div class="flex items-center gap-1">
        <a href="#" aria-label="X" class="rounded-md p-2 text-white/50 transition-colors hover:bg-white/[0.05] hover:text-white"><svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg></a>
        <a href="#" aria-label="GitHub" class="rounded-md p-2 text-white/50 transition-colors hover:bg-white/[0.05] hover:text-white"><svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .5A11.5 11.5 0 0 0 .5 12a11.5 11.5 0 0 0 7.86 10.92c.58.1.79-.25.79-.56v-2c-3.2.7-3.88-1.37-3.88-1.37-.53-1.34-1.3-1.7-1.3-1.7-1.06-.72.08-.7.08-.7 1.17.08 1.78 1.2 1.78 1.2 1.04 1.78 2.73 1.27 3.4.97.1-.75.4-1.27.73-1.56-2.55-.29-5.24-1.28-5.24-5.7 0-1.26.45-2.3 1.2-3.11-.12-.3-.52-1.47.1-3.06 0 0 .98-.31 3.2 1.18a11.1 11.1 0 0 1 5.82 0c2.22-1.49 3.2-1.18 3.2-1.18.62 1.59.22 2.76.1 3.06.75.81 1.2 1.85 1.2 3.11 0 4.43-2.7 5.4-5.26 5.69.41.36.78 1.06.78 2.14v3.17c0 .31.21.67.8.56A11.5 11.5 0 0 0 23.5 12 11.5 11.5 0 0 0 12 .5z"/></svg></a>
        <a href="#" aria-label="LinkedIn" class="rounded-md p-2 text-white/50 transition-colors hover:bg-white/[0.05] hover:text-white"><svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.36V9h3.4v1.56h.05c.47-.9 1.63-1.85 3.36-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z"/></svg></a>
      </div>
    </div>
  </div>

  <script>
    (function () {
      const root = document.currentScript.closest('[data-footer]');
      const form = root.querySelector('[data-newsletter]');
      const msg = root.querySelector('[data-newsletter-msg]');
      if (form) form.addEventListener('submit', function (e) {
        e.preventDefault();
        if (msg) { msg.textContent = "Thanks — check your inbox to confirm."; msg.classList.remove('text-white/35'); msg.classList.add('text-[#50e3c2]'); }
        form.reset();
      });
    })();
  </script>
</footer>