diff --git a/README.md b/README.md index ca42e19..be7235b 100644 --- a/README.md +++ b/README.md @@ -25,15 +25,17 @@ El sistema está diseñado para: Este repositorio contiene: -* Frontend de cliente (The Boutique). -* Dashboard administrativo (The HQ). -* Lógica de negocio de agendamiento. -* Integraciones externas (Stripe, Google Calendar, WhatsApp). -* Esquema base de datos y políticas de seguridad. +* **anchor23.mx** - Frontend institucional (landing page + páginas informativas) +* **The Boutique** - Frontend de reserva para clientas (booking.anchor23.mx) +* **The HQ** - Dashboard administrativo y CRM interno +* **The Kiosk** - Sistema de autoservicio en pantalla táctil +* Lógica de negocio de agendamiento y disponibilidad +* Integraciones externas (Stripe, Google Calendar, WhatsApp) +* Esquema base de datos y políticas de seguridad No contiene: -* Material de marketing. +* Material de marketing digital. * Operación manual del salón. * Datos productivos. @@ -52,6 +54,12 @@ El PRD es la fuente de verdad funcional. El README es la guía de ejecución. ## 4. Arquitectura General +### Dominios + +* `anchor23.mx` - Frontend institucional (landing page + páginas informativas) +* `booking.anchor23.mx` - Frontend de reservas (The Boutique) - **Pendiente** +* `kiosk.anchor23.mx` - Sistema de autoservicio (The Kiosk) + ### Experiencias * **The Boutique**: Frontend de reserva para clientas. @@ -63,6 +71,7 @@ El PRD es la fuente de verdad funcional. El README es la guía de ejecución. * Security by Design. * Exclusividad curada. * Optimización de activos. +* Marca primero, sistema después. --- @@ -82,23 +91,36 @@ El PRD es la fuente de verdad funcional. El README es la guía de ejecución. ``` /salonos -├── app/ # Next.js App Router -│ ├── boutique/ # Frontend clienta -│ ├── hq/ # Dashboard administrativo -│ ├── kiosk/ # Sistema de autoservicio (pantalla táctil) -│ └── api/ # API routes -│ ├── kiosk/ # Endpoints para kiosko -│ └── ... -├── components/ # Componentes UI reutilizables -│ ├── kiosk/ # Componentes del sistema de kiosko -│ └── ui/ # Componentes base (Button, Input, Card, etc.) -├── lib/ # Lógica de negocio y helpers -│ └── db/ # Tipos TypeScript del esquema +├── app/ # Next.js App Router +│ ├── (anchor23)/ # anchor23.mx - Frontend institucional +│ │ ├── page.tsx # Landing page +│ │ ├── servicios/ # Página de servicios +│ │ ├── historia/ # Página de historia/filosofía +│ │ ├── contacto/ # Formulario de contacto +│ │ ├── franchises/ # Información de franquicias +│ │ ├── membresias/ # Membresías (Gold, Black, VIP) +│ │ ├── privacy-policy/ # Política de privacidad +│ │ └── legal/ # Términos y condiciones +│ ├── boutique/ # booking.anchor23.mx - Frontend de reservas +│ ├── hq/ # Dashboard administrativo +│ ├── kiosk/ # kiosk.anchor23.mx - Sistema de autoservicio +│ └── api/ # API routes +│ ├── kiosk/ # Endpoints para kiosko +│ ├── bookings/ # Gestión de reservas +│ ├── availability/ # Sistema de disponibilidad +│ └── admin/ # Endpoints administrativos +├── components/ # Componentes UI reutilizables +│ ├── kiosk/ # Componentes del sistema de kiosko +│ └── ui/ # Componentes base (Button, Input, Card, etc.) +├── lib/ # Lógica de negocio y helpers +│ ├── db/ # Tipos TypeScript del esquema +│ └── utils/ # Utilidades (short-id, etc.) ├── supabase/ -│ └── migrations/ # Migraciones SQL versionadas -├── integrations/ # Stripe, Google, WhatsApp +│ └── migrations/ # Migraciones SQL versionadas +├── integrations/ # Stripe, Google, WhatsApp ├── styles/ # Configuración Tailwind └── docs/ # Documentación adicional + ├── DOMAIN_CONFIGURATION.md # Configuración de dominios y subdominios ├── KIOSK_SYSTEM.md # Documentación completa del kiosko ├── KIOSK_IMPLEMENTATION.md # Guía rápida de implementación └── RESOURCES_UPDATE.md # Documentación de actualización de recursos @@ -187,35 +209,96 @@ npm run dev - ✅ Actualización de recursos con códigos estandarizados - ✅ Audit logging completo - ✅ Tiers de cliente extendidos (free, gold, black, VIP) +- ✅ Sistema de disponibilidad (staff, recursos, bloques) +- ✅ API routes de disponibilidad +- ✅ API de reservas para clientes (POST/GET) +- ✅ HQ Dashboard con calendario multi-columna +- ✅ Frontend institucional anchor23.mx completo + - Landing page con hero, fundamento, servicios, testimoniales + - Página de servicios + - Página de historia y filosofía + - Página de contacto + - Página de franquicias + - Página de membresías (Gold, Black, VIP) + - Páginas legales (Privacy Policy, Legal) + - Header y footer globales ### En Progreso 🚧 -- 🚧 Testing del sistema de kiosko -- 🚧 Validación de migración de recursos +- 🚧 The Boutique - Frontend de reservas (booking.anchor23.mx) +- 🚧 Configuración de dominios wildcard en producción ### Pendiente ⏳ -- ⏳ API routes para cliente y staff -- ⏳ Motor de agendamiento con disponibilidad - ⏳ Integración con Google Calendar -- ⏳ Integración con Stripe -- ⏳ HQ Dashboard (calendario multi-columna, gestión operativa) +- ⏳ Integración con Stripe (pagos) - ⏳ The Vault (storage de fotos privadas) -- ⏳ Notificaciones y automatización -- ⏳ Landing page pública +- ⏳ Notificaciones y automatización (WhatsApp API) +- ⏳ Autenticación de clientes en The Boutique ### Fase Actual -**Fase 1 — Cimientos y CRM**: 90% completado +**Fase 1 — Cimientos y CRM**: 95% completado - Infraestructura base: 100% - Esquema de base de datos: 100% - Short ID & Invitaciones: 100% - CRM Base: 100% - Sistema de Kiosko: 100% - Actualización de Recursos: 100% +- Sistema de Disponibilidad: 100% +- Frontend Institucional: 100% + +**Fase 2 — Motor de Agendamiento**: 60% completado +- Disponibilidad dual capa: 100% +- API de reservas: 100% +- The Boutique: 0% (pendiente) +- Integración Calendar: 0% (pendiente) +- Integración Pagos: 0% (pendiente) **Advertencia:** No apto para producción. Migraciones y seeds en evolución. --- -## 11. Sistema de Kiosko +## 11. anchor23.mx - Frontend Institucional + +Dominio institucional. Contenido estático, marca, narrativa y conversión inicial. + +### Arquitectura de Dominios +- `anchor23.mx` - Frontend institucional (landing page + páginas informativas) +- `booking.anchor23.mx` - The Boutique (frontend de reservas) - **Pendiente** +- `kiosk.anchor23.mx` - The Kiosk (pantallas táctiles) + +### Páginas Implementadas +- `/` - Landing page (Hero, Fundamento, Servicios Preview, Testimoniales) +- `/servicios` - Grid de servicios con descripciones +- `/historia` - Historia, filosofía y significado de la marca +- `/contacto` - Formulario de contacto con información +- `/franchises` - Modelo de franquicias con solicitud +- `/membresias` - 3 tiers (Gold, Black, VIP) con solicitudes +- `/privacy-policy` - Política de privacidad completa +- `/legal` - Términos y condiciones + +### Tecnologías +- Next.js 14 (App Router) con SSG +- Tailwind CSS para estilos +- Lucide React para iconos +- HTML semántico + +### Principios de Diseño +- HTML semántico +- Secciones claras +- Conversión silenciosa hacia booking.anchor23.mx +- Booking y Kiosk desacoplados +- Marca primero, sistema después +- Arquitectura lista para escalar sin diluir exclusividad + +### Flujo de Conversión +1. Landing page → Interés en servicios +2. /servicios → Conocimiento de oferta +3. /membresias → Solicitud de membresía +4. CTA directo → booking.anchor23.mx (reserva) +5. /franchises → Solicitud de franquicia + +--- + +## 12. Sistema de Kiosko El sistema de kiosko permite a los clientes interactuar con el salón mediante pantallas táctiles en la entrada. @@ -235,10 +318,12 @@ El sistema de kiosko permite a los clientes interactuar con el salón mediante p ### Acceso al Kiosko ``` -https://tu-dominio.com/kiosk/{location-id} +https://kiosk.anchor23.mx/{location-id} ``` -## 12. Filosofía Operativa +--- + +## 13. Filosofía Operativa SalonOS no busca volumen. diff --git a/docs/ANCHOR23_FRONTEND.md b/docs/ANCHOR23_FRONTEND.md new file mode 100644 index 0000000..7a75f50 --- /dev/null +++ b/docs/ANCHOR23_FRONTEND.md @@ -0,0 +1,487 @@ +# anchor23.mx - Frontend Institucional + +## Overview + +anchor23.mx es el frontend institucional de Anchor:23, diseñado para comunicar la marca, los servicios y la filosofía de exclusividad del salón de belleza. + +## Stack Tecnológico + +- **Framework**: Next.js 14 (App Router) +- **Render**: SSG (Static Site Generation) +- **Estilos**: Tailwind CSS +- **Iconos**: Lucide React +- **Tipografía**: Inter (Google Fonts) + +## Estructura de Páginas + +``` +app/ +├── layout.tsx # Layout global (header + footer) +├── page.tsx # Landing page principal +├── servicios/page.tsx # Catálogo de servicios +├── historia/page.tsx # Historia y filosofía +├── contacto/page.tsx # Formulario de contacto +├── franchises/page.tsx # Información de franquicias +├── membresias/page.tsx # Membresías (Gold, Black, VIP) +├── privacy-policy/page.tsx # Política de privacidad +└── legal/page.tsx # Términos y condiciones +``` + +## Componentes Globales + +### Layout (app/layout.tsx) + +```typescript +// Header fijo con navegación +
+ +
+ +// Footer con información y links legales + +``` + +## Landing Page (`/`) + +### Secciones + +1. **Hero Section** + - Logo mark (ancla) + - Título: "ANCHOR:23" + - Subtítulo: "Belleza Anclada en Exclusividad" + - CTA: "Ver servicios" → /servicios + - CTA: "Solicitar cita" → booking.anchor23.mx + - Imagen hero + +2. **Fundamento / Origen** + - Título: "Nada sólido nace del caos" + - Narrativa de origen de la marca + - Imagen de fundamento + +3. **Servicios Exclusivos (Preview)** + - Spa de Alta Gama + - Arte y Manicure de Precisión + - Peinado y Maquillaje de Lujo + - CTA: "Ver todos los servicios" → /servicios + +4. **Testimoniales** + - 2 testimoniales con estrellas + - CTA: "Solicitar Membresía" → /membresias + +## Página de Servicios (`/servicios`) + +### Contenido + +Grid de servicios con: +- Categoría +- Despción +- Lista de servicios por categoría +- CTA: "Reservar Cita" → booking.anchor23.mx + +### Categorías + +1. **Spa de Alta Gama** + - Tratamientos Faciales + - Masajes Terapéuticos + - Hidroterapia + +2. **Arte y Manicure de Precisión** + - Manicure de Precisión + - Pedicure Spa + - Arte en Uñas + +3. **Peinado y Maquillaje de Lujo** + - Corte y Estilismo + - Color Premium + - Maquillaje Profesional + +4. **Cuidado Corporal** + - Exfoliación Profunda + - Envolturas Corporales + - Tratamientos Reductores + +5. **Membresías Exclusivas** + - Gold Tier + - Black Tier + - VIP Tier + +## Página de Historia (`/historia`) + +### Secciones + +1. **El Fundamento** + - Título: "Nada sólido nace del caos" + - Narrativa de origen + - Imagen de historia + +2. **El Significado** + - **ANCHOR**: Estabilidad, firmeza, permanencia + - **:23**: Dualidad equilibrada (precisión + creatividad) + +3. **Nuestra Filosofía** + - Lujo como Estándar + - Exclusividad Inherente + - Precisión Absoluta + +## Página de Contacto (`/contacto`) + +### Funcionalidades + +1. **Información de Contacto** + - Ubicación: Saltillo, Coahuila, México + - Teléfono: +52 844 123 4567 + - Email: contacto@anchor23.mx + - Horario: Lunes - Sábado, 10:00 - 21:00 + +2. **Formulario de Contacto** + - Nombre Completo + - Email + - Teléfono + - Mensaje + - Validación y submit + +3. **CTA a Booking** + - "Reservar Cita" → booking.anchor23.mx + +## Página de Franquicias (`/franchises`) + +### Secciones + +1. **Nuestro Modelo** + - "Una Sucursal por Ciudad" + - Exclusividad, Calidad, Sostenibilidad + - Iconos ilustrativos + +2. **Beneficios** + - Modelo de negocio exclusivo + - Una sucursal por ciudad + - Sistema operativo completo (SalonOS) + - Capacitación en estándares de lujo + - Membresía como fuente recurrente + - Soporte continuo + +3. **Requisitos** + - Compromiso inquebrantable con la calidad + - Experiencia en industria de belleza + - Inversión mínima: $500,000 USD + - Ubicación premium en ciudad de interés + - Capacidad de contratar personal calificado + +4. **Solicitud de Información** + - Nombre Completo + - Email + - Teléfono + - Ciudad de Interés + - Experiencia en el Sector + - Mensaje Adicional + +5. **Contacto Directo** + - Email: franchises@anchor23.mx + - Teléfono: +52 844 987 6543 + +## Página de Membresías (`/membresias`) + +### Tiers + +#### Gold Tier +- **Precio**: $2,500 MXN/mes +- **Descripción**: Acceso prioritario y experiencias exclusivas +- **Beneficios**: + - Reserva prioritaria + - 15% descuento en servicios + - Acceso anticipado a eventos + - Consultas de belleza mensuales + - Producto de cortesía mensual + +#### Black Tier +- **Precio**: $5,000 MXN/mes +- **Descripción**: Privilegios premium y atención personalizada +- **Beneficios**: + - Reserva prioritaria + sin espera + - 25% descuento en servicios + - Acceso VIP a eventos exclusivos + - 2 tratamientos spa complementarios/mes + - Set de productos premium trimestral + +#### VIP Tier +- **Precio**: $10,000 MXN/mes (Más Popular) +- **Descripción**: La máxima expresión de exclusividad +- **Beneficios**: + - Acceso inmediato - sin restricciones + - 35% descuento en servicios + productos + - Experiencias personalizadas ilimitadas + - Estilista asignado exclusivamente + - Evento privado anual para ti + 5 invitados + - Acceso a instalaciones fuera de horario + +### Solicitud de Membresía + +Formulario con: +- Selección de tier (automático al hacer click en tarjeta) +- Nombre Completo +- Email +- Teléfono +- Mensaje Adicional + +## Páginas Legales + +### Privacy Policy (`/privacy-policy`) + +Secciones: +1. Información que Recopilamos +2. Uso de la Información +3. Compartir de Información +4. Seguridad de Datos +5. Derechos del Usuario +6. Cookies y Tecnologías Similares +7. Cambios en la Política +8. Contacto + +### Legal (`/legal`) + +Secciones: +1. Aceptación de Términos +2. Servicios Prestados +3. Reservas y Cancelaciones +4. Pagos +5. Membresías +6. Conducta del Cliente +7. Propiedad Intelectual +8. Limitación de Responsabilidad +9. Modificaciones +10. Jurisdicción +11. Contacto + +## Estilos y Diseño + +### Colores + +```css +--foreground-rgb: 20, 20, 20; /* Gris oscuro para texto */ +--background-rgb: 255, 255, 255; /* Blanco puro */ +--accent-rgb: 180, 150, 120; /* Dorado/Tierra */ +--accent-dark-rgb: 140, 110, 80; /* Dorado oscuro */ +``` + +### Tipografía + +- **Font**: Inter (Google Fonts) +- **Títulos**: Bold, tracking-tight +- **Subtítulos**: Regular/Medium +- **Cuerpo**: Regular, leading-relaxed + +### Componentes + +#### Botones + +```typescript +// Primary Button + + Botón + + +// Secondary Button + + Botón + +``` + +#### Cards + +```typescript +
+

Título

+

Descripción

+
+ +
+ ★★★★★ +

Testimonio

+ Autor +
+``` + +## SEO + +### Meta Tags + +```typescript +export const metadata: Metadata = { + title: 'ANCHOR:23 — Belleza Anclada en Exclusividad', + description: 'Salón de ultra lujo. Un estándar exclusivo de precisión y elegancia.', +} +``` + +### Estructura Semántica + +- `
` para navegación global +- `
` para contenido principal +- `
` para secciones principales +- `
` para contenido individual (servicios, testimoniales) +- `