Tuning Landing Journeys

Optimize the 32Gamers portal's landing page flow and conversion paths. The portal is a static HTML/CSS/JS app with Firebase backend—no framework abstractions.

Quick Start

Audit Current Page Hierarchy

bash

# Start local server
python3 -m http.server 8000 &

# Take accessibility snapshot with browser tools
# Use mcp__playwright__browser_snapshot to capture current state

Key Landing Elements

Element	Location	Purpose
Logo + Neon Border	`.logo-container`	Brand anchor, visual hierarchy top
Title + Glitch	`.cyber-title .glitch`	Primary heading, attention capture
Subtitle	`.subtitle`	Action prompt "SELECT YOUR MISSION"
App Grid	`.button-container`	Core conversion: app selection
Admin Icon	`.admin-icon`	Secondary path to admin
Loading State	`.loading-placeholder`	First-load UX before apps render

Primary Journey: Landing → App

code

Landing Load → Loading State → App Grid Render → App Card Hover → Click

Critical Path Files

•index.html:56-80 - Title hierarchy and loading state
•style.css:426-602 - App card grid and hover states
•scripts/app.js:56-92 - App rendering and click tracking

Secondary Journey: Landing → Admin

code

Landing → Admin Icon (or Ctrl+Alt+A) → firebase-admin.html → Google OAuth → CRUD

Admin Access Friction Points

javascript

// Current: Hidden icon requires discovery
// index.html:46 - admin icon placement
<div class="admin-icon" id="adminIcon" title="Admin Access [CTRL+ALT+A]">

Common Patterns

Improving Visual Hierarchy

When: Apps load but users don't engage

css

/* Strengthen subtitle call-to-action */
.subtitle {
    font-size: clamp(1rem, 2.5vw, 1.5rem);  /* Increase from 0.875rem */
    color: var(--neon-yellow);
    animation: subtitlePulse 2s ease-in-out infinite;
}

Reducing Loading State Friction

When: Users bounce during load