A pixel-perfect, high-fidelity recreation of the official Valorant website using real data from the Valorant API.
- Immersive Hero — Autoplay cinematic video background with VALORANT branding
- Dynamic News Section — Horizontal scroll with real community & update cards
- Latest Episode Highlight — Full-screen cinematic with “DIMENSION” episode
- Agents Experience — Browse all playable agents, view roles, biographies & abilities (fetched from Valorant API)
- Maps Gallery — Interactive carousel with official map splash art
- Fully Responsive — Mobile-first navbar with smooth hamburger menu
- Fast & Modern — Built with Vite + React + Tailwind (lightning-fast dev & build)
- One-click Deploy — Pre-configured for Netlify
| Layer | Technology | Purpose |
|---|---|---|
| Framework | React 18 + Vite | Lightning-fast SPA |
| Styling | Tailwind CSS + custom CSS | Utility-first design |
| Routing | React Router v6 | Client-side navigation |
| Data | Axios + Valorant API | Real agents & maps |
| Deployment | Netlify | Zero-config hosting |
| Icons | Custom SVGs | Riot & Valorant branding |
valorant-landing-page/
├── public/
│ └── vite.svg
├── src/
│ ├── assets/ # icons, videos, images
│ ├── components/
│ │ ├── layout/ # Navbar, Footer, CTA
│ │ └── pages/
│ │ ├── home/ # Hero, News, Agents, Maps...
│ │ ├── Agents.jsx, Agent.jsx, Maps.jsx
│ ├── constants/ # navLinks, news, socialMedia
│ ├── style.js # Tailwind helper styles
│ ├── App.jsx
│ └── main.jsx
├── netlify.toml # SPA redirect config
├── tailwind.config.cjs
├── vite.config.js
└── package.json