Frank/Escapepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add "How it works" section to homepage explaining remote play

Browse Source 
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>
This commit is contained in:
Frank
2026-09-05 12:18:36 +02:00
co-authored by Claude Sonnet 5
parent 9ad6c92759
commit d1249adeca
1 changed files with 92 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/website/home/index.html.twig
+92
View File
@@ -44,6 +44,40 @@
box-shadow: 0 4px 12px rgba(0, 0, 0, .35); box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
pointer-events: none; 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> </style>
{% endblock %} {% endblock %}
@@ -74,6 +108,64 @@
</div> </div>
</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"> <div class="text-center py-4">
<img src="{{ asset('images/logo.png') }}" alt="{{ 'site.name'|trans }}" height="100" class="mb-3"> <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> <p class="col-lg-8 mx-auto text-secondary">{{ 'home.description'|trans }}</p>