From d1249adecafe705adee26b96f7241a672b4d25f6 Mon Sep 17 00:00:00 2001
From: Frank <frank.van.den.berg@eleaf.com>
Date: Sat, 5 Sep 2026 12:18:36 +0200
Subject: [PATCH] Add "How it works" section to homepage explaining remote play

Explains that games are played online with friends anywhere in the
world, using the in-game chat instead of a separate video/voice call.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 templates/website/home/index.html.twig | 92 ++++++++++++++++++++++++++
 1 file changed, 92 insertions(+)

diff --git a/templates/website/home/index.html.twig b/templates/website/home/index.html.twig
index c144bdc..828bce8 100644
--- a/templates/website/home/index.html.twig
+++ b/templates/website/home/index.html.twig
@@ -44,6 +44,40 @@
             box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
             pointer-events: none;
         }
+        .how-it-works-kicker {
+            letter-spacing: .1em;
+            color: var(--brand-teal-dark, #1c5a70);
+        }
+        .how-step-icon {
+            width: 64px;
+            height: 64px;
+            border-radius: 50%;
+            background: rgba(47, 143, 174, .12);
+            color: var(--brand-teal-dark, #1c5a70);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.6rem;
+        }
+        .how-step-connector {
+            position: relative;
+        }
+        @media (min-width: 768px) {
+            .how-step-connector:not(:last-child)::after {
+                content: "";
+                position: absolute;
+                top: 32px;
+                left: calc(50% + 44px);
+                right: calc(-50% + 44px);
+                height: 2px;
+                background: rgba(47, 143, 174, .25);
+            }
+        }
+        .world-map-strip {
+            background: rgba(47, 143, 174, .06);
+            border: 1px solid rgba(47, 143, 174, .2);
+            border-radius: .75rem;
+        }
     </style>
 {% endblock %}
 
@@ -74,6 +108,64 @@
     </div>
 </div>
 
+<div class="mb-5">
+    <div class="text-center mb-4">
+        <span class="text-uppercase small fw-semibold how-it-works-kicker">How it works</span>
+        <h2 class="fw-bold">One team &mdash; even if you're not in the same room</h2>
+        <p class="col-lg-8 mx-auto text-secondary">
+            Every game on EscapePage is built to be played online, together. You don't need to travel,
+            book a room, or even hop on a call &mdash; everyone plays from their own screen, and the
+            game has a built-in chat to keep your team talking.
+        </p>
+    </div>
+    <div class="row g-4">
+        <div class="col-md-3 col-6 how-step-connector">
+            <div class="text-center h-100 p-3">
+                <div class="how-step-icon mx-auto mb-3"><i class="bi bi-people-fill"></i></div>
+                <h3 class="h6 fw-bold">1. Invite your team</h3>
+                <p class="small text-secondary mb-0">
+                    Get two or three friends to join the same game &mdash; no matter where in the
+                    world they are.
+                </p>
+            </div>
+        </div>
+        <div class="col-md-3 col-6 how-step-connector">
+            <div class="text-center h-100 p-3">
+                <div class="how-step-icon mx-auto mb-3"><i class="bi bi-display"></i></div>
+                <h3 class="h6 fw-bold">2. Everyone logs in</h3>
+                <p class="small text-secondary mb-0">
+                    Each player opens the game in their own browser, from wherever they are. No app,
+                    no download, no travel.
+                </p>
+            </div>
+        </div>
+        <div class="col-md-3 col-6 how-step-connector">
+            <div class="text-center h-100 p-3">
+                <div class="how-step-icon mx-auto mb-3"><i class="bi bi-chat-dots-fill"></i></div>
+                <h3 class="h6 fw-bold">3. Chat in the game</h3>
+                <p class="small text-secondary mb-0">
+                    Each of you sees different clues. Use the built-in chat to share what you find and
+                    connect the dots &mdash; no separate call needed.
+                </p>
+            </div>
+        </div>
+        <div class="col-md-3 col-6 how-step-connector">
+            <div class="text-center h-100 p-3">
+                <div class="how-step-icon mx-auto mb-3"><i class="bi bi-hourglass-split"></i></div>
+                <h3 class="h6 fw-bold">4. Beat the clock</h3>
+                <p class="small text-secondary mb-0">
+                    Work together in real time to crack it before the timer runs out &mdash; you win
+                    or lose as one team.
+                </p>
+            </div>
+        </div>
+    </div>
+    <div class="world-map-strip text-center p-3 p-md-4 mt-4">
+        <i class="bi bi-globe-americas me-2" style="color: var(--brand-teal-dark, #1c5a70);"></i>
+        <span class="text-secondary">Amsterdam, Auckland, or anywhere in between &mdash; as long as you're online, you can play together.</span>
+    </div>
+</div>
+
 <div class="text-center py-4">
     <img src="{{ asset('images/logo.png') }}" alt="{{ 'site.name'|trans }}" height="100" class="mb-3">
     <p class="col-lg-8 mx-auto text-secondary">{{ 'home.description'|trans }}</p>