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 — Intelligent workflows for modern product teams</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=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
11<style>
12 :root {
13 --cream: #faf6ef;
14 --cream-warm: #f4ebdc;
15 --peach: #f6dfcb;
16 --ink: #1f1a15;
17 --soft: #5b4f44;
18 --line: #e6dccb;
19 --accent: #c8552b;
20 --accent-deep: #a8431f;
21 }
22 * { box-sizing: border-box; }
23 html, body { margin: 0; padding: 0; }
24 body {
25 font-family: 'Inter', system-ui, sans-serif;
26 color: var(--ink);
27 background: var(--cream);
28 -webkit-font-smoothing: antialiased;
29 line-height: 1.55;
30 }
31 .serif { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; }
32
33 /* Nav */
34 .nav {
35 position: sticky; top: 0; z-index: 10;
36 backdrop-filter: blur(10px);
37 background: rgba(250, 246, 239, 0.85);
38 border-bottom: 1px solid var(--line);
39 }
40 .nav-inner {
41 max-width: 1180px; margin: 0 auto;
42 padding: 18px 32px;
43 display: flex; align-items: center; gap: 40px;
44 }
45 .logo {
46 font-family: 'Fraunces', Georgia, serif;
47 font-weight: 600; font-size: 22px;
48 letter-spacing: -0.01em;
49 }
50 .logo-dot {
51 display: inline-block; width: 8px; height: 8px;
52 background: var(--accent); border-radius: 50%;
53 margin-right: 8px; vertical-align: middle;
54 }
55 .nav-links { display: flex; gap: 28px; font-size: 14px; }
56 .nav-links a { color: var(--soft); text-decoration: none; }
57 .nav-cta { margin-left: auto; display: flex; gap: 16px; align-items: center; }
58 .nav-cta a:not(.pill) { font-size: 14px; color: var(--soft); text-decoration: none; }
59 .pill {
60 background: var(--ink); color: var(--cream);
61 padding: 9px 18px; border-radius: 999px;
62 font-weight: 500; font-size: 14px;
63 }
64
65 /* Hero */
66 .hero {
67 background: linear-gradient(180deg, var(--cream) 0%, var(--peach) 100%);
68 padding: 120px 32px 140px;
69 text-align: center;
70 position: relative;
71 overflow: hidden;
72 }
73 .eyebrow {
74 text-transform: uppercase;
75 letter-spacing: 0.16em;
76 font-size: 12px;
77 font-weight: 600;
78 color: var(--accent-deep);
79 margin-bottom: 32px;
80 }
81 .h1 {
82 font-family: 'Fraunces', Georgia, serif;
83 font-weight: 400;
84 font-size: clamp(48px, 7vw, 88px);
85 line-height: 1.05;
86 letter-spacing: -0.02em;
87 max-width: 920px;
88 margin: 0 auto 28px;
89 }
90 .h1 em { font-style: italic; color: var(--accent-deep); }
91 .lede {
92 font-size: 20px;
93 color: var(--soft);
94 max-width: 620px;
95 margin: 0 auto 44px;
96 }
97 .ctas { display: flex; gap: 16px; justify-content: center; margin-bottom: 48px; }
98 .btn {
99 padding: 14px 28px;
100 border-radius: 999px;
101 font-weight: 500;
102 font-size: 15px;
103 text-decoration: none;
104 display: inline-flex; align-items: center; gap: 8px;
105 transition: transform 0.15s ease;
106 }
107 .btn-primary { background: var(--ink); color: var(--cream); }
108 .btn-ghost { color: var(--ink); border: 1px solid var(--ink); }
109 .btn:hover { transform: translateY(-1px); }
110 .trust { font-size: 13px; color: var(--soft); }
111 .trust strong { color: var(--ink); font-weight: 600; }
112
113 /* Logo strip */
114 .logos {
115 padding: 56px 32px;
116 border-top: 1px solid var(--line);
117 border-bottom: 1px solid var(--line);
118 background: var(--cream);
119 }
120 .logos-inner {
121 max-width: 1100px; margin: 0 auto;
122 display: flex; justify-content: space-between; align-items: center;
123 flex-wrap: wrap; gap: 32px;
124 font-family: 'Fraunces', Georgia, serif;
125 font-style: italic; font-size: 22px; color: var(--soft);
126 }
127
128 /* Features */
129 .features {
130 padding: 120px 32px;
131 max-width: 1180px;
132 margin: 0 auto;
133 }
134 .features-head {
135 text-align: center;
136 max-width: 720px;
137 margin: 0 auto 80px;
138 }
139 .features-head h2 {
140 font-family: 'Fraunces', Georgia, serif;
141 font-weight: 400;
142 font-size: clamp(36px, 4.5vw, 52px);
143 line-height: 1.1;
144 letter-spacing: -0.02em;
145 margin: 0 0 20px;
146 }
147 .features-head p { font-size: 18px; color: var(--soft); margin: 0; }
148 .grid {
149 display: grid;
150 grid-template-columns: repeat(3, 1fr);
151 gap: 32px;
152 }
153 .card {
154 background: var(--cream-warm);
155 border: 1px solid var(--line);
156 border-radius: 20px;
157 padding: 40px 32px;
158 text-align: center;
159 }
160 .icon {
161 width: 56px; height: 56px;
162 border-radius: 14px;
163 background: var(--cream);
164 border: 1px solid var(--line);
165 display: inline-flex; align-items: center; justify-content: center;
166 font-size: 28px;
167 margin-bottom: 24px;
168 }
169 .card h3 {
170 font-family: 'Fraunces', Georgia, serif;
171 font-weight: 500;
172 font-size: 22px;
173 margin: 0 0 12px;
174 letter-spacing: -0.01em;
175 }
176 .card p {
177 font-size: 15px;
178 color: var(--soft);
179 margin: 0;
180 }
181
182 /* CTA */
183 .cta-section {
184 background: var(--ink);
185 color: var(--cream);
186 padding: 120px 32px;
187 text-align: center;
188 }
189 .cta-section h2 {
190 font-family: 'Fraunces', Georgia, serif;
191 font-weight: 400;
192 font-size: clamp(36px, 5vw, 60px);
193 line-height: 1.1;
194 letter-spacing: -0.02em;
195 margin: 0 0 20px;
196 max-width: 720px;
197 margin-left: auto; margin-right: auto;
198 }
199 .cta-section p {
200 font-size: 18px;
201 color: rgba(250, 246, 239, 0.7);
202 margin: 0 auto 40px;
203 max-width: 540px;
204 }
205 .cta-section .btn-primary {
206 background: var(--cream);
207 color: var(--ink);
208 }
209
210 /* Footer */
211 .footer {
212 padding: 40px 32px;
213 text-align: center;
214 font-size: 13px;
215 color: var(--soft);
216 border-top: 1px solid var(--line);
217 background: var(--cream);
218 }
219</style>
220</head>
221<body>
222
223<nav class="nav">
224 <div class="nav-inner">
225 <div class="logo"><span class="logo-dot"></span>Lumina</div>
226 <div class="nav-links">
227 <a href="#">Product</a>
228 <a href="#">Solutions</a>
229 <a href="#">Pricing</a>
230 <a href="#">Customers</a>
231 <a href="#">Docs</a>
232 </div>
233 <div class="nav-cta">
234 <a href="#">Sign in</a>
235 <a href="#" class="pill">Get started</a>
236 </div>
237 </div>
238</nav>
239
240
241
242
243
244<section class="hero">
245 <div class="eyebrow">AI-native workflows</div>
246 <h1 class="h1">Build faster with <em>intelligent</em> workflows for modern teams</h1>
247 <p class="lede">The all-in-one platform that helps product teams ship better software in record time. Powered by AI, designed for humans.</p>
248 <div class="ctas">
249 <a href="#" class="btn btn-primary">Start free trial →</a>
250 <a href="#" class="btn btn-ghost">Watch demo</a>
251 </div>
252 <div class="trust">Trusted by <strong>10,000+</strong> forward-thinking teams worldwide</div>
253</section>
254
255
256
257
258
259<section class="logos">
260 <div class="logos-inner">
261 <span>Northwind</span>
262 <span>Halcyon</span>
263 <span>Meridian</span>
264 <span>Fieldnote</span>
265 <span>Atlas & Co.</span>
266 <span>Verity</span>
267 </div>
268</section>
269
270<section class="features">
271 <div class="features-head">
272 <h2>Everything you need to ship great products</h2>
273 <p>One platform. Endless possibilities. Built for teams who care about craft.</p>
274 </div>
275
276 <div class="grid">
277 <div class="card">
278 <div class="icon">⚡</div>
279 <h3>Lightning Fast</h3>
280 <p>Move from idea to production in minutes, not months. Our AI handles the heavy lifting so you can focus on what matters.</p>
281 </div>
282 <div class="card">
283 <div class="icon">🔒</div>
284 <h3>Enterprise Secure</h3>
285 <p>SOC 2 compliant infrastructure with end-to-end encryption. Your data is safe, always.</p>
286 </div>
287 <div class="card">
288 <div class="icon">📈</div>
289 <h3>Built to Scale</h3>
290 <p>From your first prototype to millions of users — Lumina grows with your team without breaking a sweat.</p>
291 </div>
292 </div>
293
294</section>
295
296
297<section class="cta-section">
298 <h2>Ready to transform how your team builds?</h2>
299 <p>Join thousands of teams already shipping faster with Lumina.</p>
300 <a href="#" class="btn btn-primary">Start your free trial →</a>
301</section>
302
303
304<footer class="footer">
305 © 2026 Lumina, Inc. — Crafted with care in San Francisco.
306</footer>
307
308</body>
309</html>