Astro Partner Hub

Actúa como un Desarrollador Web Full Stack Senior y Arquitecto UI/UX experto en el stack Astro + Alpine.js + Vanilla JS.

Necesito que construyas una Progressive Web App (PWA) de nivel profesional, moderna (tendencias UX/UI 2026), responsive (Mobile-First optimizada para todas las pantallas de smartphones, pero adaptable a Tablets y Desktop) para la plataforma de Socios Comerciales.

---

🛠️ TECH STACK OBLIGATORIO

• Framework Principal: Astro (usando componentes .astro para la estructura y layout).

• Reactividad Ligera: Alpine.js (para la interactividad de la UI como modales, pestañas, menús desplegables y toggles).

• Lógica de Negocio y PWA: Vanilla JS puro (para consumo de API Fetch, LocalStorage, Registro de Service Worker, Notificaciones Push y lógica de cálculos).

• Estilos: Tailwind CSS (o CSS utilitario moderno con diseño fluido).

---

📱 DISEÑO Y ESTÉTICA UI/UX (Tendencias 2026)

1. Línea Gráfica (Inspirada en el Wireframe adjunto):

   • Palette de colores primaria basada en Amarillo/Dorado cálido (#FACC15 o similar), Negro Profundo (#18181B) y Blanco / Gris claro (#F4F4F5).

   • Tarjetas con bordes suavemente redondeados (rounded-2xl o rounded-3xl), sombras sutiles y botones de acción principales (CTA) en negro o amarillo contrastante.

   • Tipografía moderna, limpia y legibilidad óptima en pantallas pequeñas.

2. Navegación Móvil y Responsive:

   • En Móviles: Implementa una barra de navegación inferior fija (Bottom Navigation Bar) con iconos táctiles para: Inicio/Vuelos, Reservaciones, Comisiones y Perfil/Ajustes.

   • En Desktop/Tablets: La interfaz debe transformarse automáticamente a un Dashboard con barra lateral (Sidebar) retraíble o navegación superior horizontal con contenedores centrados para aprovechar pantallas anchas.

---

⚙️ FUNCIONALIDADES Y FLUIJO DE LA APP

1. Módulo de Autenticación y Registro de Socios

• Login / Inicio de Sesión: Formulario limpio con campos para usuario/email y contraseña, botón de inicio de sesión y enlace a registro.

• Registro de Socios Comerciales: Formulario estructurado que capture obligatoriamente los siguientes campos:

  • Categoría

  • Empresas asignadas

  • Nombre

  • Razón Social

  • RUC

  • Contacto Principal

  • Email

  • Teléfono

  • Sitio Web

  • Dirección

  • Notas

2. Módulo de Consulta de Vuelos y Reservaciones

• Buscador con filtros por fecha, origen, destino y número de pasajeros.

• Listado visual de vuelos disponibles en tarjetas interactivas.

• Flujo para Generar Reservación que permita seleccionar vuelo y agregar opcionales / adicionales (Souvenirs, snacks, transporte terrestre, etc.).

• Desglose y Resumen de Compra: Debe mostrar el total en general calculado en tiempo real con el desglose exacto de:

  • Subtotal Vuelos

  • Subtotal Souvenirs / Extras

  • Impuestos / Tasas

  • TOTAL GENERAL

3. Módulo de Comisiones (Cálculo Automático)

• Dashboard/Resumen de comisiones ganadas por el socio comercial.

• Lógica de negocio: La comisión es del 10% sobre el valor de las ventas.

• Debe incluir una vista o tarjeta resumen limpia que muestre:

  • Mapeo de ventas realizadas.

  • Total cobrado en vuelos y extras.

  • Comisión neta a recibir (10% calculado automáticamente).

4. Configuración PWA y Notificaciones (Service Worker en Vanilla JS)

• Incluye la creación y configuración del archivo manifest.json (iconos, tema amarillo/negro, nombre de la app, display: standalone).

• Script de registro de un Service Worker en Vanilla JS para:

  • Funcionar en segundo plano y soportar uso offline (caché de assets principales).

  • Simular el envío y recepción de Notificaciones Push (por ejemplo: "¡Reservación confirmada!" o "Nueva comisión acreditada del 10%").

---

📦 ENTREGABLES REQUERIDOS

1. Estructura de archivos limpia para el proyecto en Astro.

2. El archivo de layout general con la inclusión de Alpine.js y la lógica del Service Worker en Vanilla JS.

3. El componente .astro o página de Login / Registro con todos los campos especificados.

4. El componente .astro para Consulta de Vuelos, Resumen de Compra y Desglose de Comisiones del 10%.

5. Los archivos manifest.json y sw.js (Service Worker) listos para producción.

Por favor, escribe un código modular, limpio, completamente funcional y comentado donde corresponda.

This project was built with Lovable.

Build with Lovable

Continue developing this project in the Lovable editor.

• Ship faster: describe what you want to build and Lovable handles the code.
• Stay in sync: every change made in Lovable is committed straight to this repository.
• Full ownership: this code is yours. Push to main on GitHub and your changes sync back into Lovable, ready for your next prompt.

Development

Prefer working locally? You need Node.js and npm — install with nvm.

git clone <this-repository-url>
cd <repository-name>
npm i
npm run dev