mirror of
https://github.com/marcogll/AnchorOS.git
synced 2026-03-15 11:24:26 +00:00
docs: Actualizar documentación del proyecto
- Actualizar README.md con estado actual del proyecto - Agregar sección de anchor23.mx frontend institucional - Actualizar estructura de rutas y carpetas - Actualizar fase actual (95% Fase 1, 60% Fase 2) - Crear documento DOMAIN_CONFIGURATION.md con guía de dominios - Crear documento ANCHOR23_FRONTEND.md con detalles técnicos - Agregar referencias cruzadas en README Completados recientes: ✅ Frontend institucional anchor23.mx (todas las páginas) ✅ Sistema de disponibilidad completo ✅ API de reservas para clientes ✅ HQ Dashboard con calendario multi-columna
This commit is contained in:
149
README.md
149
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.
|
||||
|
||||
|
||||
487
docs/ANCHOR23_FRONTEND.md
Normal file
487
docs/ANCHOR23_FRONTEND.md
Normal file
@@ -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
|
||||
<header class="site-header">
|
||||
<nav class="nav-primary">
|
||||
<div class="logo">ANCHOR:23</div>
|
||||
<ul class="nav-links">
|
||||
<li><a href="/">Inicio</a></li>
|
||||
<li><a href="/historia">Nosotros</a></li>
|
||||
<li><a href="/servicios">Servicios</a></li>
|
||||
<li><a href="/membresias">Membresías</a></li>
|
||||
</ul>
|
||||
<div class="nav-actions">
|
||||
<a href="/membresias" class="btn-primary">
|
||||
Solicitar Membresía
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
// Footer con información y links legales
|
||||
<footer class="site-footer">
|
||||
<div class="footer-brand">ANCHOR:23</div>
|
||||
<div class="footer-links">
|
||||
<a href="/historia">Nosotros</a>
|
||||
<a href="/servicios">Servicios</a>
|
||||
<a href="/contacto">Contáctanos</a>
|
||||
</div>
|
||||
<div class="footer-legal">
|
||||
<a href="/privacy-policy">Privacy Policy</a>
|
||||
<a href="/legal">Legal</a>
|
||||
</div>
|
||||
<div class="footer-contact">
|
||||
<span>+52 844 123 4567</span>
|
||||
<span>contacto@anchor23.mx</span>
|
||||
</div>
|
||||
</footer>
|
||||
```
|
||||
|
||||
## 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
|
||||
<a className="btn-primary">
|
||||
Botón
|
||||
</a>
|
||||
|
||||
// Secondary Button
|
||||
<a className="btn-secondary">
|
||||
Botón
|
||||
</a>
|
||||
```
|
||||
|
||||
#### Cards
|
||||
|
||||
```typescript
|
||||
<article className="service-card">
|
||||
<h4>Título</h4>
|
||||
<p>Descripción</p>
|
||||
</article>
|
||||
|
||||
<article className="testimonial">
|
||||
<span className="stars">★★★★★</span>
|
||||
<p>Testimonio</p>
|
||||
<cite>Autor</cite>
|
||||
</article>
|
||||
```
|
||||
|
||||
## 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
|
||||
|
||||
- `<header>` para navegación global
|
||||
- `<main>` para contenido principal
|
||||
- `<section>` para secciones principales
|
||||
- `<article>` para contenido individual (servicios, testimoniales)
|
||||
- `<footer>` para pie de página
|
||||
|
||||
## Conversion Tracking
|
||||
|
||||
### Funnels
|
||||
|
||||
1. **Conversión a Reserva**
|
||||
- Landing → Servicios → booking.anchor23.mx
|
||||
|
||||
2. **Conversión a Membresía**
|
||||
- Landing → Membresías → Solicitud
|
||||
|
||||
3. **Conversión a Franquicia**
|
||||
- Landing → Franchises → Solicitud
|
||||
|
||||
### CTAs Principales
|
||||
|
||||
- "Ver servicios" → /servicios
|
||||
- "Solicitar cita" → booking.anchor23.mx
|
||||
- "Solicitar Membresía" → /membresias
|
||||
- "Contáctanos" → /contacto
|
||||
|
||||
## Performance
|
||||
|
||||
### Optimizaciones
|
||||
|
||||
- **SSG (Static Site Generation)**: Páginas pre-renderizadas
|
||||
- **Next.js Image Optimization**: Imágenes optimizadas
|
||||
- **Tailwind CSS**: CSS purgado al build
|
||||
- **Lazy Loading**: Carga diferida de componentes
|
||||
- **Minificación**: JS/CSS minificados
|
||||
|
||||
### Metas de Rendimiento
|
||||
|
||||
- Lighthouse Score: 95+
|
||||
- First Contentful Paint (FCP): < 1.5s
|
||||
- Time to Interactive (TTI): < 3.5s
|
||||
- Cumulative Layout Shift (CLS): < 0.1
|
||||
|
||||
## Testing
|
||||
|
||||
### Testing Local
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# Acceder a http://localhost:3000
|
||||
```
|
||||
|
||||
### Testing de Producción
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
npm start
|
||||
```
|
||||
|
||||
### Testing de Responsividad
|
||||
|
||||
- Desktop: 1920x1080, 1366x768
|
||||
- Tablet: 768x1024
|
||||
- Mobile: 375x667, 414x896
|
||||
|
||||
## Analytics
|
||||
|
||||
### Google Analytics (Pendiente)
|
||||
|
||||
```typescript
|
||||
// En layout.tsx
|
||||
import { GoogleAnalytics } from '@next/third-parties/google'
|
||||
|
||||
export default function RootLayout({ children }) {
|
||||
return (
|
||||
<html>
|
||||
<head>
|
||||
<GoogleAnalytics gaId="GA_MEASUREMENT_ID" />
|
||||
</head>
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Event Tracking
|
||||
|
||||
```typescript
|
||||
// Ejemplo de tracking de CTA
|
||||
const trackCTA = (ctaName: string) => {
|
||||
window.gtag?.('event', 'cta_click', {
|
||||
cta_name: ctaName,
|
||||
page: window.location.pathname
|
||||
})
|
||||
}
|
||||
|
||||
// Uso
|
||||
<a
|
||||
href="/servicios"
|
||||
onClick={() => trackCTA('ver_servicios')}
|
||||
className="btn-secondary"
|
||||
>
|
||||
Ver servicios
|
||||
</a>
|
||||
```
|
||||
|
||||
## Mantenimiento
|
||||
|
||||
### Actualizaciones
|
||||
|
||||
- **Contenido**: Actualizar texto, precios, servicios directamente en código
|
||||
- **Imágenes**: Reemplazar placeholders con imágenes reales
|
||||
- **Membresías**: Actualizar precios y beneficios según cambios
|
||||
- **Legales**: Actualizar políticas según cambios legales
|
||||
|
||||
### Checklist antes de Desplegar
|
||||
|
||||
- [ ] Revisar ortografía y gramática
|
||||
- [ ] Verificar todos los enlaces funcionan
|
||||
- [ ] Probar en múltiples dispositivos
|
||||
- [ ] Verificar responsive design
|
||||
- [ ] Testear todos los formularios
|
||||
- [ ] Validar SEO (meta tags, headings)
|
||||
- [ ] Verificar carga de imágenes
|
||||
- [ ] Testear CTAs a booking.anchor23.mx
|
||||
|
||||
## Próximos Pasos
|
||||
|
||||
1. ✅ Implementar todas las páginas
|
||||
2. ⏳ Reemplazar placeholders con imágenes reales
|
||||
3. ⏳ Implementar Google Analytics
|
||||
4. ⏳ Configurar SEO avanzado (sitemaps, robots.txt)
|
||||
5. ⏳ Implementar formularios con backend real
|
||||
6. ⏳ Integrar con booking.anchor23.mx
|
||||
7. ⏳ Testing de usabilidad
|
||||
8. ⏳ Despliegue en producción
|
||||
|
||||
## Recursos
|
||||
|
||||
- [Documentación de Next.js](https://nextjs.org/docs)
|
||||
- [Documentación de Tailwind CSS](https://tailwindcss.com/docs)
|
||||
- [Iconos Lucide](https://lucide.dev/icons)
|
||||
- [Guía de SEO para Next.js](https://nextjs.org/docs/app/building-your-application/optimizing/metadata)
|
||||
311
docs/DOMAIN_CONFIGURATION.md
Normal file
311
docs/DOMAIN_CONFIGURATION.md
Normal file
@@ -0,0 +1,311 @@
|
||||
# Configuración de Dominios - Anchor:23
|
||||
|
||||
## Arquitectura de Dominios
|
||||
|
||||
El proyecto SalonOS está diseñado para funcionar con múltiples subdominios, cada uno con una función específica:
|
||||
|
||||
| Subdominio | Función | Estado | URL de ejemplo |
|
||||
|-------------|----------|---------|----------------|
|
||||
| `anchor23.mx` | Frontend institucional (landing page + páginas informativas) | ✅ Completado | `https://anchor23.mx` |
|
||||
| `booking.anchor23.mx` | The Boutique - Frontend de reservas | ⏳ Pendiente | `https://booking.anchor23.mx` |
|
||||
| `kiosk.anchor23.mx` | The Kiosk - Sistema de autoservicio táctil | ✅ Completado | `https://kiosk.anchor23.mx/{location-id}` |
|
||||
|
||||
---
|
||||
|
||||
## Configuración en Next.js
|
||||
|
||||
### 1. Configuración DNS
|
||||
|
||||
#### Registros DNS Requeridos
|
||||
|
||||
En tu proveedor de DNS (ej. Cloudflare, GoDaddy, Namecheap):
|
||||
|
||||
```
|
||||
# Registros A (o CNAME)
|
||||
anchor23.mx → A record → IP del servidor
|
||||
booking.anchor23.mx → CNAME → anchor23.mx
|
||||
kiosk.anchor23.mx → CNAME → anchor23.mx
|
||||
|
||||
# Registros wildcard (opcional, para subdominios futuros)
|
||||
*.anchor23.mx → CNAME → anchor23.mx
|
||||
```
|
||||
|
||||
### 2. Configuración en Vercel (o VPS)
|
||||
|
||||
Si despliegas en Vercel:
|
||||
|
||||
1. Agregar dominios en `Settings → Domains`
|
||||
2. Configurar subdominios:
|
||||
- `anchor23.mx` como dominio principal
|
||||
- `booking.anchor23.mx` como dominio adicional
|
||||
- `kiosk.anchor23.mx` como dominio adicional
|
||||
|
||||
3. Vercel manejará automáticamente la configuración SSL
|
||||
|
||||
### 3. Configuración en VPS (Nginx + Next.js)
|
||||
|
||||
Si despliegas en VPS propio:
|
||||
|
||||
```nginx
|
||||
# /etc/nginx/sites-available/anchor23
|
||||
server {
|
||||
listen 80;
|
||||
server_name anchor23.mx booking.anchor23.mx kiosk.anchor23.mx;
|
||||
|
||||
location / {
|
||||
proxy_pass http://localhost:3000;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection 'upgrade';
|
||||
proxy_set_header Host $host;
|
||||
proxy_cache_bypass $http_upgrade;
|
||||
}
|
||||
}
|
||||
|
||||
# Redirección HTTP a HTTPS
|
||||
server {
|
||||
listen 80;
|
||||
return 301 https://$host$request_uri;
|
||||
}
|
||||
|
||||
server {
|
||||
listen 443 ssl;
|
||||
server_name anchor23.mx booking.anchor23.mx kiosk.anchor23.mx;
|
||||
|
||||
ssl_certificate /path/to/cert.pem;
|
||||
ssl_certificate_key /path/to/key.pem;
|
||||
|
||||
location / {
|
||||
proxy_pass http://localhost:3000;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection 'upgrade';
|
||||
proxy_set_header Host $host;
|
||||
proxy_cache_bypass $http_upgrade;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Rutas por Subdominio
|
||||
|
||||
### anchor23.mx (Frontend Institucional)
|
||||
|
||||
Rutas disponibles:
|
||||
- `/` - Landing page
|
||||
- `/servicios` - Página de servicios
|
||||
- `/historia` - Historia y filosofía
|
||||
- `/contacto` - Formulario de contacto
|
||||
- `/franchises` - Información de franquicias
|
||||
- `/membresias` - Membresías exclusivas
|
||||
- `/privacy-policy` - Política de privacidad
|
||||
- `/legal` - Términos y condiciones
|
||||
|
||||
### booking.anchor23.mx (The Boutique) - Pendiente
|
||||
|
||||
Rutas planificadas:
|
||||
- `/` - Selección de servicio y calendario
|
||||
- `/reservar` - Flujo de reserva paso a paso
|
||||
- `/mis-citas` - Historial de citas del cliente
|
||||
- `/perfil` - Perfil del cliente
|
||||
- `/login` - Autenticación de clientes
|
||||
|
||||
### kiosk.anchor23.mx (The Kiosk)
|
||||
|
||||
Rutas disponibles:
|
||||
- `/[locationId]` - Pantalla principal del kiosko
|
||||
- `/api/kiosk/authenticate` - Autenticación del dispositivo
|
||||
- `/api/kiosk/bookings` - Gestión de reservas
|
||||
- `/api/kiosk/walkin` - Reservas walk-in
|
||||
- `/api/kiosk/bookings/[shortId]/confirm` - Confirmación de citas
|
||||
- `/api/kiosk/resources/available` - Recursos disponibles
|
||||
|
||||
---
|
||||
|
||||
## Configuración de Environment Variables
|
||||
|
||||
Cada subdominio puede requerir variables de entorno específicas:
|
||||
|
||||
```env
|
||||
# anchor23.mx (compartido)
|
||||
NEXT_PUBLIC_SITE_URL=https://anchor23.mx
|
||||
|
||||
# booking.anchor23.mx (pendiente)
|
||||
NEXT_PUBLIC_BOOKING_URL=https://booking.anchor23.mx
|
||||
|
||||
# kiosk.anchor23.mx
|
||||
NEXT_PUBLIC_KIOSK_URL=https://kiosk.anchor23.mx
|
||||
NEXT_PUBLIC_KIOSK_API_KEY=tu_api_key_de_64_caracteres
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Enlaces Cruzados
|
||||
|
||||
### Desde anchor23.mx
|
||||
|
||||
```typescript
|
||||
// CTA en landing page
|
||||
<a href="https://booking.anchor23.mx">Solicitar Cita</a>
|
||||
|
||||
// Enlace a kiosko (solo visible en ubicación física)
|
||||
<a href="https://kiosk.anchor23.mx/{location-id}">Kiosko</a>
|
||||
```
|
||||
|
||||
### Desde booking.anchor23.mx
|
||||
|
||||
```typescript
|
||||
// Enlace a información de servicios
|
||||
<a href="https://anchor23.mx/servicios">Más información</a>
|
||||
|
||||
// Enlace a política de privacidad
|
||||
<a href="https://anchor23.mx/privacy-policy">Privacidad</a>
|
||||
```
|
||||
|
||||
### Desde kiosk.anchor23.mx
|
||||
|
||||
```typescript
|
||||
// El kiosko es autónomo, no tiene enlaces externos
|
||||
// Solo comunica con la API del kiosko
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Testing de Subdominios
|
||||
|
||||
### Local con `/etc/hosts`
|
||||
|
||||
Para probar localmente:
|
||||
|
||||
```
|
||||
# /etc/hosts (Linux/Mac) o C:\Windows\System32\drivers\etc\hosts (Windows)
|
||||
127.0.0.1 anchor23.mx
|
||||
127.0.0.1 booking.anchor23.mx
|
||||
127.0.0.1 kiosk.anchor23.mx
|
||||
```
|
||||
|
||||
Luego accede a:
|
||||
- `http://anchor23.mx:3000`
|
||||
- `http://booking.anchor23.mx:3000`
|
||||
- `http://kiosk.anchor23.mx:3000/location-id`
|
||||
|
||||
### Con ngrok (testing rápido)
|
||||
|
||||
```bash
|
||||
# Para anchor23.mx
|
||||
ngrok http 3000 --subdomain=anchor23-mx
|
||||
|
||||
# Para booking.anchor23.mx
|
||||
ngrok http 3000 --subdomain=booking-anchor23-mx
|
||||
|
||||
# Para kiosk.anchor23.mx
|
||||
ngrok http 3000 --subdomain=kiosk-anchor23-mx
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Seguridad Considerations
|
||||
|
||||
### HTTPS Obligatorio
|
||||
|
||||
Todos los dominios deben usar HTTPS:
|
||||
- Certificado SSL automático (Vercel, Netlify, Cloudflare)
|
||||
- Let's Encrypt (VPS con Certbot)
|
||||
- Compra de certificado comercial
|
||||
|
||||
### CORS Configuration
|
||||
|
||||
En `next.config.js`:
|
||||
|
||||
```javascript
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
async headers() {
|
||||
return [
|
||||
{
|
||||
source: '/(.*)',
|
||||
headers: [
|
||||
{ key: 'Access-Control-Allow-Origin', value: '*' },
|
||||
{ key: 'Access-Control-Allow-Methods', value: 'GET,POST,PUT,DELETE,OPTIONS' },
|
||||
{ key: 'Access-Control-Allow-Headers', value: 'Content-Type,Authorization' },
|
||||
],
|
||||
},
|
||||
]
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
### API Key Protection
|
||||
|
||||
El kiosko usa API keys de 64 caracteres para autenticación:
|
||||
- Generar keys únicas por dispositivo
|
||||
- Rotar keys periódicamente
|
||||
- Logs de auditoría de autenticación
|
||||
|
||||
---
|
||||
|
||||
## Despliegue
|
||||
|
||||
### Vercel (Recomendado)
|
||||
|
||||
1. Conectar repositorio de Git
|
||||
2. Configurar dominios en `Settings → Domains`
|
||||
3. Desplegar automáticamente en push a `main`
|
||||
|
||||
### VPS Personal
|
||||
|
||||
```bash
|
||||
# Clonar repositorio
|
||||
git clone <repo-url> /var/www/salonos
|
||||
cd /var/www/salonos
|
||||
|
||||
# Instalar dependencias
|
||||
npm install
|
||||
|
||||
# Configurar environment variables
|
||||
cp .env.example .env.local
|
||||
nano .env.local
|
||||
|
||||
# Build y start
|
||||
npm run build
|
||||
npm start
|
||||
|
||||
# Configurar PM2 para proceso en segundo plano
|
||||
pm2 start npm --name "salonos" -- start
|
||||
pm2 save
|
||||
pm2 startup
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Subdominios no resuelven
|
||||
|
||||
1. Verificar configuración DNS
|
||||
2. Esperar propagación DNS (puede tardar hasta 48h)
|
||||
3. Verificar con `dig booking.anchor23.mx`
|
||||
|
||||
### SSL/Certificate errors
|
||||
|
||||
1. Verificar configuración de certificados
|
||||
2. Certbot renew: `sudo certbot renew`
|
||||
3. Reiniciar Nginx: `sudo systemctl restart nginx`
|
||||
|
||||
### Rutas no funcionan
|
||||
|
||||
1. Verificar configuración de Next.js router
|
||||
2. Rebuild: `npm run build`
|
||||
3. Verificar logs: `pm2 logs` o `vercel logs`
|
||||
|
||||
---
|
||||
|
||||
## Próximos Pasos
|
||||
|
||||
1. ✅ Configurar DNS para `anchor23.mx`
|
||||
2. ⏳ Desplegar y configurar `booking.anchor23.mx`
|
||||
3. ✅ Desplegar y configurar `kiosk.anchor23.mx`
|
||||
4. ⏳ Configurar SSL/TLS para todos los subdominios
|
||||
5. ⏳ Implementar autenticación de clientes en The Boutique
|
||||
6. ⏳ Implementar integración de pagos (Stripe) en booking
|
||||
Reference in New Issue
Block a user