Hack #7: v0 · v0
7 May, 14:24
We completely redesigned the official FIFA World Cup 2026 Hospitality website (https://fifaworldcup26.hospitality.fifa.com/us/en) as a dark, cinematic, editorial experience and added something the original doesn't have: a voice concierge powered by ElevenLabs that lets you talk to the website. The Problem: The 2026 World Cup is the most complex in history. Three host countries, 16 venues, 104 matches, 48 teams. Navigating this information through traditional filters and tables is overwhelming, especially for fans planning cross-border trips. Our Solution: A voice-first AI concierge that knows every match, venue, hospitality package, and team schedule. Ask "Where does Argentina play?" and it answers instantly, then navigates you there. Ask "What matches are in Mexico City between June 14-18?" and it cross-references everything for you. The agent doesn't just answer. It acts on the UI: scrolling to sections, navigating between pages, and highlighting relevant content. Design: We replaced the corporate light theme with a layered dark luxury aesthetic. Radial glows, pitch blueprint SVG overlays, animated ball trajectory paths, glassmorphism panels, 3D Three.js hero scene, editorial section numbering, and a tri-accent color system (Cyan / Gold / Pitch Green). Every section feels like a premium sports magazine. ElevenLabs Integration: The Conversational AI SDK powers a persistent floating voice dock across all pages. We feed the full tournament data (104 matches, 48 teams, 16 venues, pricing) into a RAG knowledge base. The agent uses client-side tool calling to navigate the site, making voice a first-class interaction method, not a gimmick. Built with: v0, Next.js 16, React 19, Three.js, Tailwind CSS v4, ElevenLabs Conversational AI SDK
