quasar/docs/02-tecnico/frontend.md

# Frontend - Landing Page de Quasar

## Visión General

El frontend de Quasar está implementado con **Next.js 16.1.6**, **React 19**, **TypeScript**, **Shadcn UI** y **Tailwind CSS 4**. La landing page presenta una estética **Mass Effect-inspired** con efectos de glassmorphism, holográficos y una paleta de colores cyberpunk cyan y gold sobre fondo oscuro espacial.

## Stack Tecnológico

| Tecnología   | Versión | Propósito                      |
| ------------ | ------- | ------------------------------ |
| Next.js      | 16.1.6  | Framework React con App Router |
| React        | 19.2.3  | Biblioteca UI                  |
| TypeScript   | 5.x     | Type safety                    |
| Shadcn UI    | 3.8.5   | Componentes accesibles         |
| Tailwind CSS | 4.x     | Estilos utility-first          |
| Yarn         | 4.12.0  | Gestor de paquetes             |

## Estética Visual

### Paleta de Colores Mass Effect-inspired

| Color          | Hex       | Uso                              |
| -------------- | --------- | -------------------------------- |
| Background     | `#0a0a12` | Fondo oscuro espacial            |
| Primary (Cyan) | `#00d0e0` | Acentos principales, botones     |
| Accent (Gold)  | `#f0c040` | Detalles secundarios, highlights |
| Text           | `#ffffff` | Texto principal                  |
| Muted          | `#64748b` | Texto secundario                 |

### Efectos Visuales Implementados

- **Glassmorphism:** `backdrop-filter: blur(10px)` en navbar y footer
- **Glowing effects:** Brillo cyan y gold en elementos interactivos
- **Holographic:** Animación de escaneo horizontal en bordes
- **Pulse animation:** Indicadores de estado con pulso
- **Starfield background:** Fondo animado de estrellas

## Componentes de la Landing Page

### Navbar

- **Ubicación:** [`frontend/src/components/landing/Navbar.tsx`](../frontend/src/components/landing/Navbar.tsx)
- **Características:**
  - Fijo en la parte superior con glassmorphism
  - Logo "QUASAR" con efecto glow cyan
  - Barra de búsqueda con efecto de brillo al enfocar
  - Responsive con menú móvil desplegable
- **Accesibilidad:** `aria-label`, `aria-expanded`, `tabIndex` dinámico

### Hero Section

- **Ubicación:** [`frontend/src/components/landing/Hero.tsx`](../frontend/src/components/landing/Hero.tsx)
- **Características:**
  - Imagen de fondo espacial de alta calidad (Unsplash)
  - Título "FEATURED MISSION" y nombre del juego "Stellar Odyssey"
  - Efecto holográfico en el borde
  - Botón CTA "MISSION START" con gradiente cyan-gold
  - Estadísticas del juego (rating, horas, gráficos)
- **Accesibilidad:** `id="hero"`, `aria-labelledby`, `alt` descriptivo

### Game Grid

- **Ubicación:** [`frontend/src/components/landing/GameGrid.tsx`](../frontend/src/components/landing/GameGrid.tsx)
- **Características:**
  - Grid de tarjetas de juegos con diseño responsive
  - Estadísticas reveladas al hover (rating, género, año, plataforma)
  - Efectos hover con transformación y brillo
- **Accesibilidad:** `id="games"`, `aria-labelledby`, `loading="lazy"`, `aria-hidden`

### Footer

- **Ubicación:** [`frontend/src/components/landing/Footer.tsx`](../frontend/src/components/landing/Footer.tsx)
- **Características:**
  - Diseño minimalista con glassmorphism
  - Indicador "SYSTEM STATUS: ONLINE" con animación de pulso
  - Enlaces de navegación secundarios
- **Accesibilidad:** `role="contentinfo"`

## Configuración del Tema

### globals.css

El tema Mass Effect-inspired se configura en [`frontend/src/app/globals.css`](../frontend/src/app/globals.css):

```css
:root {
  --background: 240 10% 4%; /* #0a0a12 */
  --primary: 180 100% 44%; /* #00d0e0 */
  --accent: 45 90% 60%; /* #f0c040 */
  /* ... más variables */
}
```

### Animaciones Personalizadas

