Inicio — Página principal del restaurante

Vista

La página de Inicio (/) es la primera que ve el visitante. Está formada por cuatro secciones:

1. Hero: titular, imagen de ambiente y botón "Ver la carta".
2. Especialidades de la casa: los platos destacados de la carta.
3. Próximos eventos: los eventos destacados que aún no se han celebrado, con enlace al calendario anual.
4. ¿Hablamos?: formulario de contacto.

Responsables y tareas

Responsable: Gema Miguel · Maqueta inicial: Iker · Ajustes del fondo: Ruddi

Tarea Jira	Descripción	Estado
GC-78	[HU-05] Página de inicio con presentación y acceso a la Carta	Historia
GC-79	Sección hero con titular, imagen de ambiente y CTA	Listo
GC-82	Conectar el CTA a la ruta de la Carta	Listo
GC-83	Estilos mobile-first y animación de entrada	Listo
GC-261	Sección "Especialidades de la casa" con tarjetas de producto	Listo
GC-262	Sección "Próximos eventos" con tarjetas de evento	Listo
GC-263	Sección de contacto "¿Hablamos?" con formulario	Listo
GC-267	Conectar "Próximos eventos" al back (solo eventos futuros)	Listo
GC-268	Conectar el formulario "¿Hablamos?" al back	Listo

Capturas

Entidades involucradas

Archivo	Tipo	Función
src/Views/Home/HomeView.vue	Vista	Página de Inicio: carga productos y eventos y reparte los datos a cada sección
src/components/HeroSection.vue	Componente	Titular, imagen y botón "Ver la carta"
src/components/SpecialtiesSection.vue	Componente	Tarjetas de los platos destacados (recibe dishes por props)
src/components/EventsSection.vue	Componente	Tarjetas de los próximos eventos (recibe events por props)
src/components/ContactForm.vue	Componente	Formulario "¿Hablamos?" que envía el mensaje al back
src/composables/useProducts.js	Composable	Pide los productos al back y los comparte con la Carta
src/composables/useEvents.js	Composable	Pide los eventos al back, les da formato y los comparte con el calendario

Endpoints que consume

Método	Ruta	Para qué
GET	/api/products	Platos de "Especialidades de la casa" (los que tienen featured = true)
GET	/api/events	Eventos de "Próximos eventos" (destacados y con fecha futura)
POST	/api/contact-messages	Envío del formulario "¿Hablamos?"

La URL base se toma de la variable VITE_API_URL del archivo .env (ver .env.example).

Cómo probarlo

1. Arranca el back (Docker Desktop + GoxuApplication) y el front (npm run dev).
2. Abre http://localhost:5173/.
3. Comprueba que:
   • "Ver la carta" lleva a /carta.
   • Aparecen los platos destacados y los próximos eventos.
   • "Ver calendario anual →" lleva a /calendario-eventos.
   • Al enviar el formulario con datos válidos aparece un mensaje de agradecimiento, y con datos incorrectos el navegador avisa del campo que falla.

Decisiones

• La vista solo reparte datos. HomeView carga productos y eventos, y pasa a cada sección lo que necesita por props. Las secciones no saben de dónde vienen los datos.
• Estado compartido en los composables. Las listas de productos y eventos se declaran fuera de la función del composable, así la Home, la Carta y el calendario usan la misma lista.
• Adaptadores entre back y front. useEvents traduce cada evento al formato que usan las tarjetas (fecha "28 MARZO · 20:30H", precio o "Entrada gratuita"), sin tener que cambiar los componentes.
• Solo eventos futuros. "Próximos eventos" filtra los destacados cuya fecha aún no ha pasado.
• Dos botones, dos preferencias de contacto. "Quiero que me llaméis" envía CALL y "Enviar email" envía EMAIL, los dos valores del enum del back.
• Validación en los dos lados. El formulario usa las validaciones HTML (required, type="email", pattern) con reportValidity(), y el back repite las mismas reglas.

Limitaciones

• El filtro de eventos futuros se hace en el front, comparando con la hora del ordenador del usuario.
• El formulario no tiene protección contra spam (por ejemplo, reCAPTCHA).
• El botón de cada evento lleva a la página de Ofertas, no a una reserva concreta de ese evento.