marcogll/AnchorOS
1
0
Fork 0
mirror of https://github.com/marcogll/AnchorOS.git synced 2026-03-15 13:24:27 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
28e4a73cdf305f228c063696c81c6a287bf59b7f
AnchorOS/ASSETS_PLAN.md

457 lines
14 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 🖼️ 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. 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:**
```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
---
## 📋 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:**
```bash
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.
Reference in New Issue View Git Blame Copy Permalink