- `.glass` - Efecto de vidrio esmerilado
- `.glow-cyan`, `.glow-gold` - Efectos de brillo
- `.holographic` - Efecto holográfico con escaneo
- `.pulse` - Animación de pulso
- `.starfield` - Fondo animado de estrellas

## Accesibilidad y Compliance

### Web Interface Guidelines Compliance

| Categoría         | Cumplimiento    | Detalles                                                |
| ----------------- | --------------- | ------------------------------------------------------- |
| Accesibilidad     | ✅ 95%+         | ARIA labels, keyboard navigation, screen reader support |
| Semántica HTML5   | ✅ 95%+         | `id` en secciones, `role` en footer, `main` con id      |
| Contrast Ratios   | ✅ WCAG AA      | Cyan `#00d0e0`, Gold `#f0c040`                          |
| Responsive Design | ✅ Mobile-first | `min-h-screen`, breakpoints `sm:`, `md:`, `lg:`         |
| Performance       | ✅ Optimizado   | Lazy loading, imágenes optimizadas                      |
| SEO               | ✅ Optimizado   | Metadata específica, OpenGraph tags, `lang="es"`        |

### Mejoras Implementadas

- **Accesibilidad:** Labels ARIA, `aria-expanded`, `tabIndex` dinámico, `alt` descriptivos
- **Semántica HTML5:** `id` en secciones, `role` en footer, `main` con id
- **Contrast Ratios:** Cyan ajustado a `#00d0e0`, Gold ajustado a `#f0c040`
- **Responsive Design:** `min-h-screen` en lugar de `h-screen`, `pt-16` en main
- **Performance:** `loading="lazy"` en imágenes del grid, `priority` en Hero
- **SEO:** Metadata específica de Quasar, `lang="es"`, OpenGraph tags

## Desarrollo Local

### Instalación

```bash
cd frontend
yarn install
```

### Desarrollo

```bash
yarn dev
# Frontend disponible en: http://localhost:3000
```

### Build para Producción

```bash
yarn build
yarn start
```

### Testing

```bash
# Lint
yarn lint

# Type check
yarn type-check
```

## Estructura de Archivos

```
frontend/
├── src/
│   ├── app/
│   │   ├── favicon.ico
│   │   ├── globals.css          # Tema Mass Effect + animaciones
│   │   ├── layout.tsx           # Root layout con metadata SEO
│   │   └── page.tsx             # Landing page con componentes
│   ├── components/
│   │   ├── landing/
│   │   │   ├── Navbar.tsx      # Navbar con glassmorphism
│   │   │   ├── Hero.tsx         # Hero section con featured game
│   │   │   ├── GameGrid.tsx     # Grid de tarjetas con hover effects
│   │   │   └── Footer.tsx       # Footer minimalista
│   │   └── ui/
│   │       ├── button.tsx       # Componente Shadcn UI
│   │       ├── card.tsx         # Componente Shadcn UI
│   │       └── input.tsx        # Componente Shadcn UI
│   └── lib/
│       └── utils.ts             # Utilidades de Shadcn UI
├── package.json
├── tsconfig.json
├── tailwind.config.ts
└── next.config.ts
```

## Componentes Shadcn UI Instalados

- **Button:** Botones con variantes (default, destructive, outline, secondary, ghost, link)
- **Input:** Campos de entrada con estilos consistentes
- **Card:** Tarjetas con header, content y footer

## Imágenes Placeholder

Todas las imágenes utilizadas son de alta calidad de Unsplash:

- **Hero background:** Imagen espacial/sci-fi
- **Game covers:** Imágenes de videojuegos variados

## Próximos Pasos

- [ ] Integrar con backend API para datos reales de juegos
- [ ] Añadir páginas adicionales (Dashboard, Games Library, Settings)
- [ ] Implementar autenticación de usuarios
- [ ] Añadir tests unitarios y E2E para componentes
- [ ] Implementar internacionalización (i18n)

## Referencias

- [Next.js Documentation](https://nextjs.org/docs)
- [Shadcn UI Documentation](https://ui.shadcn.com)
- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
- [Web Interface Guidelines](https://vercel-labs.github.io/web-interface-guidelines)

---

_Última actualización: 2026-02-23_