From 458b03fef09ee96289e8379766d7b0a22ed7ff92 Mon Sep 17 00:00:00 2001
From: Eric Meehan <eric@eom.dev>
Date: Fri, 30 Oct 2026 15:32:09 -0400
Subject: [PATCH] Homepage

---
 htdocs/common/topnav.html                     |   2 +-
 htdocs/index.html                             | 156 +++++++-----------
 htdocs/static/home.css                        |  15 ++
 .../members/tests/test_service_groups.py      |  26 ++-
 4 files changed, 100 insertions(+), 99 deletions(-)

diff --git a/htdocs/common/topnav.html b/htdocs/common/topnav.html
index eb2df01..0390fa3 100644
--- a/htdocs/common/topnav.html
+++ b/htdocs/common/topnav.html
@@ -4,7 +4,7 @@
         <a class="pure-menu-heading" href="/" aria-label="eom.dev home">eom<span class="brand-dot">.</span>dev</a>
         <nav aria-label="Main navigation">
             <ul class="pure-menu-list">
-                <li class="pure-menu-item"><a class="pure-menu-link" href="#start-here">Explore</a></li>
+                <li class="pure-menu-item"><a class="pure-menu-link" href="#projects">Explore</a></li>
                 <li class="pure-menu-item"><a class="pure-menu-link" href="#projects">Projects</a></li>
                 <li class="pure-menu-item"><a class="pure-menu-link" href="https://discourse.eom.dev/latest">Community</a></li>
                 <li class="pure-menu-item"><a class="pure-menu-link nav-support" href="/members/">Membership</a></li>
diff --git a/htdocs/index.html b/htdocs/index.html
index 9289206..8df0be8 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -10,7 +10,7 @@
             <h1 id="hero-title">Build your own corner of the internet.</h1>
             <p class="hero-copy">Practical self-hosting, creative coding, and community experiments from Eric Meehan's home lab. Learn from the work, try the projects, and see how they are made.</p>
             <div class="hero-actions">
-                <a class="button button-primary" href="#start-here">Explore the projects</a>
+                <a class="button button-primary" href="#projects">Explore the projects</a>
                 <a class="button button-secondary" href="https://discourse.eom.dev/latest">Join the conversation</a>
                 <a class="button button-secondary" href="/members/register/">Create an eom.dev account</a>
                 <a class="quiet-link" href="#services">Browse community services</a>
@@ -25,32 +25,57 @@
         </div>
     </section>
 
-    <section class="section intro-section" id="start-here" aria-labelledby="start-title">
+    <section class="section services-section" id="services" aria-labelledby="services-title">
         <div class="section-heading">
-            <p class="eyebrow">Find your starting point</p>
-            <h2 id="start-title">Three ways into the lab</h2>
-            <p>Pick a path. Each one leads to real projects, recordings, and source code—not just a list of services.</p>
+            <p class="eyebrow">One account, a community of services</p>
+            <h2 id="services-title">Find your place on eom.dev</h2>
+            <p>A free account includes forums, chat and Git hosting. Gold (Level 3) and above add Mastodon and PeerTube account access. Public posts and videos can still be browsed without a paid membership.</p>
         </div>
-        <div class="path-grid">
-            <article class="path-card path-build">
-                <span class="card-kicker">01 / Build</span>
-                <h3>Make the infrastructure yours</h3>
-                <p>Explore self-hosted services, automation, local AI, and the recipes that run this network.</p>
-                <a class="text-link" href="https://gitea.eom.dev/DevOps/software-infrastructure">Explore the infrastructure <span aria-hidden="true">→</span></a>
+        <div class="project-grid">
+            <article class="project-card service-card">
+                <div class="project-mark service-mark"><img src="https://discourse.eom.dev/uploads/default/optimized/1X/_129430568242d1b7f853bb13ebea28b3f6af4e7_2_32x32.png" width="32" height="32" loading="lazy" decoding="async" alt=""></div>
+                <p class="card-kicker">Free · Level 0 and above</p>
+                <h3>Discourse · Forums</h3>
+                <p>Ask questions, share projects and join longer conversations. Bronze and above also get exclusive member content.</p>
+                <a class="text-link" href="https://discourse.eom.dev/">Visit Discourse <span aria-hidden="true">→</span></a>
             </article>
