Hero Landing — 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

<!--
Snippet Name: Hero Landing — Sharp Glassmorphism
Description: Frosted-glass marketing hero floating over an animated gradient mesh, with a gradient primary CTA, a star rating trust row, and a translucent product preview card with luminous edges.
Author: DevSnips Contributors
Usage Example: Place on a parent with a colored background (.sg-mesh) so the glass reads. Staggered entrance animation respects prefers-reduced-motion.
-->
<section class="relative w-full overflow-hidden text-white" data-hero="sg">
  <div class="pointer-events-none absolute inset-0 sg-grain" aria-hidden="true"></div>
  <div class="pointer-events-none absolute -left-24 top-1/4 h-72 w-72 rounded-full bg-fuchsia-500/30 blur-3xl" aria-hidden="true"></div>
  <div class="pointer-events-none absolute -right-24 bottom-0 h-72 w-72 rounded-full bg-cyan-400/25 blur-3xl" aria-hidden="true"></div>

  <div class="relative mx-auto grid max-w-6xl items-center gap-16 px-6 py-20 sm:py-28 lg:grid-cols-2">

    <!-- Left: copy -->
    <div class="hero-step">
      <span class="inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/10 px-3 py-1 backdrop-blur-md sg-mono text-[12px] text-white/80">
        <span class="sg-dot"></span>
        New · v2.0 release
      </span>

      <h1 class="mt-6 font-sora text-5xl font-bold leading-[1.03] tracking-tight text-white sm:text-6xl lg:text-7xl">
        Build interfaces<br>
        that feel <span class="bg-gradient-to-r from-fuchsia-400 via-pink-400 to-cyan-300 bg-clip-text text-transparent">alive.</span>
      </h1>

      <p class="mt-6 max-w-md font-sora text-[17px] font-medium leading-relaxed text-white/70">
        DevSnips turns design tokens into frosted, luminous sections. Translucent panels, animated gradients, and depth by default — copy, paste, deploy.
      </p>

      <div class="mt-8 flex flex-col gap-3 sm:flex-row">
        <a href="#" class="group inline-flex items-center justify-center gap-2 rounded-full bg-gradient-to-r from-fuchsia-500 to-indigo-500 px-6 py-3 font-sora text-sm font-semibold text-white shadow-[0_8px_30px_-8px_rgba(168,85,247,0.6)] transition-transform duration-150 hover:scale-[1.02] focus:outline-none focus-visible:ring-2 focus-visible:ring-white/70 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent">
          Start building
          <svg class="h-4 w-4 transition-transform duration-150 group-hover:translate-x-0.5" 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="inline-flex items-center justify-center gap-2 rounded-full border border-white/20 bg-white/10 px-6 py-3 font-sora text-sm font-semibold text-white backdrop-blur-md transition-colors duration-150 hover:bg-white/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/70 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent">
          <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M8 5v14l11-7z" /></svg>
          Watch demo
        </a>
      </div>

      <!-- Trust row -->
      <div class="mt-10 flex flex-wrap items-center gap-x-6 gap-y-3">
        <div class="flex items-center gap-2">
          <div class="flex" aria-hidden="true">
            <svg class="h-4 w-4 text-cyan-300" viewBox="0 0 20 20" fill="currentColor"><path d="M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L10 15l-5.2 2.6 1-5.8L1.5 7.7l5.9-.9z"/></svg>
            <svg class="h-4 w-4 text-cyan-300" viewBox="0 0 20 20" fill="currentColor"><path d="M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L10 15l-5.2 2.6 1-5.8L1.5 7.7l5.9-.9z"/></svg>
            <svg class="h-4 w-4 text-cyan-300" viewBox="0 0 20 20" fill="currentColor"><path d="M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L10 15l-5.2 2.6 1-5.8L1.5 7.7l5.9-.9z"/></svg>
            <svg class="h-4 w-4 text-cyan-300" viewBox="0 0 20 20" fill="currentColor"><path d="M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L10 15l-5.2 2.6 1-5.8L1.5 7.7l5.9-.9z"/></svg>
            <svg class="h-4 w-4 text-cyan-300" viewBox="0 0 20 20" fill="currentColor"><path d="M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L10 15l-5.2 2.6 1-5.8L1.5 7.7l5.9-.9z"/></svg>
          </div>
          <span class="font-sora text-sm text-white/70">5.0 rating</span>
        </div>
        <span class="hidden h-4 w-px bg-white/20 sm:block"></span>
        <div class="flex items-center gap-2 font-sora text-sm text-white/70">
          <span class="sg-dot"></span>
          Loved by 12k developers
        </div>
      </div>
    </div>

    <!-- Right: glass preview card -->
    <div class="relative hero-step">
      <div class="relative overflow-hidden rounded-2xl border border-white/20 bg-white/10 backdrop-blur-2xl sg-glow">
        <div class="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/50 to-transparent" aria-hidden="true"></div>

        <!-- window chrome -->
        <div class="relative flex items-center gap-2 border-b border-white/15 px-4 py-3">
          <span class="h-2.5 w-2.5 rounded-full bg-white/25"></span>
          <span class="h-2.5 w-2.5 rounded-full bg-white/25"></span>
          <span class="h-2.5 w-2.5 rounded-full bg-white/25"></span>
          <span class="sg-mono ml-2 text-[12px] text-white/60">devsnips — overview</span>
        </div>

        <!-- body -->
        <div class="relative space-y-5 p-6">
          <div class="flex items-center justify-between">
            <div>
              <p class="sg-mono text-[12px] text-white/55">Deployments</p>
              <p class="mt-1 font-sora text-3xl font-bold tracking-tight text-white">1,284</p>
            </div>
            <span class="inline-flex items-center gap-1.5 rounded-full border border-white/20 bg-white/10 px-2.5 py-1 sg-mono text-[12px] text-cyan-200 backdrop-blur-md">
              <span class="sg-dot"></span>+18%
            </span>
          </div>

          <!-- chart -->
          <div class="flex h-32 items-end gap-2 rounded-xl border border-white/10 bg-white/5 p-3">
            <div class="flex-1 rounded-md bg-white/15" style="height:45%"></div>
            <div class="flex-1 rounded-md bg-white/15" style="height:62%"></div>
            <div class="flex-1 rounded-md bg-white/15" style="height:38%"></div>
            <div class="flex-1 rounded-md bg-white/25" style="height:78%"></div>
            <div class="flex-1 rounded-md bg-gradient-to-t from-fuchsia-500 to-cyan-400" style="height:100%;box-shadow:0 0 14px rgba(168,85,247,.5)"></div>
            <div class="flex-1 rounded-md bg-white/15" style="height:54%"></div>
            <div class="flex-1 rounded-md bg-white/15" style="height:71%"></div>
          </div>

          <div class="flex items-center justify-between rounded-xl border border-white/15 bg-white/10 px-4 py-3 backdrop-blur-md">
            <span class="sg-mono text-[12px] text-white/70">prod · build passing</span>
            <span class="sg-code">deploy: 38s</span>
          </div>
        </div>
      </div>

      <!-- floating glass chip -->
      <div class="absolute -right-3 top-12 hidden rounded-xl border border-white/20 bg-white/20 px-3 py-2 backdrop-blur sg-glow sm:block">
        <p class="sg-mono text-[11px] text-white/70">latency</p>
        <p class="font-sora text-sm font-semibold text-white">42ms</p>
      </div>
    </div>
  </div>

  <style>
    .sg-grain::after {
      content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .06;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }
    [data-hero] .hero-step { opacity: 0; transform: translateY(16px); }
    [data-hero] .hero-step:nth-child(1) { animation: sg-rise 0.7s cubic-bezier(.2,.7,.2,1) 0.05s forwards; }
    [data-hero] .hero-step:nth-child(2) { animation: sg-rise 0.7s cubic-bezier(.2,.7,.2,1) 0.2s forwards; }
    [data-hero].hero-ready .hero-step { animation: none; opacity: 1; transform: none; }
    @keyframes sg-rise { to { opacity: 1; transform: none; } }
    @media (prefers-reduced-motion: reduce) {
      [data-hero] .hero-step { animation: none !important; opacity: 1 !important; transform: none !important; }
    }
  </style>

  <script>
    (function () {
      var root = document.currentScript.closest('[data-hero]');
      if (!root) return;
      var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
      if (reduce) { root.classList.add('hero-ready'); return; }
      requestAnimationFrame(function () { root.classList.add('hero-ready'); });
    })();
  </script>
</section>