Website overhaul: accurate content, creative inventory, roadmap page

.gitignore

@@ -33,7 +33,9 @@ report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
 # Finder (MacOS) folder config
 .DS_Store
 
-# Benchmark prompts/artifacts (kept out of the public repo)
+# Benchmark prompts/artifacts (kept out of the public repo).
+# Leading slash scopes this to the repo root so website/public/screenshots/
+# (real site assets) can be tracked.
 mineclone.md
 website.md
-screenshots/
+/screenshots/

website/src/components/CTA.astro

@@ -7,9 +7,9 @@
       <p class="eyebrow">Play now</p>
       <h2 id="cta-title">Play VOXL right in your browser</h2>
       <p class="lede">
-        No install, no account — click play and the prototype loads in a
-        dedicated full-screen view. Drop into a seeded world, fly around, and
-        start shaping terrain.
+        No install, no account — click play and the world loads in a
+        dedicated full-screen view. Drop into a seeded world, survive the night,
+        fly over the canopy, and start shaping terrain.
       </p>
       <div class="btn-row">
         <a class="btn btn--primary btn--lg" href="/play">▶ Play in browser</a>
@@ -28,8 +28,8 @@
         <ol class="t-list">
           <li>
             <span class="t-prompt">$</span>
-            <code>git clone &lt;repo&gt; && cd Minebench</code>
-            <button class="copy" type="button" data-copy="git clone <repo> && cd Minebench" aria-label="Copy command">copy</button>
+            <code>git clone &lt;repo&gt; && cd voxl</code>
+            <button class="copy" type="button" data-copy="git clone <repo> && cd voxl" aria-label="Copy command">copy</button>
           </li>
           <li>
             <span class="t-prompt">$</span>
@@ -42,7 +42,7 @@
             <button class="copy" type="button" data-copy="bun run dev" aria-label="Copy command">copy</button>
           </li>
         </ol>
-        <p class="t-note">Then open the printed local URL in a modern desktop browser.</p>
+        <p class="t-note">Starts the game and the marketing site together. Then open the printed local URL in a modern desktop browser.</p>
       </div>
     </details>
   </div>

website/src/components/Features.astro

@@ -24,13 +24,12 @@ import { features, blockPalette } from "../data/site";
     </ul>
 
     <div class="palette" aria-labelledby="palette-title">
-      <h3 id="palette-title" class="palette-title">The creative palette</h3>
-      <p class="palette-sub">Nine blocks in the hotbar — select with <kbd>1</kbd>–<kbd>9</kbd>, scroll, or <kbd>F</kbd>.</p>
+      <h3 id="palette-title" class="palette-title">The creative inventory</h3>
+      <p class="palette-sub">{blockPalette.length} blocks, plants and foods — open the full grid with <kbd>E</kbd> in creative mode.</p>
       <ul class="palette-list">
