Dashboard Preview Hero — 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
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: Dashboard Preview Hero — Sharp Glassmorphism
Description: Frosted-glass dashboard preview hero over an animated gradient mesh with KPI cards, a sparkline chart, an activity feed, and floating stat bubbles.
Author: DevSnips Contributors
Usage Example: Drop on a dark/colored page. The glass needs a colored backdrop behind it (the .sg-mesh body provides it in preview).
-->
<section class="relative w-full px-6 py-16 sm:py-24" data-hero="sg">

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

    <!-- Centered headline -->
    <div class="relative mx-auto max-w-3xl text-center">
      <div class="absolute left-1/2 top-0 h-px w-2/3 -translate-x-1/2 bg-gradient-to-r from-transparent via-white/50 to-transparent" aria-hidden="true"></div>
      <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> Analytics suite
      </span>
      <h1 class="font-sora mt-6 text-[40px] font-bold leading-[1.05] tracking-tight sm:text-[60px]">
        See every metric,<br>
        <span class="bg-gradient-to-r from-fuchsia-300 via-white to-cyan-200 bg-clip-text text-transparent">in one luminous view.</span>
      </h1>
      <p class="font-sora mx-auto mt-6 max-w-xl text-[16px] leading-relaxed text-white/70 sm:text-[17px]">
        Realtime dashboards that turn raw product events into decisions. No SQL, no exports,
        no waiting on the data team.
      </p>
      <div class="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
        <a href="#" class="font-sora inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-fuchsia-500 to-indigo-500 px-6 py-3 text-[14px] font-semibold text-white shadow-[0_8px_30px_-6px_rgba(168,85,247,0.6)] transition-transform hover:-translate-y-0.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-200/60">
          Start building free
          <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-sora inline-flex items-center justify-center gap-2 rounded-xl border border-white/20 bg-white/10 px-6 py-3 text-[14px] text-white backdrop-blur-md transition-colors hover:bg-white/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/40">
          <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>
          Live demo
        </a>
      </div>
    </div>

    <!-- Dashboard mock -->
    <div class="relative mt-16">
      <div class="overflow-hidden rounded-2xl border border-white/20 bg-white/10 backdrop-blur-2xl">
        <!-- top bar -->
        <div class="flex items-center justify-between border-b border-white/15 px-5 py-3.5">
          <div class="flex items-center gap-2">
            <span class="h-2.5 w-2.5 rounded-full bg-white/30"></span>
            <span class="h-2.5 w-2.5 rounded-full bg-white/30"></span>
            <span class="h-2.5 w-2.5 rounded-full bg-white/30"></span>
          </div>
          <p class="sg-mono rounded-lg border border-white/15 bg-white/10 px-3 py-1 text-[11px] text-white/70">flowbase / analytics</p>
          <span class="sg-dot"></span>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-[1fr_280px]">
          <!-- main panel -->
          <div class="p-5 sm:p-6">
            <div class="flex flex-wrap items-end justify-between gap-3">
              <div>
                <p class="sg-mono text-[11px] uppercase tracking-wider text-white/60">Revenue · last 30d</p>
                <p class="font-sora mt-1 text-3xl font-bold">$148,920</p>
              </div>
              <span class="sg-mono rounded-lg border border-white/20 bg-white/10 px-2.5 py-1 text-[11px] font-semibold text-[#6ee7ff]">▲ 18.4%</span>
            </div>

            <!-- sparkline chart -->
            <div class="mt-5 h-40 w-full">
              <svg viewBox="0 0 600 160" class="h-full w-full" preserveAspectRatio="none" aria-hidden="true">
                <defs>
                  <linearGradient id="sg-fill" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stop-color="rgba(110,231,255,0.45)"/>
                    <stop offset="100%" stop-color="rgba(110,231,255,0)"/>
                  </linearGradient>
                  <linearGradient id="sg-stroke" x1="0" y1="0" x2="1" y2="0">
                    <stop offset="0%" stop-color="#e879f9"/>
                    <stop offset="100%" stop-color="#6ee7ff"/>
                  </linearGradient>
                </defs>
                <path d="M0,120 L60,110 L120,128 L180,90 L240,100 L300,70 L360,82 L420,48 L480,60 L540,30 L600,44 L600,160 L0,160 Z" fill="url(#sg-fill)"/>
                <path d="M0,120 L60,110 L120,128 L180,90 L240,100 L300,70 L360,82 L420,48 L480,60 L540,30 L600,44" fill="none" stroke="url(#sg-stroke)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>

            <!-- KPI cards -->
            <div class="mt-6 grid grid-cols-1 gap-3 sm:grid-cols-3">
              <div class="rounded-xl border border-white/15 bg-white/10 p-4 backdrop-blur-md transition-transform hover:-translate-y-1">
                <p class="sg-mono text-[11px] uppercase tracking-wider text-white/60">Active users</p>
                <p class="font-sora mt-1 text-2xl font-bold">42,318</p>
                <p class="sg-mono mt-1 text-[11px] text-[#6ee7ff]">▲ 6.1%</p>
              </div>
              <div class="rounded-xl border border-white/15 bg-white/10 p-4 backdrop-blur-md transition-transform hover:-translate-y-1">
                <p class="sg-mono text-[11px] uppercase tracking-wider text-white/60">Churn</p>
                <p class="font-sora mt-1 text-2xl font-bold">1.2%</p>
                <p class="sg-mono mt-1 text-[11px] text-[#fda4af]">▼ 0.3%</p>
              </div>
              <div class="rounded-xl border border-white/15 bg-white/10 p-4 backdrop-blur-md transition-transform hover:-translate-y-1">
                <p class="sg-mono text-[11px] uppercase tracking-wider text-white/60">NPS</p>
                <p class="font-sora mt-1 text-2xl font-bold">64</p>
                <p class="sg-mono mt-1 text-[11px] text-[#6ee7ff]">▲ 4</p>
              </div>
            </div>
          </div>

          <!-- activity feed -->
          <aside class="border-t border-white/15 p-5 lg:border-l lg:border-t-0">
            <p class="sg-mono text-[11px] uppercase tracking-wider text-white/60">Live activity</p>
            <ul class="mt-4 space-y-4" role="list">
              <li class="flex items-start gap-3">
                <span class="mt-1 h-2 w-2 shrink-0 rounded-full bg-[#6ee7ff] shadow-[0_0_8px_#6ee7ff]"></span>
                <div>
                  <p class="sg-mono text-[12px] text-white/90">Northbeam upgraded to Scale</p>
                  <p class="sg-mono text-[11px] text-white/45">just now</p>
                </div>
              </li>
              <li class="flex items-start gap-3">
                <span class="mt-1 h-2 w-2 shrink-0 rounded-full bg-[#e879f9] shadow-[0_0_8px_#e879f9]"></span>
                <div>
                  <p class="sg-mono text-[12px] text-white/90">New cohort "EU startups" created</p>
                  <p class="sg-mono text-[11px] text-white/45">2m ago</p>
                </div>
              </li>
              <li class="flex items-start gap-3">
                <span class="mt-1 h-2 w-2 shrink-0 rounded-full bg-[#a5b4fc]"></span>
                <div>
                  <p class="sg-mono text-[12px] text-white/90">Alert resolved: API p99 latency</p>
                  <p class="sg-mono text-[11px] text-white/45">11m ago</p>
                </div>
              </li>
              <li class="flex items-start gap-3">
                <span class="mt-1 h-2 w-2 shrink-0 rounded-full bg-[#6ee7ff]"></span>
                <div>
                  <p class="sg-mono text-[12px] text-white/90">Loop Labs hit 1M events</p>
                  <p class="sg-mono text-[11px] text-white/45">28m ago</p>
                </div>
              </li>
            </ul>
          </aside>
        </div>
      </div>

      <!-- floating glass bubbles -->
      <div class="absolute -left-4 -top-4 hidden rounded-2xl border border-white/20 bg-white/10 px-4 py-3 backdrop-blur-2xl sm:block">
        <p class="sg-mono text-[10px] uppercase tracking-wider text-white/60">Events / sec</p>
        <p class="font-sora mt-0.5 text-xl font-bold text-white">3,402</p>
      </div>
      <div class="sg-glow absolute -bottom-5 -right-3 hidden rounded-2xl border border-white/20 bg-white/10 px-4 py-3 backdrop-blur-2xl sm:block">
        <p class="sg-mono text-[10px] uppercase tracking-wider text-white/60">Uptime</p>
        <p class="font-sora mt-0.5 text-xl font-bold text-[#6ee7ff]">99.99%</p>
      </div>
    </div>
  </div>
</section>