Testimonial Grid — Sharp Glassmorphism

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

<!--
Snippet Name: Testimonial Grid — Sharp Glassmorphism
Description: Frosted-glass asymmetric testimonial grid with a featured quote, medium tiles, and compact stat-quote tiles.
Author: DevSnips Contributors
Usage Example: Drop into a social-proof section. Glass needs a colored backdrop (the .sg-mesh body provides it in preview).
-->
<section class="relative w-full px-6 py-16 sm:py-24" data-testimonials="sg">

  <div class="mx-auto max-w-6xl">
    <div class="mb-10 max-w-2xl">
      <span class="sg-mono inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/10 px-3 py-1 text-[12px] text-white/80 backdrop-blur-md"><span class="sg-dot"></span> Loved by teams</span>
      <h2 class="font-sora mt-5 text-[36px] font-bold leading-[1.05] tracking-tight sm:text-[48px]">Don't take our word for it.<br><span class="bg-gradient-to-r from-fuchsia-300 to-cyan-200 bg-clip-text text-transparent">Take theirs.</span></h2>
    </div>

    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
      <!-- Featured (large) -->
      <article class="relative overflow-hidden rounded-2xl border border-white/20 bg-white/10 p-7 backdrop-blur-2xl md:col-span-2 lg:row-span-2">
        <div class="absolute left-0 right-0 top-0 h-px bg-gradient-to-r from-transparent via-white/50 to-transparent" aria-hidden="true"></div>
        <span class="font-sora select-none text-6xl font-bold leading-none text-transparent [-webkit-text-stroke:1px_rgba(236,72,153,0.6)]" aria-hidden="true">"</span>
        <blockquote class="font-sora -mt-4 text-[20px] font-medium leading-relaxed text-white sm:text-[22px]">
          Flowbase collapsed our entire support stack into one tool. We retired Zendesk, Zapier, and a homegrown triage cron job in a single sprint. First-reply time dropped from 9 hours to under 2 minutes.
        </blockquote>
        <figcaption class="mt-6 flex items-center gap-4">
          <span class="flex h-12 w-12 items-center justify-center rounded-xl border border-white/20 bg-gradient-to-br from-fuchsia-500/40 to-indigo-500/40 font-sora text-base font-bold text-white backdrop-blur-md">MO</span>
          <div>
            <p class="font-sora text-[15px] font-semibold text-white">Maya Okafor</p>
            <p class="sg-mono text-[12px] text-white/55">VP Customer · Loop Labs</p>
          </div>
          <span class="sg-mono ml-auto hidden rounded-lg border border-white/15 bg-white/10 px-2.5 py-1 text-[11px] text-[#6ee7ff] sm:block">▼ 71% reply time</span>
        </figcaption>
      </article>

      <!-- Medium tile 1 -->
      <article class="rounded-2xl border border-white/20 bg-white/10 p-6 backdrop-blur-2xl transition-transform hover:-translate-y-1">
        <blockquote class="font-sora text-[15px] leading-relaxed text-white/90">"The AI triage alone paid for the year. It tags and routes before we finish reading the subject line."</blockquote>
        <figcaption class="mt-5 flex items-center gap-3">
          <span class="flex h-10 w-10 items-center justify-center rounded-xl border border-white/20 bg-white/10 font-sora text-[13px] font-bold backdrop-blur-md">JT</span>
          <div>
            <p class="font-sora text-[13px] font-semibold text-white">Jonas Tietz</p>
            <p class="sg-mono text-[11px] text-white/50">Lead Engineer · Northbeam</p>
          </div>
        </figcaption>
      </article>

      <!-- Medium tile 2 -->
      <article class="rounded-2xl border border-white/20 bg-white/10 p-6 backdrop-blur-2xl transition-transform hover:-translate-y-1">
        <blockquote class="font-sora text-[15px] leading-relaxed text-white/90">"Our CFO signed off in one call. Transparent metered pricing, audit logs, and a 99.99% SLA on paper."</blockquote>
        <figcaption class="mt-5 flex items-center gap-3">
          <span class="flex h-10 w-10 items-center justify-center rounded-xl border border-white/20 bg-white/10 font-sora text-[13px] font-bold backdrop-blur-md">RA</span>
          <div>
            <p class="font-sora text-[13px] font-semibold text-white">Rina Adesanya</p>
            <p class="sg-mono text-[11px] text-white/50">Ops Director · Myria Co.</p>
          </div>
        </figcaption>
      </article>

      <!-- Compact stat tile 1 -->
      <article class="rounded-2xl border border-white/20 bg-white/10 p-6 backdrop-blur-2xl transition-transform hover:-translate-y-1 md:col-span-2 lg:col-span-1">
        <p class="font-sora text-3xl font-bold text-[#6ee7ff]">2 min</p>
        <blockquote class="font-sora mt-2 text-[14px] leading-relaxed text-white/85">"Median first reply — down from 9h. Our customers actually thank us now."</blockquote>
        <p class="sg-mono mt-3 text-[11px] text-white/50">— Support Lead, Pulumi</p>
      </article>

      <!-- Compact stat tile 2 -->
      <article class="rounded-2xl border border-white/20 bg-white/10 p-6 backdrop-blur-2xl transition-transform hover:-translate-y-1 md:col-span-2 lg:col-span-1">
        <p class="font-sora text-3xl font-bold text-[#e879f9]">3 → 1</p>
        <blockquote class="font-sora mt-2 text-[14px] leading-relaxed text-white/85">"Three tools consolidated into Flowbase. Onboarded 40 agents in a weekend."</blockquote>
        <p class="sg-mono mt-3 text-[11px] text-white/50">— Head of Ops, Cortex</p>
      </article>
    </div>
  </div>
</section>