Bento Feature Showcase — 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
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

<!--
Snippet Name: Bento Feature Showcase — Sharp Glassmorphism
Description: Frosted-glass asymmetric bento grid with a hero waveform tile, integrations, command palette, security, and global edge tiles.
Author: DevSnips Contributors
Usage Example: Drop on a colored/dark page. 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-bento="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> Product surface
      </span>
      <h2 class="font-sora mt-5 text-[36px] font-bold leading-[1.05] tracking-tight sm:text-[48px]">
        One platform.<br><span class="bg-gradient-to-r from-fuchsia-300 to-cyan-200 bg-clip-text text-transparent">Every workflow.</span>
      </h2>
    </div>

    <!-- Bento grid -->
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 lg:grid-rows-[auto_auto]">

      <!-- Hero waveform tile (col-span-2 row-span-2) -->
      <article class="relative overflow-hidden rounded-2xl border border-white/20 bg-white/10 p-6 backdrop-blur-2xl sm: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>
        <div class="flex items-center justify-between">
          <span class="sg-mono inline-flex items-center gap-2 rounded-lg border border-white/15 bg-white/10 px-2.5 py-1 text-[11px] text-white/80">
            <span class="sg-dot"></span> Realtime ingest
          </span>
          <span class="sg-mono text-[11px] text-white/50">p99 · 42ms</span>
        </div>
        <h3 class="font-sora mt-5 text-2xl font-bold sm:text-3xl">Process billions of events without a data team.</h3>
        <p class="font-sora mt-3 max-w-md text-[14px] leading-relaxed text-white/70">Stream product, billing, and support events into one schema-free lake. Query in plain English, pipe results to your stack.</p>

        <!-- animated waveform -->
        <div class="mt-6 flex h-24 items-center justify-center gap-1.5">
          <span class="w-1.5 rounded-full bg-gradient-to-t from-fuchsia-500 to-cyan-300" style="height:30%"></span>
          <span class="w-1.5 rounded-full bg-gradient-to-t from-fuchsia-500 to-cyan-300" style="height:70%"></span>
          <span class="w-1.5 rounded-full bg-gradient-to-t from-fuchsia-500 to-cyan-300" style="height:45%"></span>
          <span class="w-1.5 rounded-full bg-gradient-to-t from-fuchsia-500 to-cyan-300" style="height:90%"></span>
          <span class="w-1.5 rounded-full bg-gradient-to-t from-fuchsia-500 to-cyan-300" style="height:55%"></span>
          <span class="w-1.5 rounded-full bg-gradient-to-t from-fuchsia-500 to-cyan-300" style="height:35%"></span>
          <span class="w-1.5 rounded-full bg-gradient-to-t from-fuchsia-500 to-cyan-300" style="height:80%"></span>
          <span class="w-1.5 rounded-full bg-gradient-to-t from-fuchsia-500 to-cyan-300" style="height:60%"></span>
          <span class="w-1.5 rounded-full bg-gradient-to-t from-fuchsia-500 to-cyan-300" style="height:40%"></span>
          <span class="w-1.5 rounded-full bg-gradient-to-t from-fuchsia-500 to-cyan-300" style="height:95%"></span>
          <span class="w-1.5 rounded-full bg-gradient-to-t from-fuchsia-500 to-cyan-300" style="height:50%"></span>
          <span class="w-1.5 rounded-full bg-gradient-to-t from-fuchsia-500 to-cyan-300" style="height:75%"></span>
          <span class="w-1.5 rounded-full bg-gradient-to-t from-fuchsia-500 to-cyan-300" style="height:30%"></span>
          <span class="w-1.5 rounded-full bg-gradient-to-t from-fuchsia-500 to-cyan-300" style="height:65%"></span>
          <span class="w-1.5 rounded-full bg-gradient-to-t from-fuchsia-500 to-cyan-300" style="height:45%"></span>
        </div>
        <div class="sg-mono mt-6 flex flex-wrap items-center gap-x-4 gap-y-2 text-[11px] text-white/60">
          <span>3.4B events / day</span><span class="text-white/30">·</span><span>42 sources</span><span class="text-white/30">·</span><span>zero-ETL</span>
        </div>
      </article>

      <!-- Integrations tile -->
      <article class="group rounded-2xl border border-white/20 bg-white/10 p-6 backdrop-blur-2xl transition-transform hover:-translate-y-1">
        <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-gradient-to-br from-fuchsia-500 to-indigo-500 shadow-[0_4px_20px_-4px_rgba(168,85,247,0.6)]">
          <svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.5 1.5"/><path d="M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.5-1.5"/></svg>
        </div>
        <h3 class="font-sora mt-4 text-lg font-bold">120+ native integrations</h3>
        <p class="font-sora mt-2 text-[13px] leading-relaxed text-white/65">Slack, Linear, Stripe, Segment, and a typed API for the rest.</p>
        <div class="mt-4 flex -space-x-2">
          <span class="h-8 w-8 rounded-lg border border-white/20 bg-white/10 backdrop-blur-md"></span>
          <span class="h-8 w-8 rounded-lg border border-white/20 bg-white/10 backdrop-blur-md"></span>
          <span class="h-8 w-8 rounded-lg border border-white/20 bg-white/10 backdrop-blur-md"></span>
          <span class="h-8 w-8 rounded-lg border border-white/20 bg-white/15 backdrop-blur-md"></span>
        </div>
      </article>

      <!-- Command palette tile -->
      <article class="group rounded-2xl border border-white/20 bg-white/10 p-6 backdrop-blur-2xl transition-transform hover:-translate-y-1">
        <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-gradient-to-br from-cyan-400 to-indigo-500 shadow-[0_4px_20px_-4px_rgba(34,211,238,0.6)]">
          <svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 7h16M4 12h10M4 17h16"/></svg>
        </div>
        <h3 class="font-sora mt-4 text-lg font-bold">Command palette</h3>
        <p class="font-sora mt-2 text-[13px] leading-relaxed text-white/65">Jump to anything, run any action. ⌘K everywhere.</p>
        <div class="mt-4 flex items-center gap-1.5 rounded-lg border border-white/15 bg-white/10 px-2.5 py-1.5">
          <span class="sg-mono text-[11px] text-white/50">⌘</span>
          <span class="sg-mono text-[11px] text-white/50">K</span>
          <span class="sg-mono ml-2 text-[11px] text-white/40">"escalate to on-call"</span>
        </div>
      </article>

      <!-- Security tile -->
      <article class="group rounded-2xl border border-white/20 bg-white/10 p-6 backdrop-blur-2xl transition-transform hover:-translate-y-1">
        <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-500 to-fuchsia-500 shadow-[0_4px_20px_-4px_rgba(99,102,241,0.6)]">
          <svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
        </div>
        <h3 class="font-sora mt-4 text-lg font-bold">SOC 2 + GDPR</h3>
        <p class="font-sora mt-2 text-[13px] leading-relaxed text-white/65">Region-pinned data, encryption at rest and in transit.</p>
        <div class="mt-4 flex gap-1.5">
          <span class="sg-mono rounded-md border border-white/15 bg-white/10 px-2 py-0.5 text-[10px] text-white/70">SOC 2</span>
          <span class="sg-mono rounded-md border border-white/15 bg-white/10 px-2 py-0.5 text-[10px] text-white/70">GDPR</span>
          <span class="sg-mono rounded-md border border-white/15 bg-white/10 px-2 py-0.5 text-[10px] text-white/70">HIPAA</span>
        </div>
      </article>

      <!-- Global edge tile -->
      <article class="group rounded-2xl border border-white/20 bg-white/10 p-6 backdrop-blur-2xl transition-transform hover:-translate-y-1 sm:col-span-2 lg:col-span-1">
        <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-gradient-to-br from-fuchsia-500 to-cyan-400 shadow-[0_4px_20px_-4px_rgba(236,72,153,0.6)]">
          <svg class="h-5 w-5 text-white" 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 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20"/></svg>
        </div>
        <h3 class="font-sora mt-4 text-lg font-bold">Global edge, 38 regions</h3>
        <p class="font-sora mt-2 text-[13px] leading-relaxed text-white/65">Sub-50ms reads worldwide with automatic geo-routing.</p>
        <div class="mt-4 flex items-center gap-2">
          <span class="sg-dot"></span>
          <span class="sg-mono text-[11px] text-white/60">38 PoPs · 5 continents</span>
        </div>
      </article>
    </div>
  </div>
</section>