UI

htdocs/index.html

@@ -13,6 +13,7 @@
                 <a class="button button-primary" href="#start-here">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>
             </div>
             <p class="hero-note">Independent software, open-source projects, music, and games—made in Raleigh, North Carolina.</p>
         </div>
@@ -94,6 +95,65 @@
         </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>