Rewrite GitHub Pages as product sites with product-mark heroes.

Expand thin stubs into accurate product pages: README-aligned install/build
snippets, snippet-grid cards, and related links preferring pydevices.github.io
Pages over GitHub. Hero uses product SVG marks; header keeps org logo.
Sync vendored site.css from PyDevices.github.io.

Author: cursoragent

web/index.html

@@ -5,7 +5,7 @@
   <script>try{if(localStorage.getItem('pydevices-theme')==='light'){document.documentElement.setAttribute('data-theme','light');}}catch(e){}</script>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>lv_circuitpython_mod — PyDevices</title>
-  <meta name="description" content="CircuitPython integration for LVGL.">
+  <meta name="description" content="CircuitPython integration for LVGL — tree patches, build_cp.sh, and tests. Not a MicroPython USER_C_MODULES usermod.">
   <link rel="icon" type="image/svg+xml" href="https://pydevices.github.io/assets/img/logo.svg">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -21,7 +21,7 @@
         PyDevices
       </a>
       <nav class="nav">
-        <a href="https://pydevices.github.io/pydisplay/">pydisplay</a>
+        <a href="https://pydevices.github.io/lv_bindings/">lv_bindings</a>
         <a href="https://pydevices.github.io/cmods/">cmods</a>
         <a href="https://github.com/PyDevices/lv_circuitpython_mod">Source</a>
       </nav>
@@ -33,40 +33,75 @@
   </header>
 
   <section class="hero wrap">
-    <div class="logo-badge"><img src="https://pydevices.github.io/assets/img/logo.svg" alt="PyDevices logo" width="112" height="112"></div>
+    <div class="logo-badge product-mark"><img src="https://pydevices.github.io/assets/img/products/lv_circuitpython_mod.svg" alt="lv_circuitpython_mod" width="112" height="112"></div>
     <span class="eyebrow">PyDevices / lv_circuitpython_mod</span>
-    <h1>CircuitPython integration for LVGL</h1>
-    <p>lv_circuitpython_mod carries the CircuitPython-side integration for LVGL: tree patches, build glue, and tests that consume the CircuitPython artifacts from lv_bindings. It is how <code>import lvgl</code> becomes a CircuitPython-friendly native module instead of a MicroPython-only usermod.</p>
-    <p>Work here when CircuitPython&apos;s module layout or build system needs LVGL-specific wiring. Pair it with a regenerated lv_bindings CircuitPython output and the cmods <code>cp-unix</code> path (or this repo&apos;s <code>build_cp.sh</code>) to verify the coverage build still smoke-tests cleanly.</p>
+    <h1>lv_circuitpython_mod</h1>
+    <p>CircuitPython integration for LVGL: tree patches, build glue (<code>build_cp.sh</code>), spike templates, and tests. It consumes <a href="https://pydevices.github.io/lv_bindings/">lv_bindings</a> CircuitPython artifacts (<code>generated/lvgl_circuitpython.c</code> / <code>.h</code>) so <code>import lvgl</code> works as a CircuitPython-native module.</p>
+    <p>This is <strong>not</strong> a MicroPython <code>USER_C_MODULES</code> usermod — CircuitPython uses a different module layout and patch-driven build. Pair a stable CircuitPython release tag with regenerated bindings, then drive any port/board/variant through <code>./build_cp.sh</code>.</p>
     <div class="cta">
       <a class="btn primary" href="https://github.com/PyDevices/lv_circuitpython_mod">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.9a3.4 3.4 0 0 0-1-2.6c3-.3 6-1.5 6-6.5a5 5 0 0 0-1.4-3.5 4.6 4.6 0 0 0-.1-3.5s-1.1-.3-3.5 1.3a12 12 0 0 0-6 0C6.6 1.7 5.5 2 5.5 2a4.6 4.6 0 0 0-.1 3.5A5 5 0 0 0 4 9c0 5 3 6.2 6 6.5a3.4 3.4 0 0 0-1 2.6V22"/></svg>
         Source on GitHub
       </a>
-      <a class="btn" href="https://pydevices.github.io/">PyDevices</a>
+      <a class="btn" href="https://pydevices.github.io/lv_bindings/">lv_bindings</a>
+      <a class="btn" href="https://pydevices.github.io/cmods/">cmods</a>
     </div>
   </section>
 
   <main class="cards wrap">
     <div class="section-head">
