gator/trekmap-preorder
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Pre-order landing page

Browse source
This commit is contained in:
gator 2026-07-29 22:18:19 +00:00
parent 904ca07cbe
commit 9d0562da7e
2 changed files with 46 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -1,3 +1,3 @@
# trekmap-preorder
# TrekMap pre-order page
TrekMap pre-order landing page — hand-written code, deployed via API
Hand-written static site. Created, committed and deployed entirely through the Corben API — no dashboard, no git CLI.

44
index.html Normal file
View file

@ -0,0 +1,44 @@
<!doctype html>
<html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>TrekMap — Reserve your map</title>
<style>
:root { --midnight:#001F3F; --nightsky:#0B192C; --gold:#E6B800; --mahogany:#6F4E37; }
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--midnight); color:#F4F1EA; font:16px/1.6 system-ui,-apple-system,sans-serif; }
.wrap { max-width:880px; margin:0 auto; padding:64px 24px; }
.badge { display:inline-block; border:1px solid var(--gold); color:var(--gold);
padding:6px 14px; border-radius:100px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
h1 { font-size:clamp(2rem,6vw,3.5rem); line-height:1.05; margin:24px 0 16px; letter-spacing:-.02em; }
h1 span { color:var(--gold); }
p.lede { font-size:1.15rem; color:#C8D3E0; max-width:34em; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin:56px 0; }
.card { background:var(--nightsky); border:1px solid rgba(230,184,0,.18); border-radius:14px; padding:24px; }
.card h3 { color:var(--gold); font-size:1.05rem; margin-bottom:6px; }
.price { font-size:2rem; font-weight:700; margin:8px 0 4px; }
.card small { color:#8FA3B8; }
form { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
input { flex:1 1 260px; background:var(--nightsky); border:1px solid rgba(255,255,255,.14);
color:#fff; padding:14px 16px; border-radius:10px; font-size:1rem; }
button { background:var(--gold); color:var(--midnight); border:0; padding:14px 28px;
border-radius:10px; font-weight:700; font-size:1rem; cursor:pointer; }
footer { margin-top:64px; padding-top:24px; border-top:1px solid rgba(255,255,255,.08); color:#7C8FA6; font-size:.9rem; }
a { color:var(--gold); }
</style></head><body><div class="wrap">
<span class="badge">Pre-order &middot; first production run</span>
<h1>Hang your travels <span>on the wall.</span></h1>
<p class="lede">TrekMap is a travel bucket list that lives on a world map &mdash; and an LED map that
glows with everywhere you&rsquo;ve been and everywhere you&rsquo;re going. Reserve a unit and lock the launch price.</p>
<div class="grid">
<div class="card"><h3>TrekMap Mini</h3><div class="price">$99</div><small>Desktop frame &middot; US, CA, MX</small></div>
<div class="card"><h3>TrekMap</h3><div class="price">$199</div><small>Wall map &middot; one LED per region</small></div>
<div class="card"><h3>TrekGlobe</h3><div class="price">$399</div><small>Walnut base &middot; brass meridian</small></div>
</div>
<h3 style="color:var(--gold);margin-bottom:4px">Reserve yours</h3>
<p style="color:#8FA3B8">No charge today &mdash; we email you when the run opens.</p>
<form onsubmit="event.preventDefault();this.innerHTML='<p style=\'color:#E6B800\'>Thanks &mdash; you are on the list.</p>'">
<input type="email" placeholder="you@example.com" required><button>Reserve</button>
</form>
<footer>TrekMap &middot; the app lives at <a href="https://trekmap.co">trekmap.co</a>
&middot; <a href="mailto:hello.trekmap@corben.world">hello.trekmap@corben.world</a></footer>
</div></body></html>