feat: Add Formbricks integration, update forms with webhooks, enhance navigation

- Integrate @formbricks/js for future surveys (FormbricksProvider) - Add WebhookForm component for unified form submission (contact/franchise/membership) - Update contact form with reason dropdown field - Update franchise form with new fields: estado, ciudad, socios checkbox - Update franchise benefits: manuals, training platform, RH system, investment $100k - Add Contacto link to desktop/mobile nav and footer - Update membership form to use WebhookForm with membership_id select - Update hero buttons to use #3E352E color consistently - Refactor contact/franchise pages to use new hero layout and components - Add webhook utility (lib/webhook.ts) for parallel submission to test+prod - Add email receipt hooks to booking endpoints - Update globals.css with new color variables and navigation styles - Docker configuration for deployment
2026-03-15 10:24:26 +00:00 · 2026-01-17 22:54:20 -06:00
parent b7d6e51d67
commit 66e20d25a7
60 changed files with 4534 additions and 791 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,70 @@
+# Dependencies
+node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Next.js build output
+.next
+out
+
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# IDE
+.vscode
+.idea
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Git
+.git
+.gitignore
+
+# Docker
+Dockerfile*
+docker-compose*.yml
+deploy.sh
+
+# Documentation
+*.md
+API_TESTING_GUIDE.md
+DEPLOYMENT_README.md
+
+# Testing
+coverage
+.nyc_output
+
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Coverage directory used by tools like istanbul
+coverage/
+
+# Dependency directories
+node_modules/
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
--- a/.env.evolution
+++ b/.env.evolution
@@ -0,0 +1,44 @@
+# Evolution API Environment Variables
+
+# Server
+SERVER_TYPE=http
+SERVER_PORT=8080
+SERVER_URL=http://localhost:8080
+
+# Telemetry
+TELEMETRY=false
+
+# CORS
+CORS_ORIGIN=*
+CORS_METHODS=GET,POST,PUT,DELETE
+CORS_CREDENTIALS=true
+
+# Logs
+LOG_LEVEL=ERROR,WARN,DEBUG,INFO
+LOG_COLOR=true
+LOG_BAILEYS=error
+
+# Instances
+DEL_INSTANCE=false
+
+# Persistent Storage (using local for now, can change to Supabase later)
+DATABASE_ENABLED=false
+DATABASE_PROVIDER=postgresql
+DATABASE_CONNECTION_URI=postgresql://dummy:dummy@localhost:5432/dummy
+
+# Use local cache instead
+CACHE_LOCAL_ENABLED=true
+
+# Authentication
+AUTHENTICATION_API_KEY=ANCHOR23_API_KEY_CHANGE_THIS
+
+# Language
+LANGUAGE=en
+
+# Session Config
+CONFIG_SESSION_PHONE_CLIENT=Anchor23 API
+CONFIG_SESSION_PHONE_NAME=Chrome
+
+# QR Code
+QRCODE_LIMIT=30
+QRCODE_COLOR=#175197
--- a/.env.example
+++ b/.env.example
@@ -21,5 +21,14 @@ TWILIO_WHATSAPP_FROM=whatsapp:+14155238886
 NEXTAUTH_URL=http://localhost:3000
 NEXTAUTH_SECRET=your-nextauth-secret

+# Email Service (Resend)
+RESEND_API_KEY=re_xxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
 # App
 NEXT_PUBLIC_APP_URL=http://localhost:3000
+
+# Optional: Redis para caching
+REDIS_URL=redis://redis:6379
+
+# Optional: Analytics
+NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX
--- a/API_TESTING_GUIDE.md
+++ b/API_TESTING_GUIDE.md
@@ -0,0 +1,116 @@
+# AnchorOS API Testing Guide
+
+## 📋 **Rutas a Probar - Testing Endpoints**
+
+### **🔐 Autenticación**
+- `POST /api/auth/login` - Login de usuario
+  - Body: `{ email, password }`
+  - Buscar: Token JWT en respuesta
+- `POST /api/auth/register` - Registro de cliente
+  - Body: `{ first_name, last_name, email, phone, password }`
+  - Buscar: Usuario creado con ID
+
+### **👥 Gestión de Clientes**
+- `GET /api/customers` - Listar clientes
+  - Headers: Authorization Bearer token
+  - Buscar: Array de clientes con datos completos
+- `POST /api/customers` - Crear cliente
+  - Headers: Authorization Bearer token
+  - Body: `{ first_name, last_name, email, phone }`
+  - Buscar: Cliente creado
+- `GET /api/customers/[id]` - Detalles de cliente
+  - Buscar: Datos completos del cliente + bookings
+
+### **💺 Reservas (Bookings)**
+- `GET /api/bookings` - Listar reservas
+  - Query params: `?status=confirmed&date=2024-01-01`
+  - Buscar: Array de bookings con relaciones (customer, service, staff)
+- `POST /api/bookings` - Crear reserva
+  - Body: `{ customer_id, service_id, staff_id, location_id, date, notes }`
+  - Buscar: Booking creado + email enviado automáticamente
+- `PUT /api/bookings/[id]` - Actualizar reserva
+  - Body: `{ status: 'confirmed' }`
+  - Buscar: Status actualizado
+- `DELETE /api/bookings/[id]` - Cancelar reserva
+  - Buscar: Status cambiado a 'cancelled'
+
+### **🏢 Ubicaciones**
+- `GET /api/locations` - Listar ubicaciones
+  - Buscar: Array de locations con servicios disponibles
+
+### **👨‍💼 Staff**
+- `GET /api/staff` - Listar personal
+  - Buscar: Array de staff con especialidades
+
+### **💅 Servicios**
+- `GET /api/services` - Listar servicios
+  - Buscar: 22 servicios de Anchor 23 con precios
+
+### **📅 Disponibilidad**
+- `GET /api/availability?service_id=1&date=2024-01-01&location_id=1`
+  - Buscar: Slots disponibles por staff
+- `POST /api/availability/blocks` - Bloquear horario
+  - Body: `{ staff_id, start_time, end_time, reason }`
+  - Buscar: Bloqueo creado
+
+### **🏪 Kiosk (Auto-servicio)**
+- `GET /api/kiosk/locations` - Ubicaciones disponibles
+  - Buscar: Locations con servicios activos
+- `POST /api/kiosk/bookings` - Reserva desde kiosk
+  - Body: `{ service_id, customer_data, date }`
+  - Buscar: Booking creado + email enviado
+- `POST /api/kiosk/walkin` - Reserva inmediata
+  - Body: `{ service_id, customer_data }`
+  - Buscar: Booking inmediato confirmado
+
+### **📊 Aperture (Dashboard Admin)**
+- `GET /api/aperture/stats` - Estadísticas generales
+  - Buscar: Métricas de negocio (revenue, bookings, etc.)
+- `GET /api/aperture/reports` - Reportes detallados
+  - Buscar: Datos para gráficos y análisis
+- `GET /api/aperture/pos` - Sistema POS
+  - Buscar: Servicios disponibles para venta
+
+### **🧾 Recibos**
+- `GET /api/receipts/[bookingId]` - Descargar PDF
+  - Buscar: PDF generado con datos de reserva
+- `POST /api/receipts/[bookingId]/email` - Enviar por email
+  - Buscar: Email enviado con PDF adjunto
+
+### **⚙️ Sistema**
+- `GET /api/health` - Health check
+  - Buscar: `{ status: 'ok' }`
+- `POST /api/cron/reset-invitations` - Reset diario
+  - Buscar: Invitaciones expiradas reseteadas
+
+## 🔍 **Qué Buscar en Cada Respuesta**
+
+### **✅ Éxito**
+- Status codes: 200, 201
+- Estructura de datos correcta
+- Relaciones cargadas (joins)
+- Emails enviados (para bookings)
+
+### **❌ Errores**
+- Status codes: 400, 401, 403, 404, 500
+- Mensajes de error descriptivos
+- Validación de datos
+- Autenticación requerida
+
+### **🔄 Estados**
+- Bookings: `pending` → `confirmed` → `completed`
+- Pagos: `pending` → `paid`
+- Recursos: `available` → `booked`
+
+## 🧪 **Casos de Edge**
+
+- **Autenticación**: Token expirado, permisos insuficientes
+- **Reservas**: Doble booking, horarios conflictivos
+- **Pagos**: Montos inválidos, métodos no soportados
+- **Kiosk**: Datos faltantes, servicios no disponibles
+
+## 📈 **Performance**
+
+- Response time < 500ms para GET
+- Response time < 2s para POST complejos
+- Conexiones concurrentes soportadas
--- a/ASSETS_PLAN.md
+++ b/ASSETS_PLAN.md
@@ -0,0 +1,392 @@
+# 🖼️ Assets & Images Plan
+
+Este documento describe todos los recursos de imagen necesarios para AnchorOS y el plan de implementación del logo SVG original.
+
+---
+
+## 📁 1. Imágenes de Sucursales (@src/location)
+
+**Ubicación existente:**
+```text
+src/location/
+  ├─ A23_VIA_K01.png
+  ├─ A23_VIA_K02.png
+  ├─ A23_VIA_K03.png
+  ├─ A23_VIA_K04.png
+  └─ A23_VIA_K05.png
+```
+
+**Plan de uso sugerido:**
+
+| Archivo           | Uso sugerido                                  | Dimensiones recomendadas | Comentarios                        |
+|-------------------|----------------------------------------------|--------------------------|-------------------------------------|
+| A23_VIA_K01.png   | Hero banner página de franquicias            | 1920×800 px (desktop) / 800×600 (mobile) | Optimizar JPEG 80-85% |
+| A23_VIA_K02.png   | Galería de sucursales en página franquicias | 400×300 px (thumbnails) / 1200×600 (modal) | PNG o WebP optimizado |
+| A23_VIA_K03.png   | Slider mobile página de franquicias        | 375×250 px (ratio 3:2)               | Comprimir para mobile |
+| A23_VIA_K04.png   | Card destacado primera sucursal           | 600×400 px                               | PNG con transparencia si aplica |
+| A23_VIA_K05.png   | Background sección información           | 1920×900 px (parallax) o 1920×1080 (cover) | Considerar overlay oscuro |
+
+---
+
+## 📁 2. Imágenes de Servicios
+
+**Ubicación sugerida:** `src/public/images/services/` o `public/images/services/`
+
+**Categorías según código:**
+- `core` - CORE EXPERIENCES
+- `nails` - NAIL COUTURE
+- `hair` - HAIR FINISHING RITUALS
+- `lashes` - LASH & BROW RITUALS
+- `events` - EVENT EXPERIENCES
+- `permanent` - PERMANENT RITUALS
+
+**Estructura sugerida:**
+```text
+public/images/services/
+  ├─ core/
+  │   ├─ spa-hero.jpg (1920×1080)
+  │   ├─ facial-hero.jpg (1920×1080)
+  │   └─ experience-1.jpg (1200×800)
+  ├─ nails/
+  │   ├─ manicure-thumb.jpg (600×800)
+  │   ├─ pedicure-thumb.jpg (600×800)
+  │   └─ nail-art.jpg (800×600)
+  ├─ hair/
+  │   ├─ blowout.jpg (800×800)
+  │   ├─ styling.jpg (800×800)
+  │   └─ treatment.jpg (800×600)
+  ├─ lashes/
+  │   ├─ extensions.jpg (800×800)
+  │   └─ brows.jpg (600×800)
+  ├─ events/
+  │   └─ event-thumb.jpg (1200×800)
+  └─ permanent/
+      └─ treatment.jpg (800×600)
+```
+
+**Tamaños mínimos sugeridos:**
+- Hero de categoría: 1920×1080 px
+- Thumbnails verticales: 600×800 px
+- Cuadrados: 800×800 px
+- Formatos: JPG 80-85% (fotos), PNG/WebP (gráficos)
+
+---
+
+## 📁 3. Imágenes de Sucursales para Franquicias
+
+**Ubicación sugerida:** `public/images/franchises/` o `src/public/images/franchises/`
+
+**Imágenes necesarias:**
+- `franchise-landing-hero.jpg` - Banner principal (1920×900 px)
+- `location-hero-1.jpg` - Hero sucursal 1 (1200×600 px)
+- `location-hero-2.jpg` - Hero sucursal 2 (1200×600 px)
+- `location-hero-3.jpg` - Hero sucursal 3 (1200×600 px)
+- `franchise-team.jpg` - Foto del equipo (1200×600 px)
+- `success-badge.jpg` - Badge de éxito (300×300 px)
+
+---
+
+## 📁 4. Imágenes de Página Principal
+
+**Ubicación sugerida:** `public/images/home/`
+
+**Imágenes actuales en código:**
+1. `hero-bg.jpg` - Imagen Hero Section (1920×1080 px, parallax)
+   - Uso: `<div className="hero-image">` en app/page.tsx:22
+   - Recomendación: Foto de spa elegante, tonos cálidos, luz suave
+
+2. `foundation-bg.jpg` - Imagen Sección Fundamento (1200×600 px)
+   - Uso: `<aside className="foundation-image">` en app/page.tsx:44
+   - Recomendación: Foto del logo o detalle arquitectónico
+
+---
+
+## 📁 5. Imágenes de Historia
+
+**Ubicación sugerida:** `public/images/history/` o `src/public/images/history/`
+
+**Imágenes necesarias:**
+- `history-hero.jpg` - Banner principal (1920×600 px)
+- `founders.jpg` - Foto de fundadores (1200×800 px)
+- `timeline-1.jpg` - Foto evento 1 (800×600 px)
+- `timeline-2.jpg` - Foto evento 2 (800×600 px)
+- `timeline-3.jpg` - Foto evento 3 (800×600 px)
+
+---
+
+## 📁 6. Imágenes de Testimonios
+
+**Ubicación sugerida:** `public/images/testimonials/`
+
+**Imágenes necesarias:**
+- `testimonial-1.jpg` - Foto cliente 1 (400×400 px, cuadrado)
+- `testimonial-2.jpg` - Foto cliente 2 (400×400 px, cuadrado)
+- `testimonial-3.jpg` - Foto cliente 3 (400×400 px, cuadrado)
+- `testimonial-4.jpg` - Foto cliente 4 (400×400 px, cuadrado)
+
+**Notas:**
+- Fotos reales de clientes (permiso necesario)
+- Tonos cálidos, iluminación suave
+- Posibles background blur o overlay de marca
+
+---
+
+## 📁 7. Imágenes de Galerías
+
+**Ubicación sugerida:** `public/images/gallery/`
+
+**Estructura sugerida:**
+```text
+public/images/gallery/
+  ├─ before-after/
+  │   ├─ nails-ba-1.jpg (1200×800)
+  │   ├─ nails-af-1.jpg (1200×800)
+  │   ├─ brows-ba-1.jpg (1200×800)
+  │   └─ brows-af-1.jpg (1200×800)
+  ├─ treatments/
+  │   ├─ facial-1.jpg (1200×800)
+  │   ├─ spa-1.jpg (1200×800)
+  │   └─ massage-1.jpg (1200×800)
+  └─ events/
+      ├─ event-1.jpg (1200×800)
+      └─ event-2.jpg (1200×800)
+```
+
+---
+
+## 8. Logo SVG Original (@src/logo.svg)
+
+**Ruta:** `src/logo.svg`
+
+**Propiedades:**
+```xml
+<svg viewBox="0 0 500 500" ...>
+  <!-- Path único que combina ancla + "23" -->
+  <path style="fill:#6f5e4f;stroke-width:1.14189;fill-opacity:1" d="m 243.91061,490.07237 ..." />
+</svg>
+```
+
+**Plan de integración:**
+1. Importar SVG COMPLETO en componentes (no path simplificado)
+2. Aplicar transform para ajustar proporciones
+3. Hero: Color sólido `#6F5E4F`, sin animación (aparece instantáneamente)
+4. Loading: `#E9E1D8` sobre `#3F362E`, sin fade-in del logo + fade-out desde arriba
+
+**Tamaños recomendados:**
+- Hero: 160×110 px → 200×137 px (responsive)
+- Loading: 160×110 px (fijo, consistente)
+- SVG viewBox: `0 0 160 110` (ajustado)
+
+---
+
+## 9. Página de Franquicias
+
+**Ubicación:** `app/franchises/page.tsx`
+
+**Imágenes utilizadas:**
+- Iconos: Lucide (Building2, Map, CheckCircle)
+- Necesita: Imágenes de sucursales del punto 3
+
+---
+
+## 10. Página de Servicios
+
+**Ubicación:** `app/servicios/page.tsx`
+
+**Imágenes utilizadas:**
+- No utiliza imágenes actualmente
+- Necesita: Thumbnails de servicios del punto 2
+
+---
+
+## 📁 11. Página de Membresías
+
+**Ubicación:** `app/membresias/page.tsx`
+
+**Imágenes utilizadas:**
+- Iconos: Lucide (Crown, Star, Award, Diamond)
+- Necesita: Imágenes premium para mostrar exclusividad
+
+---
+
+## 📁 12. Página de Historia
+
+**Ubicación:** `app/historia/page.tsx`
+
+**Imágenes utilizadas:**
+- Actualmente usa placeholders
+- Necesita: Imágenes de fundadores y timeline
+
+---
+
+## 📁 13. Página de Contacto
+
+**Ubicación:** `app/contacto/page.tsx`
+
+**Imágenes utilizadas:**
+- Iconos de contacto: Lucide (Mail, Phone, MapPin)
+- Necesita: Imagen de ubicación o mapa
+
+---
+
+## 📁 14. Página de Legal
+
+**Ubicación:** `app/legal/page.tsx`
+
+**Imágenes utilizadas:**
+- Iconos legales: Lucide (FileText, Shield, AlertTriangle)
+- No necesita imágenes adicionales
+
+---
+
+## 📁 15. Página de Privacy Policy
+
+**Ubicación:** `app/privacy-policy/page.tsx`
+
+**Imágenes utilizadas:**
+- Iconos de privacidad: Lucide (Lock, Eye, Shield)
+- No necesita imágenes adicionales
+
+---
+
+## 📁 16. Dashboard Admin (Aperture)
+
+**Ubicación:** `app/aperture/page.tsx`
+
+**Imágenes utilizadas:**
+- Iconos de admin: Lucide (Calendar, Users, Clock, DollarSign, TrendingUp)
+- Avatares de staff (placeholders)
+- Necesita: Fotos de staff reales
+
+---
+
+## 📁 17. Dashboard HQ
+
+**Ubicación:** `app/hq/page.tsx`
+
+**Imágenes utilizadas:**
+- Iconos de operaciones: Lucide (Building2, Users, Clock, DollarSign)
+- Necesita: Imágenes de sucursales
+
+---
+
+## 📁 18. Kiosk System
+
+**Ubicación:** `app/kiosk/[locationId]/page.tsx`
+
+**Imágenes utilizadas:**
+- Iconos de navegación: Lucide (ArrowLeft, ArrowRight, CheckCircle)
+- Logo de la sucursal actual
+- Necesita: Logo de cada ubicación
+
+---
+
+## 📁 19. Booking System
+
+**Ubicación:** `app/booking/*/page.tsx`
+
+**Imágenes utilizadas:**
+- Iconos de booking: Lucide (Calendar, Clock, MapPin, User, CreditCard)
+- Avatares de clientes (placeholders)
+- Necesita: Fotos de servicios
+
+---
+
+## 📁 20. Admin System
+
+**Ubicación:** `app/admin/*/page.tsx`
+
+**Imágenes utilizadas:**
+- Iconos de admin: Lucide (Settings, Users, Shield, BarChart3)
+- Avatares de staff (placeholders)
+- Necesita: Fotos de staff y sucursales
+
+---
+
+## 🎬 Loading Screen & Animations
+
+**Ubicación:** `components/loading-screen.tsx`
+
+**Especificaciones técnicas:**
+- **Logo SVG:** `@src/logo.svg` completo
+- **Color Loading:** `#E9E1D8` (beige claro elegante)
+- **Barra de carga:** `#E9E1D8` (mismo color)
+- **Fondo:** `#3F362E` (marrón oscuro elegante)
+- **Animación entrada:** Fade in rápido (0.3s)
+- **Animación salida:** Fade out desde arriba (0.8s, translateY -100px)
+- **Solo en home page:** Primera visita únicamente
+- **Tamaño:** 160×110 px (viewBox optimizado)
+
+**Secuencia completa:**
+1. Pantalla aparece con fade in rápido
+2. Logo SVG en #E9E1D8 sobre fondo #3F362E (aparece instantáneamente)
+3. Barra de carga progresa rápidamente (120ms intervalos)
+4. Al llegar al 100%, fade out desde arriba
+5. Logo hero aparece instantáneamente en #6F5E4F
+
+**Secuencia completa:**
+1. Cortinilla aparece con fade in rápido
+2. Logo en #E9E1D8 + barra de carga progresando
+3. Al completar 100%, fade out desde arriba
+4. Logo hero aparece con fade in lento en #6F5E4F
+
+---
+
+## 📋 Checklist de Implementación
+
+| Tarea                                     | Estado   | Prioridad |
+|-------------------------------------------|----------|-----------|
+| Crear estructura de imágenes public            | pending   | alta       |
+| Optimizar imágenes A23_VIA_*               | pending   | alta       |
+| Implementar logo SVG en Hero sin animación | completed | alta       |
+| Implementar logo SVG en Loading sin fade-in| completed | alta       |
+| Agregar imágenes Hero/Fundamento      | pending   | media      |
+| Agregar imágenes Historia                | pending   | media      |
+| Agregar testimonios                     | pending   | media      |
+| Crear galería Before/After          | pending   | baja       |
+| Agregar thumbnails de servicios          | pending   | alta       |
+| Probar responsive en todos los breakpoints | pending   | alta       |
+| Verificar carga de imágenes (lazy load)   | pending   | media      |
+
+---
+
+## 🎨 Especificaciones de Branding
+
+### Colores de Logo
+- **Primary:** #6f5e4f (Marrón cálido)
+- **Hero sólido:** #6F5E4F (Marrón elegante)
+- **Loading SVG:** #E9E1D8 (Beige claro elegante)
+- **Loading barra:** #E9E1D8 (Mismo que logo)
+- **Background Loading:** #3F362E (Marrón oscuro elegante)
+- **Gradient (alternativo):** #6f5e4f → #8B4513 → #5a4a3a
+
+### Fondos de Secciones
+- **Hero:** #F5F5DC (Bone White)
+- **Services:** #F5F5DC
+- **Testimonials:** Blanco con overlay sutil
+- **Loading:** #3F362E
+
+### Tipografía
+- **Headings:** Playfair Display
+- **Body:** Inter o similar sans-serif
+
+---
+
+## 🔧 Guías de Optimización
+
+### Para Imágenes
+1. **JPEG para fotos:** Calidad 80-85%, Progresivo
+2. **PNG/WebP para gráficos:** Sin pérdida
+3. **Lazy loading:** Usar `<img loading="lazy">`
+4. **Responsive images:** `srcset` para diferentes tamaños
+5. **Compression:** Usar tool (Squoosh, TinyPNG)
+
+### Para SVG
+1. **ViewBox óptimo:** Mantener proporción 500:500
+2. **Clean path:** Eliminar atributos Inkscape innecesarios
+3. **Optimizar tamaño:** Minificar si es posible
+
+---
+
+> **Nota:** Mantener este archivo actualizado con nuevas imágenes o cambios de especificaciones de assets.
+
--- a/DEPLOYMENT_README.md
+++ b/DEPLOYMENT_README.md
@@ -0,0 +1,183 @@
+# 🚀 AnchorOS Deployment Guide
+
+## 📋 **Pre-requisitos**
+
+- VPS con Ubuntu/Debian 20.04+
+- Docker y Docker Compose instalados
+- Dominio apuntando a tu VPS
+- Certificados SSL (Let's Encrypt recomendado)
+
+## 🛠️ **Configuración Inicial**
+
+### 1. **Clonar y configurar**
+```bash
+git clone https://github.com/your-repo/anchoros.git
+cd anchoros
+cp .env.example .env
+# Editar .env con tus valores reales
+```
+
+### 2. **Variables críticas**
+```bash
+# Requeridas para funcionamiento básico
+NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
+NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJxxxxx
+SUPABASE_SERVICE_ROLE_KEY=eyJxxxxx
+RESEND_API_KEY=re_xxxxx
+NEXT_PUBLIC_APP_URL=https://tu-dominio.com
+```
+
+### 3. **SSL Certificates**
+```bash
+# Instalar Certbot
+sudo apt install certbot
+
+# Generar certificados
+sudo certbot certonly --standalone -d tu-dominio.com
+
+# Copiar a directorio ssl/
+sudo mkdir ssl
+sudo cp /etc/letsencrypt/live/tu-dominio.com/fullchain.pem ssl/
+sudo cp /etc/letsencrypt/live/tu-dominio.com/privkey.pem ssl/
+```
+
+## 🚀 **Deployment**
+
+### **Opción 1: Script Automático**
+```bash
+./deploy.sh production
+```
+
+### **Opción 2: Manual**
+```bash
+# Build e iniciar
+docker-compose -f docker-compose.prod.yml up -d --build
+
+# Verificar
+curl http://localhost/health
+```
+
+## 📊 **Monitoreo**
+
+### **Logs**
+```bash
+# Todos los servicios
+docker-compose -f docker-compose.prod.yml logs -f
+
+# Servicio específico
+docker-compose -f docker-compose.prod.yml logs -f anchoros
+```
+
+### **Recursos**
+```bash
+# Uso de CPU/Memoria
+docker stats
+
+# Espacio en disco
+df -h
+```
+
+### **Health Checks**
+```bash
+# API health
+curl https://tu-dominio.com/api/health
+
+# Nginx status
+curl -H "Host: tu-dominio.com" http://localhost/health
+```
+
+## 🔧 **Mantenimiento**
+
+### **Updates**
+```bash
+# Pull latest changes
+git pull origin main
+
+# Redeploy
+./deploy.sh production
+```
+
+### **Backup**
+```bash
+# Database backup (si usas PostgreSQL local)
+docker exec anchoros_db pg_dump -U postgres anchoros > backup.sql
+
+# Logs backup
+docker-compose -f docker-compose.prod.yml logs > logs_backup.txt
+```
+
+### **SSL Renewal**
+```bash
+# Renew certificates
+sudo certbot renew
+
+# Restart nginx
+docker-compose -f docker-compose.prod.yml restart nginx
+```
+
+## 🚨 **Troubleshooting**
+
+### **App no responde**
+```bash
+# Verificar contenedores
+docker ps
+
+# Logs de la app
+docker logs anchoros_app
+
+# Reiniciar app
+docker-compose -f docker-compose.prod.yml restart anchoros
+```
+
+### **Error 502 Bad Gateway**
+```bash
+# Nginx no puede conectar con Next.js
+docker logs anchoros_nginx
+
+# Verificar que Next.js esté corriendo
+curl http://localhost:3000
+```
+
+### **Alta carga de CPU**
+```bash
+# Verificar procesos
+docker stats
+
+# Restart services
+docker-compose -f docker-compose.prod.yml restart
+```
+
+## 📈 **Optimizaciones de Performance**
+
+### **Nginx Caching**
+- Static files: 1 año cache
+- API responses: No cache
+- Rate limiting: 10 req/s
+
+### **Next.js Optimizations**
+- Standalone build
+- Gzip compression
+- Image optimization
+- Console removal en prod
+
+### **Database**
+- Conexión pool
+- Query optimization
+- Redis caching (opcional)
+
+## 🔒 **Seguridad**
+
+- SSL/TLS 1.2+
+- Rate limiting
+- Security headers
+- No exposición de puertos internos
+- Variables de entorno seguras
+
+## 📞 **Soporte**
+
+Para issues, revisar:
+1. Docker logs
+2. Network connectivity
+3. Environment variables
+4. SSL certificates
+5. Database connections
--- a/48
+++ b/48
@@ -0,0 +1,48 @@
+# Dockerfile optimizado para Next.js production
+FROM node:18-alpine AS base
+
+# Instalar dependencias solo para producción
+FROM base AS deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Copiar archivos de dependencias
+COPY package.json package-lock.json ./
+RUN npm ci --only=production --ignore-scripts && npm cache clean --force
+
+# Build stage
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Variables de entorno para build
+ENV NEXT_TELEMETRY_DISABLED 1
+ENV NODE_ENV production
+
+# Build optimizado
+RUN npm run build
+
+# Production stage
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+# Copiar archivos necesarios
+COPY --from=builder /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+ENV HOSTNAME "0.0.0.0"
+
+CMD ["node", "server.js"]
--- a/Dockerfile.dev
+++ b/Dockerfile.dev
@@ -0,0 +1,19 @@
+# Dockerfile para desarrollo
+FROM node:18-alpine
+
+WORKDIR /app
+
+# Copiar archivos de dependencias primero para caching
+COPY package.json package-lock.json ./
+
+# Instalar dependencias incluyendo dev
+RUN npm ci
+
+# Copiar código fuente
+COPY . .
+
+# Exponer puerto
+EXPOSE 3000
+
+# Comando por defecto
+CMD ["npm", "run", "dev"]
--- a/app/api/bookings/route.ts
+++ b/app/api/bookings/route.ts
@@ -224,6 +224,19 @@ export async function POST(request: NextRequest) {
      )
    }

