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
• 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
• 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
• 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
• 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:

: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

cd frontend
yarn install

Desarrollo

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

Build para Producción

yarn build
yarn start

Testing

# 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
• Shadcn UI Documentation
• Tailwind CSS Documentation
• Web Interface Guidelines

---

Última actualización: 2026-02-23