-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdemo-landing.html
More file actions
506 lines (467 loc) · 24.4 KB
/
Copy pathdemo-landing.html
File metadata and controls
506 lines (467 loc) · 24.4 KB
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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Tags Landing Page Demo</title>
<link rel="stylesheet" href="../index.css">
<style>
:root {
--landing-measure: 72rem;
--landing-section-gap: clamp(4rem, 8vw, 7rem);
--landing-content-gap: clamp(2rem, 4vw, 3rem);
--landing-footer-border: var(--outline-subtle);
--landing-footer-divider: var(--outline-overt);
}
body {
overflow-x: clip;
background:
radial-gradient(circle at 85% 5%, color-mix(in oklch, var(--accent) 14%, transparent), transparent 28rem),
var(--base);
}
.landing-header {
border-bottom: 1px solid var(--outline-subtle);
background: color-mix(in oklch, var(--base) 88%, transparent);
backdrop-filter: blur(1rem);
}
.landing-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-lg);
min-block-size: 4.75rem;
}
.landing-brand,
.landing-nav-links {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.landing-brand {
color: var(--text-overt);
text-decoration: none;
}
.landing-brand-copy {
display: grid;
line-height: 1.2;
}
.landing-brand-copy small { color: var(--text-subtle); }
.landing-nav-links { flex-wrap: wrap; justify-content: flex-end; }
.landing-main { padding-block: clamp(3.5rem, 8vw, 7rem); }
.landing-sections { gap: var(--landing-section-gap); }
.landing-section { scroll-margin-block-start: 2rem; }
.landing-content-section {
display: flex;
flex-direction: column;
gap: var(--landing-content-gap);
}
.landing-section-heading {
--l-gap: 0.8rem;
}
.landing-section-intro {
box-sizing: border-box;
inline-size: 100%;
}
.landing-section-heading h2 {
max-inline-size: 23ch;
font-size: clamp(2rem, 4vw, 3.35rem);
line-height: 1.08;
letter-spacing: -0.035em;
text-wrap: balance;
}
.landing-section-heading > p {
max-inline-size: 62ch;
font-size: clamp(1rem, 1.5vw, 1.125rem);
line-height: 1.65;
text-wrap: pretty;
}
.landing-hero-copy h1 {
max-inline-size: 12ch;
font-size: clamp(3rem, 7vw, 5.75rem);
line-height: 0.96;
letter-spacing: -0.055em;
text-wrap: balance;
}
.landing-hero-copy > p {
max-inline-size: 58ch;
font-size: var(--font-size-lg);
line-height: 1.65;
text-wrap: pretty;
}
.landing-dashboard {
box-shadow: 0 1.5rem 4rem color-mix(in oklch, var(--accent) 12%, transparent);
}
.landing-card-grid > :is(box, [data-box], .box),
.landing-price-grid > :is(box, [data-box], .box) {
block-size: 100%;
}
.landing-price-grid > :is(box, [data-box], .box) {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.landing-price-grid ul { flex: 1; }
.landing-price-grid .button { inline-size: 100%; }
.landing-price {
color: var(--text-overt);
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: var(--font-weight-heading, 600);
line-height: 1;
letter-spacing: -0.035em;
}
.landing-price span {
margin-inline-start: 0.2em;
font-size: var(--font-size-base);
font-weight: var(--font-weight-normal, 400);
letter-spacing: normal;
}
.landing-footer { border-top: 1px solid var(--landing-footer-border); }
.landing-footer-divider {
border-block-start-color: var(--landing-footer-divider);
opacity: 1;
}
@media (max-width: 48rem) {
.landing-nav { align-items: flex-start; padding-block: var(--space-md); }
.landing-brand-copy small { display: none; }
.landing-nav-links .button-ghost { display: none; }
.landing-hero-copy h1 { font-size: clamp(2.75rem, 14vw, 4.5rem); }
}
@media (max-width: 32rem) {
.landing-nav-links .button { padding-inline: 0.8rem; }
.landing-hero-actions { align-items: stretch; }
.landing-hero-actions .button { inline-size: 100%; }
}
</style>
</head>
<body id="top">
<a class="skip-link" href="#main-content">Skip to content</a>
<layout-page min-height="100vh">
<header slot="header" class="landing-header">
<layout-center max-width="var(--landing-measure)">
<nav class="landing-nav" aria-label="Primary">
<a class="landing-brand" href="#top">
<badge status="info" size="lg" aria-hidden="true">G</badge>
<span class="landing-brand-copy">
<strong>Graffiti Cloud</strong>
<small>Built with CSS Tags</small>
</span>
</a>
<div class="landing-nav-links">
<a href="#features" class="button button-ghost">Features</a>
<a href="#pricing" class="button button-ghost">Pricing</a>
<a href="#faq" class="button button-ghost">FAQ</a>
<a href="#cta" class="button button-primary">Start free</a>
</div>
</nav>
</layout-center>
</header>
<main id="main-content" slot="main" class="landing-main" tabindex="-1">
<layout-center max-width="var(--landing-measure)">
<layout-stack class="landing-sections">
<section class="landing-section">
<layout-split fraction="1.1fr 0.9fr" gap="2rem">
<layout-stack class="landing-hero-copy" gap="1.25rem">
<eyebrow class="stack-intrinsic">Ship your next launch faster</eyebrow>
<h1>Your SaaS landing page, minus the assembly work.</h1>
<p class="text-subtle">A library-first landing page composed from <code>layout-*</code>, <code>box</code>, <code>badge</code>, buttons, lists, and native disclosure styles.</p>
<layout-cluster class="landing-hero-actions" gap="0.75rem">
<a href="#pricing" class="button button-primary">Start 14-day trial</a>
<a href="#features" class="button button-outline">See product tour</a>
</layout-cluster>
<layout-cluster gap="0.65rem">
<badge status="success" size="md">Progressively enhanced</badge>
<badge variant="subtle" size="md">Token-first styling</badge>
</layout-cluster>
</layout-stack>
<box class="landing-dashboard" p="1.5rem" bg="var(--surface-default)" border="1px solid var(--outline-subtle)" radius="var(--radius-lg)">
<layout-stack gap="1rem">
<layout-cluster justify="space-between" align="center" gap="0.75rem">
<badge status="success" size="sm">Live pipeline</badge>
<small class="text-subtle">graffiti.app/dashboard</small>
</layout-cluster>
<box p="1rem" bg="var(--surface-subtle)" border="1px solid var(--outline-subtle)" radius="var(--radius-lg)">
<layout-stack gap="0.75rem">
<h3>Weekly launch score</h3>
<p class="text-subtle">Campaign pages, email capture, and trial routing working from one system.</p>
<layout-grid min-item-size="120px" gap="0.75rem">
<box p="1rem" bg="var(--surface-default)" border="1px solid var(--outline-subtle)" radius="var(--radius-md)" align="center">
<strong>42%</strong><br>
<small class="text-subtle">signup lift</small>
</box>
<box p="1rem" bg="var(--surface-default)" border="1px solid var(--outline-subtle)" radius="var(--radius-md)" align="center">
<strong>3.1x</strong><br>
<small class="text-subtle">faster setup</small>
</box>
<box p="1rem" bg="var(--surface-default)" border="1px solid var(--outline-subtle)" radius="var(--radius-md)" align="center">
<strong>18m</strong><br>
<small class="text-subtle">to publish</small>
</box>
</layout-grid>
</layout-stack>
</box>
<layout-grid min-item-size="180px" gap="0.75rem">
<box p="1rem" bg="var(--surface-subtle)" border="1px solid var(--outline-subtle)" radius="var(--radius-lg)">
<small class="text-subtle">Traffic allocation</small>
<h4>Organic</h4>
<p class="text-subtle">74% of traffic landing on the new page variant.</p>
</box>
<box p="1rem" bg="var(--surface-subtle)" border="1px solid var(--outline-subtle)" radius="var(--radius-lg)">
<small class="text-subtle">Next release</small>
<h4>Pricing experiment</h4>
<p class="text-subtle">Ready to launch after stakeholder review.</p>
</box>
</layout-grid>
</layout-stack>
</box>
</layout-split>
</section>
<section class="landing-section" aria-label="Social proof">
<layout-stack gap="1rem" center>
<p class="text-subtle stack-intrinsic">Trusted by launch teams everywhere</p>
<layout-grid min-item-size="120px" gap="1rem">
<box p="1rem" bg="var(--surface-subtle)" border="1px solid var(--outline-subtle)" radius="var(--radius-md)" align="center"><strong>Northstar</strong></box>
<box p="1rem" bg="var(--surface-subtle)" border="1px solid var(--outline-subtle)" radius="var(--radius-md)" align="center"><strong>Relay</strong></box>
<box p="1rem" bg="var(--surface-subtle)" border="1px solid var(--outline-subtle)" radius="var(--radius-md)" align="center"><strong>Fathom</strong></box>
<box p="1rem" bg="var(--surface-subtle)" border="1px solid var(--outline-subtle)" radius="var(--radius-md)" align="center"><strong>Arcline</strong></box>
<box p="1rem" bg="var(--surface-subtle)" border="1px solid var(--outline-subtle)" radius="var(--radius-md)" align="center"><strong>Vector</strong></box>
</layout-grid>
</layout-stack>
</section>
<section class="landing-section landing-content-section" id="features">
<layout-center class="landing-section-intro" and-text>
<layout-stack class="landing-section-heading" center>
<eyebrow class="stack-intrinsic">Everything in one system</eyebrow>
<h2>Hero, proof, features, pricing, FAQ, and CTA wired together.</h2>
<p class="text-subtle">This version keeps the layout intentionally close to the original template while using the library's public APIs instead of demo-only CSS.</p>
</layout-stack>
</layout-center>
<layout-grid class="landing-card-grid" min-item-size="320px" gap="1.25rem">
<box p="1.5rem" bg="var(--surface-default)" border="1px solid var(--outline-subtle)" radius="var(--radius-lg)">
<layout-stack gap="0.75rem">
<badge class="stack-intrinsic" variant="subtle" size="sm">01</badge>
<h3>Token-first theming</h3>
<p class="text-subtle">Adjust page character with semantic tokens instead of rewriting section styles.</p>
</layout-stack>
</box>
<box p="1.5rem" bg="var(--surface-default)" border="1px solid var(--outline-subtle)" radius="var(--radius-lg)">
<layout-stack gap="0.75rem">
<badge class="stack-intrinsic" variant="subtle" size="sm">02</badge>
<h3>Semantic interactions</h3>
<p class="text-subtle">Use native `details` for FAQ and plain anchors styled as buttons for conversion points.</p>
</layout-stack>
</box>
<box p="1.5rem" bg="var(--surface-default)" border="1px solid var(--outline-subtle)" radius="var(--radius-lg)">
<layout-stack gap="0.75rem">
<badge class="stack-intrinsic" variant="subtle" size="sm">03</badge>
<h3>Responsive by default</h3>
<p class="text-subtle">Sections collapse cleanly through layout primitives without extra breakpoint CSS.</p>
</layout-stack>
</box>
<box p="1.5rem" bg="var(--surface-default)" border="1px solid var(--outline-subtle)" radius="var(--radius-lg)">
<layout-stack gap="0.75rem">
<badge class="stack-intrinsic" variant="subtle" size="sm">04</badge>
<h3>Flexible surfaces</h3>
<p class="text-subtle">Cards, pricing plans, and small dashboard panels can all be composed from the same primitives.</p>
</layout-stack>
</box>
<box p="1.5rem" bg="var(--surface-default)" border="1px solid var(--outline-subtle)" radius="var(--radius-lg)">
<layout-stack gap="0.75rem">
<badge class="stack-intrinsic" variant="subtle" size="sm">05</badge>
<h3>Readable content rhythm</h3>
<p class="text-subtle">The page leans on the library's readable defaults instead of custom type scales.</p>
</layout-stack>
</box>
<box p="1.5rem" bg="var(--surface-default)" border="1px solid var(--outline-subtle)" radius="var(--radius-lg)">
<layout-stack gap="0.75rem">
<badge class="stack-intrinsic" variant="subtle" size="sm">06</badge>
<h3>Copy-first composition</h3>
<p class="text-subtle">This demo is now a cleaner showcase of the library itself rather than extra decorative CSS.</p>
</layout-stack>
</box>
</layout-grid>
</section>
<section class="landing-section landing-content-section" id="pricing">
<layout-center class="landing-section-intro" and-text>
<layout-stack class="landing-section-heading" center>
<eyebrow class="stack-intrinsic">Pricing</eyebrow>
<h2>Three plans for teams from first launch to scale.</h2>
<p class="text-subtle">Each pricing block stays vertically stacked because it uses library boxes and lists instead of custom pricing CSS.</p>
</layout-stack>
</layout-center>
<layout-grid class="landing-price-grid" min-item-size="240px" gap="1.25rem">
<box p="1.5rem" bg="var(--surface-default)" border="1px solid var(--outline-subtle)" radius="var(--radius-lg)">
<layout-stack gap="1rem" center>
<h3>Starter</h3>
<p class="text-subtle">For solo builders validating a new product.</p>
<p class="landing-price">$19<span class="text-subtle">/mo</span></p>
</layout-stack>
<ul data-list gap="0.75rem">
<li>One conversion-focused landing page</li>
<li>Email capture and analytics blocks</li>
<li>Basic theme token overrides</li>
</ul>
<a href="#cta" class="button button-outline">Choose Starter</a>
</box>
<box p="1.5rem" bg="var(--surface-subtle)" border="1px solid var(--accent)" radius="var(--radius-lg)">
<layout-stack gap="1rem" center>
<badge class="stack-intrinsic" status="info" size="sm">Most popular</badge>
<h3>Growth</h3>
<p class="text-subtle">For SaaS teams running experiments every week.</p>
<p class="landing-price">$59<span class="text-subtle">/mo</span></p>
</layout-stack>
<ul data-list gap="0.75rem">
<li>Unlimited landing sections and A/B variants</li>
<li>Reusable feature, testimonial, and pricing blocks</li>
<li>Team collaboration with launch-ready themes</li>
</ul>
<a href="#cta" class="button button-primary">Choose Growth</a>
</box>
<box p="1.5rem" bg="var(--surface-default)" border="1px solid var(--outline-subtle)" radius="var(--radius-lg)">
<layout-stack gap="1rem" center>
<h3>Scale</h3>
<p class="text-subtle">For larger teams standardizing the whole site surface.</p>
<p class="landing-price">$129<span class="text-subtle">/mo</span></p>
</layout-stack>
<ul data-list gap="0.75rem">
<li>Multi-brand themes and launch playbooks</li>
<li>Priority design review and migration support</li>
<li>Advanced analytics and campaign environments</li>
</ul>
<a href="#cta" class="button button-outline">Talk to sales</a>
</box>
</layout-grid>
</section>
<section class="landing-section landing-content-section">
<layout-center class="landing-section-intro" and-text>
<layout-stack class="landing-section-heading" center>
<eyebrow class="stack-intrinsic">Testimonials</eyebrow>
<h2>Teams use it to turn rough launch ideas into pages that convert.</h2>
</layout-stack>
</layout-center>
<layout-grid min-item-size="260px" gap="1.25rem">
<box p="1.5rem" bg="var(--surface-default)" border="1px solid var(--outline-subtle)" radius="var(--radius-lg)">
<layout-stack gap="1rem">
<p>"We rebuilt our launch page in one afternoon and lifted trial starts by 31% without inventing new design patterns."</p>
<p class="text-subtle"><strong>Mina Patel</strong><br>Head of Growth, Northstar</p>
</layout-stack>
</box>
<box p="1.5rem" bg="var(--surface-default)" border="1px solid var(--outline-subtle)" radius="var(--radius-lg)">
<layout-stack gap="1rem">
<p>"The layout primitives got us 90% of the way there, and the remaining polish came from tokens instead of brittle overrides."</p>
<p class="text-subtle"><strong>Jordan Lee</strong><br>Design Engineer, Relay</p>
</layout-stack>
</box>
<box p="1.5rem" bg="var(--surface-default)" border="1px solid var(--outline-subtle)" radius="var(--radius-lg)">
<layout-stack gap="1rem">
<p>"Using native `details` for FAQ and shared card markup for pricing kept the codebase much cleaner than our previous marketing stack."</p>
<p class="text-subtle"><strong>Casey Morgan</strong><br>Product Marketing, Arcline</p>
</layout-stack>
</box>
</layout-grid>
</section>
<section class="landing-section landing-content-section" id="faq">
<layout-center class="landing-section-intro" and-text>
<layout-stack class="landing-section-heading" center>
<eyebrow class="stack-intrinsic">FAQ</eyebrow>
<h2>Common questions before you publish.</h2>
</layout-stack>
</layout-center>
<div class="accordion" data-accordion>
<details name="landing-faq" open>
<summary>Is this page built with the existing library, or custom section CSS?</summary>
<p>The layout and controls use the public library API. A small token-based stylesheet provides the page-level art direction a real product would add.</p>
</details>
<details name="landing-faq">
<summary>Can I swap the custom tags for classes or `data-*` hosts?</summary>
<p>Yes. The library's selector conventions support component tags, classes, and <code>data-*</code> hosts for most primitives.</p>
</details>
<details name="landing-faq">
<summary>Does the FAQ need JavaScript?</summary>
<p>No. It uses native `details` and `summary`, which matches the project's preference for semantic no-JS disclosure patterns.</p>
</details>
<details name="landing-faq">
<summary>Where should I start if I want to adapt this for the docs site?</summary>
<p>Start from this file, keep the layout primitives, and extract repeated content into site components only if you need that extra reuse.</p>
</details>
</div>
</section>
<section class="landing-section" id="cta">
<box p="2rem" bg="var(--surface-subtle)" border="1px solid var(--outline-subtle)" radius="var(--radius-lg)">
<layout-switcher threshold="40rem" gap="1rem">
<layout-stack gap="0.75rem" center>
<eyebrow class="stack-intrinsic">Ready to launch?</eyebrow>
<h2>Build your own version from the library demo.</h2>
<p class="text-subtle">Open `examples/demo-landing.html`, swap the copy, and tune the tokens to match your product.</p>
</layout-stack>
<layout-cluster justify="center" align="center" gap="0.75rem">
<a href="#top" class="button button-primary">Create account</a>
<a href="#features" class="button button-outline">View sections</a>
</layout-cluster>
</layout-switcher>
</box>
</section>
</layout-stack>
</layout-center>
</main>
<footer slot="footer" class="landing-footer">
<box py="4rem">
<layout-center max-width="var(--landing-measure)">
<layout-stack gap="2rem">
<layout-grid min-item-size="150px" gap="1.5rem">
<nav aria-label="Product">
<layout-stack gap="0.5rem">
<p><strong>Product</strong></p>
<a href="#features">Features</a>
<a href="#pricing">Pricing</a>
<a href="#features">Changelog</a>
<a href="#features">Integrations</a>
<a href="../README.md">Documentation</a>
</layout-stack>
</nav>
<nav aria-label="Company">
<layout-stack gap="0.5rem">
<p><strong>Company</strong></p>
<a href="#top">About</a>
<a href="#features">Blog</a>
<a href="#cta">Careers</a>
<a href="#cta">Press Kit</a>
<a href="#cta">Contact</a>
</layout-stack>
</nav>
<nav aria-label="Resources">
<layout-stack gap="0.5rem">
<p><strong>Resources</strong></p>
<a href="../docs/guides/introduction.md">Guides</a>
<a href="../API.md">API Reference</a>
<a href="#top">Status Page</a>
<a href="#cta">Community</a>
<a href="#faq">Support</a>
</layout-stack>
</nav>
<nav aria-label="Legal">
<layout-stack gap="0.5rem">
<p><strong>Legal</strong></p>
<a href="#faq">Privacy Policy</a>
<a href="#faq">Terms of Service</a>
<a href="#faq">Cookie Policy</a>
<a href="#faq">GDPR</a>
<a href="#faq">Security</a>
</layout-stack>
</nav>
</layout-grid>
<hr class="landing-footer-divider">
<layout-split fraction="1fr 12rem" gap="1rem">
<p class="text-subtle caption">© 2026 Graffiti Cloud. Demo content only.</p>
<layout-cluster justify="flex-end" gap="1rem">
<a href="#top" class="text-subtle caption">Twitter</a>
<a href="https://github.com/doeixd/CSS-Tags" class="text-subtle caption">GitHub</a>
<a href="#top" class="text-subtle caption">Discord</a>
</layout-cluster>
</layout-split>
</layout-stack>
</layout-center>
</box>
</footer>
</layout-page>
</body>
</html>