Customer Logo Cloud — 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

<!--
Snippet Name: Customer Logo Cloud — Vercel
Description: Dark monochrome logo cloud with wordmark-style SVG logos, a count chip, and a pull-quote.
Author: DevSnips Contributors
Usage Example: Drop into a "trusted by" section. Replace the inline SVG wordmarks with your customers'.
-->
<section class="relative w-full px-6 py-16 sm:py-20" data-logos="vc">

  <div class="mx-auto max-w-6xl">
    <div class="mb-10 text-center">
      <p class="vc-mono inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.03] px-3 py-1 text-[11px] text-white/50"><span class="vc-dot"></span> Trusted by 4,200+ teams</p>
      <h2 class="font-g mt-5 text-[30px] font-semibold leading-[1.05] tracking-tight sm:text-[38px]">Powering support at the<br>fastest software companies.</h2>
    </div>

    <!-- Logo grid -->
    <div class="grid grid-cols-2 gap-px overflow-hidden rounded-[14px] border border-white/10 bg-white/[0.07] sm:grid-cols-3 lg:grid-cols-6">
      <!-- Vercel -->
      <div class="flex items-center justify-center bg-[#0a0a0a] px-6 py-8 transition-colors hover:bg-[#0c0c0c]">
        <svg class="h-6 w-auto text-white" viewBox="0 0 200 50" fill="currentColor" aria-label="Vercel"><path d="M24 4 0 46h48L24 4z"/></svg>
      </div>
      <!-- Linear -->
      <div class="flex items-center justify-center bg-[#0a0a0a] px-6 py-8 transition-colors hover:bg-[#0c0c0c]">
        <svg class="h-6 w-auto text-white" viewBox="0 0 120 28" fill="none" stroke="currentColor" stroke-width="2" aria-label="Linear"><path d="M2 14h22M30 6l8 8-8 8M44 14h22M64 4l8 8 8-8"/></svg>
      </div>
      <!-- Raycast -->
      <div class="flex items-center justify-center bg-[#0a0a0a] px-6 py-8 transition-colors hover:bg-[#0c0c0c]">
        <svg class="h-6 w-auto text-white" viewBox="0 0 120 32" fill="currentColor" aria-label="Raycast"><circle cx="16" cy="16" r="10" fill="none" stroke="currentColor" stroke-width="2.5"/><path d="M16 6v20M6 16h20"/><circle cx="16" cy="16" r="3"/></svg>
      </div>
      <!-- Resend -->
      <div class="flex items-center justify-center bg-[#0a0a0a] px-6 py-8 transition-colors hover:bg-[#0c0c0c]">
        <svg class="h-6 w-auto text-white" viewBox="0 0 120 32" fill="none" stroke="currentColor" stroke-width="2.5" aria-label="Resend"><path d="M4 6h40l-8 20H12L4 6z"/><path d="M14 10l20 12M34 10 14 22"/></svg>
      </div>
      <!-- Cal.com -->
      <div class="flex items-center justify-center bg-[#0a0a0a] px-6 py-8 transition-colors hover:bg-[#0c0c0c]">
        <svg class="h-6 w-auto text-white" viewBox="0 0 120 32" fill="none" stroke="currentColor" stroke-width="2.5" aria-label="Cal.com"><rect x="4" y="6" width="36" height="22" rx="3"/><path d="M4 13h36M14 4v6M30 4v6"/></svg>
      </div>
      <!-- Pulumi -->
      <div class="flex items-center justify-center bg-[#0a0a0a] px-6 py-8 transition-colors hover:bg-[#0c0c0c]">
        <svg class="h-6 w-auto text-white" viewBox="0 0 120 32" fill="none" stroke="currentColor" stroke-width="2.5" aria-label="Pulumi"><path d="M4 26 16 6l12 20M28 26 40 6l12 20"/></svg>
      </div>
      <!-- second row -->
      <div class="flex items-center justify-center bg-[#0a0a0a] px-6 py-8 transition-colors hover:bg-[#0c0c0c]">
        <svg class="h-6 w-auto text-white" viewBox="0 0 120 32" fill="currentColor" aria-label="Northbeam"><path d="M6 26V6l28 20V6"/></svg>
      </div>
      <div class="flex items-center justify-center bg-[#0a0a0a] px-6 py-8 transition-colors hover:bg-[#0c0c0c]">
        <svg class="h-6 w-auto text-white" viewBox="0 0 120 32" fill="none" stroke="currentColor" stroke-width="2.5" aria-label="Loop Labs"><circle cx="16" cy="16" r="11"/><path d="M16 5v22M5 16h22"/></svg>
      </div>
      <div class="flex items-center justify-center bg-[#0a0a0a] px-6 py-8 transition-colors hover:bg-[#0c0c0c]">
        <svg class="h-6 w-auto text-white" viewBox="0 0 120 32" fill="none" stroke="currentColor" stroke-width="2.5" aria-label="Myria"><path d="M4 26V10l12 12 12-12v16"/></svg>
      </div>
      <div class="flex items-center justify-center bg-[#0a0a0a] px-6 py-8 transition-colors hover:bg-[#0c0c0c]">
        <svg class="h-6 w-auto text-white" viewBox="0 0 120 32" fill="none" stroke="currentColor" stroke-width="2.5" aria-label="Cortex"><path d="M4 16a12 12 0 0 1 24 0 12 12 0 0 1-24 0z"/><path d="M28 16h8"/></svg>
      </div>
      <div class="flex items-center justify-center bg-[#0a0a0a] px-6 py-8 transition-colors hover:bg-[#0c0c0c]">
        <svg class="h-6 w-auto text-white" viewBox="0 0 120 32" fill="none" stroke="currentColor" stroke-width="2.5" aria-label="Helix"><path d="M6 6c12 0 6 20 18 20M6 26c12 0 6-20 18-20"/></svg>
      </div>
      <div class="flex items-center justify-center bg-[#0a0a0a] px-6 py-8 transition-colors hover:bg-[#0c0c0c]">
        <svg class="h-6 w-auto text-white" viewBox="0 0 120 32" fill="currentColor" aria-label="Apex"><path d="M6 26 24 4l18 22H6z"/></svg>
      </div>
    </div>

    <!-- Pull-quote -->
    <figure class="mx-auto mt-12 max-w-3xl rounded-[14px] border border-white/10 bg-[#0a0a0a] p-6 sm:p-8">
      <blockquote>
        <p class="font-g text-[18px] leading-relaxed text-white/80 sm:text-[20px]">"We replaced three tools with Flowbase and cut our first-reply time by 71%. The team adopted it in a weekend."</p>
      </blockquote>
      <figcaption class="mt-5 flex items-center gap-3">
        <span class="flex h-10 w-10 items-center justify-center rounded-full border border-white/10 bg-white/[0.06] font-g text-[13px] font-semibold text-white">DR</span>
        <div>
          <p class="font-g text-[14px] font-medium text-white">Dana Reyes</p>
          <p class="vc-mono text-[12px] text-white/45">Head of Support · Northbeam</p>
        </div>
      </figcaption>
    </figure>
  </div>
</section>