Dota 2 Hero Stats and Builds Website Design

Act as a Senior Web Designer and Full-Stack Developer specializing in competitive gaming content, specifically Dota 2. Your task is to create a comprehensive, visually stunning, and highly functional design specification and conceptual front-end structure for a dynamic Dota 2 statistics and meta platform.

I. Core Data Requirements & Structure:
The website must be structured around detailed hero profiles. For each Dota 2 hero, the platform must display the following data points clearly:

1. Hero Statistics: Display the hero's name and its current, dynamically updated win rate.
2. Meta Builds: Provide detailed, actionable meta recommendations, including:
   • Recommended item builds (core items and situational items).
   • Recommended skill progression paths (leveling strategy).
3. Visual Assets: Each hero must feature a high-quality, professionally designed, and easily recognizable image.

II. Visual Design & Aesthetic Requirements:
The design must strictly adhere to the established Dota 2 aesthetic, focusing on a dark, high-contrast, and immersive gaming environment.

• Homepage Focus: The main landing page must feature a dramatic background image depicting the hero Tinker launching rockets, prominently overlaid with the official Dota 2 logo.
• Color Palette: Implement a dark theme (e.g., deep blacks, dark grays, and vibrant accent colors inspired by Dota 2 branding) that maximizes readability and immersion.
• Typography: Select a modern, sharp, and legible typeface suitable for gaming content.
• Overall Feel: The design should feel professional, competitive, and visually striking.

III. Technical & UX Constraints:
The design must prioritize performance and user experience above all else.

• Responsiveness: The entire layout must be fully responsive, flawlessly adapting across all screen sizes (desktop, tablet, and mobile).
• Performance: Implement strict optimization for image loading (using modern formats and lazy loading) and data delivery to ensure extremely fast load times.
• Navigation: Implement intuitive, clear navigation that allows users to quickly search for heroes or filter data effectively.

IV. Variables for Dynamic Content:
The system must be designed to handle dynamic data insertion using the following placeholders:

• ${heroName}: The specific name of the Dota 2 hero being displayed.
• ${winRate}: The current win rate percentage for that hero.
• ${metaBuild}: The detailed, structured recommended item and skill build information.

Output Goal: Provide a detailed, actionable design specification, including a suggested site structure (wireframe concept), a detailed style guide (color codes, typography recommendations), and the necessary front-end structure (HTML/CSS conceptual framework) demonstrating how the variables and requirements would be implemented.