147 lines
5.2 KiB
Markdown
147 lines
5.2 KiB
Markdown
# 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](https://lovable.dev).
|
|
|
|
## Build with Lovable
|
|
|
|
Continue developing this project in the [Lovable editor](https://lovable.dev/projects/be1f5b9e-f0ac-441f-a123-4c938f08b54e).
|
|
|
|
- **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](https://github.com/nvm-sh/nvm#installing-and-updating).
|
|
|
|
```sh
|
|
git clone <this-repository-url>
|
|
cd <repository-name>
|
|
npm i
|
|
npm run dev
|
|
```
|