Maquetación de Página Web Simple con Next.js

**Documento Funcional – Maquetación Web VIPX**

---

### 1. Objetivo

Definir los requisitos y alcance para la maquetación de la web VIPX, asegurando la correcta implementación de los elementos visuales y estructurales según el diseño proporcionado en Figma, utilizando Next.js con React y TypeScript.

> **Nota:** El desarrollo está sujeto de manera estricta al diseño original en Figma ([https://www.figma.com/design/TVoHtOOdh7A5BZfr2j6p9H/VIPX?node-id=0-1\&p=f\&t=CPCIMTMTxPC0nLuI-0](https://www.figma.com/design/TVoHtOOdh7A5BZfr2j6p9H/VIPX?node-id=0-1&p=f&t=CPCIMTMTxPC0nLuI-0)).

---

### 2. Alcance

* **Ámbito:** Solo maquetación en Next.js (React + TypeScript) sin lógica de negocio ni integración de datos reales.
* **Entornos de entrega:** Desarrollo local y despliegue en Vercel (o similar) para preview.
* **Artboards a implementar:**

  1. Home
  2. Listado de Artistas
  3. Perfil de Artista / Tours
  4. Detalle de Paquete (“Packages”)
  5. Componentes globales: Header, Footer, Modales, Carruseles.

---

### 3. Referencia de Diseño

* **Figma URL:** [https://www.figma.com/design/TVoHtOOdh7A5BZfr2j6p9H/VIPX?node-id=0-1\&p=f\&t=CPCIMTMTxPC0nLuI-0](https://www.figma.com/design/TVoHtOOdh7A5BZfr2j6p9H/VIPX?node-id=0-1&p=f&t=CPCIMTMTxPC0nLuI-0)
* Todos los textos, tipografías, colores y espacios deben respetar las especificaciones de este archivo de Figma.

---

### 4. Estructura de Navegación

* **Header (persistente):**

  * Logo “VIPX” (enlaza a Home)
  * Enlaces: Home, Artists, Tours, About
  * Newsletter: campo email + botón “Enter”
* **Footer (global):**

  * Links: FAQs, Contáctanos, Privacy Policy, Terms & Conditions, Medios de pago

  * Iconos sociales: Facebook, Twitter, Instagram, YouTube

---

### 5. Páginas y Secciones

#### 5.1 Home

* **Hero Banner:**

  * Título principal
  * cta “check all tours”
  * imagen de fondo full-width
* **just announced:**

  * carrusel horizontal de tarjetas con artista, tour y botón “packages”
* **buscador:**

  * campos: fecha/ciudad, artista/evento, trending tags

#### 5.2 Listado de Artistas

* Grid responsive de tarjetas (imagen, nombre, botón “PROFILE”)
* “Load More” para paginación dinámica

#### 5.3 Perfil de Artista / Tours

* Banner superior con imagen, nombre y breve biografía
* Tabla o cards listando fechas de tour con botón “Packages” en cada uno

#### 5.4 Detalle de Paquete (“Packages”)

* Detalle del paquete VIP: título, descripción, lista de inclusiones
* Selector de fecha con estado (“On Sale”, “Sold Out”)
* Botón principal “buy now”

---

### 6. Tech Stack

* **Framework:** Next.js 15 (App Router o Pages Router según Figma Flow)
* **Lenguaje:** TypeScript
* **Estilos:** CSS Modules / Styled JSX / Tailwind CSS (según convención de equipo)
* **Imágenes / Assets:** carpeta `/public/assets/`
* **Carrusel / Animaciones:** GSAP o librería ligera de carousel; ScrollTrigger si aplica

---

### 7. Tipografía y Colores

* **Fuente:** Coincidente con Figma (p. Ej. Montserrat / Roboto)
* **Jerarquía:**

  * `h1`: 48px, bold
  * `h2`: 32px, bold
  * `p`: 16px, regular
* **Colores:**

  * Primario: #000000
  * Secundario: #FFFFFF
  * Accent: #FFCC00

---

### 8. Grid y Responsividad

* **Sistema de grid:** 12 columnas, gutter de 24px
* **Breakpoints:**

  * Móvil: < 640px
  * Tablet: 641–1024px
  * Desktop: > 1024px
* Elementos fluidos (`max-width: 100%`, `height: auto`)

---

### 9. Assets y Exportaciones

* Todas las imágenes exportadas desde Figma a `/public/assets/img/`
* Iconos SVG en `/public/assets/icons/`, importados inline con React

---

### 10. Interacciones y Estados

* **Hover:** Sombra y cambio de color en botones y tarjetas
* **Focus:** Outline y box-shadow en inputs
* **Loading:** Spinner integrado en botones deshabilitados (si aplica)

---

### 11. Entregables

1. Repositorio Git con proyecto Next.js
2. Estructura de carpetas:

```
├─ app/ (o pages/)
│  ├─ page.tsx
│  ├─ artists/
│  ├─ artist/[id]/
│  └─ packages/[id]/
├─ components/
├─ public/
│  └─ assets/
├─ styles/
│  └─ globals.css (o tailwind.config.js)
└─ next.config.js
```

3. Documentación de componentes y variables de estilo (README.md).

---

### 12. Criteros de Aceptación

* Maquetación 1:1 con Figma
* Responsive sin fallos en breakpoints clave
* Accesibilidad A11y básica (atributos `alt`, roles ARIA sencillos)
* Performance: Lighthouse > 90 en Performance y Best Practices

---

**Nota final:** Cualquier ajuste fuera del alcance de maquetación en Next.js o cambio de diseño en Figma requerirá revisión de tiempos y presupuesto.