-            <article class="path-card path-play">
-                <span class="card-kicker">02 / Play</span>
-                <h3>Join a world or try a game</h3>
-                <p>Meet the community in Luanti or see how a small AI-assisted idea became a playable game.</p>
-                <a class="text-link" href="https://discourse.eom.dev/c/gaming/23">Find a game to join <span aria-hidden="true">→</span></a>
+            <article class="project-card service-card">
+                <div class="project-mark service-mark"><img src="https://element.eom.dev/vector-icons/144.5a63bf2.png" width="32" height="32" loading="lazy" decoding="async" alt=""></div>
+                <p class="card-kicker">Free · Level 0 and above</p>
+                <h3>Matrix · Chat</h3>
+                <p>Keep in touch in community rooms through Element. Bronze and above also get exclusive member content.</p>
+                <a class="text-link" href="https://element.eom.dev/">Open Matrix chat <span aria-hidden="true">→</span></a>
             </article>
-            <article class="path-card path-create">
-                <span class="card-kicker">03 / Create</span>
-                <h3>Listen, watch, and experiment</h3>
-                <p>Browse original music, live performances, creative coding, and field recordings.</p>
-                <a class="text-link" href="https://peertube.eom.dev/videos/browse">Browse the video library <span aria-hidden="true">→</span></a>
+            <article class="project-card service-card">
+                <div class="project-mark service-mark"><img src="https://gitea.eom.dev/assets/img/favicon.svg" width="32" height="32" loading="lazy" decoding="async" alt=""></div>
+                <p class="card-kicker">Free · Level 0 and above</p>
+                <h3>Gitea · Git hosting</h3>
+                <p>Host code, collaborate on repositories and explore the projects behind the lab.</p>
+                <a class="text-link" href="https://gitea.eom.dev/">Explore Gitea <span aria-hidden="true">→</span></a>
+            </article>
+            <article class="project-card service-card">
+                <div class="project-mark service-mark"><img src="https://mastodon.eom.dev/packs/assets/favicon-48x48-DMnduFKh.png" width="32" height="32" loading="lazy" decoding="async" alt=""></div>
+                <p class="card-kicker">Gold · Levels 3–5</p>
+                <h3>Mastodon · Social networking</h3>
+                <p>Participate with an eom.dev Mastodon account and connect with the wider fediverse.</p>
+                <a class="text-link" href="https://mastodon.eom.dev/">Visit Mastodon <span aria-hidden="true">→</span></a>
+            </article>
+            <article class="project-card service-card">
+                <div class="project-mark service-mark"><img src="https://peertube.eom.dev/client/assets/images/favicon.png" width="32" height="32" loading="lazy" decoding="async" alt=""></div>
+                <p class="card-kicker">Gold · Levels 3–5</p>
+                <h3>PeerTube · Video sharing</h3>
+                <p>Use an eom.dev PeerTube account to take part in the video community. Public recordings remain available to watch.</p>
+                <a class="text-link" href="https://peertube.eom.dev/">Visit PeerTube <span aria-hidden="true">→</span></a>
+            </article>
+            <article class="project-card service-card">
+                <div class="project-mark service-mark"><img src="https://owncast.eom.dev/favicon.ico" width="32" height="32" loading="lazy" decoding="async" alt=""></div>
+                <p class="card-kicker">Public live channel</p>
+                <h3>Owncast · Live streams</h3>
+                <p>Watch live performances, experiments and work in progress when the channel is on air.</p>
+                <a class="text-link" href="https://owncast.eom.dev/">Watch Owncast <span aria-hidden="true">→</span></a>
             </article>
         </div>
+        <p><a class="text-link" href="/members/">Compare membership benefits and included services <span aria-hidden="true">→</span></a></p>
     </section>
 
     <section class="section featured-section" id="projects" aria-labelledby="projects-title">
@@ -62,6 +87,15 @@
             <a class="text-link" href="https://gitea.eom.dev/explore/repos">Browse all repositories <span aria-hidden="true">→</span></a>
         </div>
         <div class="project-grid">
+            <article class="project-card">
+                <div class="project-mark mark-blue" aria-hidden="true">▧</div>
+                <p class="card-kicker">Experimental card game</p>
+                <h3>Wikideck</h3>
+                <p>Mine, collect and trade illustrated Wikipedia cards. This is an experimental, unaudited project; its public network has not launched.</p>
+                <div class="project-links">
+                    <a class="text-link" href="https://gitea.eom.dev/WikiDeck/wikideck">Explore Wikideck <span aria-hidden="true">→</span></a>
+                </div>
+            </article>
             <article class="project-card">
                 <div class="project-mark mark-red" aria-hidden="true">●</div>
                 <p class="card-kicker">A social experiment</p>
