1<!doctype html>
2<html lang="en">
3<head>
4<meta charset="utf-8" />
5<meta name="viewport" content="width=device-width, initial-scale=1" />
6<title>Lumina — The future of intelligent workflows</title>
7<link rel="icon" href="data:," />
8<link rel="preconnect" href="https://fonts.googleapis.com" />
9<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
11<style>
12 :root {
13 --bg: #0a0a14;
14 --bg-elev: #14141f;
15 --text: #ffffff;
16 --text-muted: rgba(255, 255, 255, 0.6);
17 --border: rgba(255, 255, 255, 0.08);
18 --purple: #8b5cf6;
19 --violet: #7c3aed;
20 --pink: #ec4899;
21 --cyan: #06b6d4;
22 }
23 * { box-sizing: border-box; }
24 html, body { margin: 0; padding: 0; }
25 body {
26 font-family: 'Inter', system-ui, sans-serif;
27 color: var(--text);
28 background: var(--bg);
29 -webkit-font-smoothing: antialiased;
30 line-height: 1.6;
31 overflow-x: hidden;
32 }
33
34 /* Nav */
35 .nav {
36 position: sticky; top: 0; z-index: 10;
37 backdrop-filter: blur(24px);
38 background: rgba(10, 10, 20, 0.6);
39 border-bottom: 1px solid var(--border);
40 }
41 .nav-inner {
42 max-width: 1180px; margin: 0 auto;
43 padding: 18px 32px;
44 display: flex; align-items: center; gap: 40px;
45 }
46 .logo {
47 font-weight: 700; font-size: 22px;
48 letter-spacing: -0.02em;
49 background: linear-gradient(135deg, var(--purple), var(--pink));
50 -webkit-background-clip: text;
51 background-clip: text;
52 color: transparent;
53 }
54 .nav-links { display: flex; gap: 28px; font-size: 14px; }
55 .nav-links a { color: var(--text-muted); text-decoration: none; }
56 .nav-cta { margin-left: auto; display: flex; gap: 16px; align-items: center; }
57 .nav-cta a { font-size: 14px; color: var(--text-muted); text-decoration: none; }
58 .pill {
59 background: linear-gradient(135deg, var(--purple), var(--pink));
60 color: #fff;
61 padding: 9px 18px; border-radius: 999px;
62 font-weight: 600; font-size: 14px;
63 box-shadow: 0 0 32px rgba(139, 92, 246, 0.5);
64 }
65
66 /* Hero */
67 .hero {
68 padding: 140px 32px 160px;
69 text-align: center;
70 position: relative;
71 overflow: hidden;
72 }
73 .hero::before {
74 content: '';
75 position: absolute;
76 top: -200px; left: 50%;
77 transform: translateX(-50%);
78 width: 800px; height: 800px;
79 background: radial-gradient(circle, rgba(139, 92, 246, 0.4) 0%, transparent 70%);
80 filter: blur(80px);
81 z-index: 0;
82 }
83 .hero::after {
84 content: '';
85 position: absolute;
86 top: 100px; right: 5%;
87 width: 400px; height: 400px;
88 background: radial-gradient(circle, rgba(6, 182, 212, 0.3) 0%, transparent 70%);
89 filter: blur(80px);
90 z-index: 0;
91 }
92 .hero > * { position: relative; z-index: 1; }
93 .eyebrow {
94 display: inline-block;
95 padding: 6px 14px;
96 border-radius: 999px;
97 background: rgba(139, 92, 246, 0.15);
98 border: 1px solid rgba(139, 92, 246, 0.3);
99 color: var(--purple);
100 text-transform: uppercase;
101 letter-spacing: 0.12em;
102 font-size: 12px;
103 font-weight: 600;
104 margin-bottom: 32px;
105 }
106 .h1 {
107 font-weight: 800;
108 font-size: clamp(48px, 7vw, 88px);
109 line-height: 1.05;
110 letter-spacing: -0.03em;
111 max-width: 920px;
112 margin: 0 auto 28px;
113 background: linear-gradient(135deg, #ffffff 0%, #c4b5fd 50%, var(--pink) 100%);
114 -webkit-background-clip: text;
115 background-clip: text;
116 color: transparent;
117 }
118 .lede {
119 font-size: 20px;
120 color: var(--text-muted);
121 max-width: 620px;
122 margin: 0 auto 44px;
123 }
124 .ctas { display: flex; gap: 16px; justify-content: center; margin-bottom: 48px; }
125 .btn {
126 padding: 14px 32px;
127 border-radius: 12px;
128 font-weight: 600;
129 font-size: 15px;
130 text-decoration: none;
131 display: inline-flex; align-items: center; gap: 8px;
132 transition: all 0.2s ease;
133 border: 0;
134 }
135 .btn-primary {
136 background: linear-gradient(135deg, var(--purple), var(--pink));
137 color: #fff;
138 box-shadow: 0 0 40px rgba(139, 92, 246, 0.5), 0 4px 16px rgba(139, 92, 246, 0.3);
139 }
140 .btn-primary:hover {
141 transform: translateY(-2px);
142 box-shadow: 0 0 60px rgba(139, 92, 246, 0.7);
143 }
144 .btn-ghost {
145 color: #fff;
146 border: 1px solid var(--border);
147 background: rgba(255, 255, 255, 0.04);
148 backdrop-filter: blur(12px);
149 }
150 .trust { font-size: 13px; color: var(--text-muted); }
151 .trust strong { color: #fff; font-weight: 600; }
152
153 /* Logo strip */
154 .logos {
155 padding: 56px 32px;
156 border-top: 1px solid var(--border);
157 border-bottom: 1px solid var(--border);
158 }
159 .logos-inner {
160 max-width: 1100px; margin: 0 auto;
161 display: flex; justify-content: space-between; align-items: center;
162 flex-wrap: wrap; gap: 32px;
163 font-weight: 600; font-size: 18px; color: var(--text-muted);
164 opacity: 0.6;
165 }
166
167 /* Features */
168 .features {
169 padding: 120px 32px;
170 max-width: 1180px;
171 margin: 0 auto;
172 position: relative;
173 }
174 .features-head {
175 text-align: center;
176 max-width: 720px;
177 margin: 0 auto 80px;
178 }
179 .features-head h2 {
180 font-weight: 800;
181 font-size: clamp(36px, 4.5vw, 52px);
182 line-height: 1.1;
183 letter-spacing: -0.03em;
184 margin: 0 0 20px;
185 background: linear-gradient(135deg, #fff, #c4b5fd);
186 -webkit-background-clip: text;
187 background-clip: text;
188 color: transparent;
189 }
190 .features-head p { font-size: 18px; color: var(--text-muted); margin: 0; }
191 .grid {
192 display: grid;
193 grid-template-columns: repeat(3, 1fr);
194 gap: 24px;
195 }
196 .card {
197 background: rgba(255, 255, 255, 0.03);
198 backdrop-filter: blur(24px);
199 border: 1px solid var(--border);
200 border-radius: 24px;
201 padding: 40px 32px;
202 text-align: center;
203 transition: all 0.3s ease;
204 }
205 .card:hover {
206 border-color: rgba(139, 92, 246, 0.3);
207 background: rgba(139, 92, 246, 0.04);
208 transform: translateY(-4px);
209 }
210 .icon {
211 width: 56px; height: 56px;
212 border-radius: 16px;
213 background: linear-gradient(135deg, var(--purple), var(--pink));
214 display: inline-flex; align-items: center; justify-content: center;
215 font-size: 28px;
216 margin-bottom: 24px;
217 box-shadow: 0 0 32px rgba(139, 92, 246, 0.4);
218 }
219 .card h3 {
220 font-weight: 700;
221 font-size: 22px;
222 margin: 0 0 12px;
223 letter-spacing: -0.02em;
224 color: #fff;
225 }
226 .card p {
227 font-size: 15px;
228 color: var(--text-muted);
229 margin: 0;
230 }
231
232 /* CTA */
233 .cta-section {
234 padding: 120px 32px;
235 text-align: center;
236 position: relative;
237 overflow: hidden;
238 }
239 .cta-section::before {
240 content: '';
241 position: absolute;
242 inset: 0;
243 background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.2) 0%, transparent 70%);
244 }
245 .cta-section > * { position: relative; }
246 .cta-section h2 {
247 font-weight: 800;
248 font-size: clamp(36px, 5vw, 60px);
249 line-height: 1.1;
250 letter-spacing: -0.03em;
251 margin: 0 0 20px;
252 max-width: 720px;
253 margin-left: auto; margin-right: auto;
254 background: linear-gradient(135deg, #fff, #c4b5fd, var(--pink));
255 -webkit-background-clip: text;
256 background-clip: text;
257 color: transparent;
258 }
259 .cta-section p {
260 font-size: 18px;
261 color: var(--text-muted);
262 margin: 0 auto 40px;
263 max-width: 540px;
264 }
265
266 /* Footer */
267 .footer {
268 padding: 40px 32px;
269 text-align: center;
270 font-size: 13px;
271 color: var(--text-muted);
272 border-top: 1px solid var(--border);
273 }
274</style>
275</head>
276<body>
277 <nav class="nav">
278 <div class="nav-inner">
279 <div class="logo">Lumina ✨</div>
280 <div class="nav-links">
281 <a href="#">Product</a>
282 <a href="#">Solutions</a>
283 <a href="#">Pricing</a>
284 <a href="#">Customers</a>
285 <a href="#">Docs</a>
286 </div>
287 <div class="nav-cta">
288 <a href="#">Sign in</a>
289 <a href="#" class="pill">Get started →</a>
290 </div>
291 </div>
292 </nav>
293
294 <section class="hero">
295 <div class="eyebrow">🚀 Powered by AI</div>
296 <h1 class="h1">Build faster with intelligent workflows</h1>
297 <p class="lede">The all-in-one platform that helps modern teams ship better products in record time. Powered by AI, designed for humans.</p>
298 <div class="ctas">
299 <a href="#" class="btn btn-primary">Join the waitlist →</a>
300 <a href="#" class="btn btn-ghost">Watch demo</a>
301 </div>
302 <div class="trust">Backed by <strong>top-tier investors</strong></div>
303 </section>
304
305 <section class="logos">
306 <div class="logos-inner">
307 <span>Northwind</span>
308 <span>Halcyon</span>
309 <span>Meridian</span>
310 <span>Fieldnote</span>
311 <span>Atlas & Co.</span>
312 <span>Verity</span>
313 </div>
314 </section>
315
316 <section class="features">
317 <div class="features-head">
318 <h2>Everything you need to ship faster</h2>
319 <p>One platform. Endless possibilities. Built for the future.</p>
320 </div>
321 <div class="grid">
322 <div class="card">
323 <div class="icon">⚡</div>
324 <h3>Lightning Fast</h3>
325 <p>Move from idea to production in minutes, not months. Our AI handles the heavy lifting so you can focus on what matters.</p>
326 </div>
327 <div class="card">
328 <div class="icon">🔒</div>
329 <h3>Enterprise Secure</h3>
330 <p>SOC 2 compliant infrastructure with end-to-end encryption. Your data is safe, always.</p>
331 </div>
332 <div class="card">
333 <div class="icon">📈</div>
334 <h3>Built to Scale</h3>
335 <p>From your first prototype to millions of users, Lumina grows with your team without breaking a sweat.</p>
336 </div>
337 </div>
338 </section>
339
340 <section class="cta-section">
341 <h2>Ready to transform how your team builds?</h2>
342 <p>Join thousands of teams already shipping faster with Lumina.</p>
343 <a href="#" class="btn btn-primary">Get early access →</a>
344 </section>
345
346 <footer class="footer">
347 © 2022 Lumina, Inc. Powered by AI in San Francisco.
348 </footer>
349</body>
350</html>