# Art4Hotel — Sitio web público (art4hotel.com)

Landing pública que se alimenta del Hub. Captura leads y presenta productos.
Última actualización: 2026-05-31

## Infraestructura
- **Repo**: `github.com/Claudeandrefg/art4hotel` (rama `main`)
- **Hosting**: GitHub Pages → `art4hotel.com` (apex) + `www.art4hotel.com`
- **SSL**: Let's Encrypt automático (GitHub Pages). DNS gestionado en **Wix**.
  - Apex: 4 A records a GitHub Pages `185.199.108-111.153`
  - `www` CNAME → `claudeandrefg.github.io`
  - ⚠️ Wix NO deja cambiar nameservers (bloqueados a wixdns) → no se pudo migrar a Cloudflare sin transferir el dominio
- **Carpeta local**: `C:\Users\claud\Documents\Claude\Art 4 Hotel\Pagina Web\art4hotel\`

## Estructura del sitio
- `index.html` — landing (hero, trust strip, grid productos, proceso, wizard de cotización)
- `gracias.html` — página post-envío del formulario
- `productos.json` — datos de productos (generado por el sync)
- `Recursos/catalogo/` — fotos comprimidas (generadas por el sync)
- `Recursos/` — logos SVG, favicons, imágenes de marca
- `sync_catalogo.py` — script de sincronización Hub → sitio

## Formulario de leads
- Wizard de 4 pasos (negocio → productos → detalles → contacto)
- Enviado vía **FormSubmit** a `ventas@art4hotel.com` (sin API key, ya activado)
- Campos con `name=` legibles → llegan estructurados al correo
- `_next` redirige a `gracias.html`

## Catálogo dinámico Hub → Web
Flujo:
```
HUB                          sync_catalogo.py           SITIO (GitHub Pages)
producto 🌐 mostrar_en_web   descarga + comprime fotos   grid de productos base
ejemplo 🌐 web_ejemplo       (7MB → ~80KB, Pillow)       ↓ click
+ web_etiqueta (zona)        genera productos.json        modal storytelling
                             git commit + push            "Así se ve personalizado"
```

### Correr el sync
```
cd "C:\Users\claud\Documents\Claude\Art 4 Hotel\Pagina Web\art4hotel"
python sync_catalogo.py            # descarga + JSON + commit + push (publica)
python sync_catalogo.py --no-push  # solo local (para revisar antes)
```
Requiere estar en la red del Hub (192.168.50.46). Usa Pillow para comprimir.

### Qué publica
- Productos con `mostrar_en_web=1` Y con foto
- Por producto: nombre, descripcion_web, categoria, personalizaciones (tipos_trabajo), foto base, y **ejemplos** (pedidos con `web_ejemplo=1`)
- Ejemplos: foto + técnica + **web_etiqueta** (zona pública, NUNCA el cliente real → privacidad)

## Diseño / storytelling
- Grid de productos base; cards con foto + badge de ejemplos
- Click → modal: foto base + descripción + personalizaciones + galería "Así se ve personalizado" (ejemplos grandes, `object-fit:contain` para no recortar)
- Branding A4H (Outfit + Playfair + olive/sand/cream), responsive

## Workflow de desarrollo del sitio (preview local)
1. Servidor local: `python -m http.server 8899` en la carpeta del repo → `http://localhost:8899`
2. Editar `index.html` local → refrescar localhost (cambio instantáneo)
3. Cuando esté listo: `git add . && git commit && git push` → GitHub Pages publica en ~1 min
4. Nota: la extensión Claude-in-Chrome NO puede navegar a localhost ni art4hotel.com (dominios restringidos); el preview lo ve el usuario en su navegador.

## Pendientes web
- Filtros por uso (boda/empresa/tienda/hotel) — requiere atributo "uso" en producto
- Secciones por tipo de producto
- Foto base del modal recorta en cuadrado (hacer sin recorte)
- Analytics (Cloudflare Web Analytics o GA)
- Más productos curados + etiquetas de zona en ejemplos