AnchorOS/ASSETS_PLAN.md

🖼️ 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:

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:

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:

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. Nuevos Componentes (@src/components/)

Ubicación sugerida: components/

Componentes agregados:

• animated-logo.tsx - Logo SVG animado con fade-in
• rolling-phrases.tsx - Frases rotativas para hero sections
• formbricks-provider.tsx - Provider para encuestas Formbricks
• webhook-form.tsx - Formulario unificado para webhooks
• app-wrapper.tsx - Wrapper de aplicación con contexto
• loading-screen.tsx - Pantalla de carga con animación
• pattern-overlay.tsx - Overlay de patrones decorativos
• responsive-nav.tsx - Navegación responsiva con menú móvil

Iconos adicionales:

• Diamond (check, success states)
• Crown (VIP tier)

Colores actualizados:

• --charcoal-brown: #3f362e (marrón oscuro elegante)
• --deep-earth: #6f5e4f (marrón medio)
• --mocha-taupe: #b8a89a (beige cálido)

9. Logo SVG Original (@src/logo.svg)

Ruta: src/logo.svg

Propiedades:

<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

---

📋 21. Formbricks Integration

Ubicación: components/formbricks-provider.tsx

Configuración:

• Environment ID para surveys
• API Host URL
• Device detection (mobile/desktop)
• Route change tracking

Variables de entorno:

NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID=your-id
NEXT_PUBLIC_FORMBRICKS_API_HOST=https://app.formbricks.com

Uso previsto:

• Encuestas post-experiencia
• Feedback de clientes
• NPS (Net Promoter Score)
• Estudios de satisfacción

---

📋 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
Crear componente animated-logo.tsx	completed	alta
Crear componente rolling-phrases.tsx	completed	alta
Crear componente webhook-form.tsx	completed	alta
Crear componente formbricks-provider.tsx	completed	media
Crear componente responsive-nav.tsx	completed	alta
Actualizar colores a #3E352E	completed	alta
Agregar campo motivo en contacto	completed	alta
Agregar campos estado/ciudad/socios en franchise	pending	alta
Agregar check experiencia belleza en franchise	pending	alta
Actualizar info franchise a $100k	completed	alta
Agregar link Contacto en nav/footer	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

Colores de Botones

• Botón primario: #3E352E (Marrón elegante) - reemplaza --deep-earth
• Botón secundario: Gradiente --bone-white → --soft-cream
• Tarjetas featured: #3E352E (Marrón elegante)
• Hover effects: #3E352E/90 (90% opacidad)

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.