@@ -73,87 +107,17 @@
                 </div>
             </article>
             <article class="project-card">
-                <div class="project-mark mark-blue" aria-hidden="true">⌘</div>
-                <p class="card-kicker">Self-hosted creator tools</p>
-                <h3>Broadcast from your own stack</h3>
-                <p>See how the network's streaming and video services fit together, then explore the deployment automation behind them.</p>
+                <div class="project-mark mark-green" aria-hidden="true">▦</div>
+                <p class="card-kicker">Season V · Public server</p>
+                <h3>Luanti</h3>
+                <p>Explore a low-gravity world with eleven team islands, markets and an adventure-map spawn. Connect with a Luanti client at <code>luanti.eom.dev:30000</code>.</p>
                 <div class="project-links">
-                    <a class="text-link" href="https://owncast.eom.dev/">Visit the live channel <span aria-hidden="true">→</span></a>
-                    <a class="text-link" href="https://gitea.eom.dev/DevOps/ansible-role-peertube">Explore the PeerTube role</a>
-                </div>
-            </article>
-            <article class="project-card">
-                <div class="project-mark mark-green" aria-hidden="true">♫</div>
-                <p class="card-kicker">Music and code</p>
-                <h3>Make patterns, make sound</h3>
-                <p>Listen to electronic compositions made with Tidal Cycles and Strudel, and explore the source behind the music.</p>
-                <div class="project-links">
-                    <a class="text-link" href="https://peertube.eom.dev/c/eric_music">Listen on PeerTube <span aria-hidden="true">→</span></a>
-                    <a class="text-link" href="https://gitea.eom.dev/Music/tidal-cycles-and-strudel-singles">Explore the collection</a>
+                    <a class="text-link" href="https://discourse.eom.dev/t/luanti-season-v/690">Season V details <span aria-hidden="true">→</span></a>
                 </div>
             </article>
         </div>
     </section>
 
-    <section class="section" id="services" aria-labelledby="services-title">
-        <div class="section-heading">
-            <p class="eyebrow">One account, a community of services</p>
-            <h2 id="services-title">Find your place on eom.dev</h2>
-            <p>A free account includes forums, chat, Git hosting and hosted games. Gold (Level 3) and above add Mastodon and PeerTube account access. Public posts and videos can still be browsed without a paid membership.</p>
-        </div>
-        <div class="project-grid">
-            <article class="project-card">
-                <p class="card-kicker">Free · Level 0 and above</p>
-                <h3>Discourse · Forums</h3>
-                <p>Ask questions, share projects and join longer conversations. Bronze and above also get exclusive member content.</p>
-                <a class="text-link" href="https://discourse.eom.dev/">Visit Discourse <span aria-hidden="true">→</span></a>
-            </article>
-            <article class="project-card">
-                <p class="card-kicker">Free · Level 0 and above</p>
-                <h3>Matrix · Chat</h3>
-                <p>Keep in touch in community rooms through Element. Bronze and above also get exclusive member content.</p>
-                <a class="text-link" href="https://element.eom.dev/">Open Matrix chat <span aria-hidden="true">→</span></a>
-            </article>
-            <article class="project-card">
-                <p class="card-kicker">Free · Level 0 and above</p>
-                <h3>Gitea · Git hosting</h3>
-                <p>Host code, collaborate on repositories and explore the projects behind the lab.</p>
-                <a class="text-link" href="https://gitea.eom.dev/">Explore Gitea <span aria-hidden="true">→</span></a>
-            </article>
-            <article class="project-card">
-                <p class="card-kicker">Free · Level 0 and above</p>
-                <h3>Hosted games</h3>
-                <p>Join community games, including Luanti, and try The Button. No paid membership is needed; exclusive higher-tier servers are not currently offered.</p>
-                <div class="project-links"><a class="text-link" href="https://discourse.eom.dev/c/gaming/23">Find a game</a><a class="text-link" href="https://button.eom.dev/">Play The Button</a></div>
-            </article>
-            <article class="project-card">
-                <p class="card-kicker">Gold · Levels 3–5</p>
-                <h3>Mastodon · Social networking</h3>
-                <p>Participate with an eom.dev Mastodon account and connect with the wider fediverse.</p>
-                <a class="text-link" href="https://mastodon.eom.dev/">Visit Mastodon <span aria-hidden="true">→</span></a>
-            </article>
-            <article class="project-card">
-                <p class="card-kicker">Gold · Levels 3–5</p>
-                <h3>PeerTube · Video sharing</h3>
-                <p>Use an eom.dev PeerTube account to take part in the video community. Public recordings remain available to watch.</p>
-                <a class="text-link" href="https://peertube.eom.dev/">Visit PeerTube <span aria-hidden="true">→</span></a>
-            </article>
-            <article class="project-card">
-                <p class="card-kicker">Included with your free account</p>
-                <h3>Dex · Shared sign-in</h3>
-                <p>Use the same eom.dev identity across compatible services. Dex handles sign-in; start from the service you want to use.</p>
-                <a class="text-link" href="/members/register/">Create your account <span aria-hidden="true">→</span></a>
-            </article>
-            <article class="project-card">
-                <p class="card-kicker">Public live channel</p>
-                <h3>Owncast · Live streams</h3>
-                <p>Watch live performances, experiments and work in progress when the channel is on air.</p>
-                <a class="text-link" href="https://owncast.eom.dev/">Watch Owncast <span aria-hidden="true">→</span></a>
-            </article>
-        </div>
-        <p><a class="text-link" href="/members/">Compare membership benefits and included services <span aria-hidden="true">→</span></a></p>
-    </section>
-
     <section class="community-band" aria-labelledby="community-title">
         <div>
             <p class="eyebrow">Built in public</p>
