git.iko.soy/htmlang
on master help sign in
htmlang/examples/landing.hl
136 lines 6.0 kB history raw
1-- A product landing page: navigation, hero, features, pricing and a call to action.
2--
3-- Shows the layout attributes (spacing, center-x, wrap, @spacer), CSS
4-- properties with their own names, design tokens as custom properties, and
5-- functions that take parameters, attributes and children.
6@page [
7 lang=en,
8 color var(--ink),
9 background var(--surface),
10 -- Dark mode redefines the tokens once, and everything that uses them follows
11 dark:[
12 --ink #e2e8f0,
13 --muted #94a3b8,
14 --line #1e293b,
15 --surface #0b1220,
16 --subtle #111a2e
17 ]
18] Launchpad
19@meta description Launchpad turns static pages into a product site in minutes.
20@meta og:title Launchpad
22-- Design tokens: CSS custom properties on :root, read as var(--name)
23@let --brand #2563eb
24@let --ink #0f172a
25@let --muted #64748b
26@let --line #e2e8f0
27@let --surface white
28@let --subtle #f8fafc
30-- An attribute bundle shared by both button styles
31@let button [
32 padding 12 22,
33 border-radius 8,
34 font-weight 600,
35 transition all 0.15s ease
38-- Functions: parameters are attributes, extra attributes style the root
39@let @primary-link [href]
40 @link [$button, background var(--brand), color white, hover:background color-mix(in srgb, var(--brand), black 8%)] $href
41 @children
43@let @secondary-link [href]
44 @link [$button, border 1 solid var(--line), color var(--ink), hover:border-color var(--muted)] $href
45 @children
47@let @section-heading [title, lede]
48 @el [spacing 8, center-x, max-width 640, text-align center]
49 @h2 [font-size 32, color var(--ink)] $title
50 @paragraph [color var(--muted), line-height 1.6] $lede
52@data $features [
53 {"icon": "⚡", "title": "Zero-config dev server", "body": "Live reload on every save. Point it at a folder and start writing."},
54 {"icon": "◎", "title": "Editor support", "body": "Diagnostics, completions, hover docs, go to definition and rename."},
55 {"icon": "▢", "title": "One file per page", "body": "Each page compiles to a single HTML file with its CSS inside. Deploy anywhere."}
58@data $plans [
59 {"name": "Hobby", "price": "0", "note": "For personal sites", "perks": ["1 site", "Community support"]},
60 {"name": "Team", "price": "24", "note": "For small teams", "perks": ["10 sites", "Shared components", "Email support"], "featured": true},
61 {"name": "Company", "price": "99", "note": "For many teams", "perks": ["Unlimited sites", "SSO", "Priority support"]}
64-- Navigation
65@header [padding 16 24, border-bottom 1 solid var(--line)]
66 @row [width fill, max-width 1100, center-x, spacing 24, align-items center]
67 @text [font-weight 800, font-size 18] Launchpad
68 @spacer
69 @nav [flex-direction row, spacing 20, color var(--muted), @link:hover:color var(--ink), display none, md:display flex]
70 @link #features Features
71 @link #pricing Pricing
72 @link /docs Docs
73 @primary-link [href /signup, padding 8 16] Sign up
75-- Hero
76@section [padding 96 24, background var(--subtle)]
77 @el [max-width 720, center-x, spacing 24, text-align center]
78 @h1 [font-size 52, line-height 1.1, letter-spacing -1, md:font-size 64] Build faster with less CSS.
79 @paragraph [font-size 19, color var(--muted), line-height 1.6]
80 Launchpad turns your static pages into a polished product site in
81 minutes. Write the layout, {@text [font-weight 600, color var(--ink)] ship one file}, and sleep at night.
82 @row [center-x, spacing 12, wrap]
83 @primary-link [href /signup] Start free
84 @secondary-link [href /demo] Watch the demo
86-- Features, from a list of records
87@section [id=features, padding 80 24, spacing 40]
88 @section-heading [title Everything you need, lede Opinionated where it matters and flexible where it counts.]
89 @row [max-width 1100, center-x, spacing 20, wrap]
90 @each $feature in $features
91 @article [flex 1 1 280px, padding 24, spacing 8, border 1 solid var(--line), border-radius 12]
92 @text [font-size 24, color var(--brand)] $feature.icon
93 @h3 [font-size 18] $feature.title
94 @paragraph [color var(--muted), line-height 1.6] $feature.body
96-- Pricing: one plan is highlighted with if()
97@section [id=pricing, padding 80 24, spacing 40, background var(--subtle)]
98 @section-heading [title Simple pricing, lede Start free and upgrade when your team grows.]
99 @row [max-width 1000, center-x, spacing 20, wrap, align-items stretch]
100 @each $plan in $plans
101 @article [
102 flex 1 1 260px,
103 padding 28,
104 spacing 16,
105 background var(--surface),
106 border-radius 12,
107 if($plan.featured, [border 2 solid var(--brand), box-shadow 0 12 32 rgba(37, 99, 235, 0.15)], border 1 solid var(--line))
108 ]
109 @el [spacing 4]
110 @h3 [font-size 18] $plan.name
111 @text [color var(--muted), font-size 14] $plan.note
112 @row [spacing 4, align-items baseline]
113 @text [font-size 40, font-weight 800] \$$plan.price
114 @text [color var(--muted)] / month
115 @ul [spacing 8, flex 1]
116 @each $perk in $plan.perks
117 @li [flex-direction row, spacing 8, before:content "✓", before:color var(--brand)] $perk
118 @if $plan.featured
119 @primary-link [href /signup?plan=$plan.name, text-align center] Choose $plan.name
120 @else
121 @secondary-link [href /signup?plan=$plan.name, text-align center] Choose $plan.name
123-- Call to action
124@section [padding 72 24, spacing 16, background var(--brand), color white, text-align center]
125 @h2 [font-size 30] Ready to launch?
126 @paragraph [max-width 520, center-x, line-height 1.6, opacity 0.9]
127 Join the teams building their marketing sites with htmlang.
128 @link [$button, center-x, background white, color var(--brand), hover:background #eff6ff] /signup
129 Start for free
131@footer [padding 32 24, color var(--muted), font-size 14, @link:hover:color var(--ink)]
132 @row [width fill, max-width 1100, center-x, wrap, spacing 16]
133 @text © 2026 Launchpad
134 @spacer
135 @link /privacy Privacy
136 @link /terms Terms