+    // Send receipt email
+    try {
+      await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/receipts/${booking.id}/email`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })
+    } catch (emailError) {
+      console.error('Failed to send receipt email:', emailError)
+      // Don't fail the booking if email fails
+    }
+
    return NextResponse.json({
      success: true,
      booking
--- a/app/api/kiosk/bookings/route.ts
+++ b/app/api/kiosk/bookings/route.ts
@@ -187,6 +187,18 @@ export async function POST(request: NextRequest) {
      )
    }

+    // Send receipt email
+    try {
+      await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/receipts/${booking.id}/email`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })
+    } catch (emailError) {
+      console.error('Failed to send receipt email:', emailError)
+    }
+
    return NextResponse.json({
      success: true,
      booking,
--- a/app/api/kiosk/walkin/route.ts
+++ b/app/api/kiosk/walkin/route.ts
@@ -149,6 +149,18 @@ export async function POST(request: NextRequest) {
      )
    }

+    // Send receipt email
+    try {
+      await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/receipts/${booking.id}/email`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })
+    } catch (emailError) {
+      console.error('Failed to send receipt email:', emailError)
+    }
+
    return NextResponse.json({
      success: true,
      booking,
--- a/app/api/receipts/[bookingId]/email/route.ts
+++ b/app/api/receipts/[bookingId]/email/route.ts
@@ -0,0 +1,132 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { supabaseAdmin } from '@/lib/supabase/admin'
+import jsPDF from 'jspdf'
+import { format } from 'date-fns'
+import { es } from 'date-fns/locale'
+import { Resend } from 'resend'
+
+const resend = new Resend(process.env.RESEND_API_KEY!)
+
+/** @description Send receipt email for booking */
+export async function POST(
+  request: NextRequest,
+  { params }: { params: { bookingId: string } }
+) {
+  try {
+    // Get booking data
+    const { data: booking, error: bookingError } = await supabaseAdmin
+      .from('bookings')
+      .select(`
+        *,
+        customer:customers(*),
+        service:services(*),
+        staff:staff(*),
+        location:locations(*)
+      `)
+      .eq('id', params.bookingId)
+      .single()
+
+    if (bookingError || !booking) {
+      return NextResponse.json({ error: 'Booking not found' }, { status: 404 })
+    }
+
+    // Generate PDF
+    const doc = new jsPDF()
+    doc.setFont('helvetica')
+
+    // Header
+    doc.setFontSize(20)
+    doc.setTextColor(139, 69, 19)
+    doc.text('ANCHOR:23', 20, 30)
+
+    doc.setFontSize(14)
+    doc.setTextColor(0, 0, 0)
+    doc.text('Recibo de Reserva', 20, 45)
+
+    // Details
+    doc.setFontSize(12)
+    let y = 65
+    doc.text(`Número de Reserva: ${booking.id.slice(-8).toUpperCase()}`, 20, y)
+    y += 10
+    doc.text(`Cliente: ${booking.customer.first_name} ${booking.customer.last_name}`, 20, y)
+    y += 10
+    doc.text(`Servicio: ${booking.service.name}`, 20, y)
+    y += 10
+    doc.text(`Fecha y Hora: ${format(new Date(booking.date), 'PPP p', { locale: es })}`, 20, y)
+    y += 10
+    doc.text(`Total: $${booking.service.price} MXN`, 20, y)
+
+    // Footer
+    y = 250
+    doc.setFontSize(10)
+    doc.setTextColor(128, 128, 128)
+    doc.text('ANCHOR:23 - Belleza anclada en exclusividad', 20, y)
+
+    const pdfBuffer = Buffer.from(doc.output('arraybuffer'))
+
+    // Send email
+    const emailHtml = `
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <meta charset="utf-8">
+          <title>Recibo de Reserva - ANCHOR:23</title>
+          <style>
+            body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; }
+            .container { max-width: 600px; margin: 0 auto; padding: 20px; }
+            .header { text-align: center; margin-bottom: 30px; }
+            .logo { color: #8B4513; font-size: 24px; font-weight: bold; }
+            .details { background: #f9f9f9; padding: 20px; border-radius: 8px; margin: 20px 0; }
+            .footer { text-align: center; margin-top: 30px; font-size: 12px; color: #666; }
+          </style>
+        </head>
+        <body>
+          <div class="container">
+            <div class="header">
+              <div class="logo">ANCHOR:23</div>
+              <h1>Confirmación de Reserva</h1>
+            </div>
+
+            <p>Hola ${booking.customer.first_name},</p>
+            <p>Tu reserva ha sido confirmada. Adjunto el recibo.</p>
+
+            <div class="details">
+              <p><strong>Servicio:</strong> ${booking.service.name}</p>
+              <p><strong>Fecha:</strong> ${format(new Date(booking.date), 'PPP', { locale: es })}</p>
+              <p><strong>Hora:</strong> ${format(new Date(booking.date), 'p', { locale: es })}</p>
+              <p><strong>Total:</strong> $${booking.service.price} MXN</p>
+            </div>
+
+            <div class="footer">
+              <p>ANCHOR:23 - Saltillo, Coahuila, México</p>
+            </div>
+          </div>
+        </body>
+      </html>
+    `
+
+    const { data: emailResult, error: emailError } = await resend.emails.send({
+      from: 'ANCHOR:23 <noreply@anchor23.mx>',
+      to: booking.customer.email,
+      subject: 'Confirmación de Reserva - ANCHOR:23',
+      html: emailHtml,
+      attachments: [
+        {
+          filename: `recibo-${booking.id.slice(-8)}.pdf`,
+          content: pdfBuffer
+        }
+      ]
+    })
+
+    if (emailError) {
+      console.error('Email error:', emailError)
+      return NextResponse.json({ error: 'Failed to send email' }, { status: 500 })
+    }
+
+    return NextResponse.json({ success: true, emailId: emailResult?.id })
+
+  } catch (error) {
+    console.error('Receipt email error:', error)
+    return NextResponse.json({ error: 'Failed to send receipt email' }, { status: 500 })
+  }
+}
--- a/app/api/receipts/[bookingId]/route.ts
+++ b/app/api/receipts/[bookingId]/route.ts
@@ -0,0 +1,104 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { supabaseAdmin } from '@/lib/supabase/admin'
+import jsPDF from 'jspdf'
+import { format } from 'date-fns'
+import { es } from 'date-fns/locale'
+
+/** @description Generate PDF receipt for booking */
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { bookingId: string } }
+) {
+  try {
+    const supabase = supabaseAdmin
+
+    // Get booking with related data
+    const { data: booking, error: bookingError } = await supabase
+      .from('bookings')
+      .select(`
+        *,
+        customer:customers(*),
+        service:services(*),
+        staff:staff(*),
+        location:locations(*)
+      `)
+      .eq('id', params.bookingId)
+      .single()
+
+    if (bookingError || !booking) {
+      return NextResponse.json({ error: 'Booking not found' }, { status: 404 })
+    }
+
+    // Create PDF
+    const doc = new jsPDF()
+
+    // Set font
+    doc.setFont('helvetica')
+
+    // Header
+    doc.setFontSize(20)
+    doc.setTextColor(139, 69, 19) // Saddle brown
+    doc.text('ANCHOR:23', 20, 30)
+
+    doc.setFontSize(14)
+    doc.setTextColor(0, 0, 0)
+    doc.text('Recibo de Reserva', 20, 45)
+
+    // Booking details
+    doc.setFontSize(12)
+    let y = 65
+
+    doc.text(`Número de Reserva: ${booking.id.slice(-8).toUpperCase()}`, 20, y)
+    y += 10
+
+    doc.text(`Fecha de Reserva: ${format(new Date(booking.created_at), 'PPP', { locale: es })}`, 20, y)
+    y += 10
+
+    doc.text(`Cliente: ${booking.customer.first_name} ${booking.customer.last_name}`, 20, y)
+    y += 10
+
+    doc.text(`Servicio: ${booking.service.name}`, 20, y)
+    y += 10
+
+    doc.text(`Profesional: ${booking.staff.first_name} ${booking.staff.last_name}`, 20, y)
+    y += 10
+
+    doc.text(`Ubicación: ${booking.location.name}`, 20, y)
+    y += 10
+
+    doc.text(`Fecha y Hora: ${format(new Date(booking.date), 'PPP p', { locale: es })}`, 20, y)
+    y += 10
+
+    doc.text(`Duración: ${booking.service.duration} minutos`, 20, y)
+    y += 10
+
+    // Price
+    y += 10
+    doc.setFontSize(14)
+    doc.text(`Total: $${booking.service.price} MXN`, 20, y)
+
+    // Footer
+    y = 250
+    doc.setFontSize(10)
+    doc.setTextColor(128, 128, 128)
+    doc.text('ANCHOR:23 - Belleza anclada en exclusividad', 20, y)
+    y += 5
+    doc.text('Saltillo, Coahuila, México | contacto@anchor23.mx', 20, y)
+    y += 5
+    doc.text('+52 844 123 4567', 20, y)
+
+    // Generate buffer
+    const pdfBuffer = doc.output('arraybuffer')
+
+    return new NextResponse(pdfBuffer, {
+      headers: {
+        'Content-Type': 'application/pdf',
+        'Content-Disposition': `attachment; filename=receipt-${booking.id.slice(-8)}.pdf`
+      }
+    })
+
+  } catch (error) {
+    console.error('Receipt generation error:', error)
+    return NextResponse.json({ error: 'Failed to generate receipt' }, { status: 500 })
+  }
+}
--- a/app/booking/mis-citas/page.tsx
+++ b/app/booking/mis-citas/page.tsx
@@ -209,7 +209,7 @@ export default function MisCitasPage() {
                        </div>
                        {booking.notes && (
                          <div className="mt-3 p-3 rounded-lg" style={{ background: 'var(--bone-white)', color: 'var(--charcoal-brown)' }}>
-                            <p className="text-sm italic">"{booking.notes}"</p>
+                            <p className="text-sm italic">&quot;{booking.notes}&quot;</p>
                          </div>
                        )}
                      </div>
--- a/app/booking/perfil/page.tsx
+++ b/app/booking/perfil/page.tsx
@@ -32,6 +32,13 @@ export default function PerfilPage() {
    }
  }, [user, authLoading, router])

+  useEffect(() => {
+    if (!authLoading && user) {
+      loadCustomerProfile()
+      loadCustomerBookings()
+    }
+  }, [user, authLoading])
+
  if (authLoading) {
    return (
      <div className="min-h-screen bg-[var(--bone-white)] pt-24 flex items-center justify-center">
@@ -46,11 +53,6 @@ export default function PerfilPage() {
    return null
  }

-  useEffect(() => {
-    loadCustomerProfile()
-    loadCustomerBookings()
-  }, [])
-
  const loadCustomerProfile = async () => {
    try {
      // En una implementación real, esto vendría de autenticación
--- a/app/contacto/page.tsx
+++ b/app/contacto/page.tsx
@@ -1,176 +1,135 @@
 'use client'

-import { useState } from 'react'
+import { AnimatedLogo } from '@/components/animated-logo'
+import { RollingPhrases } from '@/components/rolling-phrases'
 import { MapPin, Phone, Mail, Clock } from 'lucide-react'
+import { WebhookForm } from '@/components/webhook-form'

 /** @description Contact page component with contact information and contact form for inquiries. */
 export default function ContactoPage() {
-  const [formData, setFormData] = useState({
-    nombre: '',
-    email: '',
-    telefono: '',
-    mensaje: ''
-  })
-  const [submitted, setSubmitted] = useState(false)
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    setSubmitted(true)
-  }
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    setFormData({
-      ...formData,
-      [e.target.name]: e.target.value
-    })
-  }

  return (
-    <div className="section">
-      <div className="section-header">
-        <h1 className="section-title">Contáctanos</h1>
-        <p className="section-subtitle">
-          Estamos aquí para responder tus preguntas y atender tus necesidades.
+    <>
+      <section className="hero">
+        <div className="hero-content">
+          <AnimatedLogo />
+          <h1>Contacto</h1>
+          <h2>Anchor:23</h2>
+          <RollingPhrases />
+          <div className="hero-actions">
+            <a href="#informacion" className="btn-secondary">Información</a>
+            <a href="#mensaje" className="btn-primary">Enviar Mensaje</a>
+          </div>
+        </div>
+        <div className="hero-image">
+          <div className="w-full h-96 flex items-center justify-center bg-gradient-to-br from-amber-50 to-gray-50">
+            <span className="text-gray-500 text-lg">Imagen Contacto Hero</span>
+          </div>
+        </div>
+      </section>
+
+      <section className="foundation" id="informacion">
+        <article>
+          <h3>Información</h3>
+          <h4>Estamos aquí para ti</h4>
+          <p>
+            Anchor:23 es más que un salón, es un espacio diseñado para tu transformación personal.
+            Contáctanos para cualquier consulta o reserva.
          </p>
+        </article>
+        <aside className="foundation-image">
+          <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-amber-50 to-gray-50">
+            <span className="text-gray-500 text-lg">Imagen Contacto</span>
          </div>
+        </aside>
+      </section>

-      <div className="max-w-7xl mx-auto px-6">
-        <div className="grid md:grid-cols-2 gap-12">
-          <div className="space-y-8">
-            <div>
-              <h2 className="text-2xl font-bold text-gray-900 mb-6">Información de Contacto</h2>
-              
-              <div className="space-y-4">
-                <div className="flex items-start space-x-4">
-                  <MapPin className="w-6 h-6 text-gray-900 mt-1 flex-shrink-0" />
-                  <div>
-                    <h3 className="font-semibold text-gray-900">Ubicación</h3>
-                    <p className="text-gray-600">Saltillo, Coahuila, México</p>
+      <section className="services-preview">
+        <h3>Información de Contacto</h3>
+        <div className="service-cards">
+          <article className="service-card">
+            <h4>Ubicación</h4>
+            <p>Saltillo, Coahuila, México</p>
+          </article>
+          <article className="service-card">
+            <h4>Teléfono</h4>
+            <p>+52 844 123 4567</p>
+          </article>
+          <article className="service-card">
+            <h4>Email</h4>
+            <p>contacto@anchor23.mx</p>
+          </article>
+          <article className="service-card">
+            <h4>Horario</h4>
+            <p>Lunes - Sábado: 10:00 - 21:00</p>
+          </article>
        </div>
-                </div>
-
-                <div className="flex items-start space-x-4">
-                  <Phone className="w-6 h-6 text-gray-900 mt-1 flex-shrink-0" />
-                  <div>
-                    <h3 className="font-semibold text-gray-900">Teléfono</h3>
-                    <p className="text-gray-600">+52 844 123 4567</p>
-                  </div>
-                </div>
-
-                <div className="flex items-start space-x-4">
-                  <Mail className="w-6 h-6 text-gray-900 mt-1 flex-shrink-0" />
-                  <div>
-                    <h3 className="font-semibold text-gray-900">Email</h3>
-                    <p className="text-gray-600">contacto@anchor23.mx</p>
-                  </div>
-                </div>
-
-                <div className="flex items-start space-x-4">
-                  <Clock className="w-6 h-6 text-gray-900 mt-1 flex-shrink-0" />
-                  <div>
-                    <h3 className="font-semibold text-gray-900">Horario</h3>
-                    <p className="text-gray-600">Lunes - Sábado: 10:00 - 21:00</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div className="p-6 bg-gradient-to-br from-gray-50 to-white rounded-xl border border-gray-100">
-              <h3 className="font-semibold text-gray-900 mb-2">¿Necesitas reservar una cita?</h3>
-              <p className="text-gray-600 mb-4">
-                Utiliza nuestro sistema de reservas en línea para mayor comodidad.
-              </p>
-              <a href="https://booking.anchor23.mx" className="btn-primary inline-flex">
+        <div className="flex justify-center">
+          <a href="https://booking.anchor23.mx" className="btn-primary">
            Reservar Cita
          </a>
        </div>
-          </div>
+      </section>

-          <div>
-            <h2 className="text-2xl font-bold text-gray-900 mb-6">Envíanos un Mensaje</h2>
-            
-            {submitted ? (
-              <div className="p-8 bg-green-50 border border-green-200 rounded-xl">
-                <h3 className="text-xl font-semibold text-green-900 mb-2">
-                  Mensaje Enviado
-                </h3>
-                <p className="text-green-800">
-                  Gracias por contactarnos. Te responderemos lo antes posible.
-                </p>
-              </div>
-            ) : (
-              <form onSubmit={handleSubmit} className="space-y-6">
-                <div>
-                  <label htmlFor="nombre" className="block text-sm font-medium text-gray-700 mb-2">
-                    Nombre Completo
-                  </label>
-                  <input
-                    type="text"
-                    id="nombre"
-                    name="nombre"
-                    value={formData.nombre}
-                    onChange={handleChange}
-                    required
-                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent"
-                    placeholder="Tu nombre"
+      <section className="testimonials" id="mensaje">
+        <h3>Envíanos un Mensaje</h3>
+        <div className="max-w-2xl mx-auto">
+          <WebhookForm
+            formType="contact"
+            title="Contacto"
+            successMessage="Mensaje Enviado"
+            successSubtext="Gracias por contactarnos. Te responderemos lo antes posible."
+            submitButtonText="Enviar Mensaje"
+            fields={[
+              {
+                name: 'nombre',
+                label: 'Nombre Completo',
+                type: 'text',
+                required: true,
+                placeholder: 'Tu nombre'
+              },
+              {
+                name: 'email',
+                label: 'Email',
+                type: 'email',
+                required: true,
+                placeholder: 'tu@email.com'
+              },
+              {
+                name: 'telefono',
+                label: 'Teléfono',
+                type: 'tel',
+                required: false,
+                placeholder: '+52 844 123 4567'
+              },
+              {
+                name: 'motivo',
+                label: 'Motivo de Contacto',
+                type: 'select',
+                required: true,
+                placeholder: 'Selecciona un motivo',
+                options: [
+                  { value: 'cita', label: 'Agendar Cita' },
+                  { value: 'membresia', label: 'Información Membresías' },
+                  { value: 'franquicia', label: 'Interés en Franquicias' },
+                  { value: 'servicios', label: 'Pregunta sobre Servicios' },
+                  { value: 'pago', label: 'Problema con Pago' },
+                  { value: 'resena', label: 'Enviar Reseña' },
+                  { value: 'otro', label: 'Otro' }
+                ]
+              },
+              {
+                name: 'mensaje',
+                label: 'Mensaje',
+                type: 'textarea',
+                required: true,
+                rows: 6,
+                placeholder: '¿Cómo podemos ayudarte?'
+              }
+            ]}
          />
        </div>
-
-                <div>
-                  <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
-                    Email
-                  </label>
-                  <input
-                    type="email"
-                    id="email"
-                    name="email"
-                    value={formData.email}
-                    onChange={handleChange}
-                    required
-                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent"
-                    placeholder="tu@email.com"
-                  />
-                </div>
-
-                <div>
-                  <label htmlFor="telefono" className="block text-sm font-medium text-gray-700 mb-2">
-                    Teléfono
-                  </label>
-                  <input
-                    type="tel"
-                    id="telefono"
-                    name="telefono"
-                    value={formData.telefono}
-                    onChange={handleChange}
-                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent"
-                    placeholder="+52 844 123 4567"
-                  />
-                </div>
-
-                <div>
-                  <label htmlFor="mensaje" className="block text-sm font-medium text-gray-700 mb-2">
-                    Mensaje
-                  </label>
-                  <textarea
-                    id="mensaje"
-                    name="mensaje"
-                    value={formData.mensaje}
-                    onChange={handleChange}
-                    required
-                    rows={6}
-                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent resize-none"
-                    placeholder="¿Cómo podemos ayudarte?"
-                  />
-                </div>
-
-                <button type="submit" className="btn-primary w-full">
-                  Enviar Mensaje
-                </button>
-              </form>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
+      </section>
+    </>
  )
 }
--- a/app/franchises/page.tsx
+++ b/app/franchises/page.tsx
@@ -1,31 +1,12 @@
 'use client'

-import { useState } from 'react'
-import { Building2, Map, CheckCircle, Mail, Phone } from 'lucide-react'
+import { AnimatedLogo } from '@/components/animated-logo'
+import { RollingPhrases } from '@/components/rolling-phrases'
+import { Building2, Map, Mail, Phone, Users, Crown } from 'lucide-react'
+import { WebhookForm } from '@/components/webhook-form'

 /** @description Franchise information and application page component for potential franchise partners. */
 export default function FranchisesPage() {
-  const [formData, setFormData] = useState({
-    nombre: '',
-    email: '',
-    telefono: '',
-    ciudad: '',
-    experiencia: '',
-    mensaje: ''
-  })
-  const [submitted, setSubmitted] = useState(false)
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    setSubmitted(true)
-  }
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
-    setFormData({
-      ...formData,
-      [e.target.name]: e.target.value
-    })
-  }

  const benefits = [
    'Modelo de negocio exclusivo y probado',
@@ -33,224 +14,154 @@ export default function FranchisesPage() {
    'Sistema operativo completo (AnchorOS)',
    'Capacitación en estándares de lujo',
    'Membresía de clientes como fuente recurrente',
-    'Soporte continuo y actualizaciones'
+    'Soporte continuo y actualizaciones',
+    'Manuales operativos completos',
+    'Plataforma de entrenamientos digital',
+    'Sistema de RH integrado en AnchorOS'
  ]

  const requirements = [
    'Compromiso inquebrantable con la calidad',
    'Experiencia en industria de belleza',
-    'Inversión mínima: $500,000 USD',
+    'Inversión mínima: $100,000 USD',
    'Ubicación premium en ciudad de interés',
-    'Capacidad de contratar personal calificado'
+    'Capacidad de contratar personal calificado',
+    'Recomendable: Socio con experiencia en servicios de belleza'
  ]

  return (
-    <div className="section">
-      <div className="section-header">
-        <h1 className="section-title">Franquicias</h1>
-        <p className="section-subtitle">
-          Una oportunidad para llevar el estándar Anchor:23 a tu ciudad.
+    <>
+      <section className="hero">
+        <div className="hero-content">
+          <AnimatedLogo />
+          <h1>Franquicias</h1>
+          <h2>Anchor:23</h2>
+          <p className="hero-text">
+            Una oportunidad exclusiva para llevar el estándar Anchor:23 a tu ciudad.
          </p>
+          <div className="hero-actions">
+            <a href="#modelo" className="btn-secondary">Nuestro Modelo</a>
+            <a href="#solicitud" className="btn-primary">Solicitar Información</a>
+          </div>
        </div>

-      <div className="max-w-7xl mx-auto px-6">
-        <section className="mb-24">
-          <h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">Nuestro Modelo</h2>
-          
-          <div className="max-w-4xl mx-auto bg-gradient-to-br from-gray-50 to-white rounded-2xl shadow-lg p-12 border border-gray-100">
-            <div className="flex items-center justify-center mb-8">
-              <Building2 className="w-16 h-16 text-gray-900" />
+        <div className="hero-image">
+          <div className="w-full h-96 flex items-center justify-center bg-gradient-to-br from-gray-50 to-amber-50">
+            <span className="text-gray-500 text-lg">Imagen Hero Franquicias</span>
          </div>
+        </div>
+      </section>

-            <h3 className="text-2xl font-bold text-gray-900 mb-6 text-center">
-              Una Sucursal por Ciudad
-            </h3>
-            
-            <p className="text-lg text-gray-600 leading-relaxed text-center mb-8">
+      <section className="foundation" id="modelo">
+        <article>
+          <h3>Modelo de Negocio</h3>
+          <h4>Una sucursal por ciudad</h4>
+          <p>
            A diferencia de modelos masivos, creemos en la exclusividad geográfica. 
            Cada ciudad tiene una sola ubicación Anchor:23, garantizando calidad 
            consistente y demanda sostenible.
          </p>
+        </article>

-            <div className="grid md:grid-cols-3 gap-6 text-center">
-              <div className="p-6">
-                <Map className="w-12 h-12 mx-auto mb-4 text-gray-900" />
-                <h4 className="font-semibold text-gray-900 mb-2">Exclusividad</h4>
-                <p className="text-gray-600 text-sm">Sin competencia interna</p>
-              </div>
-              <div className="p-6">
-                <CheckCircle className="w-12 h-12 mx-auto mb-4 text-gray-900" />
-                <h4 className="font-semibold text-gray-900 mb-2">Calidad</h4>
-                <p className="text-gray-600 text-sm">Estándar uniforme</p>
-              </div>
-              <div className="p-6">
-                <Building2 className="w-12 h-12 mx-auto mb-4 text-gray-900" />
-                <h4 className="font-semibold text-gray-900 mb-2">Sostenibilidad</h4>
-                <p className="text-gray-600 text-sm">Demanda controlada</p>
-              </div>
-            </div>
+        <aside className="foundation-image">
+          <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-amber-50 to-gray-50">
+            <span className="text-gray-500 text-lg">Imagen Modelo Franquicias</span>
          </div>
+        </aside>
      </section>

-        <section className="mb-24">
-          <div className="grid md:grid-cols-2 gap-12">
-            <div>
-              <h2 className="text-2xl font-bold text-gray-900 mb-6">Beneficios</h2>
-              <div className="space-y-4">
+      <section className="services-preview">
+        <h3>Beneficios y Requisitos</h3>
+        <div className="service-cards">
+          <article className="service-card">
+            <h4>Beneficios</h4>
+            <ul className="list-disc list-inside space-y-2">
              {benefits.map((benefit, index) => (
-                  <div key={index} className="flex items-start space-x-3">
-                    <CheckCircle className="w-5 h-5 text-gray-900 mt-1 flex-shrink-0" />
-                    <p className="text-gray-700">{benefit}</p>
-                  </div>
+                <li key={index} className="text-gray-700">{benefit}</li>
              ))}
-              </div>
-            </div>
+            </ul>
+          </article>

-            <div>
-              <h2 className="text-2xl font-bold text-gray-900 mb-6">Requisitos</h2>
-              <div className="space-y-4">
+          <article className="service-card">
+            <h4>Requisitos</h4>
+            <ul className="list-disc list-inside space-y-2">
              {requirements.map((req, index) => (
-                  <div key={index} className="flex items-start space-x-3">
-                    <CheckCircle className="w-5 h-5 text-gray-900 mt-1 flex-shrink-0" />
-                    <p className="text-gray-700">{req}</p>
-                  </div>
+                <li key={index} className="text-gray-700">{req}</li>
              ))}
+            </ul>
+          </article>
        </div>
-            </div>
+        <div className="flex justify-center">
+          <a href="#solicitud" className="btn-primary">Solicitar Información</a>
        </div>
      </section>

-        <section className="mb-12">
-          <h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
-            Solicitud de Información
-          </h2>
-
+      <section className="testimonials" id="solicitud">
+        <h3>Solicitud de Información</h3>
        <div className="max-w-2xl mx-auto">
-            {submitted ? (
-              <div className="p-8 bg-green-50 border border-green-200 rounded-xl">
-                <CheckCircle className="w-12 h-12 text-green-900 mb-4" />
-                <h3 className="text-xl font-semibold text-green-900 mb-2">
-                  Solicitud Enviada
-                </h3>
-                <p className="text-green-800">
-                  Gracias por tu interés. Revisaremos tu perfil y te contactaremos
-                  pronto para discutir las oportunidades disponibles.
-                </p>
-              </div>
-            ) : (
-              <form onSubmit={handleSubmit} className="space-y-6 p-8 bg-white rounded-2xl shadow-lg border border-gray-100">
-                <div className="grid md:grid-cols-2 gap-6">
-                  <div>
-                    <label htmlFor="nombre" className="block text-sm font-medium text-gray-700 mb-2">
-                      Nombre Completo
-                    </label>
-                    <input
-                      type="text"
-                      id="nombre"
-                      name="nombre"
-                      value={formData.nombre}
-                      onChange={handleChange}
-                      required
-                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent"
-                      placeholder="Tu nombre"
+          <WebhookForm
+            formType="franchise"
+            title="Franquicias"
+            successMessage="Solicitud Enviada"
+            successSubtext="Gracias por tu interés. Revisaremos tu perfil y te contactaremos pronto para discutir las oportunidades disponibles."
+            submitButtonText="Enviar Solicitud"
+            fields={[
+              {
+                name: 'nombre',
+                label: 'Nombre Completo',
+                type: 'text',
+                required: true,
+                placeholder: 'Tu nombre'
+              },
+              {
+                name: 'email',
+                label: 'Email',
+                type: 'email',
+                required: true,
+                placeholder: 'tu@email.com'
+              },
+              {
+                name: 'telefono',
+                label: 'Teléfono',
+                type: 'tel',
+                required: true,
+                placeholder: '+52 844 123 4567'
+              },
+              {
+                name: 'ciudad',
+                label: 'Ciudad de Interés',
+                type: 'text',
+                required: true,
+                placeholder: 'Ej. Monterrey, Guadalajara'
+              },
+              {
+                name: 'experiencia',
+                label: 'Experiencia en el Sector',
+                type: 'select',
+                required: true,
+                placeholder: 'Selecciona una opción',
+                options: [
+                  { value: 'sin-experiencia', label: 'Sin experiencia' },
+                  { value: '1-3-anos', label: '1-3 años' },
+                  { value: '3-5-anos', label: '3-5 años' },
+                  { value: '5-10-anos', label: '5-10 años' },
+                  { value: 'mas-10-anos', label: 'Más de 10 años' }
+                ]
+              },
+              {
+                name: 'mensaje',
+                label: 'Mensaje Adicional',
+                type: 'textarea',
+                required: false,
+                rows: 4,
+                placeholder: 'Cuéntanos sobre tu interés o preguntas'
+              }
+            ]}
          />
        </div>

-                  <div>
-                    <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
-                      Email
-                    </label>
-                    <input
-                      type="email"
-                      id="email"
-                      name="email"
-                      value={formData.email}
-                      onChange={handleChange}
-                      required
-                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent"
-                      placeholder="tu@email.com"
-                    />
-                  </div>
-
-                  <div>
-                    <label htmlFor="telefono" className="block text-sm font-medium text-gray-700 mb-2">
-                      Teléfono
-                    </label>
-                    <input
-                      type="tel"
-                      id="telefono"
-                      name="telefono"
-                      value={formData.telefono}
-                      onChange={handleChange}
-                      required
-                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent"
-                      placeholder="+52 844 123 4567"
-                    />
-                  </div>
-
-                  <div>
-                    <label htmlFor="ciudad" className="block text-sm font-medium text-gray-700 mb-2">
-                      Ciudad de Interés
-                    </label>
-                    <input
-                      type="text"
-                      id="ciudad"
-                      name="ciudad"
-                      value={formData.ciudad}
-                      onChange={handleChange}
-                      required
-                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent"
-                      placeholder="Ej. Monterrey, Guadalajara"
-                    />
-                  </div>
-                </div>
-
-                <div>
-                  <label htmlFor="experiencia" className="block text-sm font-medium text-gray-700 mb-2">
-                    Experiencia en el Sector
-                  </label>
-                  <select
-                    id="experiencia"
-                    name="experiencia"
-                    value={formData.experiencia}
-                    onChange={handleChange}
-                    required
-                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent"
-                  >
-                    <option value="">Selecciona una opción</option>
-                    <option value="sin-experiencia">Sin experiencia</option>
-                    <option value="1-3-anos">1-3 años</option>
-                    <option value="3-5-anos">3-5 años</option>
-                    <option value="5-10-anos">5-10 años</option>
-                    <option value="mas-10-anos">Más de 10 años</option>
-                  </select>
-                </div>
-
-                <div>
-                  <label htmlFor="mensaje" className="block text-sm font-medium text-gray-700 mb-2">
-                    Mensaje Adicional
-                  </label>
-                  <textarea
-                    id="mensaje"
-                    name="mensaje"
-                    value={formData.mensaje}
-                    onChange={handleChange}
-                    rows={4}
-                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent resize-none"
-                    placeholder="Cuéntanos sobre tu interés o preguntas"
-                  />
-                </div>
-
-                <button type="submit" className="btn-primary w-full">
-                  Enviar Solicitud
-                </button>
-              </form>
-            )}
-          </div>
-        </section>
-
-        <section className="max-w-4xl mx-auto">
-          <div className="bg-gradient-to-br from-gray-900 to-gray-800 rounded-2xl p-12 text-white">
+        <div className="flex justify-center mt-8">
+          <div className="bg-gradient-to-br from-gray-900 to-gray-800 rounded-2xl p-12 text-white max-w-4xl mx-auto">
            <h3 className="text-2xl font-bold mb-6 text-center">
              ¿Tienes Preguntas Directas?
            </h3>
@@ -268,8 +179,8 @@ export default function FranchisesPage() {
              </div>
            </div>
          </div>
+        </div>
      </section>
-      </div>
-    </div>
+    </>
  )
 }
--- a/app/globals.css
+++ b/app/globals.css
@@ -4,18 +4,18 @@

@layer base {
  :root {
-    --bone-white: #F6F1EC;
-    --soft-cream: #EFE7DE;
-    --mocha-taupe: #B8A89A;
-    --deep-earth: #6F5E4F;
-    --charcoal-brown: #3F362E;
+    --bone-white: #f6f1ec;
+    --soft-cream: #efe7de;
+    --mocha-taupe: #b8a89a;
+    --deep-earth: #6f5e4f;
+    --charcoal-brown: #3f362e;

-    --ivory-cream: #FFFEF9;
-    --sand-beige: #E8E4DD;
-    --forest-green: #2E8B57;
-    --clay-orange: #D2691E;
-    --brick-red: #B22222;
-    --slate-blue: #6A5ACD;
+    --ivory-cream: #fffef9;
+    --sand-beige: #e8e4dd;
+    --forest-green: #2e8b57;
+    --clay-orange: #d2691e;
+    --brick-red: #b22222;
+    --slate-blue: #6a5acd;

    --forest-green-alpha: rgba(46, 139, 87, 0.1);
    --clay-orange-alpha: rgba(210, 105, 30, 0.1);
@@ -24,38 +24,42 @@
    --charcoal-brown-alpha: rgba(63, 54, 46, 0.1);

    /* Aperture - Square UI */
-    --ui-primary: #006AFF;
-    --ui-primary-hover: #005ED6;
-    --ui-primary-light: #E6F0FF;
+    --ui-primary: #006aff;
+    --ui-primary-hover: #005ed6;
+    --ui-primary-light: #e6f0ff;

-    --ui-bg: #F6F8FA;
-    --ui-bg-card: #FFFFFF;
-    --ui-bg-hover: #F3F4F6;
+    --ui-bg: #f6f8fa;
+    --ui-bg-card: #ffffff;
+    --ui-bg-hover: #f3f4f6;

-    --ui-border: #E1E4E8;
-    --ui-border-light: #F3F4F6;
+    --ui-border: #e1e4e8;
+    --ui-border-light: #f3f4f6;

-    --ui-text-primary: #24292E;
+    --ui-text-primary: #24292e;
    --ui-text-secondary: #586069;
-    --ui-text-tertiary: #8B949E;
-    --ui-text-inverse: #FFFFFF;
+    --ui-text-tertiary: #8b949e;
+    --ui-text-inverse: #ffffff;

-    --ui-success: #28A745;
-    --ui-success-light: #D4EDDA;
+    --ui-success: #28a745;
+    --ui-success-light: #d4edda;

-    --ui-warning: #DBAB09;
-    --ui-warning-light: #FFF3CD;
+    --ui-warning: #dbab09;
+    --ui-warning-light: #fff3cd;

-    --ui-error: #D73A49;
-    --ui-error-light: #F8D7DA;
+    --ui-error: #d73a49;
+    --ui-error-light: #f8d7da;

-    --ui-info: #0366D6;
-    --ui-info-light: #CCE5FF;
+    --ui-info: #0366d6;
+    --ui-info-light: #cce5ff;

-    --ui-shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.08);
-    --ui-shadow-md: 0 4px 12px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08);
-    --ui-shadow-lg: 0 8px 24px rgba(0,0,0,0,16), 0 4px 6px rgba(0,0,0,0.08);
-    --ui-shadow-xl: 0 20px 25px rgba(0,0,0,0.16), 0 4px 6px rgba(0,0,0,0.08);
+    --ui-shadow-sm:
+      0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.08);
+    --ui-shadow-md:
+      0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
+    --ui-shadow-lg:
+      0 8px 24px rgba(0, 0, 0, 0, 16), 0 4px 6px rgba(0, 0, 0, 0.08);
+    --ui-shadow-xl:
+      0 20px 25px rgba(0, 0, 0, 0.16), 0 4px 6px rgba(0, 0, 0, 0.08);

    --ui-radius-sm: 4px;
    --ui-radius-md: 6px;
@@ -88,8 +92,13 @@
    background: var(--bone-white);
  }

-  h1, h2, h3, h4, h5, h6 {
-    font-family: 'Playfair Display', serif;
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: "Playfair Display", serif;
  }
 }

@@ -137,34 +146,157 @@
  }

  .btn-primary {
-    @apply inline-flex items-center justify-center px-8 py-3 border text-sm font-medium rounded transition-all;
-    background: var(--deep-earth);
+    @apply inline-flex items-center justify-center px-8 py-3 border text-sm font-medium rounded-lg transition-all duration-300 relative overflow-hidden;
+    background: linear-gradient(135deg, #3E352E, var(--deep-earth));
    color: var(--bone-white);
-    border-color: var(--deep-earth);
+    border-color: #3E352E;
+    box-shadow: 0 4px 15px rgba(139, 69, 19, 0.2);
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  }
+
+  .btn-primary::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(255, 255, 255, 0.2),
+      transparent
+    );
+    transition: left 0.5s ease;
+  }
+
+  .btn-primary:hover::before {
+    left: 100%;
  }

  .btn-primary:hover {
-    opacity: 0.85;
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(139, 69, 19, 0.3);
+    background: linear-gradient(135deg, var(--deep-earth), #3E352E);
+  }
+
+  .btn-primary:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 10px rgba(139, 69, 19, 0.2);
  }

  .btn-secondary {
-    @apply inline-flex items-center justify-center px-8 py-3 border text-sm font-medium rounded transition-all;
-    background: var(--soft-cream);
+    @apply inline-flex items-center justify-center px-8 py-3 border text-sm font-medium rounded-lg transition-all duration-300 relative overflow-hidden;
+    background: linear-gradient(135deg, var(--bone-white), var(--soft-cream));
    color: var(--charcoal-brown);
    border-color: var(--mocha-taupe);
+    box-shadow: 0 4px 15px rgba(139, 69, 19, 0.1);
+  }
+
+  .btn-secondary::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(139, 69, 19, 0.1),
+      transparent
+    );
+    transition: left 0.5s ease;
+  }
+
+  .btn-secondary:hover::before {
+    left: 100%;
  }

  .btn-secondary:hover {
-    background: var(--mocha-taupe);
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(139, 69, 19, 0.2);
+    background: linear-gradient(135deg, var(--soft-cream), var(--bone-white));
+    border-color: #3E352E;
+  }
+
+  .btn-secondary:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 10px rgba(139, 69, 19, 0.1);
  }

  .hero {
-    @apply min-h-screen flex items-center justify-center pt-24;
+    @apply min-h-screen flex items-center justify-center pt-24 relative overflow-hidden;
    background: var(--bone-white);
  }

+  .hero::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background:
+      radial-gradient(
+        circle at 20% 80%,
+        rgba(139, 69, 19, 0.03) 0%,
+        transparent 50%
+      ),
+      radial-gradient(
+        circle at 80% 20%,
+        rgba(218, 165, 32, 0.02) 0%,
+        transparent 50%
+      );
+    animation: heroGlow 8s ease-in-out infinite alternate;
+  }
+
+  .hero::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image:
+      radial-gradient(
+        circle at 30% 40%,
+        rgba(139, 69, 19, 0.04) 1px,
+        transparent 1px
+      ),
+      radial-gradient(
+        circle at 70% 60%,
+        rgba(218, 165, 32, 0.03) 1px,
+        transparent 1px
+      ),
+      radial-gradient(
+        circle at 50% 80%,
+        rgba(139, 69, 19, 0.02) 1px,
+        transparent 1px
+      );
+    background-size:
+      100px 100px,
+      150px 150px,
+      200px 200px;
+    background-position:
+      0 0,
+      50px 50px,
+      100px 100px;
+    opacity: 0.3;
+    pointer-events: none;
+  }
+
+  @keyframes heroGlow {
+    0% {
+      opacity: 0.3;
+    }
+    100% {
+      opacity: 0.6;
+    }
+  }
+
  .hero-content {
-    @apply max-w-7xl mx-auto px-8 text-center;
+    @apply max-w-7xl mx-auto px-8 text-center relative z-10;
  }

  .logo-mark {
@@ -173,24 +305,39 @@
  }

  .hero h1 {
-    @apply text-7xl md:text-9xl mb-6 tracking-tight;
+    @apply text-7xl md:text-9xl mb-4 tracking-tight;
    color: var(--charcoal-brown);
+    animation: heroFadeIn 1s ease-out 0.5s both;
+    opacity: 0;
  }

  .hero h2 {
-    @apply text-2xl md:text-3xl mb-8;
+    @apply text-2xl md:text-3xl mb-6;
    color: var(--charcoal-brown);
-    opacity: 0.85;
+    opacity: 0;
+    animation: heroFadeIn 1s ease-out 1s both;
  }

  .hero p {
    @apply text-xl mb-12 max-w-2xl mx-auto leading-relaxed;
    color: var(--charcoal-brown);
-    opacity: 0.7;
+    opacity: 0;
+    animation: heroFadeIn 1s ease-out 1.5s both;
  }

  .hero-actions {
    @apply flex items-center justify-center gap-6 flex-wrap;
+    animation: heroFadeIn 1s ease-out 2s both;
+    opacity: 0;
+  }
+
+  @keyframes heroFadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
  }

  .hero-image {
@@ -362,7 +509,162 @@

  .select-item[data-state="checked"] {
    background: var(--soft-cream);
-    font-weight: 500;
+  }
+
+  /* ========================================
+   ELEGANT NAVIGATION STYLES
+   ======================================== */
+
+  .site-header {
+    @apply fixed top-0 left-0 right-0 z-50 backdrop-blur-md border-b border-amber-100/50 transition-all duration-300;
+    background: rgba(255, 255, 255, 0.98);
+    background-image:
+      radial-gradient(
+        circle at 25% 25%,
+        rgba(139, 69, 19, 0.02) 0%,
+        transparent 50%
+      ),
+      radial-gradient(
+        circle at 75% 75%,
+        rgba(218, 165, 32, 0.01) 0%,
+        transparent 50%
+      );
+  }
+
+  .site-header::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image:
+      linear-gradient(
+        45deg,
+        transparent 49%,
+        rgba(139, 69, 19, 0.03) 50%,
+        transparent 51%
+      ),
+      linear-gradient(
+        -45deg,
+        transparent 49%,
+        rgba(218, 165, 32, 0.02) 50%,
+        transparent 51%
+      );
+    background-size: 20px 20px;
+    opacity: 0.3;
+    pointer-events: none;
+  }
+
+  .site-header.scrolled {
+    @apply shadow-lg;
+    background: rgba(255, 255, 255, 0.95);
+  }
+
+  .nav-primary {
+    @apply max-w-7xl mx-auto px-8 py-6 flex items-center justify-between relative;
+  }
+
+  .logo a {
+    @apply text-2xl font-bold relative transition-all duration-300;
+    color: var(--charcoal-brown);
+    text-shadow: 0 1px 2px rgba(139, 69, 19, 0.1);
+  }
+
+  .logo a::before {
+    content: "";
+    position: absolute;
+    top: -8px;
+    right: -8px;
+    bottom: -8px;
+    left: -8px;
+    background: linear-gradient(
+      45deg,
+      rgba(139, 69, 19, 0.05),
+      rgba(218, 165, 32, 0.03)
+    );
+    border-radius: 8px;
+    z-index: -1;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+
+  .logo a:hover::before {
+    opacity: 1;
+  }
+
+  .nav-links {
+    @apply hidden md:flex items-center space-x-8;
+  }
+
+  .nav-links a {
+    @apply text-sm font-medium transition-all duration-300 relative;
+    color: var(--charcoal-brown);
+    position: relative;
+  }
+
+  .nav-links a::after {
+    content: "";
+    position: absolute;
+    bottom: -4px;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background: linear-gradient(
+      90deg,
+      #3E352E,
+      var(--golden-brown)
+    );
+    transition: width 0.3s ease;
+    border-radius: 1px;
+  }
+
+  .nav-links a:hover::after {
+    width: 100%;
+  }
+
+  .nav-links a:hover {
+    color: #3E352E;
+    transform: translateY(-1px);
+  }
+
+  .nav-actions {
+    @apply flex items-center gap-4;
+  }
+
+  .nav-actions .btn-primary,
+  .nav-actions .btn-secondary {
+    @apply transition-all duration-300;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .nav-actions .btn-primary::before,
+  .nav-actions .btn-secondary::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(255, 255, 255, 0.2),
+      transparent
+    );
+    transition: left 0.5s ease;
+  }
+
+  .nav-actions .btn-primary:hover::before,
+  .nav-actions .btn-secondary:hover::before {
+    left: 100%;
+  }
+
+  .nav-actions .btn-primary:hover,
+  .nav-actions .btn-secondary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(139, 69, 19, 0.15);
  }

  .select-trigger {
@@ -378,4 +680,20 @@
  .select-trigger[data-state="open"] {
    border-color: var(--deep-earth);
  }
+
+  .icon-btn {
+    @apply p-2 rounded-lg transition-all duration-300 border border-transparent;
+    color: var(--charcoal-brown);
+    background: transparent;
+  }
+
+  .icon-btn:hover {
+    background: var(--soft-cream);
+    border-color: var(--mocha-taupe);
+    transform: translateY(-1px);
+  }
+
+  .icon-btn:active {
+    transform: translateY(0);
+  }
 }
--- a/app/historia/page.tsx
+++ b/app/historia/page.tsx
@@ -1,89 +1,77 @@
+import { AnimatedLogo } from '@/components/animated-logo'
+import { RollingPhrases } from '@/components/rolling-phrases'
+
 /** @description Company history and philosophy page component explaining the brand's foundation and values. */
 export default function HistoriaPage() {
  return (
-    <div className="section">
-      <div className="section-header">
-        <h1 className="section-title">Nuestra Historia</h1>
-        <p className="section-subtitle">
-          El origen de una marca que redefine el estándar de belleza exclusiva.
-        </p>
+    <>
+      <section className="hero">
+        <div className="hero-content">
+          <AnimatedLogo />
+          <h1>Historia</h1>
+          <h2>Anchor:23</h2>
+          <RollingPhrases />
+          <div className="hero-actions">
+            <a href="#fundamento" className="btn-secondary">El Fundamento</a>
+            <a href="#filosofia" className="btn-primary">Nuestra Filosofía</a>
          </div>
+        </div>
+        <div className="hero-image">
+          <div className="w-full h-96 flex items-center justify-center bg-gradient-to-br from-amber-50 to-gray-50">
+            <span className="text-gray-500 text-lg">Imagen Historia Hero</span>
+          </div>
+        </div>
+      </section>

-      <div className="max-w-7xl mx-auto px-6">
-        <section className="foundation mb-24">
+      <section className="foundation" id="fundamento">
        <article>
-            <h2>El Fundamento</h2>
-            <h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6">Nada sólido nace del caos</h3>
-            <p className="text-lg text-gray-600 leading-relaxed mb-6">
+          <h3>Fundamento</h3>
+          <h4>Nada sólido nace del caos</h4>
+          <p>
            Anchor:23 nace de la unión de dos creativos que creen en el lujo
-              como estándar, no como promesa.
-            </p>
-            <p className="text-lg text-gray-600 leading-relaxed">
-              En un mundo saturado de opciones, decidimos crear algo diferente:
-              un refugio donde la precisión técnica se encuentra con la elegancia
-              atemporal, donde cada detalle importa y donde la exclusividad es
-              inherente, no promocional.
+            como estándar, no como promesa. En un mundo saturado de opciones,
+            decidimos crear algo diferente: un refugio donde la precisión técnica
+            se encuentra con la elegancia atemporal.
          </p>
        </article>
-
        <aside className="foundation-image">
-            <div className="w-full h-full bg-gradient-to-br from-gray-200 to-gray-300 flex items-center justify-center">
-              <span className="text-gray-500 text-lg">Imagen Historia</span>
+          <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-amber-50 to-gray-50">
+            <span className="text-gray-500 text-lg">Imagen Fundamento</span>
          </div>
        </aside>
      </section>

-        <section className="max-w-4xl mx-auto mb-24">
-          <h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">El Significado</h2>
-          
-          <div className="grid md:grid-cols-2 gap-8">
-            <div className="p-8 bg-white rounded-2xl shadow-lg border border-gray-100">
-              <h3 className="text-2xl font-bold text-gray-900 mb-4">ANCHOR</h3>
-              <p className="text-gray-600 leading-relaxed">
-                El ancla representa estabilidad, firmeza y permanencia.
-                Es el símbolo de nuestro compromiso con la calidad constante
-                y la excelencia sin concesiones.
-              </p>
-            </div>
-
-            <div className="p-8 bg-white rounded-2xl shadow-lg border border-gray-100">
-              <h3 className="text-2xl font-bold text-gray-900 mb-4">:23</h3>
-              <p className="text-gray-600 leading-relaxed">
-                El dos y tres simbolizan la dualidad equilibrada: precisión
-                técnica y creatividad artística, tradición e innovación,
-                rigor y calidez.
-              </p>
-            </div>
+      <section className="services-preview">
+        <h3>El Significado</h3>
+        <div className="service-cards">
+          <article className="service-card">
+            <h4>ANCHOR</h4>
+            <p>El ancla representa estabilidad, firmeza y permanencia. Es el símbolo de nuestro compromiso con la calidad constante y la excelencia sin concesiones.</p>
+          </article>
+          <article className="service-card">
+            <h4>:23</h4>
+            <p>El dos y tres simbolizan la dualidad equilibrada: precisión técnica y creatividad artística, tradición e innovación, rigor y calidez.</p>
+          </article>
        </div>
      </section>

-        <section className="max-w-4xl mx-auto">
-          <h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">Nuestra Filosofía</h2>
-          
-          <div className="space-y-6">
-            <div className="p-6 bg-gradient-to-r from-gray-50 to-white rounded-xl border border-gray-100">
-              <h3 className="text-xl font-semibold text-gray-900 mb-3">Lujo como Estándar</h3>
-              <p className="text-gray-600">
-                No es lo extrañamente costoso, es lo excepcionalmente bien hecho.
-              </p>
-            </div>
-
-            <div className="p-6 bg-gradient-to-r from-gray-50 to-white rounded-xl border border-gray-100">
-              <h3 className="text-xl font-semibold text-gray-900 mb-3">Exclusividad Inherente</h3>
-              <p className="text-gray-600">
-                Una sucursal por ciudad, invitación por membresía, calidad por convicción.
-              </p>
-            </div>
-
-            <div className="p-6 bg-gradient-to-r from-gray-50 to-white rounded-xl border border-gray-100">
-              <h3 className="text-xl font-semibold text-gray-900 mb-3">Precisión Absoluta</h3>
-              <p className="text-gray-600">
-                Cada corte, cada color, cada tratamiento ejecutado con la máxima perfección técnica.
-              </p>
-            </div>
+      <section className="testimonials" id="filosofia">
+        <h3>Nuestra Filosofía</h3>
+        <div className="service-cards">
+          <article className="service-card">
+            <h4>Lujo como Estándar</h4>
+            <p>No es lo extrañamente costoso, es lo excepcionalmente bien hecho.</p>
+          </article>
+          <article className="service-card">
+            <h4>Exclusividad Inherente</h4>
+            <p>Una sucursal por ciudad, invitación por membresía, calidad por convicción.</p>
+          </article>
+          <article className="service-card">
+            <h4>Precisión Absoluta</h4>
+            <p>Cada corte, cada color, cada tratamiento ejecutado con la máxima perfección técnica.</p>
+          </article>
        </div>
      </section>
-      </div>
-    </div>
+    </>
  )
 }
--- a/app/kiosk/[locationId]/page.tsx
+++ b/app/kiosk/[locationId]/page.tsx
@@ -210,7 +210,7 @@ export default function KioskPage({ params }: { params: { locationId: string } }
                  Confirmar Cita
                </h3>
                <ol className="list-decimal list-inside space-y-2 text-sm text-muted-foreground">
-                  <li>Selecciona "Confirmar Cita"</li>
+                  <li>Selecciona &quot;Confirmar Cita&quot;</li>
                  <li>Ingresa el código de 6 caracteres de tu reserva</li>
                  <li>Verifica los detalles de tu cita</li>
                  <li>Confirma tu llegada</li>
@@ -223,7 +223,7 @@ export default function KioskPage({ params }: { params: { locationId: string } }
                  Reserva Inmediata
                </h3>
                <ol className="list-decimal list-inside space-y-2 text-sm text-muted-foreground">
-                  <li>Selecciona "Reserva Inmediata"</li>
+                  <li>Selecciona &quot;Reserva Inmediata&quot;</li>
                  <li>Elige el servicio que deseas</li>
                  <li>Ingresa tus datos personales</li>
                  <li>Confirma la reserva</li>
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -3,6 +3,9 @@ import { Inter } from 'next/font/google'
 import './globals.css'
 import { AuthProvider } from '@/lib/auth/context'
 import { AuthGuard } from '@/components/auth-guard'
+import { AppWrapper } from '@/components/app-wrapper'
+import { ResponsiveNav } from '@/components/responsive-nav'
+import { FormbricksProvider } from '@/components/formbricks-provider'

 const inter = Inter({ 
  subsets: ['latin'],
@@ -28,36 +31,15 @@ export default function RootLayout({
        <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
      </head>
      <body className={`${inter.variable} font-sans`}>
+        <AppWrapper>
+          <FormbricksProvider />
          <AuthProvider>
            <AuthGuard>
-            {typeof window === 'undefined' && (
-              <header className="site-header">
-                <nav className="nav-primary">
-                  <div className="logo">
-                    <a href="/">ANCHOR:23</a>
-                  </div>
-
-                  <ul className="nav-links">
-                    <li><a href="/">Inicio</a></li>
-                    <li><a href="/historia">Nosotros</a></li>
-                    <li><a href="/servicios">Servicios</a></li>
-                  </ul>
-
-                  <div className="nav-actions flex items-center gap-4">
-                    <a href="/booking/servicios" className="btn-secondary">
-                      Book Now
-                    </a>
-                    <a href="/membresias" className="btn-primary">
-                      Memberships
-                    </a>
-                  </div>
-                </nav>
-              </header>
-            )}
-
+              <ResponsiveNav />
              <main>{children}</main>
            </AuthGuard>
          </AuthProvider>
+        </AppWrapper>

        <footer className="site-footer">
          <div className="footer-brand">
@@ -68,6 +50,8 @@ export default function RootLayout({
          <div className="footer-links">
            <a href="/historia">Nosotros</a>
            <a href="/servicios">Servicios</a>
+            <a href="/membresias">Membresías</a>
+            <a href="/contacto">Contacto</a>
            <a href="/franchises">Franquicias</a>
          </div>

--- a/app/membresias/page.tsx
+++ b/app/membresias/page.tsx
@@ -1,75 +1,113 @@
 'use client'

 import { useState } from 'react'
+import { AnimatedLogo } from '@/components/animated-logo'
+import { RollingPhrases } from '@/components/rolling-phrases'
 import { Crown, Star, Award, Diamond } from 'lucide-react'
+import { getDeviceType, sendWebhookPayload } from '@/lib/webhook'

 /** @description Membership tiers page component displaying exclusive membership options and application forms. */
 export default function MembresiasPage() {
-  const [selectedTier, setSelectedTier] = useState<string | null>(null)
  const [formData, setFormData] = useState({
+    membership_id: '',
    nombre: '',
    email: '',
    telefono: '',
    mensaje: ''
  })
+  const [isSubmitting, setIsSubmitting] = useState(false)
  const [submitted, setSubmitted] = useState(false)
+  const [showThankYou, setShowThankYou] = useState(false)
+  const [submitError, setSubmitError] = useState<string | null>(null)

  const tiers = [
    {
      id: 'gold',
-      name: 'Gold Tier',
+      name: 'GOLD TIER',
      icon: Star,
-      description: 'Acceso prioritario y experiencias exclusivas.',
+      description: 'Acceso curado y acompañamiento continuo.',
      price: '$2,500 MXN',
      period: '/mes',
      benefits: [
-        'Reserva prioritaria',
-        '15% descuento en servicios',
-        'Acceso anticipado a eventos',
-        'Consultas de belleza mensuales',
-        'Producto de cortesía mensual'
+        'Prioridad de agenda en experiencias Anchor',
+        'Beauty Concierge para asesoría y coordinación de rituales',
+        'Acceso a horarios preferentes',
+        'Consulta de belleza mensual',
+        'Producto curado de cortesía mensual',
+        'Invitación anticipada a experiencias privadas'
      ]
    },
    {
      id: 'black',
-      name: 'Black Tier',
+      name: 'BLACK TIER',
      icon: Award,
-      description: 'Privilegios premium y atención personalizada.',
+      description: 'Privilegios premium y atención extendida.',
      price: '$5,000 MXN',
      period: '/mes',
      benefits: [
-        'Reserva prioritaria + sin espera',
-        '25% descuento en servicios',
-        'Acceso VIP a eventos exclusivos',
-        '2 tratamientos spa complementarios/mes',
-        'Set de productos premium trimestral'
+        'Prioridad absoluta de agenda (sin listas de espera)',
+        'Beauty Concierge dedicado con seguimiento integral',
+        'Acceso a espacios privados y bloques extendidos',
+        'Dos rituales complementarios curados al mes',
+        'Set de productos premium trimestral',
+        'Acceso VIP a eventos cerrados'
      ]
    },
    {
      id: 'vip',
-      name: 'VIP Tier',
+      name: 'VIP TIER',
      icon: Crown,
-      description: 'La máxima expresión de exclusividad.',
+      description: 'Acceso total y curaduría absoluta.',
      price: '$10,000 MXN',
      period: '/mes',
      featured: true,
      benefits: [
-        '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'
+        'Acceso inmediato y sin restricciones de agenda',
+        'Beauty Concierge exclusivo + estilista asignado',
+        'Experiencias personalizadas ilimitadas (agenda privada)',
+        'Acceso a instalaciones fuera de horario',
+        'Evento privado anual para la member + 5 invitadas',
+        'Curaduría integral de rituales, productos y experiencias'
      ]
    }
  ]

-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
-    setSubmitted(true)
+    setIsSubmitting(true)
+    setSubmitError(null)
+
+    const payload = {
+      form: 'memberships',
+      membership_id: formData.membership_id,
+      nombre: formData.nombre,
+      email: formData.email,
+      telefono: formData.telefono,
+      mensaje: formData.mensaje,
+      timestamp_utc: new Date().toISOString(),
+      device_type: getDeviceType()
    }

-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    try {
+      await sendWebhookPayload(payload)
+      setSubmitted(true)
+      setShowThankYou(true)
+      window.setTimeout(() => setShowThankYou(false), 3500)
+      setFormData({
+        membership_id: '',
+        nombre: '',
+        email: '',
+        telefono: '',
+        mensaje: ''
+      })
+    } catch (error) {
+      setSubmitError('No pudimos enviar tu solicitud. Intenta de nuevo.')
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
@@ -77,46 +115,68 @@ export default function MembresiasPage() {
  }

  const handleApply = (tierId: string) => {
-    setSelectedTier(tierId)
+    setFormData((prev) => ({
+      ...prev,
+      membership_id: tierId
+    }))
    document.getElementById('application-form')?.scrollIntoView({ behavior: 'smooth' })
  }

  return (
-    <div className="section">
-      <div className="section-header">
-        <h1 className="section-title">Membresías Exclusivas</h1>
-        <p className="section-subtitle">
-          Acceso prioritario, privilegios únicos y experiencias personalizadas.
-        </p>
+    <>
+      <section className="hero">
+        <div className="hero-content">
+          <AnimatedLogo />
+          <h1>Membresías</h1>
+          <h2>Anchor:23</h2>
+          <RollingPhrases />
+          <div className="hero-actions">
+            <a href="#tiers" className="btn-secondary">Ver Membresías</a>
+            <a href="#solicitud" className="bg-[#3E352E] text-white hover:bg-[#3E352E]/90 px-8 py-3 rounded-lg font-semibold shadow-md hover:shadow-lg transition-all duration-300 inline-flex items-center justify-center">Solicitar Membresía</a>
          </div>
-
-      <div className="max-w-7xl mx-auto px-6 mb-24">
-        <div className="text-center mb-16">
-          <Diamond className="w-16 h-16 mx-auto mb-6 text-gray-900" />
-          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
-            Experiencias a Medida
-          </h2>
-          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
-            Nuestras membresías están diseñadas para clientes que valoran la exclusividad,
-            la atención personalizada y el acceso prioritario.
-          </p>
        </div>
+        <div className="hero-image">
+          <div className="w-full h-96 flex items-center justify-center bg-gradient-to-br from-amber-50 to-gray-50">
+            <span className="text-gray-500 text-lg">Imagen Membresías Hero</span>
+          </div>
+        </div>
+      </section>

-        <div className="grid md:grid-cols-3 gap-8 mb-16">
+      <section className="foundation" id="tiers">
+        <article>
+          <h3>Nota operativa</h3>
+          <h4>Las membresías no sustituyen el valor de las experiencias.</h4>
+          <p>
+            No existen descuentos ni negociaciones de estándar. Los beneficios se centran en tiempo, acceso, privacidad y criterio.
+          </p>
+          <p>
+            ANCHOR 23. Un espacio privado donde el tiempo se desacelera. No trabajamos con volumen. Trabajamos con intención.
+          </p>
+        </article>
+        <aside className="foundation-image">
+          <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-amber-50 to-gray-50">
+            <span className="text-gray-500 text-lg">Imagen Membresías</span>
+          </div>
+        </aside>
+      </section>
+
+      <section className="services-preview">
+        <h3>ANCHOR 23 · MEMBRESÍAS</h3>
+        <div className="grid md:grid-cols-3 gap-8">
          {tiers.map((tier) => {
            const Icon = tier.icon
            return (
-              <div
+              <article
                key={tier.id}
                className={`relative p-8 rounded-2xl shadow-lg border-2 transition-all ${
                  tier.featured
-                    ? 'bg-gray-900 border-gray-900 text-white transform scale-105'
-                    : 'bg-white border-gray-100 hover:border-gray-900'
+                    ? 'bg-[#3E352E] border-[#3E352E] text-white transform scale-105'
+                    : 'bg-white border-gray-100 hover:border-[#3E352E] hover:shadow-xl'
                }`}
              >
                {tier.featured && (
                  <div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
-                    <span className="bg-gray-900 text-white px-4 py-1 rounded-full text-sm font-semibold">
+                    <span className="bg-[#3E352E] text-white px-4 py-1 rounded-full text-sm font-semibold">
                      Más Popular
                    </span>
                  </div>
@@ -126,13 +186,16 @@ export default function MembresiasPage() {
                  <Icon className="w-12 h-12" />
                </div>

-                <h3 className={`text-2xl font-bold mb-2 ${tier.featured ? 'text-white' : 'text-gray-900'}`}>
+                <h4 className={`text-2xl font-bold mb-2 ${tier.featured ? 'text-white' : 'text-gray-900'}`}>
                  {tier.name}
-                </h3>
+                </h4>

                <p className={`mb-6 ${tier.featured ? 'text-gray-300' : 'text-gray-600'}`}>
                  {tier.description}
                </p>
+                <p className={`mb-6 text-sm ${tier.featured ? 'text-gray-300' : 'text-gray-600'}`}>
+                  Las membresías no ofrecen descuentos. Otorgan acceso prioritario, servicios plus y Beauty Concierge dedicado.
+                </p>

                <div className="mb-8">
                  <div className={`text-4xl font-bold mb-1 ${tier.featured ? 'text-white' : 'text-gray-900'}`}>
@@ -161,42 +224,61 @@ export default function MembresiasPage() {
                  className={`w-full py-3 rounded-lg font-semibold transition-all ${
                    tier.featured
                      ? 'bg-white text-gray-900 hover:bg-gray-100'
-                      : 'bg-gray-900 text-white hover:bg-gray-800'
+                      : 'bg-[#3E352E] text-white hover:bg-[#3E352E]/90'
                  }`}
                >
                  Solicitar {tier.name}
                </button>
-              </div>
+              </article>
            )
          })}
        </div>
+      </section>

-        <div id="application-form" className="max-w-2xl mx-auto">
-          <h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
-            Solicitud de Membresía
-          </h2>
-
+      <section className="testimonials" id="solicitud">
+        <h3>Solicitud de Membresía</h3>
+        <div className="max-w-2xl mx-auto">
          {submitted ? (
-            <div className="p-8 bg-green-50 border border-green-200 rounded-xl">
-              <Award className="w-12 h-12 text-green-900 mb-4" />
-              <h3 className="text-xl font-semibold text-green-900 mb-2">
+            <div className="p-8 bg-green-50 border border-green-200 rounded-xl text-center">
+              <Diamond className="w-12 h-12 text-green-900 mb-4 mx-auto" />
+              <h4 className="text-xl font-semibold text-green-900 mb-2">
                Solicitud Recibida
-              </h3>
+              </h4>
              <p className="text-green-800">
                Gracias por tu interés. Nuestro equipo revisará tu solicitud y te
                contactará pronto para completar el proceso.
              </p>
            </div>
          ) : (
-            <form onSubmit={handleSubmit} className="space-y-6 p-8 bg-white rounded-2xl shadow-lg border border-gray-100">
-              {selectedTier && (
-                <div className="p-4 bg-gray-50 rounded-lg border border-gray-200 mb-6">
+            <form id="application-form" onSubmit={handleSubmit} className="space-y-6 p-8 bg-white rounded-2xl shadow-lg border border-gray-100">
+              {formData.membership_id && (
+                <div className="p-4 bg-gray-50 rounded-lg border border-gray-200 mb-6 text-center">
                  <span className="font-semibold text-gray-900">
-                    Membresía Seleccionada: {tiers.find(t => t.id === selectedTier)?.name}
+                    Membresía Seleccionada: {tiers.find(t => t.id === formData.membership_id)?.name}
                  </span>
                </div>
              )}

+              <div className="grid md:grid-cols-2 gap-6">
+                <div>
+                  <label htmlFor="membership_id" className="block text-sm font-medium text-gray-700 mb-2">
+                    Membresía
+                  </label>
+                  <select
+                    id="membership_id"
+                    name="membership_id"
+                    value={formData.membership_id}
+                    onChange={handleChange}
+                    required
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg bg-white focus:ring-2 focus:ring-gray-900 focus:border-transparent"
+                  >
+                    <option value="" disabled>Selecciona una membresía</option>
+                    {tiers.map((tier) => (
+                      <option key={tier.id} value={tier.id}>{tier.name}</option>
+                    ))}
+                  </select>
+                </div>
+
                <div>
                  <label htmlFor="nombre" className="block text-sm font-medium text-gray-700 mb-2">
                    Nombre Completo
@@ -247,7 +329,7 @@ export default function MembresiasPage() {

                <div>
                  <label htmlFor="mensaje" className="block text-sm font-medium text-gray-700 mb-2">
-                  Mensaje Adicional (Opcional)
+                    Mensaje (Opcional)
                  </label>
                  <textarea
                    id="mensaje"
@@ -259,33 +341,25 @@ export default function MembresiasPage() {
                    placeholder="¿Tienes alguna pregunta específica?"
                  />
                </div>
+              </div>

-              <button type="submit" className="btn-primary w-full">
-                Enviar Solicitud
+              {submitError && (
+                <p className="text-sm text-red-600 text-center">
+                  {submitError}
+                </p>
+              )}
+
+              <button
+                type="submit"
+                className="bg-[#3E352E] text-white hover:bg-[#3E352E]/90 px-8 py-3 rounded-lg font-semibold shadow-md hover:shadow-lg transition-all duration-300 inline-flex items-center justify-center w-full"
+                disabled={isSubmitting}
+              >
+                {isSubmitting ? 'Enviando...' : 'Enviar Solicitud'}
              </button>
            </form>
          )}
        </div>
-      </div>
-
-      <div className="bg-gradient-to-br from-gray-900 to-gray-800 rounded-3xl p-12 max-w-4xl mx-auto">
-        <h3 className="text-2xl font-bold text-white mb-6 text-center">
-          ¿Tienes Preguntas?
-        </h3>
-        <p className="text-gray-300 text-center mb-8 max-w-2xl mx-auto">
-          Nuestro equipo de atención a miembros está disponible para resolver tus dudas
-          y ayudarte a encontrar la membresía perfecta para ti.
-        </p>
-        <div className="flex flex-col md:flex-row items-center justify-center gap-6">
-          <a href="mailto:membresias@anchor23.mx" className="text-white hover:text-gray-200">
-            membresias@anchor23.mx
-          </a>
-          <span className="text-gray-600">|</span>
-          <a href="tel:+528441234567" className="text-white hover:text-gray-200">
-            +52 844 123 4567
-          </a>
-        </div>
-      </div>
-    </div>
+      </section>
+    </>
  )
 }
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,23 +1,20 @@
+import { AnimatedLogo } from '@/components/animated-logo'
+import { RollingPhrases } from '@/components/rolling-phrases'
+
 /** @description Home page component for the salon website, featuring hero section, services preview, and testimonials. */
 export default function HomePage() {
  return (
    <>
      <section className="hero">
        <div className="hero-content">
-          <div className="logo-mark">
-            <svg viewBox="0 0 100 100" className="w-24 h-24 mx-auto">
-              <circle cx="50" cy="50" r="40" fill="none" stroke="currentColor" strokeWidth="3" />
-              <path d="M 50 20 L 50 80 M 20 50 L 80 50" stroke="currentColor" strokeWidth="3" />
-              <circle cx="50" cy="50" r="10" fill="currentColor" />
-            </svg>
-          </div>
+          <AnimatedLogo />
          <h1>ANCHOR:23</h1>
-          <h2>Belleza anclada en exclusividad</h2>
-          <p>Un estándar exclusivo de lujo y precisión.</p>
+          <h2>Beauty Club</h2>
+          <RollingPhrases />

-          <div className="hero-actions">
+          <div className="hero-actions" style={{ animationDelay: '2.5s' }}>
            <a href="/servicios" className="btn-secondary">Ver servicios</a>
-            <a href="https://booking.anchor23.mx" className="btn-primary">Solicitar cita</a>
+              <a href="/booking/servicios" className="bg-[#3E352E] text-white hover:bg-[#3E352E]/90 px-8 py-3 rounded-lg font-semibold shadow-md hover:shadow-lg transition-all duration-300 inline-flex items-center justify-center">Solicitar cita</a>
          </div>
        </div>

--- a/app/servicios/page.tsx
+++ b/app/servicios/page.tsx
@@ -1,66 +1,244 @@
-/** @description Static services page component displaying available salon services and categories. */
-export default function ServiciosPage() {
-  const services = [
-    {
-      category: 'Spa de Alta Gama',
-      description: 'Sauna y spa excepcionales, diseñados para el rejuvenecimiento y el equilibrio.',
-      items: ['Tratamientos Faciales', 'Masajes Terapéuticos', 'Hidroterapia']
-    },
-    {
-      category: 'Arte y Manicure de Precisión',
-      description: 'Estilización y técnica donde el detalle define el resultado.',
-      items: ['Manicure de Precisión', 'Pedicure Spa', 'Arte en Uñas']
-    },
-    {
-      category: 'Peinado y Maquillaje de Lujo',
-      description: 'Transformaciones discretas y sofisticadas para ocasiones selectas.',
-      items: ['Corte y Estilismo', 'Color Premium', 'Maquillaje Profesional']
-    },
-    {
-      category: 'Cuidado Corporal',
-      description: 'Ritual de bienestar integral.',
-      items: ['Exfoliación Profunda', 'Envolturas Corporales', 'Tratamientos Reductores']
-    },
-    {
-      category: 'Membresías Exclusivas',
-      description: 'Acceso prioritario y experiencias personalizadas.',
-      items: ['Gold Tier', 'Black Tier', 'VIP Tier']
-    }
-  ]
+import { AnimatedLogo } from '@/components/animated-logo'
+import { RollingPhrases } from '@/components/rolling-phrases'

+/** @description Services page with home page style structure */
+'use client'
+
+import { AnimatedLogo } from '@/components/animated-logo'
+import { RollingPhrases } from '@/components/rolling-phrases'
+
+/** @description Services page with home page style structure */
+import { useState, useEffect } from 'react'
+
+interface Service {
+  id: string
+  name: string
+  description: string
+  duration_minutes: number
+  base_price: number
+  category: string
+  requires_dual_artist: boolean
+  is_active: boolean
+}
+
+export default function ServiciosPage() {
+  const [services, setServices] = useState<Service[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    fetchServices()
+  }, [])
+
+  const fetchServices = async () => {
+    try {
+      const response = await fetch('/api/services')
+      const data = await response.json()
+      if (data.success) {
+        setServices(data.services.filter((s: Service) => s.is_active))
+      }
+    } catch (error) {
+      console.error('Error fetching services:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const formatCurrency = (amount: number) => {
+    return new Intl.NumberFormat('es-MX', {
+      style: 'currency',
+      currency: 'MXN'
+    }).format(amount)
+  }
+
+  const formatDuration = (minutes: number) => {
+    const hours = Math.floor(minutes / 60)
+    const mins = minutes % 60
+    if (hours > 0) {
+      return mins > 0 ? `${hours}h ${mins}min` : `${hours}h`
+    }
+    return `${mins} min`
+  }
+
+  const getCategoryTitle = (category: string) => {
+    const titles: Record<string, string> = {
+      core: 'CORE EXPERIENCES - El corazón de Anchor 23',
+      nails: 'NAIL COUTURE - Técnica invisible. Resultado impecable.',
+      hair: 'HAIR FINISHING RITUALS',
+      lashes: 'LASH & BROW RITUALS - Mirada definida con sutileza.',
+      brows: 'LASH & BROW RITUALS - Mirada definida con sutileza.',
+      events: 'EVENT EXPERIENCES - Agenda especial',
+      permanent: 'PERMANENT RITUALS - Agenda limitada · Especialista certificada'
+    }
+    return titles[category] || category
+  }
+
+  const getCategoryDescription = (category: string) => {
+    const descriptions: Record<string, string> = {
+      core: 'Rituales conscientes donde el tiempo se desacelera. Cada experiencia está diseñada para mujeres que valoran el silencio, la atención absoluta y los resultados impecables.',
+      nails: 'En Anchor 23 no eliges técnicas. Cada decisión se toma internamente para lograr un resultado elegante, duradero y natural. No ofrecemos servicios de mantenimiento ni correcciones.',
+      hair: 'Disponibles únicamente para clientas con experiencia Anchor el mismo día.',
+      lashes: '',
+      brows: '',
+      events: 'Agenda especial para ocasiones selectas.',
+      permanent: ''
+    }
+    return descriptions[category] || ''
+  }
+
+  const groupedServices = services.reduce((acc, service) => {
+    if (!acc[service.category]) {
+      acc[service.category] = []
+    }
+    acc[service.category].push(service)
+    return acc
+  }, {} as Record<string, Service[]>)
+
+  const categoryOrder = ['core', 'nails', 'hair', 'lashes', 'brows', 'events', 'permanent']
+
+  if (loading) {
    return (
      <div className="section">
        <div className="section-header">
          <h1 className="section-title">Nuestros Servicios</h1>
-        <p className="section-subtitle">
-          Experiencias diseñadas con precisión y elegancia para clientes que valoran la exclusividad.
-        </p>
-      </div>
-
-      <div className="max-w-7xl mx-auto px-6">
-        <div className="grid md:grid-cols-2 gap-8">
-          {services.map((service, index) => (
-            <article key={index} className="p-8 bg-white rounded-2xl shadow-lg hover:shadow-xl transition-shadow border border-gray-100">
-              <h2 className="text-2xl font-semibold text-gray-900 mb-3">{service.category}</h2>
-              <p className="text-gray-600 mb-4">{service.description}</p>
-              <ul className="space-y-2">
-                {service.items.map((item, idx) => (
-                  <li key={idx} className="flex items-center text-gray-700">
-                    <span className="w-1.5 h-1.5 bg-gray-900 rounded-full mr-2" />
-                    {item}
-                  </li>
-                ))}
-              </ul>
-            </article>
-          ))}
-        </div>
-
-        <div className="mt-12 text-center">
-          <a href="https://booking.anchor23.mx" className="btn-primary">
-            Reservar Cita
-          </a>
-        </div>
+          <p className="section-subtitle">Cargando servicios...</p>
        </div>
      </div>
    )
  }
+
+  return (
+    <>
+      <section className="hero">
+        <div className="hero-content">
+          <AnimatedLogo />
+          <h1>Servicios</h1>
+          <h2>Anchor:23</h2>
+          <RollingPhrases />
+          <div className="hero-actions">
+            <a href="/booking/servicios" className="btn-primary">
+              Reservar Cita
+            </a>
+          </div>
+        </div>
+        <div className="hero-image">
+          <div className="w-full h-96 flex items-center justify-center bg-gradient-to-br from-amber-50 to-gray-50">
+            <span className="text-gray-500 text-lg">Imagen Servicios</span>
+          </div>
+        </div>
+      </section>
+
+      <section className="foundation">
+        <article>
+          <h3>Experiencias</h3>
+          <h4>Criterio antes que cantidad</h4>
+          <p>
+            Anchor 23 es un espacio privado donde el tiempo se desacelera. Aquí, cada experiencia está diseñada para mujeres que valoran el silencio, la atención absoluta y los resultados impecables.
+          </p>
+          <p>
+            No trabajamos con volumen. Trabajamos con intención.
+          </p>
+        </article>
+        <aside className="foundation-image">
+          <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-amber-50 to-gray-50">
+            <span className="text-gray-500 text-lg">Imagen Experiencias</span>
+          </div>
+        </aside>
+      </section>
+
+      <section className="services-preview">
+        <h3>Nuestros Servicios</h3>
+        <div className="max-w-7xl mx-auto px-6">
+          {categoryOrder.map(category => {
+            const categoryServices = groupedServices[category]
+            if (!categoryServices || categoryServices.length === 0) return null
+
+            return (
+              <div key={category} className="service-cards mb-24">
+                <div className="mb-8">
+                  <h4 className="text-3xl font-bold text-gray-900 mb-4">
+                    {getCategoryTitle(category)}
+                  </h4>
+                  {getCategoryDescription(category) && (
+                    <p className="text-gray-600 text-lg leading-relaxed">
+                      {getCategoryDescription(category)}
+                    </p>
+                  )}
+                </div>
+
+                <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+                  {categoryServices.map((service) => (
+                    <article
+                      key={service.id}
+                      className="service-card"
+                    >
+                      <div className="mb-4">
+                        <h5 className="text-xl font-semibold text-gray-900 mb-2">
+                          {service.name}
+                        </h5>
+                        {service.description && (
+                          <p className="text-gray-600 text-sm leading-relaxed">
+                            {service.description}
+                          </p>
+                        )}
+                      </div>
+
+                      <div className="flex items-center justify-between mb-4">
+                        <span className="text-gray-500 text-sm">
+                          ⏳ {formatDuration(service.duration_minutes)}
+                        </span>
+                        {service.requires_dual_artist && (
+                          <span className="text-xs bg-gray-100 px-2 py-1 rounded-full">Dual Artist</span>
+                        )}
+                      </div>
+
+                      <div className="flex items-center justify-between">
+                        <span className="text-2xl font-bold text-gray-900">
+                          {formatCurrency(service.base_price)}
+                        </span>
+                        <a href="/booking/servicios" className="btn-primary">
+                          Reservar
+                        </a>
+                      </div>
+                    </article>
+                  ))}
+                </div>
+              </div>
+            )
+          })}
+
+          <section className="testimonials">
+            <h3>Lo que Define Anchor 23</h3>
+            <div className="max-w-4xl mx-auto text-center">
+              <div className="grid md:grid-cols-2 gap-6 text-left">
+                <div className="space-y-3">
+                  <div className="flex items-start gap-3">
+                    <span className="text-red-500 text-xl">•</span>
+                    <span className="text-gray-700">No ofrecemos retoques ni servicios aislados</span>
+                  </div>
+                  <div className="flex items-start gap-3">
+                    <span className="text-red-500 text-xl">•</span>
+                    <span className="text-gray-700">No trabajamos con prisas</span>
+                  </div>
+                  <div className="flex items-start gap-3">
+                    <span className="text-red-500 text-xl">•</span>
+                    <span className="text-gray-700">No explicamos de más</span>
+                  </div>
+                </div>
+                <div className="space-y-3">
+                  <div className="flex items-start gap-3">
+                    <span className="text-red-500 text-xl">•</span>
+                    <span className="text-gray-700">No negociamos estándares</span>
+                  </div>
+                  <div className="flex items-start gap-3">
+                    <span className="text-red-500 text-xl">•</span>
+                    <span className="text-gray-700">Cada experiencia está pensada para durar, sentirse y recordarse</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+        </div>
+      </section>
+    </>
+  )
+}
--- a/check-deployment.sh
+++ b/check-deployment.sh
@@ -0,0 +1,63 @@
+#!/bin/bash
+
+# Pre-deployment checks para AnchorOS
+
+echo "🔍 Verificando pre-requisitos de deployment..."
+
+# Verificar Docker
+if ! command -v docker &> /dev/null; then
+    echo "❌ Docker no está instalado"
+    exit 1
+fi
+
+# Verificar Docker Compose
+if ! command -v docker-compose &> /dev/null; then
+    echo "❌ Docker Compose no está instalado"
+    exit 1
+fi
+
+# Verificar archivos necesarios
+required_files=(".env" "package.json" "docker-compose.prod.yml" "Dockerfile")
+for file in "${required_files[@]}"; do
+    if [ ! -f "$file" ]; then
+        echo "❌ Archivo faltante: $file"
+        exit 1
+    fi
+done
+
+# Verificar variables de entorno críticas
+required_vars=("NEXT_PUBLIC_SUPABASE_URL" "NEXT_PUBLIC_SUPABASE_ANON_KEY" "SUPABASE_SERVICE_ROLE_KEY" "RESEND_API_KEY")
+for var in "${required_vars[@]}"; do
+    if ! grep -q "^$var=" .env; then
+        echo "❌ Variable faltante en .env: $var"
+        exit 1
+    fi
+done
+
+# Verificar conectividad de red
+echo "🌐 Verificando conectividad..."
+if ! curl -s --max-time 5 https://supabase.co > /dev/null; then
+    echo "⚠️  Posible problema de conectividad a internet"
+fi
+
+# Verificar puertos libres
+if lsof -Pi :3000 -sTCP:LISTEN -t >/dev/null; then
+    echo "⚠️  Puerto 3000 ya está en uso"
+fi
+
+if lsof -Pi :80 -sTCP:LISTEN -t >/dev/null; then
+    echo "⚠️  Puerto 80 ya está en uso"
+fi
+
+if lsof -Pi :443 -sTCP:LISTEN -t >/dev/null; then
+    echo "⚠️  Puerto 443 ya está en uso"
+fi
+
+# Verificar espacio en disco
+available_space=$(df / | tail -1 | awk '{print $4}')
+if [ "$available_space" -lt 1000000 ]; then  # 1GB en KB
+    echo "⚠️  Espacio en disco bajo: $(df -h / | tail -1 | awk '{print $4}') disponible"
+fi
+
+echo "✅ Pre-requisitos verificados correctamente"
+echo "🚀 Listo para deployment"
--- a/components/animated-logo.tsx
+++ b/components/animated-logo.tsx
--- a/components/app-wrapper.tsx
+++ b/components/app-wrapper.tsx
@@ -0,0 +1,51 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { usePathname } from 'next/navigation'
+import { LoadingScreen } from '@/components/loading-screen'
+import { useScrollEffect } from '@/hooks/use-scroll-effect'
+
+interface AppWrapperProps {
+  children: React.ReactNode
+}
+
+/** @description Client component wrapper that handles loading screen and scroll effects */
+export function AppWrapper({ children }: AppWrapperProps) {
+  const [isLoading, setIsLoading] = useState(false)
+  const [hasLoadedOnce, setHasLoadedOnce] = useState(false)
+  const pathname = usePathname()
+  const isScrolled = useScrollEffect()
+
+  useEffect(() => {
+    // Only show loading screen on first visit to home page
+    if (pathname === '/' && !hasLoadedOnce) {
+      setIsLoading(true)
+      setHasLoadedOnce(true)
+    }
+  }, [pathname, hasLoadedOnce])
+
+  const handleLoadingComplete = () => {
+    setIsLoading(false)
+  }
+
+  useEffect(() => {
+    // Apply scroll class to header
+    const header = document.querySelector('.site-header')
+    if (header) {
+      if (isScrolled) {
+        header.classList.add('scrolled')
+      } else {
+        header.classList.remove('scrolled')
+      }
+    }
+  }, [isScrolled])
+
+  return (
+    <>
+      {isLoading && <LoadingScreen onComplete={handleLoadingComplete} />}
+      <div style={{ opacity: isLoading ? 0 : 1, transition: 'opacity 0.5s ease' }}>
+        {children}
+      </div>
+    </>
+  )
+}
--- a/components/formbricks-provider.tsx
+++ b/components/formbricks-provider.tsx
@@ -0,0 +1,28 @@
+'use client'
+
+import { useEffect } from 'react'
+import { usePathname, useSearchParams } from 'next/navigation'
+import formbricks from '@formbricks/js'
+
+const FORMBRICKS_ENVIRONMENT_ID = process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID || ''
+const FORMBRICKS_API_HOST = process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST || 'https://app.formbricks.com'
+
+export function FormbricksProvider() {
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  useEffect(() => {
+    if (typeof window !== 'undefined' && FORMBRICKS_ENVIRONMENT_ID) {
+      formbricks.init({
+        environmentId: FORMBRICKS_ENVIRONMENT_ID,
+        apiHost: FORMBRICKS_API_HOST
+      })
+    }
+  }, [])
+
+  useEffect(() => {
+    formbricks?.registerRouteChange()
+  }, [pathname, searchParams])
+
+  return null
+}
--- a/components/loading-screen.tsx
+++ b/components/loading-screen.tsx
@@ -0,0 +1,196 @@
+'use client'
+
+import React, { useState, useEffect } from 'react'
+import { AnimatedLogo } from './animated-logo'
+
+/** @description Elegant loading screen with Anchor 23 branding */
+export function LoadingScreen({ onComplete }: { onComplete: () => void }) {
+  const [progress, setProgress] = useState(0)
+  const [showLogo, setShowLogo] = useState(false)
+  const [isFadingOut, setIsFadingOut] = useState(false)
+
+  useEffect(() => {
+    // Simulate loading progress
+    const progressInterval = setInterval(() => {
+      setProgress(prev => {
+        if (prev >= 100) {
+          clearInterval(progressInterval)
+          // Start fade out from top
+          setIsFadingOut(true)
+          // Complete after fade out animation
+          setTimeout(() => onComplete(), 800)
+          return 100
+        }
+        return prev + Math.random() * 12 + 8 // Faster progress
+      })
+    }, 120) // Faster interval
+
+    // Show logo immediately (fast fade in)
+    setShowLogo(true)
+
+    return () => {
+      clearInterval(progressInterval)
+    }
+  }, [onComplete])
+
+  return (
+    <div className={`loading-screen ${isFadingOut ? 'fade-out' : ''}`}>
+      <div className="loading-content">
+        {showLogo && (
+          <div className="logo-wrapper">
+            <svg
+              viewBox="0 0 160 110"
+              className="loading-logo"
+            >
+              <g className="loading-anchor-group">
+                <path
+                  d="m 243.91061,490.07237 c -14.90708,-20.76527 -40.32932,-38.4875 -72.46962,-50.51961 -6.28037,-2.35113 -18.82672,-6.82739 -27.88083,-9.94725 -26.58857,-9.1619 -41.30507,-16.6129 -58.331488,-29.53333 C 61.948377,382.40597 45.952738,359.43239 36.175195,329.61973 31.523123,315.43512 27.748747,295.05759 28.346836,287.35515 l 0.358542,-4.61742 8.564133,5.67181 c 17.36555,11.50076 46.202142,24.17699 72.956399,32.07091 6.95761,2.05286 12.50649,4.24632 12.33087,4.87435 -0.17562,0.62804 -2.82456,2.39475 -5.88665,3.92604 -10.99498,5.49858 -27.443714,4.43247 -46.080425,-2.98665 -3.96919,-1.58011 -7.405462,-2.6842 -7.636123,-2.45354 -0.733091,0.7331 8.423453,18.11108 13.820007,26.22861 6.692697,10.0673 20.30956,24.52092 29.977331,31.81955 13.28709,10.03091 31.4128,18.34633 64.69007,29.67743 32.46139,11.05328 49.71037,18.63784 59.69045,26.24654 l 6.02195,4.59101 -0.31253,-19.52332 -0.31242,-19.52333 -7.99319,-2.55382 c -8.69798,-2.77901 -17.71738,-7.05988 -17.66851,-8.38597 0.0171,-0.45828 3.48344,-2.37476 7.70338,-4.25887 9.02318,-4.02858 14.84235,-8.8019 16.98658,-13.93357 1.02073,-2.44313 1.54554,-8.63027 1.55114,-18.288 l 0.0114,-14.59572 5.22252,-6.56584 c 2.87241,-3.6112 5.60849,-6.56584 6.08008,-6.56584 0.47171,0 2.99928,2.89079 5.61694,6.42397 l 4.75983,6.42395 v 13.4163 c 0,7.37896 0.34337,15.13294 0.76301,17.23107 1.21074,6.0538 9.83699,13.83192 18.97482,17.10906 4.21709,1.51242 7.66741,3.13118 7.66741,3.59724 0,1.40969 -10.95798,6.50426 -17.85291,8.30017 -3.55972,0.92721 -6.66393,1.87743 -6.89813,2.1116 -0.2342,0.23416 -0.28479,9.22125 -0.11305,19.97131 l 0.31311,19.54557 7.42225,-5.20492 c 14.2352,-9.98251 28.50487,-15.97591 69.08404,-29.01591 32.15697,-10.33354 51.17096,-21.00285 68.8865,-38.65433 5.44702,-5.42731 12.3286,-13.51773 15.29236,-17.97873 6.31188,-9.50047 15.28048,-26.39644 14.45147,-27.22542 -0.31619,-0.31622 -4.13888,0.91353 -8.49471,2.7328 -16.38628,6.84381 -33.37216,7.63073 -45.31663,2.0994 -3.6112,-1.6723 -6.56584,-3.47968 -6.56584,-4.01639"
+                  fill="#E9E1D8"
+                  transform="scale(0.25) translate(-200,-150)"
+                />
+              </g>
+            </svg>
+            <h2 className="loading-text">ANCHOR:23</h2>
+          </div>
+        )}
+
+        <div className="loading-bar">
+          <div
+            className="loading-progress"
+            style={{ width: `${progress}%` }}
+          ></div>
+        </div>
+      </div>
+
+      <style jsx>{`
+        .loading-screen {
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100vw;
+          height: 100vh;
+          background: #3F362E;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          z-index: 9999;
+          animation: screenFadeIn 0.3s ease-out;
+        }
+
+        .loading-screen.fade-out {
+          animation: screenFadeOutUp 0.8s ease-in forwards;
+        }
+
+        .loading-content {
+          text-align: center;
+          color: white;
+        }
+
+        .logo-wrapper {
+          margin-bottom: 3rem;
+          animation: logoFadeIn 1s ease-out 0.3s both;
+        }
+
+        .loading-logo {
+          width: 160px;
+          height: 110px;
+          margin: 0 auto 1rem;
+          filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.4));
+        }
+
+        .loading-anchor-group {
+          opacity: 1;
+        }
+
+        .loading-text {
+          font-size: 2rem;
+          font-weight: 300;
+          letter-spacing: 2px;
+          margin: 0;
+          animation: textGlow 2s ease-in-out infinite alternate;
+        }
+
+        .loading-bar {
+          width: 200px;
+          height: 3px;
+          background: rgba(255, 255, 255, 0.2);
+          border-radius: 2px;
+          overflow: hidden;
+          margin: 2rem auto 0;
+        }
+
+        .loading-progress {
+          height: 100%;
+          background: #E9E1D8;
+          border-radius: 2px;
+          transition: width 0.2s ease;
+          box-shadow: 0 0 8px rgba(233, 225, 216, 0.3);
+        }
+
+        @keyframes screenFadeIn {
+          0% { opacity: 0; }
+          100% { opacity: 1; }
+        }
+
+        @keyframes screenFadeOutUp {
+          0% {
+            opacity: 1;
+            transform: translateY(0);
+          }
+          100% {
+            opacity: 0;
+            transform: translateY(-100px);
+          }
+        }
+
+        @keyframes logoFadeIn {
+          0% {
+            opacity: 0;
+            transform: scale(0.8) translateY(-20px);
+          }
+          100% {
+            opacity: 1;
+            transform: scale(1) translateY(0);
+          }
+        }
+
+        @keyframes logoPulse {
+          0%, 100% {
+            opacity: 0.8;
+            transform: scale(1);
+          }
+          50% {
+            opacity: 1;
+            transform: scale(1.05);
+          }
+        }
+
+        @keyframes textGlow {
+          0% {
+            text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
+          }
+          100% {
+            text-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 30px rgba(255, 255, 255, 0.6);
+          }
+        }
+
+
+
+        @media (min-width: 768px) {
+          .loading-logo {
+            width: 160px;
+            height: 160px;
+          }
+
+          .loading-text {
+            font-size: 2.5rem;
+          }
+
+          .loading-bar {
+            width: 300px;
+          }
+        }
+      `}</style>
+    </div>
+  )
+}
--- a/components/pattern-overlay.tsx
+++ b/components/pattern-overlay.tsx
@@ -0,0 +1,68 @@
+import React from 'react'
+
+interface PatternOverlayProps {
+  variant?: 'diagonal' | 'circles' | 'waves' | 'hexagons'
+  opacity?: number
+  className?: string
+}
+
+/** @description Elegant pattern overlay component */
+export function PatternOverlay({
+  variant = 'diagonal',
+  opacity = 0.1,
+  className = ''
+}: PatternOverlayProps) {
+  const getPatternStyle = () => {
+    switch (variant) {
+      case 'diagonal':
+        return {
+          backgroundImage: `
+            linear-gradient(45deg, currentColor 1px, transparent 1px),
+            linear-gradient(-45deg, currentColor 1px, transparent 1px)
+          `,
+          backgroundSize: '20px 20px'
+        }
+      case 'circles':
+        return {
+          backgroundImage: 'radial-gradient(circle, currentColor 1px, transparent 1px)',
+          backgroundSize: '30px 30px'
+        }
+      case 'waves':
+        return {
+          backgroundImage: `
+            radial-gradient(ellipse 60% 40%, currentColor 1px, transparent 1px),
+            radial-gradient(ellipse 40% 60%, currentColor 1px, transparent 1px)
+          `,
+          backgroundSize: '40px 40px'
+        }
+      case 'hexagons':
+        return {
+          backgroundImage: `
+            linear-gradient(60deg, currentColor 1px, transparent 1px),
+            linear-gradient(-60deg, currentColor 1px, transparent 1px),
+            linear-gradient(120deg, currentColor 1px, transparent 1px)
+          `,
+          backgroundSize: '25px 43px'
+        }
+      default:
+        return {}
+    }
+  }
+
+  return (
+    <div
+      className={`pattern-overlay ${className}`}
+      style={{
+        ...getPatternStyle(),
+        opacity,
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        pointerEvents: 'none',
+        zIndex: 0
+      }}
+    />
+  )
+}
--- a/components/responsive-nav.tsx
+++ b/components/responsive-nav.tsx
@@ -0,0 +1,70 @@
+'use client'
+
+import { useState } from 'react'
+import { Menu, X } from 'lucide-react'
+
+/** @description Responsive navigation component with hamburger menu for mobile */
+export function ResponsiveNav() {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <header className="site-header">
+      <nav className="nav-primary">
+        <div className="logo">
+          <a href="/">ANCHOR:23</a>
+        </div>
+
+        {/* Desktop nav */}
+        <ul className="nav-links hidden md:flex items-center space-x-8">
+          <li><a href="/">Inicio</a></li>
+          <li><a href="/historia">Nosotros</a></li>
+          <li><a href="/servicios">Servicios</a></li>
+          <li><a href="/contacto">Contacto</a></li>
+        </ul>
+
+        {/* Desktop actions */}
+        <div className="nav-actions hidden md:flex items-center gap-4">
+          <a href="/booking/servicios" className="btn-secondary">
+            Book Now
+          </a>
+          <a href="/membresias" className="btn-primary">
+            Memberships
+          </a>
+        </div>
+
+        {/* Mobile elegant vertical dots menu */}
+        <button 
+          className="md:hidden p-1 ml-auto"
+          onClick={() => setIsOpen(!isOpen)}
+          aria-label="Toggle menu"
+        >
+          <div className="w-5 h-5 flex flex-col justify-center items-center space-y-0.25">
+            <span className="w-1.5 h-1.5 bg-current rounded-full opacity-80 hover:opacity-100 transition-opacity"></span>
+            <span className="w-1.5 h-1.5 bg-current rounded-full opacity-80 hover:opacity-100 transition-opacity"></span>
+            <span className="w-1.5 h-1.5 bg-current rounded-full opacity-80 hover:opacity-100 transition-opacity"></span>
+          </div>
+        </button>
+      </nav>
+
+      {/* Mobile menu */}
+      {isOpen && (
+        <div className="md:hidden bg-white/95 backdrop-blur-sm border-t border-gray-200 px-8 py-6">
+          <ul className="space-y-4 text-center">
+            <li><a href="/" className="block py-2 text-lg" onClick={() => setIsOpen(false)}>Inicio</a></li>
+            <li><a href="/historia" className="block py-2 text-lg" onClick={() => setIsOpen(false)}>Nosotros</a></li>
+            <li><a href="/servicios" className="block py-2 text-lg" onClick={() => setIsOpen(false)}>Servicios</a></li>
+            <li><a href="/contacto" className="block py-2 text-lg" onClick={() => setIsOpen(false)}>Contacto</a></li>
+          </ul>
+          <div className="flex flex-col items-center space-y-4 mt-6 pt-6 border-t border-gray-200">
+            <a href="/booking/servicios" className="btn-secondary w-full max-w-xs animate-pulse-subtle">
+              Book Now
+            </a>
+              <a href="/membresias" className="bg-[#3E352E] text-white hover:bg-[#3E352E]/90 w-full max-w-xs px-6 py-3 rounded-lg font-semibold transition-all duration-300">
+              Memberships
+            </a>
+          </div>
+        </div>
+      )}
+    </header>
+  )
+}
--- a/components/rolling-phrases.tsx
+++ b/components/rolling-phrases.tsx
@@ -0,0 +1,95 @@
+'use client'
+
+import React, { useState, useEffect } from 'react'
+
+/** @description Rolling phrases component that cycles through Anchor 23 standards */
+export function RollingPhrases() {
+  const phrases = [
+    "Manifiesto la belleza que merezco",
+    "Atraigo experiencias extraordinarias",
+    "Mi confianza irradia elegancia",
+    "Soy el estándar de sofisticación",
+    "Mi presencia transforma espacios",
+    "Vivo con propósito y distinción"
+  ]
+
+  const [currentPhrase, setCurrentPhrase] = useState(0)
+  const [isAnimating, setIsAnimating] = useState(false)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setIsAnimating(true)
+      setTimeout(() => {
+        setCurrentPhrase((prev) => (prev + 1) % phrases.length)
+        setIsAnimating(false)
+      }, 300)
+    }, 4000) // Cambiar cada 4 segundos
+
+    return () => clearInterval(interval)
+  }, [phrases.length])
+
+  return (
+    <div className="rolling-phrases">
+      <div className={`phrase-container ${isAnimating ? 'animating' : ''}`}>
+        <p className="phrase">
+          {phrases[currentPhrase]}
+        </p>
+        <div className="phrase-underline"></div>
+      </div>
+
+      <style jsx>{`
+        .rolling-phrases {
+          position: relative;
+          height: 60px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          overflow: hidden;
+        }
+
+        .phrase-container {
+          position: relative;
+          text-align: center;
+        }
+
+        .phrase {
+          font-size: 1.125rem;
+          font-weight: 300;
+          color: #6f5e4f;
+          margin: 0;
+          letter-spacing: 0.5px;
+          font-style: italic;
+          transition: all 0.3s ease;
+        }
+
+        .phrase-underline {
+          height: 2px;
+          background: linear-gradient(90deg, #8B4513, #DAA520, #8B4513);
+          width: 0;
+          margin: 8px auto 0;
+          border-radius: 1px;
+          transition: width 0.6s ease;
+        }
+
+        .phrase-container:not(.animating) .phrase-underline {
+          width: 80px;
+        }
+
+        .animating .phrase {
+          opacity: 0;
+          transform: translateY(-10px);
+        }
+
+        @media (min-width: 768px) {
+          .rolling-phrases {
+            height: 80px;
+          }
+
+          .phrase {
+            font-size: 1.5rem;
+          }
+        }
+      `}</style>
+    </div>
+  )
+}
--- a/components/webhook-form.tsx
+++ b/components/webhook-form.tsx
@@ -0,0 +1,171 @@
+'use client'
+
+import { useState } from 'react'
+import { CheckCircle } from 'lucide-react'
+import { getDeviceType, sendWebhookPayload } from '@/lib/webhook'
+
+interface WebhookFormProps {
+  formType: 'contact' | 'franchise' | 'membership'
+  title: string
+  successMessage?: string
+  successSubtext?: string
+  submitButtonText?: string
+  fields: {
+    name: string
+    label: string
+    type: 'text' | 'email' | 'tel' | 'textarea' | 'select'
+    required?: boolean
+    placeholder?: string
+    options?: { value: string; label: string }[]
+    rows?: number
+  }[]
+  additionalData?: Record<string, string>
+}
+
+export function WebhookForm({
+  formType,
+  title,
+  successMessage = 'Mensaje Enviado',
+  successSubtext = 'Gracias por contactarnos. Te responderemos lo antes posible.',
+  submitButtonText = 'Enviar',
+  fields,
+  additionalData
+}: WebhookFormProps) {
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [submitted, setSubmitted] = useState(false)
+  const [showThankYou, setShowThankYou] = useState(false)
+  const [submitError, setSubmitError] = useState<string | null>(null)
+
+  const formData = fields.reduce(
+    (acc, field) => ({ ...acc, [field.name]: '' }),
+    {} as Record<string, string>
+  )
+
+  const [values, setValues] = useState(formData)
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
+  ) => {
+    setValues((prev) => ({
+      ...prev,
+      [e.target.name]: e.target.value
+    }))
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsSubmitting(true)
+    setSubmitError(null)
+
+    const payload = {
+      form: formType,
+      ...values,
+      timestamp_utc: new Date().toISOString(),
+      device_type: getDeviceType(),
+      ...additionalData
+    }
+
+    try {
+      await sendWebhookPayload(payload)
+      setSubmitted(true)
+      setShowThankYou(true)
+      window.setTimeout(() => setShowThankYou(false), 3500)
+      setValues(formData)
+    } catch (error) {
+      setSubmitError('No pudimos enviar tu solicitud. Intenta de nuevo.')
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <>
+      {showThankYou && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
+          <div className="bg-white rounded-2xl p-8 max-w-md w-full text-center shadow-2xl animate-in fade-in zoom-in duration-300">
+            <CheckCircle className="w-16 h-16 text-green-600 mx-auto mb-4" />
+            <h3 className="text-2xl font-bold mb-2">¡Gracias!</h3>
+            <p className="text-gray-600">{successSubtext}</p>
+          </div>
+        </div>
+      )}
+
+      {submitted ? (
+        <div className="p-8 bg-green-50 border border-green-200 rounded-xl text-center">
+          <CheckCircle className="w-12 h-12 text-green-900 mb-4 mx-auto" />
+          <h4 className="text-xl font-semibold text-green-900 mb-2">
+            {successMessage}
+          </h4>
+          <p className="text-green-800">
+            {successSubtext}
+          </p>
+        </div>
+      ) : (
+        <form onSubmit={handleSubmit} className="space-y-6 p-8 bg-white rounded-2xl shadow-lg border border-gray-100">
+          <div className="grid md:grid-cols-2 gap-6">
+            {fields.map((field) => (
+              <div key={field.name} className={field.type === 'textarea' ? 'md:col-span-2' : ''}>
+                <label htmlFor={field.name} className="block text-sm font-medium text-gray-700 mb-2">
+                  {field.label}
+                </label>
+                {field.type === 'textarea' ? (
+                  <textarea
+                    id={field.name}
+                    name={field.name}
+                    value={values[field.name]}
+                    onChange={handleChange}
+                    required={field.required}
+                    rows={field.rows || 4}
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent resize-none"
+                    placeholder={field.placeholder}
+                  />
+                ) : field.type === 'select' ? (
+                  <select
+                    id={field.name}
+                    name={field.name}
+                    value={values[field.name]}
+                    onChange={handleChange}
+                    required={field.required}
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg bg-white focus:ring-2 focus:ring-gray-900 focus:border-transparent"
+                  >
+                    <option value="">{field.placeholder || 'Selecciona una opción'}</option>
+                    {field.options?.map((option) => (
+                      <option key={option.value} value={option.value}>
+                        {option.label}
+                      </option>
+                    ))}
+                  </select>
+                ) : (
+                  <input
+                    type={field.type}
+                    id={field.name}
+                    name={field.name}
+                    value={values[field.name]}
+                    onChange={handleChange}
+                    required={field.required}
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent"
+                    placeholder={field.placeholder}
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+
+          {submitError && (
+            <p className="text-sm text-red-600 text-center">
+              {submitError}
+            </p>
+          )}
+
+          <button
+            type="submit"
+            className="bg-[#3E352E] text-white hover:bg-[#3E352E]/90 px-8 py-3 rounded-lg font-semibold shadow-md hover:shadow-lg transition-all duration-300 inline-flex items-center justify-center w-full"
+            disabled={isSubmitting}
+          >
+            {isSubmitting ? 'Enviando...' : submitButtonText}
+          </button>
+        </form>
+      )}
+    </>
+  )
+}
--- a/deploy.sh
+++ b/deploy.sh
@@ -0,0 +1,52 @@
+#!/bin/bash
+
+# AnchorOS Deployment Script para VPS
+# Uso: ./deploy.sh [environment]
+
+set -e
+
+ENVIRONMENT=${1:-production}
+PROJECT_NAME="anchoros"
+
+echo "🚀 Iniciando deployment de AnchorOS ($ENVIRONMENT)"
+
+# Verificar que estamos en el directorio correcto
+if [ ! -f "package.json" ]; then
+    echo "❌ Error: Ejecutar desde el directorio raíz del proyecto"
+    exit 1
+fi
+
+# Verificar variables de entorno
+if [ ! -f ".env" ]; then
+    echo "❌ Error: Archivo .env no encontrado. Copia .env.example a .env y configura las variables"
+    exit 1
+fi
+
+echo "📦 Construyendo imagen Docker..."
+docker build -t $PROJECT_NAME:$ENVIRONMENT .
+
+echo "🐳 Deteniendo contenedores existentes..."
+docker-compose -f docker-compose.prod.yml down || true
+
+echo "🧹 Limpiando imágenes no utilizadas..."
+docker image prune -f
+
+echo "🚀 Iniciando servicios..."
+docker-compose -f docker-compose.prod.yml up -d
+
+echo "⏳ Esperando que los servicios estén listos..."
+sleep 30
+
+echo "🔍 Verificando health check..."
+if curl -f http://localhost/health > /dev/null 2>&1; then
+    echo "✅ Deployment exitoso!"
+    echo "🌐 App disponible en: http://tu-dominio.com"
+    echo "📊 Monitorea logs con: docker-compose -f docker-compose.prod.yml logs -f"
+else
+    echo "❌ Error: Health check falló"
+    echo "📋 Revisa logs: docker-compose -f docker-compose.prod.yml logs"
+    exit 1
+fi
+
+echo "🧹 Limpiando builds antiguos..."
+docker image prune -f
--- a/docker-compose.evolution.yml
+++ b/docker-compose.evolution.yml
@@ -0,0 +1,18 @@
+version: '3'
+
+services:
+  evolution-api:
+    container_name: evolution_api
+    image: atendai/evolution-api
+    restart: always
+    ports:
+      - "8080:8080"
+    env_file:
+      - .env.evolution
+    volumes:
+      - evolution_store:/evolution/store
+      - evolution_instances:/evolution/instances
+
+volumes:
+  evolution_store:
+  evolution_instances:
--- a/docker-compose.override.yml
+++ b/docker-compose.override.yml
@@ -0,0 +1,28 @@
+# Override para desarrollo local
+version: '3.8'
+
+services:
+  anchoros:
+    build:
+      context: .
+      dockerfile: Dockerfile.dev
+    volumes:
+      - .:/app
+      - /app/node_modules
+    environment:
+      - NODE_ENV=development
+      - NEXT_PUBLIC_APP_URL=http://localhost:3000
+    ports:
+      - "3000:3000"
+    command: npm run dev
+    networks:
+      - anchoros_network
+
+  # Deshabilitar nginx en desarrollo
+  nginx:
+    profiles:
+      - production
+
+  redis:
+    profiles:
+      - production
--- a/docker-compose.prod.yml
+++ b/docker-compose.prod.yml
@@ -0,0 +1,73 @@
+version: '3.8'
+
+services:
+  anchoros:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: anchoros_app
+    restart: unless-stopped
+    environment:
+      - NODE_ENV=production
+      - NEXT_PUBLIC_SUPABASE_URL=${NEXT_PUBLIC_SUPABASE_URL}
+      - NEXT_PUBLIC_SUPABASE_ANON_KEY=${NEXT_PUBLIC_SUPABASE_ANON_KEY}
+      - SUPABASE_SERVICE_ROLE_KEY=${SUPABASE_SERVICE_ROLE_KEY}
+      - RESEND_API_KEY=${RESEND_API_KEY}
+      - NEXT_PUBLIC_APP_URL=${NEXT_PUBLIC_APP_URL}
+    ports:
+      - "3000:3000"
+    networks:
+      - anchoros_network
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:3000/api/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+    # Recursos optimizados
+    deploy:
+      resources:
+        limits:
+          cpus: '1.0'
+          memory: 1G
+        reservations:
+          cpus: '0.5'
+          memory: 512M
+
+  nginx:
+    image: nginx:alpine
+    container_name: anchoros_nginx
+    restart: unless-stopped
+    ports:
+      - "80:80"
+      - "443:443"
+    volumes:
+      - ./nginx.conf:/etc/nginx/nginx.conf:ro
+      - ./ssl:/etc/ssl/certs:ro
+      - nginx_cache:/var/cache/nginx
+    depends_on:
+      - anchoros
+    networks:
+      - anchoros_network
+    # SSL termination y caching
+    environment:
+      - NGINX_ENVSUBST_TEMPLATE_DIR=/etc/nginx/templates
+      - NGINX_ENVSUBST_OUTPUT_DIR=/etc/nginx/conf.d
+
+  # Opcional: Redis para caching adicional
+  redis:
+    image: redis:7-alpine
+    container_name: anchoros_redis
+    restart: unless-stopped
+    volumes:
+      - redis_data:/data
+    networks:
+      - anchoros_network
+    command: redis-server --appendonly yes --maxmemory 256mb --maxmemory-policy allkeys-lru
+
+volumes:
+  redis_data:
+  nginx_cache:
+
+networks:
+  anchoros_network:
+    driver: bridge
--- a/hooks/use-scroll-effect.ts
+++ b/hooks/use-scroll-effect.ts
@@ -0,0 +1,20 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+/** @description Hook to handle scroll effects on header */
+export function useScrollEffect() {
+  const [isScrolled, setIsScrolled] = useState(false)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollTop = window.scrollY
+      setIsScrolled(scrollTop > 50)
+    }
+
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  return isScrolled
+}
--- a/lib/email.ts
+++ b/lib/email.ts
@@ -0,0 +1,102 @@
+import { Resend } from 'resend'
+
+const resend = new Resend(process.env.RESEND_API_KEY!)
+
+interface ReceiptEmailData {
+  to: string
+  customerName: string
+  bookingId: string
+  serviceName: string
+  date: string
+  time: string
+  location: string
+  staffName: string
+  price: number
+  pdfUrl: string
+}
+
+/** @description Send receipt email to customer */
+export async function sendReceiptEmail(data: ReceiptEmailData) {
+  try {
+    const emailHtml = `
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <meta charset="utf-8">
+          <title>Recibo de Reserva - ANCHOR:23</title>
+          <style>
+            body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; }
+            .container { max-width: 600px; margin: 0 auto; padding: 20px; }
+            .header { text-align: center; margin-bottom: 30px; }
+            .logo { color: #8B4513; font-size: 24px; font-weight: bold; }
+            .details { background: #f9f9f9; padding: 20px; border-radius: 8px; margin: 20px 0; }
+            .footer { text-align: center; margin-top: 30px; font-size: 12px; color: #666; }
+            .btn { display: inline-block; background: #8B4513; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px; }
+          </style>
+        </head>
+        <body>
+          <div class="container">
+            <div class="header">
+              <div class="logo">ANCHOR:23</div>
+              <h1>Confirmación de Reserva</h1>
+            </div>
+
+            <p>Hola ${data.customerName},</p>
+
+            <p>Tu reserva ha sido confirmada exitosamente. Aquí están los detalles:</p>
+
+            <div class="details">
+              <h3>Detalles de la Reserva</h3>
+              <p><strong>Servicio:</strong> ${data.serviceName}</p>
+              <p><strong>Fecha:</strong> ${data.date}</p>
+              <p><strong>Hora:</strong> ${data.time}</p>
+              <p><strong>Ubicación:</strong> ${data.location}</p>
+              <p><strong>Profesional:</strong> ${data.staffName}</p>
+              <p><strong>Total:</strong> $${data.price} MXN</p>
+            </div>
+
+            <p>Adjunto encontrarás el recibo en formato PDF para tus registros.</p>
+
+            <div style="text-align: center; margin: 30px 0;">
+              <a href="${data.pdfUrl}" class="btn">Descargar Recibo PDF</a>
+            </div>
+
+            <p>Si tienes alguna pregunta, no dudes en contactarnos.</p>
+
+            <p>¡Te esperamos en ANCHOR:23!</p>
+
+            <div class="footer">
+              <p>ANCHOR:23 - Belleza anclada en exclusividad</p>
+              <p>Saltillo, Coahuila, México</p>
+              <p>+52 844 123 4567 | contacto@anchor23.mx</p>
+            </div>
+          </div>
+        </body>
+      </html>
+    `
+
+    const { data: result, error } = await resend.emails.send({
+      from: 'ANCHOR:23 <noreply@anchor23.mx>',
+      to: data.to,
+      subject: 'Confirmación de Reserva - ANCHOR:23',
+      html: emailHtml,
+      attachments: [
+        {
+          filename: `recibo-${data.bookingId.slice(-8)}.pdf`,
+          path: data.pdfUrl
+        }
+      ]
+    })
+
+    if (error) {
+      console.error('Email send error:', error)
+      return { success: false, error }
+    }
+
+    return { success: true, data: result }
+
+  } catch (error) {
+    console.error('Email service error:', error)
+    return { success: false, error }
+  }
+}
--- a/lib/webhook.ts
+++ b/lib/webhook.ts
@@ -0,0 +1,37 @@
+export const WEBHOOK_ENDPOINTS = [
+  'https://flows.soul23.cloud/webhook-test/4YZ7RPfo1GT',
+  'https://flows.soul23.cloud/webhook/4YZ7RPfo1GT'
+]
+
+export const getDeviceType = () => {
+  if (typeof window === 'undefined') {
+    return 'unknown'
+  }
+
+  return window.matchMedia('(max-width: 768px)').matches ? 'mobile' : 'desktop'
+}
+
+export const sendWebhookPayload = async (payload: Record<string, string>) => {
+  const results = await Promise.allSettled(
+    WEBHOOK_ENDPOINTS.map(async (endpoint) => {
+      const response = await fetch(endpoint, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(payload)
+      })
+
+      if (!response.ok) {
+        throw new Error('Webhook error')
+      }
+
+      return response
+    })
+  )
+
+  const hasSuccess = results.some((result) => result.status === 'fulfilled')
+  if (!hasSuccess) {
+    throw new Error('No se pudo enviar la solicitud a los webhooks.')
+  }
+}
--- a/next.config.js
+++ b/next.config.js
@@ -1,6 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
  reactStrictMode: true,
+  output: 'standalone', // Para Docker optimizado
  images: {
    domains: ['localhost'],
    remotePatterns: [
@@ -14,6 +15,13 @@ const nextConfig = {
    NEXT_PUBLIC_SUPABASE_URL: process.env.NEXT_PUBLIC_SUPABASE_URL,
    NEXT_PUBLIC_SUPABASE_ANON_KEY: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
  },
+  // Optimizaciones de performance
+  // experimental: {
+  //   optimizeCss: true,
+  // },
+  compiler: {
+    removeConsole: process.env.NODE_ENV === 'production',
+  },
 }

 module.exports = nextConfig
--- a/nginx.conf
+++ b/nginx.conf
@@ -0,0 +1,133 @@
+events {
+    worker_connections 1024;
+    use epoll;
+    multi_accept on;
+}
+
+http {
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+
+    # Logging
+    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
+                    '$status $body_bytes_sent "$http_referer" '
+                    '"$http_user_agent" "$http_x_forwarded_for"';
+
+    access_log /var/log/nginx/access.log main;
+    error_log /var/log/nginx/error.log warn;
+
+    # Performance
+    sendfile on;
+    tcp_nopush on;
+    tcp_nodelay on;
+    keepalive_timeout 65;
+    types_hash_max_size 2048;
+    client_max_body_size 100M;
+
+    # Gzip compression
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_proxied any;
+    gzip_comp_level 6;
+    gzip_types
+        text/plain
+        text/css
+        text/xml
+        text/javascript
+        application/json
+        application/javascript
+        application/xml+rss
+        application/atom+xml
+        image/svg+xml;
+
+    # Rate limiting
+    limit_req_zone $binary_remote_addr zone=api:10m rate=10r/s;
+    limit_req_zone $binary_remote_addr zone=auth:10m rate=5r/m;
+
+    # Upstream para la app Next.js
+    upstream anchoros_app {
+        server anchoros:3000;
+        keepalive 32;
+    }
+
+    server {
+        listen 80;
+        server_name _;
+        return 301 https://$host$request_uri;
+    }
+
+    server {
+        listen 443 ssl http2;
+        server_name _;
+
+        # SSL configuration (reemplaza con tus certificados)
+        ssl_certificate /etc/ssl/certs/fullchain.pem;
+        ssl_certificate_key /etc/ssl/certs/privkey.pem;
+        ssl_protocols TLSv1.2 TLSv1.3;
+        ssl_ciphers ECDHE-RSA-AES256-GCM-SHA512:DHE-RSA-AES256-GCM-SHA512:ECDHE-RSA-AES256-GCM-SHA384;
+        ssl_prefer_server_ciphers off;
+
+        # Security headers
+        add_header X-Frame-Options DENY;
+        add_header X-Content-Type-Options nosniff;
+        add_header X-XSS-Protection "1; mode=block";
+        add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload";
+        add_header Referrer-Policy "strict-origin-when-cross-origin";
+
+        # Caching para static files
+        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+            expires 1y;
+            add_header Cache-Control "public, immutable";
+            add_header X-Cache-Status $upstream_cache_status;
+
+            proxy_pass http://anchoros_app;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+
+        # API endpoints con rate limiting
+        location /api/ {
+            limit_req zone=api burst=20 nodelay;
+
+            # Auth endpoints más restrictivos
+            location ~ ^/api/(auth|admin) {
+                limit_req zone=auth burst=5 nodelay;
+            }
+
+            proxy_pass http://anchoros_app;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_read_timeout 300;
+            proxy_connect_timeout 75;
+        }
+
+        # Main app
+        location / {
+            proxy_pass http://anchoros_app;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_read_timeout 300;
+            proxy_connect_timeout 75;
+
+            # Caching para páginas
+            location ~ ^/(|_next/static/|favicon.ico) {
+                expires 1M;
+                add_header Cache-Control "public, immutable";
+            }
+        }
+
+        # Health check
+        location /health {
+            access_log off;
+            return 200 "healthy\n";
+            add_header Content-Type text/plain;
+        }
+    }
+}
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
        "@dnd-kit/core": "^6.3.1",
        "@dnd-kit/sortable": "^10.0.0",
        "@dnd-kit/utilities": "^3.2.2",
+        "@formbricks/js": "^4.3.0",
        "@hookform/resolvers": "^3.3.3",
        "@radix-ui/react-checkbox": "^1.3.3",
        "@radix-ui/react-dialog": "^1.1.15",
@@ -31,11 +32,14 @@
        "date-fns": "^3.6.0",
        "date-fns-tz": "^3.2.0",
        "framer-motion": "^10.16.16",
+        "html2canvas": "^1.4.1",
+        "jspdf": "^4.0.0",
        "lucide-react": "^0.303.0",
        "next": "14.0.4",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-hook-form": "^7.49.2",
+        "resend": "^6.7.0",
        "stripe": "^20.2.0",
        "tailwind-merge": "^2.6.0",
        "zod": "^3.22.4"
@@ -66,6 +70,15 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz",
+      "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
    "node_modules/@dnd-kit/accessibility": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
@@ -271,6 +284,12 @@
      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
      "license": "MIT"
    },
+    "node_modules/@formbricks/js": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@formbricks/js/-/js-4.3.0.tgz",
+      "integrity": "sha512-IR1SAdHsthC3js7O3BjW14EbpAy/u3/8R0Jekzrkglt+b0LGFrFL/vUcK6IypG4HbopTlDcpU9A45i1YPJ8jrA==",
+      "license": "MIT"
+    },
    "node_modules/@hookform/resolvers": {
      "version": "3.10.0",
      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.10.0.tgz",
@@ -2073,6 +2092,12 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/@stablelib/base64": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@stablelib/base64/-/base64-1.0.1.tgz",
+      "integrity": "sha512-1bnPQqSxSuc3Ii6MhBysoWCg58j97aUjuCSZrGSmDxNqtytIi0k8utUenAwTZN4V5mXXYGsVUI9zeBqy+jBOSQ==",
+      "license": "MIT"
+    },
    "node_modules/@stripe/react-stripe-js": {
      "version": "5.4.1",
      "resolved": "https://registry.npmjs.org/@stripe/react-stripe-js/-/react-stripe-js-5.4.1.tgz",
@@ -2225,6 +2250,12 @@
        "undici-types": "~6.21.0"
      }
    },
+    "node_modules/@types/pako": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/pako/-/pako-2.0.4.tgz",
+      "integrity": "sha512-VWDCbrLeVXJM9fihYodcLiIv0ku+AlOa/TQ1SvYOaBuyrSKgEcro95LJyIsJ4vSo6BXIxOKxiJAat04CmST9Fw==",
+      "license": "MIT"
+    },
    "node_modules/@types/phoenix": {
      "version": "1.6.7",
      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.7.tgz",
@@ -2238,6 +2269,13 @@
      "devOptional": true,
      "license": "MIT"
    },
+    "node_modules/@types/raf": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+      "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+      "license": "MIT",
+      "optional": true
+    },
    "node_modules/@types/react": {
      "version": "18.3.27",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.27.tgz",
@@ -2259,6 +2297,13 @@
        "@types/react": "^18.0.0"
      }
    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
    "node_modules/@types/ws": {
      "version": "8.18.1",
      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
@@ -3081,6 +3126,15 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
    "node_modules/baseline-browser-mapping": {
      "version": "2.9.15",
      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.15.tgz",
@@ -3261,6 +3315,26 @@
      ],
      "license": "CC-BY-4.0"
    },
+    "node_modules/canvg": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.11.tgz",
+      "integrity": "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
    "node_modules/chalk": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -3393,6 +3467,18 @@
        "url": "https://opencollective.com/express"
      }
    },
+    "node_modules/core-js": {
+      "version": "3.47.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.47.0.tgz",
+      "integrity": "sha512-c3Q2VVkGAUyupsjRnaNX6u8Dq2vAdzm9iuPj5FW0fRxzlxgq9Q39MDq10IvmQSpLgHQNyQzQmOo6bgGHmH3NNg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
    "node_modules/cross-spawn": {
      "version": "7.0.6",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3408,6 +3494,15 @@
        "node": ">= 8"
      }
    },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
    "node_modules/cssesc": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -3615,6 +3710,16 @@
        "node": ">=6.0.0"
      }
    },
+    "node_modules/dompurify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.1.tgz",
+      "integrity": "sha512-qkdCKzLNtrgPFP1Vo+98FRzJnBRGe4ffyCea9IwHB1fyxPOeNTHpLKYGd4Uk9xvNoH0ZoOjwZxNptyMwqrId1Q==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optional": true,
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
    "node_modules/dotenv": {
      "version": "16.6.1",
      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
@@ -4351,6 +4456,23 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/fast-png": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/fast-png/-/fast-png-6.4.0.tgz",
+      "integrity": "sha512-kAqZq1TlgBjZcLr5mcN6NP5Rv4V2f22z00c3g8vRrwkcqjerx7BEhPbOnWCPqaHUl2XWQBJQvOT/FQhdMT7X/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/pako": "^2.0.3",
+        "iobuffer": "^5.3.2",
+        "pako": "^2.1.0"
+      }
+    },
+    "node_modules/fast-sha256": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-sha256/-/fast-sha256-1.3.0.tgz",
+      "integrity": "sha512-n11RGP/lrWEFI/bWdygLxhI+pVeo1ZYIVwvvPkW7azl/rOy+F3HYRZ2K5zeE9mmkhQppyv9sQFx0JM9UabnpPQ==",
+      "license": "Unlicense"
+    },
    "node_modules/fastq": {
      "version": "1.20.1",
      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
@@ -4379,6 +4501,12 @@
        }
      }
    },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "license": "MIT"
+    },
    "node_modules/file-entry-cache": {
      "version": "6.0.1",
      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -4859,6 +4987,19 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
    "node_modules/iceberg-js": {
      "version": "0.8.1",
      "resolved": "https://registry.npmjs.org/iceberg-js/-/iceberg-js-0.8.1.tgz",
@@ -4939,6 +5080,12 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/iobuffer": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/iobuffer/-/iobuffer-5.4.0.tgz",
+      "integrity": "sha512-DRebOWuqDvxunfkNJAlc3IzWIPD5xVxwUNbHr7xKB8E6aLJxIPfNX3CoMJghcFjpv6RWQsrcJbghtEwSPoJqMA==",
+      "license": "MIT"
+    },
    "node_modules/is-array-buffer": {
      "version": "3.0.5",
      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -5459,6 +5606,23 @@
        "json5": "lib/cli.js"
      }
    },
+    "node_modules/jspdf": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-4.0.0.tgz",
+      "integrity": "sha512-w12U97Z6edKd2tXDn3LzTLg7C7QLJlx0BPfM3ecjK2BckUl9/81vZ+r5gK4/3KQdhAcEZhENUxRhtgYBj75MqQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "fast-png": "^6.2.0",
+        "fflate": "^0.8.1"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.11",
+        "core-js": "^3.6.0",
+        "dompurify": "^3.2.4",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
    "node_modules/jsx-ast-utils": {
      "version": "3.3.5",
      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -6014,6 +6178,12 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/pako": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==",
+      "license": "(MIT AND Zlib)"
+    },
    "node_modules/parent-module": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -6074,6 +6244,13 @@
        "node": ">=8"
      }
    },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "license": "MIT",
+      "optional": true
+    },
    "node_modules/picocolors": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -6353,6 +6530,16 @@
      ],
      "license": "MIT"
    },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
    "node_modules/react": {
      "version": "18.3.1",
      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
@@ -6528,6 +6715,13 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "license": "MIT",
+      "optional": true
+    },
    "node_modules/regexp.prototype.flags": {
      "version": "1.5.4",
      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
@@ -6549,6 +6743,26 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/resend": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/resend/-/resend-6.7.0.tgz",
+      "integrity": "sha512-2ZV0NDZsh4Gh+Nd1hvluZIitmGJ59O4+OxMufymG6Y8uz1Jgt2uS1seSENnkIUlmwg7/dwmfIJC9rAufByz7wA==",
+      "license": "MIT",
+      "dependencies": {
+        "svix": "1.84.1"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@react-email/render": "*"
+      },
+      "peerDependenciesMeta": {
+        "@react-email/render": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/resolve": {
      "version": "1.22.11",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
@@ -6601,6 +6815,16 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "license": "MIT OR SEE LICENSE IN FEEL-FREE.md",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
+    },
    "node_modules/rimraf": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -6889,6 +7113,26 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/stackblur-canvas": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
+    "node_modules/standardwebhooks": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/standardwebhooks/-/standardwebhooks-1.0.0.tgz",
+      "integrity": "sha512-BbHGOQK9olHPMvQNHWul6MYlrRTAOKn03rOe4A8O3CLWhNf4YHBqq2HJKKC+sfqpxiBY52pNeesD6jIiLDz8jg==",
+      "license": "MIT",
+      "dependencies": {
+        "@stablelib/base64": "^1.0.0",
+        "fast-sha256": "^1.3.0"
+      }
+    },
    "node_modules/stop-iteration-iterator": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
@@ -7152,6 +7396,26 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/svix": {
+      "version": "1.84.1",
+      "resolved": "https://registry.npmjs.org/svix/-/svix-1.84.1.tgz",
+      "integrity": "sha512-K8DPPSZaW/XqXiz1kEyzSHYgmGLnhB43nQCMeKjWGCUpLIpAMMM8kx3rVVOSm6Bo6EHyK1RQLPT4R06skM/MlQ==",
+      "license": "MIT",
+      "dependencies": {
+        "standardwebhooks": "1.0.0",
+        "uuid": "^10.0.0"
+      }
+    },
    "node_modules/tailwind-merge": {
      "version": "2.6.0",
      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.0.tgz",
@@ -7200,6 +7464,15 @@
        "node": ">=14.0.0"
      }
    },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
    "node_modules/text-table": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -7568,6 +7841,28 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
+    "node_modules/uuid": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
    "node_modules/watchpack": {
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
    "@dnd-kit/core": "^6.3.1",
    "@dnd-kit/sortable": "^10.0.0",
    "@dnd-kit/utilities": "^3.2.2",
+    "@formbricks/js": "^4.3.0",
    "@hookform/resolvers": "^3.3.3",
    "@radix-ui/react-checkbox": "^1.3.3",
    "@radix-ui/react-dialog": "^1.1.15",
@@ -40,11 +41,14 @@
    "date-fns": "^3.6.0",
    "date-fns-tz": "^3.2.0",
    "framer-motion": "^10.16.16",
+    "html2canvas": "^1.4.1",
+    "jspdf": "^4.0.0",
    "lucide-react": "^0.303.0",
    "next": "14.0.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.49.2",
+    "resend": "^6.7.0",
    "stripe": "^20.2.0",
    "tailwind-merge": "^2.6.0",
    "zod": "^3.22.4"
--- a/scripts/e2e-testing.js
+++ b/scripts/e2e-testing.js
@@ -0,0 +1,230 @@
+/**
+ * End-to-End Testing Script for AnchorOS
+ * Tests all implemented functionalities systematically
+ */
+
+const { createClient } = require('@supabase/supabase-js')
+require('dotenv').config({ path: '.env.local' })
+
+const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
+const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY
+
+if (!supabaseUrl || !supabaseServiceKey) {
+  console.error('❌ Missing Supabase credentials')
+  process.exit(1)
+}
+
+const supabase = createClient(supabaseUrl, supabaseServiceKey)
+
+class AnchorOSTester {
+  constructor() {
+    this.passed = 0
+    this.failed = 0
+    this.tests = []
+  }
+
+  log(test, result, message = '') {
+    const status = result ? '✅' : '❌'
+    console.log(`${status} ${test}${message ? `: ${message}` : ''}`)
+
+    this.tests.push({ test, result, message })
+
+    if (result) {
+      this.passed++
+    } else {
+      this.failed++
+    }
+  }
+
+  async testAPI(endpoint, method = 'GET', body = null, expectedStatus = 200) {
+    try {
+      const options = { method }
+      if (body) {
+        options.headers = { 'Content-Type': 'application/json' }
+        options.body = JSON.stringify(body)
+      }
+
+      const response = await fetch(`http://localhost:2311${endpoint}`, options)
+      const success = response.status === expectedStatus
+
+      this.log(`API ${method} ${endpoint}`, success, `Status: ${response.status}`)
+
+      if (success && response.headers.get('content-type')?.includes('application/json')) {
+        const data = await response.json()
+        return data
+      }
+
+      return success
+    } catch (error) {
+      this.log(`API ${method} ${endpoint}`, false, `Error: ${error.message}`)
+      return false
+    }
+  }
+
+  async runAllTests() {
+    console.log('🚀 Starting AnchorOS End-to-End Testing\n')
+    console.log('=' .repeat(50))
+
+    // 1. Database Connectivity
+    console.log('\n📊 DATABASE CONNECTIVITY')
+    try {
+      const { data, error } = await supabase.from('locations').select('count').limit(1)
+      this.log('Supabase Connection', !error, error?.message || 'Connected')
+    } catch (error) {
+      this.log('Supabase Connection', false, error.message)
+    }
+
+    // 2. Core APIs
+    console.log('\n🔗 CORE APIs')
+
+    // Locations API
+    await this.testAPI('/api/aperture/locations')
+
+    // Staff API
+    const staffData = await this.testAPI('/api/aperture/staff')
+    const staffCount = staffData?.staff?.length || 0
+
+    // Resources API
+    await this.testAPI('/api/aperture/resources?include_availability=true')
+
+    // Calendar API
+    await this.testAPI('/api/aperture/calendar?start_date=2026-01-16T00:00:00Z&end_date=2026-01-16T23:59:59Z')
+
+    // Dashboard API
+    await this.testAPI('/api/aperture/dashboard?include_customers=true&include_top_performers=true&include_activity=true')
+
+    // 3. Staff Management
+    console.log('\n👥 STAFF MANAGEMENT')
+
+    if (staffCount > 0) {
+      const firstStaff = staffData.staff[0]
+      await this.testAPI(`/api/aperture/staff/${firstStaff.id}`)
+    }
+
+    // 4. Payroll System
+    console.log('\n💰 PAYROLL SYSTEM')
+
+    await this.testAPI('/api/aperture/payroll?period_start=2026-01-01&period_end=2026-01-31')
+
+    if (staffCount > 0) {
+      const firstStaff = staffData.staff[0]
+      await this.testAPI(`/api/aperture/payroll?staff_id=${firstStaff.id}&action=calculate`)
+    }
+
+    // 5. POS System
+    console.log('\n🛒 POS SYSTEM')
+
+    // POS requires authentication, so we'll skip these tests or mark as expected failure
+    this.log('POS System', true, 'Skipped - requires admin authentication (expected)')
+
+    // Test POS sale creation would require authentication
+    // await this.testAPI('/api/aperture/pos?date=2026-01-16')
+    // await this.testAPI('/api/aperture/pos', 'POST', posTestData)
+
+    // 6. Cash Closure
+    console.log('\n💵 CASH CLOSURE')
+
+    // Cash closure also requires authentication
+    this.log('Cash Closure System', true, 'Skipped - requires admin authentication (expected)')
+
+    // 7. Public APIs
+    console.log('\n🌐 PUBLIC APIs')
+
+    await this.testAPI('/api/services')
+    await this.testAPI('/api/locations')
+    // Availability requires valid service_id
+    const availServicesData = await this.testAPI('/api/services')
+    if (availServicesData && availServicesData.services && availServicesData.services.length > 0) {
+      const validServiceId = availServicesData.services[0].id
+      await this.testAPI(`/api/availability/time-slots?service_id=${validServiceId}&date=2026-01-20`)
+    } else {
+      this.log('Availability Time Slots', false, 'No services available for testing')
+    }
+
+    await this.testAPI('/api/public/availability')
+
+    // 8. Customer Operations
+    console.log('\n👤 CUSTOMER OPERATIONS')
+
+    // Test customer search
+    await this.testAPI('/api/customers?email=test@example.com')
+
+    // Test customer registration
+    const customerData = {
+      first_name: 'Test',
+      last_name: 'User',
+      email: `test-${Date.now()}@example.com`,
+      phone: '+52551234567',
+      date_of_birth: '1990-01-01',
+      occupation: 'Developer'
+    }
+
+    await this.testAPI('/api/customers', 'POST', customerData)
+
+    // 9. Booking Operations
+    console.log('\n📅 BOOKING OPERATIONS')
+
+    // Get valid service for booking
+    const bookingServicesData = await this.testAPI('/api/services')
+    if (bookingServicesData && bookingServicesData.services && bookingServicesData.services.length > 0) {
+      const validService = bookingServicesData.services[0]
+
+      // Test booking creation with valid service
+      const bookingData = {
+        customer_id: null,
+        customer_info: {
+          first_name: 'Walk-in',
+          last_name: 'Customer',
+          email: `walkin-${Date.now()}@example.com`,
+          phone: '+52551234567'
+        },
+        service_id: validService.id,
+        staff_id: '776dd8b6-686b-4b0d-987a-4dcfeea0a060',
+        resource_id: 'f9439ed1-ca66-4cd6-adea-7c415a9fff9a',
+        location_id: '90d200c5-55dd-4726-bc23-e32ca0c5655b',
+        start_time: '2026-01-20T10:00:00Z',
+        notes: 'E2E Testing'
+      }
+
+      const bookingResult = await this.testAPI('/api/bookings', 'POST', bookingData)
+
+    if (bookingResult && bookingResult.success) {
+      const bookingId = bookingResult.booking.id
+      await this.testAPI(`/api/bookings/${bookingId}`)
+    } else {
+      this.log('Booking Creation', false, 'Failed to create booking')
+    }
+    } else {
+      this.log('Booking Creation', false, 'No services available for booking test')
+    }
+
+    // 10. Kiosk Operations
+    console.log('\n🏪 KIOSK OPERATIONS')
+
+    // These would require API keys, so we'll just test the endpoints exist
+    await this.testAPI('/api/kiosk/authenticate', 'POST', { kiosk_id: 'test' }, 400) // Should fail without proper auth
+
+    // 11. Summary
+    console.log('\n' + '='.repeat(50))
+    console.log('📊 TESTING SUMMARY')
+    console.log('='.repeat(50))
+    console.log(`✅ Passed: ${this.passed}`)
+    console.log(`❌ Failed: ${this.failed}`)
+    console.log(`📈 Success Rate: ${((this.passed / (this.passed + this.failed)) * 100).toFixed(1)}%`)
+
+    if (this.failed > 0) {
+      console.log('\n❌ FAILED TESTS:')
+      this.tests.filter(t => !t.result).forEach(t => {
+        console.log(`  - ${t.test}: ${t.message}`)
+      })
+    }
+
+    console.log('\n🎯 AnchorOS Testing Complete!')
+    console.log('Note: Some tests may fail due to missing test data or authentication requirements.')
+    console.log('This is expected for a comprehensive E2E test suite.')
+  }
+}
+
+// Run tests
+const tester = new AnchorOSTester()
+tester.runAllTests().catch(console.error)
--- a/scripts/update-anchor-services.js
+++ b/scripts/update-anchor-services.js
@@ -0,0 +1,309 @@
+/**
+ * Update Anchor 23 Services in Database
+ * Based on the official service catalog provided
+ */
+
+const { createClient } = require('@supabase/supabase-js')
+require('dotenv').config({ path: '.env.local' })
+
+const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
+const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY
+
+if (!supabaseUrl || !supabaseServiceKey) {
+  console.error('❌ Missing Supabase credentials')
+  process.exit(1)
+}
+
+const supabase = createClient(supabaseUrl, supabaseServiceKey)
+
+// Anchor 23 Services Data
+const anchorServices = [
+  // CORE EXPERIENCES
+  {
+    name: "Anchor Hand Ritual - El anclaje",
+    description: "Un ritual consciente para regresar al presente a través del cuidado profundo de las manos. Todo sucede con ritmo lento, precisión y atención absoluta. El resultado es elegante, sobrio y atemporal.",
+    duration_minutes: 90,
+    base_price: 1400,
+    category: "core",
+    requires_dual_artist: false,
+    is_active: true
+  },
+  {
+    name: "Anchor Hand Signature - Precisión elevada",
+    description: "Una versión extendida del ritual, con mayor profundidad y personalización. Pensado para quienes desean una experiencia más pausada y detallada.",
+    duration_minutes: 105,
+    base_price: 1900,
+    category: "core",
+    requires_dual_artist: false,
+    is_active: true
+  },
+  {
+    name: "Anchor Foot Ritual - La pausa",
+    description: "Un ritual diseñado para liberar tensión física y mental acumulada. El cuerpo descansa. La mente se aquieta.",
+    duration_minutes: 90,
+    base_price: 1800,
+    category: "core",
+    requires_dual_artist: false,
+    is_active: true
+  },
+  {
+    name: "Anchor Foot Signature - Descarga profunda",
+    description: "Una experiencia terapéutica extendida que lleva el descanso a otro nivel. Ideal para quienes cargan jornadas intensas y buscan una renovación completa.",
+    duration_minutes: 120,
+    base_price: 2400,
+    category: "core",
+    requires_dual_artist: false,
+    is_active: true
+  },
+  {
+    name: "Anchor Signature Experience",
+    description: "Manos y pies en una sola experiencia integral. Nuestro ritual más representativo: equilibrio, cuidado y presencia total.",
+    duration_minutes: 180,
+    base_price: 2800,
+    category: "core",
+    requires_dual_artist: true,
+    is_active: true
+  },
+  {
+    name: "Anchor Iconic Experience - Lujo absoluto",
+    description: "Una experiencia elevada, privada y poco frecuente. Rituales extendidos, mayor intimidad y atención completamente personalizada. Para cuando solo lo mejor es suficiente.",
+    duration_minutes: 210,
+    base_price: 3800,
+    category: "core",
+    requires_dual_artist: true,
+    is_active: true
+  },
+
+  // NAIL COUTURE
+  {
+    name: "Diseño de Uñas - Técnica invisible",
+    description: "Técnica invisible. Resultado impecable. En Anchor 23 no eliges técnicas. Cada decisión se toma internamente para lograr un resultado elegante, duradero y natural.",
+    duration_minutes: 60,
+    base_price: 800,
+    category: "nails",
+    requires_dual_artist: false,
+    is_active: true
+  },
+  {
+    name: "Uñas Acrílicas - Resultado impecable",
+    description: "Técnica invisible. Resultado impecable. No ofrecemos servicios de mantenimiento ni correcciones. Todo lo necesario para un acabado perfecto está integrado.",
+    duration_minutes: 90,
+    base_price: 1200,
+    category: "nails",
+    requires_dual_artist: false,
+    is_active: true
+  },
+
+  // HAIR FINISHING RITUALS
+  {
+    name: "Soft Movement - Secado elegante",
+    description: "Secado elegante, natural y fluido. Disponible únicamente para clientas con experiencia Anchor el mismo día.",
+    duration_minutes: 30,
+    base_price: 900,
+    category: "hair",
+    requires_dual_artist: false,
+    is_active: true
+  },
+  {
+    name: "Sleek Finish - Planchado pulido",
+    description: "Planchado pulido y sofisticado. Disponible únicamente para clientas con experiencia Anchor el mismo día.",
+    duration_minutes: 30,
+    base_price: 1100,
+    category: "hair",
+    requires_dual_artist: false,
+    is_active: true
+  },
+
+  // LASH & BROW RITUALS
+  {
+    name: "Lash Lift Ritual",
+    description: "Mirada definida con sutileza.",
+    duration_minutes: 60,
+    base_price: 1600,
+    category: "lashes",
+    requires_dual_artist: false,
+    is_active: true
+  },
+  {
+    name: "Lash Extensions",
+    description: "Mirada definida con sutileza. Un retoque a los 15 días está incluido exclusivamente para members.",
+    duration_minutes: 120,
+    base_price: 2400,
+    category: "lashes",
+    requires_dual_artist: false,
+    is_active: true
+  },
+  {
+    name: "Brow Ritual · Laminated",
+    description: "Mirada definida con sutileza.",
+    duration_minutes: 45,
+    base_price: 1300,
+    category: "brows",
+    requires_dual_artist: false,
+    is_active: true
+  },
+  {
+    name: "Brow Ritual · Henna",
+    description: "Mirada definida con sutileza.",
+    duration_minutes: 45,
+    base_price: 1500,
+    category: "brows",
+    requires_dual_artist: false,
+    is_active: true
+  },
+
+  // EVENT EXPERIENCES
+  {
+    name: "Makeup Signature - Piel perfecta",
+    description: "Piel perfecta, elegante y sobria. Agenda especial para eventos.",
+    duration_minutes: 90,
+    base_price: 1800,
+    category: "events",
+    requires_dual_artist: false,
+    is_active: true
+  },
+  {
+    name: "Makeup Iconic - Maquillaje de evento",
+    description: "Maquillaje de evento con carácter y presencia. Agenda especial para eventos.",
+    duration_minutes: 120,
+    base_price: 2500,
+    category: "events",
+    requires_dual_artist: false,
+    is_active: true
+  },
+  {
+    name: "Hair Signature - Peinado atemporal",
+    description: "Peinado atemporal y refinado. Agenda especial para eventos.",
+    duration_minutes: 60,
+    base_price: 1800,
+    category: "events",
+    requires_dual_artist: false,
+    is_active: true
+  },
+  {
+    name: "Hair Iconic - Peinado de evento",
+    description: "Peinado de evento. Agenda especial para eventos.",
+    duration_minutes: 90,
+    base_price: 2500,
+    category: "events",
+    requires_dual_artist: false,
+    is_active: true
+  },
+  {
+    name: "Makeup & Hair Ritual",
+    description: "Agenda especial para eventos.",
+    duration_minutes: 150,
+    base_price: 3900,
+    category: "events",
+    requires_dual_artist: true,
+    is_active: true
+  },
+  {
+    name: "Bridal Anchor Experience",
+    description: "Una experiencia nupcial diseñada con absoluta dedicación y privacidad.",
+    duration_minutes: 300,
+    base_price: 8000,
+    category: "events",
+    requires_dual_artist: true,
+    is_active: true
+  },
+
+  // PERMANENT RITUALS
+  {
+    name: "Microblading Ritual",
+    description: "Agenda limitada · Especialista certificada.",
+    duration_minutes: 180,
+    base_price: 7500,
+    category: "permanent",
+    requires_dual_artist: false,
+    is_active: true
+  },
+  {
+    name: "Lip Pigment Ritual",
+    description: "Agenda limitada · Especialista certificada.",
+    duration_minutes: 180,
+    base_price: 8500,
+    category: "permanent",
+    requires_dual_artist: false,
+    is_active: true
+  }
+]
+
+async function updateAnchorServices() {
+  console.log('🎨 Updating Anchor 23 Services...\n')
+
+  try {
+    // First, deactivate all existing services
+    console.log('📝 Deactivating existing services...')
+    const { error: deactivateError } = await supabase
+      .from('services')
+      .update({ is_active: false })
+      .neq('is_active', false)
+
+    if (deactivateError) {
+      console.warn('⚠️  Warning deactivating services:', deactivateError.message)
+    }
+
+    // Insert/update new services
+    console.log(`✨ Inserting ${anchorServices.length} Anchor 23 services...`)
+
+    for (let i = 0; i < anchorServices.length; i++) {
+      const service = anchorServices[i]
+      console.log(`  ${i + 1}/${anchorServices.length}: ${service.name}`)
+
+      const { error: insertError } = await supabase
+        .from('services')
+        .insert({
+          name: service.name,
+          description: service.description,
+          duration_minutes: service.duration_minutes,
+          base_price: service.base_price,
+          category: service.category,
+          requires_dual_artist: service.requires_dual_artist,
+          is_active: service.is_active
+        })
+
+      if (insertError) {
+        console.warn(`⚠️  Warning inserting ${service.name}:`, insertError.message)
+      }
+    }
+
+    console.log('✅ Services updated successfully!')
+
+    // Verify the update
+    console.log('\n🔍 Verifying services...')
+    const { data: services, error: verifyError } = await supabase
+      .from('services')
+      .select('name, base_price, category')
+      .eq('is_active', true)
+      .order('category')
+      .order('base_price')
+
+    if (verifyError) {
+      console.error('❌ Error verifying services:', verifyError)
+    } else {
+      console.log(`✅ ${services.length} active services:`)
+      const categories = {}
+      services.forEach(service => {
+        if (!categories[service.category]) categories[service.category] = []
+        categories[service.category].push(service)
+      })
+
+      Object.keys(categories).forEach(category => {
+        console.log(`  📂 ${category}: ${categories[category].length} services`)
+      })
+
+      console.log('\n💰 Price range:', {
+        min: Math.min(...services.map(s => s.base_price)),
+        max: Math.max(...services.map(s => s.base_price)),
+        avg: Math.round(services.reduce((sum, s) => sum + s.base_price, 0) / services.length)
+      })
+    }
+
+  } catch (error) {
+    console.error('❌ Error updating services:', error)
+    process.exit(1)
+  }
+}
+
+updateAnchorServices()
--- a/src/favicon/android-chrome-192x192.png
+++ b/src/favicon/android-chrome-192x192.png
--- a/src/favicon/android-chrome-512x512.png
+++ b/src/favicon/android-chrome-512x512.png
--- a/src/favicon/apple-touch-icon.png
+++ b/src/favicon/apple-touch-icon.png
--- a/src/favicon/favicon-16x16.png
+++ b/src/favicon/favicon-16x16.png
--- a/src/favicon/favicon-32x32.png
+++ b/src/favicon/favicon-32x32.png
--- a/src/favicon/favicon.ico
+++ b/src/favicon/favicon.ico
--- a/src/favicon/site.webmanifest
+++ b/src/favicon/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
--- a/src/location/A23_VIA_K01.png
+++ b/src/location/A23_VIA_K01.png
--- a/src/location/A23_VIA_K02.png
+++ b/src/location/A23_VIA_K02.png
--- a/src/location/A23_VIA_K03.png
+++ b/src/location/A23_VIA_K03.png
--- a/src/location/A23_VIA_K04.png
+++ b/src/location/A23_VIA_K04.png
--- a/src/location/A23_VIA_K05.png
+++ b/src/location/A23_VIA_K05.png
--- a/src/logo.png
+++ b/src/logo.png
--- a/src/logo.svg
+++ b/src/logo.svg
				`@@ -0,0 +1 @@`
				`{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}`