-      <h2>Build with lv_bindings + a tagged CircuitPython clone</h2>
+      <h2>First-time setup</h2>
+      <span class="hint">Sibling clones of <code>lv_bindings/</code> and a tagged <code>circuitpython/</code></span>
     </div>
     <div class="install-block">
-      <pre><code>git clone https://github.com/PyDevices/lv_bindings.git
-cd lv_bindings &amp;&amp; git submodule update --init lvgl &amp;&amp; cd ..
-./lv_bindings/regenerate_lvcp.sh
+      <pre><code># Pick a stable tag from github.com/adafruit/circuitpython/releases
+git clone --branch 10.2.1 \
+  https://github.com/adafruit/circuitpython.git circuitpython
+cd circuitpython &amp;&amp; make fetch-all-submodules &amp;&amp; cd ..
 
-git clone https://github.com/PyDevices/lv_circuitpython_mod.git
-./lv_circuitpython_mod/build_cp.sh --port unix --variant coverage</code></pre>
+git clone https://github.com/PyDevices/lv_bindings.git lv_bindings
+cd lv_bindings
+git submodule update --init lvgl
+python3 -m venv .venv
+.venv/bin/pip install -r requirements.txt
+./regenerate_lvcp.sh
+cd ..</code></pre>
+    </div>
+
+    <div class="section-head" style="margin-top: 36px;">
+      <h2>Patch and build</h2>
+      <span class="hint"><code>build_cp.sh</code> always runs <code>apply_cp_lvgl_patches.sh --apply</code> first</span>
+    </div>
+    <div class="snippet-grid">
+      <div class="snippet-card">
+        <h3>unix coverage</h3>
+        <p>Default cmods <code>cp-unix</code> target; good for the CP test suite / gcov.</p>
+        <pre><code>cd lv_circuitpython_mod
+./apply_cp_lvgl_patches.sh --apply \
+  --port unix --variant coverage
+./build_cp.sh --port unix --variant coverage
+
+../circuitpython/ports/unix/build-coverage/micropython \
+  ./test_lvgl_cp_unix.py</code></pre>
+      </div>
+      <div class="snippet-card">
+        <h3>Board firmware</h3>
+        <p>Interactive or CLI port/board/variant selection. Install GCC 14+ toolchains first (see README).</p>
+        <pre><code>./build_cp.sh --port espressif \
+  --board espressif_esp32p4_function_ev
+
+./build_cp.sh   # interactive selection</code></pre>
+      </div>
     </div>
 
     <div class="section-head" style="margin-top: 36px;">
       <h2>Related</h2>
     </div>
     <ul class="linklist">
-      <li><a href="https://pydevices.github.io/lv_bindings/"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>lv_bindings — the binding generator</a></li>
-      <li><a href="https://pydevices.github.io/cmods/"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>cmods — the build workspace</a></li>
+      <li><a href="https://pydevices.github.io/lv_bindings/"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>lv_bindings — binding generator</a></li>
+      <li><a href="https://pydevices.github.io/cmods/"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>cmods — optional sibling workspace</a></li>
       <li><a href="https://pydevices.github.io/pydisplay/"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>pydisplay</a></li>
+      <li><a href="https://pydevices.github.io/lv_micropython_cmod/"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>lv_micropython_cmod — MicroPython usermod</a></li>
     </ul>
   </main>
 

web/vendor/pydevices-chrome/site.css

@@ -304,6 +304,52 @@ pre code {
   display: block;
 }
 
+/* Product hero mark — same orange badge as the org logo, but the card icon
+ * (stroke SVG under assets/img/products/) instead of the shared PyDevices mark.
+ * Keeps header branding org-wide while each product page gets its own face. */
+.logo-badge.product-mark {
+  padding: 0;
+}
+
+.logo-badge.product-mark img,
+.logo-badge.product-mark > svg {
+  width: 54%;
+  height: 54%;
+}
+
+/* Short API / install excerpts under section heads */
+.snippet-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 18px;
+}
+
+.snippet-card {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--panel);
+  box-shadow: var(--shadow-soft);
+  padding: 18px 20px;
+  text-align: left;
+}
+
+.snippet-card h3 {
+  margin: 0 0 6px;
+  font-size: 1.02rem;
+  color: var(--ink);
+  letter-spacing: -0.01em;
+}
+
+.snippet-card p {
+  margin: 0 0 12px;
+  color: var(--ink-soft);
+  font-size: 0.92rem;
+}
+
+.snippet-card pre {
+  margin: 0;
+}
+
 .hero .eyebrow {
   display: inline-block;
   text-transform: uppercase;