-        {blockPalette.map((b, i) => (
+        {blockPalette.map((b) => (
           <li class="palette-block" title={b.name}>
             <span class="swatch" style={`background:${b.color}`}></span>
-            <span class="swatch-num">{i + 1}</span>
             <span class="swatch-name">{b.name}</span>
           </li>
         ))}
@@ -96,35 +95,31 @@ import { features, blockPalette } from "../data/site";
     margin: 0;
     padding: 0;
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-    gap: 0.6rem;
+    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
+    gap: 0.5rem;
   }
   .palette-block {
     display: flex;
     align-items: center;
-    gap: 0.6rem;
-    padding: 0.5rem 0.6rem;
+    gap: 0.55rem;
+    padding: 0.45rem 0.6rem;
     border: 1px solid var(--border-soft);
     border-radius: 9px;
     background: var(--bg-2);
     font-family: var(--mono);
-    font-size: 0.82rem;
+    font-size: 0.8rem;
     color: var(--ink-dim);
     position: relative;
   }
   .swatch {
-    width: 26px;
-    height: 26px;
+    width: 22px;
+    height: 22px;
     border-radius: 5px;
     box-shadow:
-      inset 0 -7px 0 rgba(0, 0, 0, 0.25),
+      inset 0 -6px 0 rgba(0, 0, 0, 0.25),
       inset 0 3px 0 rgba(255, 255, 255, 0.16);
     flex: none;
   }
-  .swatch-num {
-    color: var(--ink-mute);
-    font-size: 0.72rem;
-  }
   .swatch-name {
     color: var(--ink);
   }

website/src/components/Footer.astro

@@ -20,6 +20,7 @@ const year = new Date().getFullYear();
       <a href="#controls">Controls</a>
       <a href="#tech">Tech</a>
       <a href="#status">Status</a>
+      <a href="/roadmap">Roadmap</a>
       <a href="/play">Play</a>
     </nav>
 

website/src/components/Hero.astro

@@ -19,24 +19,25 @@ import { site } from "../data/site";
 
   <div class="wrap hero-inner">
     <VoxelLogo size={30} />
-    <p class="eyebrow">Browser · WebGL · Prototype</p>
+    <p class="eyebrow">Browser · WebGL · Voxel Sandbox</p>
     <h1 id="hero-title" class="wordmark">VOXL</h1>
     <p class="hero-sub">{site.tagline}</p>
     <p class="hero-pitch">
-      Drop into a procedurally generated world of plains, forests, deserts and
-      mountains. Sculpt terrain block by block, fly over the canopy, and watch
-      chunks stream in around you — all in your browser, no install required.
+      Drop into a procedurally generated world spanning 11 biomes — from
+      rainforest to snowy peaks. Mine and build block by block, survive a full
+      hunger and health loop, swim through flowing water, and watch a dynamic
+      day/night cycle roll overhead. All in your browser, no install required.
     </p>
 
     <div class="btn-row hero-btns">
       <a class="btn btn--primary" href="/play">▶ Play in your browser</a>
-      <a class="btn" href="#showcase">See the world</a>
+      <a class="btn" href="/roadmap">See the roadmap</a>
     </div>
 
     <ul class="hero-chips" aria-label="Project facts">
-      <li class="chip"><b>v{site.version}</b> creative slice</li>
+      <li class="chip"><b>{site.biomes}</b> biomes · <b>{site.blocks}</b> blocks · <b>{site.treeSpecies}</b> tree types</li>
       <li class="chip"><span class="dot" style="background:var(--grass)"></span> Runs in any modern browser</li>
-      <li class="chip"><span class="dot" style="background:var(--teal)"></span> Deterministic seed worlds</li>
+      <li class="chip"><span class="dot" style="background:var(--teal)"></span> {site.dayLength} day/night cycle</li>
       <li class="chip"><span class="dot" style="background:var(--amber)"></span> {site.bundleGzip} gzipped</li>
     </ul>
   </div>

website/src/components/Pitch.astro

@@ -7,13 +7,14 @@ import { site } from "../data/site";
   <div class="wrap pitch-grid">
     <div class="pitch-copy">
       <p class="eyebrow">What is VOXL?</p>
-      <h2 id="pitch-title">A pocket voxel sandbox that runs the moment you open it.</h2>
+      <h2 id="pitch-title">A complete voxel sandbox engine that runs the moment you open it.</h2>
       <p>
-        VOXL is a focused <strong>creative-mode slice</strong> of a voxel sandbox:
-        spawn into a seeded world, walk or fly across four biomes, dig into a
-        hillside, raise a tower, and capture the result. There's no crafting tree,
-        no health bar, and no grinding — just terrain, blocks, and the tools to
-        shape them.
+        VOXL is a <strong>full browser-based voxel sandbox</strong>: spawn into
+        a seeded world, walk or fly across 11 biomes, dig into a cave system
+        beneath the hills, raise a tower under a shifting sky, and switch
+        between survival and creative play whenever you like. Terrain, water,
+        lighting and the day/night cycle are all hand-rolled — no engine wrapper,
+        no external assets.
       </p>
       <p>
         It's built as an original indie prototype with its own generated textures
@@ -27,11 +28,11 @@ import { site } from "../data/site";
           <span class="stat-l">chunk columns</span>
         </li>
         <li>
-          <span class="stat-n">4</span>
+          <span class="stat-n">{site.biomes}</span>
           <span class="stat-l">biomes</span>
         </li>
         <li>
-          <span class="stat-n">23</span>
+          <span class="stat-n">{site.blocks}</span>
           <span class="stat-l">block types</span>
         </li>
       </ul>

website/src/components/Showcase.astro

@@ -13,9 +13,8 @@ const missingCount = shots.filter((s) => !s.present).length;
       <h2 id="showcase-title">The world, in view</h2>
       <p class="lede">
         VOXL is built to compose well on screen — grassy hills, trees,
-        shorelines and a fog-softened horizon. Real captures are shown here once
-        they've been added; until then, the frames below are clearly marked
-        placeholders.
+        shorelines and a fog-softened horizon. Here are a couple of captures
+        straight from the running game.
       </p>
     </div>
 
@@ -63,35 +62,6 @@ const missingCount = shots.filter((s) => !s.present).length;
         </li>
       ))}
     </ul>
