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

<!--
Snippet Name: Hero Landing — Vercel
Description: Dark monochrome marketing hero with hairline borders, a teal glowing accent, two CTAs, a star rating trust row, and a floating glass-dark product preview card.
Author: DevSnips Contributors
Usage Example: Drop into any landing-page shell above the fold. Staggered fade-up entrance respects prefers-reduced-motion.
-->
<section class="relative w-full overflow-hidden bg-[#050505] text-white" data-hero="vc">
  <div class="vc-grid-bg absolute inset-0" aria-hidden="true"></div>
  <div class="pointer-events-none absolute inset-x-0 top-0 h-[420px] [background:radial-gradient(60%_60%_at_50%_0%,rgba(255,255,255,0.10),transparent_70%)]" 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/10 bg-white/[0.04] px-3 py-1 vc-mono text-[12px] text-white/70">
        <span class="vc-dot"></span>
        New · v2.0 release
      </span>

      <h1 class="mt-6 font-g text-5xl font-semibold leading-[1.02] tracking-tight text-white sm:text-6xl lg:text-7xl">
        The component<br>
        library for<br>
        <span class="text-white/55">developers.</span>
      </h1>

      <p class="mt-6 max-w-md font-g text-[17px] font-light leading-relaxed text-white/55">
        Copy-paste sections engineered around shared design tokens. Dark, glass, or brutalist — ship a cohesive product surface in minutes.
      </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-lg bg-white px-5 py-2.5 font-g text-sm font-medium text-black transition-colors duration-150 hover:bg-white/90 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-[#050505]">
          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-lg border border-white/15 bg-transparent px-5 py-2.5 font-g text-sm font-medium text-white transition-colors duration-150 hover:border-white/30 hover:bg-white/[0.06] focus:outline-none focus-visible:ring-2 focus-visible:ring-white/40 focus-visible:ring-offset-2 focus-visible:ring-offset-[#050505]">
          <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: rating + count -->
      <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-[#50e3c2]" 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-[#50e3c2]" 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-[#50e3c2]" 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-[#50e3c2]" 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-[#50e3c2]" 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-g text-sm text-white/55">5.0 on GitHub</span>
        </div>
        <span class="hidden h-4 w-px bg-white/10 sm:block"></span>
        <div class="flex items-center gap-2 font-g text-sm text-white/55">
          <span class="vc-dot"></span>
          Loved by 12k developers
        </div>
      </div>
    </div>

    <!-- Right: floating preview card -->
    <div class="relative hero-step">
      <div class="relative overflow-hidden rounded-[14px] border border-white/10 bg-[#0a0a0a] shadow-[0_0_0_1px_rgba(255,255,255,0.02),0_20px_60px_-20px_rgba(0,0,0,0.9)]">
        <div class="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/30 to-transparent" aria-hidden="true"></div>
        <div class="pointer-events-none absolute inset-x-0 top-0 h-40 [background:radial-gradient(60%_60%_at_50%_0%,rgba(255,255,255,0.08),transparent_70%)]" aria-hidden="true"></div>

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

        <!-- body -->
        <div class="relative space-y-5 p-6">
          <div class="flex items-center justify-between">
            <div>
              <p class="vc-mono text-[12px] text-white/35">Deployments</p>
              <p class="mt-1 font-g text-3xl font-semibold tracking-tight text-white">1,284</p>
            </div>
            <span class="inline-flex items-center gap-1.5 rounded-full border border-white/10 bg-white/[0.04] px-2.5 py-1 vc-mono text-[12px] text-[#50e3c2]">
              <span class="vc-dot"></span>+18%
            </span>
          </div>

          <!-- chart -->
          <div class="flex h-32 items-end gap-2">
            <div class="flex-1 rounded-sm bg-white/10" style="height:45%"></div>
            <div class="flex-1 rounded-sm bg-white/10" style="height:62%"></div>
            <div class="flex-1 rounded-sm bg-white/10" style="height:38%"></div>
            <div class="flex-1 rounded-sm bg-white/15" style="height:78%"></div>
            <div class="flex-1 rounded-sm bg-[#50e3c2]" style="height:100%;box-shadow:0 0 12px rgba(80,227,194,.5)"></div>
            <div class="flex-1 rounded-sm bg-white/10" style="height:54%"></div>
            <div class="flex-1 rounded-sm bg-white/10" style="height:71%"></div>
          </div>

          <div class="flex items-center justify-between rounded-lg border border-white/[0.07] bg-white/[0.02] px-4 py-3">
            <span class="vc-mono text-[12px] text-white/55">prod · build passing</span>
            <span class="vc-code">deploy: 38s</span>
          </div>
        </div>
      </div>

      <!-- floating chip -->
      <div class="absolute -right-3 top-10 hidden rounded-lg border border-white/10 bg-[#0a0a0a]/80 px-3 py-2 backdrop-blur-md shadow-[0_10px_30px_-10px_rgba(0,0,0,0.9)] sm:block">
        <p class="vc-mono text-[11px] text-white/35">latency</p>
        <p class="font-g text-sm font-medium text-white">42ms</p>
      </div>
    </div>
  </div>

  <style>
    .vc-grid-bg {
      background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: radial-gradient(80% 60% at 50% 0%, #000 40%, transparent 100%);
    }
    [data-hero] .hero-step { opacity: 0; transform: translateY(16px); }
    [data-hero] .hero-step:nth-child(1) { animation: vc-rise 0.7s cubic-bezier(.2,.7,.2,1) 0.05s forwards; }
    [data-hero] .hero-step:nth-child(2) { animation: vc-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 vc-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>