diff --git a/htdocs/static/home.css b/htdocs/static/home.css
index fbe8704..fd6b5be 100755
--- a/htdocs/static/home.css
+++ b/htdocs/static/home.css
@@ -442,6 +442,21 @@ main {
     padding-top: 2rem;
 }
 
+.services-section {
+    padding-top: 2rem;
+}
+
+.service-mark img {
+    width: 2rem;
+    height: 2rem;
+    object-fit: contain;
+}
+
+.service-card > .text-link,
+.service-card > .project-links {
+    margin-top: auto;
+}
+
 .section-heading-row {
     display: flex;
     align-items: end;
diff --git a/membership/members/tests/test_service_groups.py b/membership/members/tests/test_service_groups.py
index 331c69b..3325411 100755
--- a/membership/members/tests/test_service_groups.py
+++ b/membership/members/tests/test_service_groups.py
@@ -128,13 +128,35 @@ class ServiceDisplayTests(TestCase):
         parser = DirectoryParser()
         parser.feed(homepage.read_text(encoding="utf-8"))
         text = " ".join(parser.text)
-        for name in ("Dex", "Discourse", "Matrix", "Gitea", "Mastodon", "PeerTube", "Hosted games", "Owncast"):
+        for name in ("Discourse", "Matrix", "Gitea", "Mastodon", "PeerTube", "Owncast"):
             self.assertIn(name, text)
         self.assertIn("Free · Level 0 and above", text)
         self.assertIn("Gold · Levels 3–5", text)
-        self.assertIn("not currently offered", text)
         self.assertIn("/members/", parser.links)
         self.assertIn("https://element.eom.dev/", parser.links)
+        homepage_html = homepage.read_text(encoding="utf-8")
+        self.assertNotIn('id="start-here"', homepage_html)
+        self.assertNotIn("Three ways into the lab", homepage_html)
+        self.assertNotIn("Hosted games", text)
+        for host in ("discourse.eom.dev", "element.eom.dev", "gitea.eom.dev", "mastodon.eom.dev", "peertube.eom.dev", "owncast.eom.dev"):
+            self.assertIn(f'src="https://{host}/', homepage_html)
+        self.assertNotIn("Dex · Shared sign-in", text)
+        projects = homepage_html.split('id="projects"', 1)[1].split("</section>", 1)[0]
+        for label in ("Wikideck", "The Button", "Luanti"):
+            self.assertIn(label, projects)
+        self.assertNotIn("My Luanti server", projects)
+        self.assertIn("Season V · Public server", projects)
+        self.assertIn("eleven team islands, markets and an adventure-map spawn", projects)
+        self.assertIn("luanti.eom.dev:30000", projects)
+        for destination in (
+            "https://gitea.eom.dev/WikiDeck/wikideck",
+            "https://button.eom.dev/",
+            "https://discourse.eom.dev/t/luanti-season-v/690",
+        ):
+            self.assertIn(destination, projects)
+        self.assertNotIn("Browser client source", projects)
+        self.assertNotIn("Broadcast from your own stack", projects)
+        self.assertNotIn("Make patterns, make sound", projects)
 
     @override_settings(MEMBERSHIP_SERVICE_GROUPS={
         "0": ["cn=Dex Users," + BASE, "cn=Matrix Users," + BASE],