-
-    <details class="howto">
-      <summary>How to capture these screenshots from the game</summary>
-      <div class="howto-body">
-        <p>
-          The game ships with two capture paths (documented in the repo
-          <code>README.md</code>):
-        </p>
-        <ol>
-          <li>
-            <strong>Manual (no extra deps):</strong> run the game
-            (<code>bun run dev</code> at the repo root), open it, and press
-            <kbd>P</kbd> in-game. The canvas PNG downloads — save it with the
-            exact filename shown under each frame above into
-            <code>website/public/screenshots/</code>.
-          </li>
-          <li>
-            <strong>Automated:</strong> from the repo root, run
-            <code>bun run screenshot</code> (uses Playwright) to capture both
-            files at once, then copy them into
-            <code>website/public/screenshots/</code>.
-          </li>
-        </ol>
-        <p>
-          After adding the files, rebuild the site (<code>bun run build</code>) —
-          the real images replace the placeholders automatically.
-        </p>
-      </div>
-    </details>
   </div>
 </section>
 
@@ -252,35 +222,4 @@ const missingCount = shots.filter((s) => !s.present).length;
     font-size: 0.78rem;
     color: var(--ink-mute);
   }
-
-  .howto {
-    margin-top: 1.8rem;
-    border: 1px solid var(--border);
-    border-radius: 12px;
-    background: var(--panel-solid);
-    padding: 0.2rem 1.1rem;
-  }
-  .howto summary {
-    cursor: pointer;
-    padding: 0.9rem 0;
-    font-family: var(--mono);
-    font-size: 0.92rem;
-    color: var(--ink-dim);
-    list-style: none;
-  }
-  .howto summary::-webkit-details-marker {
-    display: none;
-  }
-  .howto summary::before {
-    content: "▸ ";
-    color: var(--teal);
-  }
-  .howto[open] summary::before {
-    content: "▾ ";
-  }
-  .howto-body {
-    padding-bottom: 1.1rem;
-    color: var(--ink-dim);
-    font-size: 0.95rem;
-  }
 </style>

website/src/components/Status.astro

@@ -9,33 +9,34 @@ const todo = status.filter((s) => !s.done);
   <div class="wrap">
     <div class="section-head">
       <p class="eyebrow">Project status</p>
-      <h2 id="status-title">An honest prototype, v{site.version}</h2>
+      <h2 id="status-title">What works today, v{site.version}</h2>
       <p class="lede">
-        VOXL is a creative-mode slice — not a finished commercial game. Here's
-        exactly what works today and what's deliberately out of scope for this
-        version.
+        VOXL is an original indie engine, not a finished commercial game. Here's
+        exactly what's live right now and what's next on the build — the full
+        phased plan lives on the roadmap.
       </p>
     </div>
 
     <div class="status-cols">
       <div class="status-col card">
-        <h3><span class="status-dot status-dot--done" aria-hidden="true"></span> In this build</h3>
+        <h3><span class="status-dot status-dot--done" aria-hidden="true"></span> Live now</h3>
         <ul class="status-list">
           {done.map((s) => (
             <li class="ok">{s.label}</li>
           ))}
         </ul>
       </div>
       <div class="status-col card">
-        <h3><span class="status-dot status-dot--todo" aria-hidden="true"></span> Not yet</h3>
+        <h3><span class="status-dot status-dot--todo" aria-hidden="true"></span> Coming next</h3>
         <ul class="status-list">
           {todo.map((s) => (
             <li class="no">{s.label}</li>
           ))}
         </ul>
         <p class="status-foot">
-          These are real gaps, not hidden behind placeholders. They're the most
-          natural next steps for a future version.
+          These are the nearest milestones on a longer journey to a full sandbox.
+          See the whole plan — crafting, mobs, advanced biomes and multiplayer —
+          on the <a href="/roadmap">roadmap</a>.
         </p>
       </div>
     </div>