`, `<meta name="description">` y URL canónica. El copy está enriquecido con keywords en español para apuntar a la intención de búsqueda del sur de Florida para extensiones de pestañas, microblading, laminado de cejas y lip blush. ## Arquitectura Técnica ### Stack Frontend - **Vite 8 + React 19** – HMR ultrarrápido en desarrollo; el output de build de producción va directamente a Cloudflare Pages. - **Tailwind CSS v4**: Estilos utility-first con una capa de design token personalizada (`primary-dark`, `porcelain`, `gold`, `taupe`) impulsando la paleta de marca dark-first. - **react-i18next + i18next-http-backend**: Carga lazy de namespaces de traducción desde `/public/locales/{lang}/translation.json`, detectando el idioma del navegador en la primera visita y persistiendo la preferencia en localStorage. - **react-router-dom v7**: Routing SPA con un wrapper `Layout` compartido (navbar + drawer de reservas + botones de contacto flotantes) y una ruta independiente `/links` fuera del chrome. - **yet-another-react-lightbox**: Lightbox completo para la cuadrícula de portfolio con navegación por teclado y color de fondo personalizado. - **lucide-react**: Set de iconos consistentes usados a través de la navegación, tarjetas de cursos, certificaciones y controles interactivos. ### Medios y CDN Todas las imágenes, videos y pares de antes/después se almacenan en un **bucket de Cloudflare R2** (`glambygrisel`) y se sirven desde `assets.glambygrisel.com`. Una única constante `ASSETS_BASE_URL` en `src/config/assets.js` es el único lugar que necesita actualización para cambiar orígenes de CDN en toda la app. ### Cloudflare Pages + Workers - **Pages** aloja el build estático de Vite con entrega edge global. El `vite.config.js` usa `@cloudflare/vite-plugin` para bridge Workers bindings (R2, secrets) durante desarrollo local vía `wrangler`. - **Functions** (`/functions/api/`) exponen Workers de Cloudflare con tipos para listado de galería, proxy de token de Instagram y relay de formulario de contacto, manteniendo todas las credenciales en secretos de Cloudflare, nunca en el bundle del cliente. - Un `vite.config.js` con `historyApiFallback` (dev) y la regla de redirección SPA incorporada de Pages manejan deep-link refreshes sin 404s. ### Hooks y Patrones Personalizados | Hook | Propósito | | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- | | `useScrollReveal(delay)` | Adjunta un `IntersectionObserver` a un ref y alterna una clase CSS para animaciones de revelado fade-up, con delay de stagger configurable. | | `useBookingDrawer` | Patrón publish/subscribe exponiendo `openBookingDrawer()` globalmente, no requiere provider de contexto. | | `usePageTitle` | Establece `document.title` por ruta en un formato consistente `Página, Glam by Grisel`. | ## Desafíos y Soluciones **SPA sin hidratación con soporte de deep-link** Cloudflare Pages no sirve un archivo HTML para rutas desconocidas por defecto. Se solucionó agregando un archivo `_redirects` mapeando `/* → /index.html 200` junto con la opción `historyApiFallback` del dev server de Vite, asegurando que los refreshes en cualquier ruta funcionen en ambos entornos. **API de Galería con R2 en desarrollo local** La galería obtiene datos de `/api/gallery`, que es un Cloudflare Worker con un binding de R2. En desarrollo local, el Worker no está corriendo, así que el fetch está envuelto en un try/catch que silenciosamente hace fallback a un estado vacío, la interfaz muestra grácilmente un placeholder en lugar de fallar. **Refresco de token de Instagram** Los tokens de larga duración de Instagram expiran después de 60 días. Un cron job programado de Cloudflare Worker refresca el token semanalmente y almacena el nuevo valor en un namespace KV, así el feed de producción nunca se estanca sin intervención manual. **Bloqueo de scroll del héroe en móvil** En pantallas pequeñas el héroe está fijo al viewport y el overflow de la página está oculto para prevenir que el contenido debajo haga scroll en vista prematura. Un cleanup de `useEffect` restaura el comportamiento de scroll normal cuando el usuario navega fuera. ## Resultados e Impacto La reconstrucción entrega una superficie de entrega significativamente más ligera: sin runtime Node.js, sin cold starts serverless y sin overhead de framework Next.js, solo un shell HTML pre-renderizado hidratado por React en el edge. La artista ahora tiene: - **Un flujo de reserva listo para conversión** alcanzable desde cada sección en un toque o clic. - **Un feed de Instagram autosostenible** que permanece activo sin refrescos manuales de token. - **Una capa de contenido bilingüe** que sirve a la clientela de habla inglesa y española de Miami sin duplicar páginas. - **Un pipeline de medios respaldado por CDN** en R2 que hace trivial subir nuevas imágenes de galería o pares de antes/después sin tocar el código. - **Un catálogo de cursos** que soporta consultas de inscripción vía WhatsApp, reduciendo fricción para estudiantes potenciales. ## Sitio en Vivo [glambygrisel.com](https://glambygrisel.com/) </article></body></html>

## Descripción General Este proyecto es una reconstrucción completa de **Glam by Grisel**, el buque insignia digital de una artista de maquillaje permanente y pestañas en Miami con más de 5 años de experiencia y cientos de clientes felices. El sitio original fue construido en Next.js; esta versión migra todo a un **SPA de Vite + React 19** servido desde **Cloudflare Pages**, eliminando la sobrecarga de cold-start y simplificando el pipeline de entrega sin sacrificar la riqueza que hace destacar la marca. Cada superficie principal fue rediseñada: el héroe inmersivo, la biblioteca de servicios, la galería de antes y después, el catálogo de cursos, la tira de Instagram, el drawer de reservas y el FAQ, todo reconstruido desde cero con Tailwind CSS v4, hooks de scroll-reveal personalizados y una capa de contenido bilingüe (inglés/español) impulsada por **react-i18next**. ## Características Principales ### Héroe Inmersivo con Imágenes Cinematográficas El héroe de pantalla completa auto-cicla a través de fotografía de belleza curada servida directamente desde **Cloudflare R2** vía un dominio CDN personalizado (`assets.glambygrisel.com`). En móvil el héroe se bloquea al viewport para prevenir scroll jank, mientras que en desktop transiciona sin problemas al resto del contenido de la página. ### Biblioteca de Servicios Adaptativa La página `/services` renderiza todas las categorías de servicio, cejas, pestañas y labios, en un layout de pestañas sticky side-scrolling en móvil y un desglose multi-columna completo en desktop. Cada tarjeta de servicio muestra su nombre, descripción, precio y un CTA de reserva directa integrado con el drawer de reservas global. ### Galería de Antes y Después con Sliders y Lightbox Un componente `BeforeAfterSlider` de arrastre para revelar maneja 19 pares de transformaciones reales de clientes (6 cejas, 8 pestañas, 5 labios). En móvil, los pares hacen snap-scroll horizontal con un indicador de contador; en desktop se renderizan en un carrusel paginado de 3 columnas. Una cuadrícula de portfolio masonry separada consume imágenes obtenidas del Worker de Cloudflare `/api/gallery`, con filtros de categoría (all / eyebrow / lashes / lips), skeleton loaders y un overlay de **yet-another-react-lightbox** a pantalla completa. ### Catálogo de Cursos Tres programas de entrenamiento de belleza profesional se renderizan como tarjetas estructuradas, cada una con badges meta (duración, nivel), badges de características destacadas, un checklist de dos columnas "Qué Aprenderás / Qué Incluye" y un CTA de inscripción por WhatsApp. Animaciones de scroll-reveal escalonadas dan a la página una sensación editorial premium. ### Feed de Instagram en Vivo vía Cloudflare Worker Un Worker dedicado de Cloudflare hace proxy de la Instagram Graph API, refresca tokens automáticamente y expone un endpoint JSON limpio consumido por la página `/instagram` y el componente `InstagramStrip` de la página de inicio. Esto mantiene las credenciales de API del lado del servidor y elimina la fricción de CORS. ### Drawer de Reservas Persistente Un drawer de reservas global, disparado desde la barra de navegación, el héroe, cualquier tira de CTA y la página about, superpone el viewport completo con un iframe a la herramienta de programación preferida por la artista. El estado se maneja vía un hook pub/sub ligero (`useBookingDrawer`) que cualquier componente puede llamar sin prop drilling. ### About y Certificaciones La página `/about` empareja una imagen de retrato (servida desde R2) con un layout de biografía de dos columnas, una barra de tres estadísticas (certificada / años de experiencia / clientes felices) y una cuadrícula de checklist de certificaciones de dos columnas. Una sección de CTA dedicada en la parte inferior dirige a los usuarios directamente al drawer de reservas. ### FAQ y Testimonios Una sección de FAQ estilo acordeón (disponible como módulo compacto de página de inicio o versión de página completa) se empareja con un carrusel de testimonios que avanza automáticamente en desktop y soporta swipe táctil en móvil. ### SEO por Página Cada ruta renderiza un componente `` que inyecta un ``, `<meta name="description">` y URL canónica. El copy está enriquecido con keywords en español para apuntar a la intención de búsqueda del sur de Florida para extensiones de pestañas, microblading, laminado de cejas y lip blush. ## Arquitectura Técnica ### Stack Frontend - **Vite 8 + React 19** – HMR ultrarrápido en desarrollo; el output de build de producción va directamente a Cloudflare Pages. - **Tailwind CSS v4**: Estilos utility-first con una capa de design token personalizada (`primary-dark`, `porcelain`, `gold`, `taupe`) impulsando la paleta de marca dark-first. - **react-i18next + i18next-http-backend**: Carga lazy de namespaces de traducción desde `/public/locales/{lang}/translation.json`, detectando el idioma del navegador en la primera visita y persistiendo la preferencia en localStorage. - **react-router-dom v7**: Routing SPA con un wrapper `Layout` compartido (navbar + drawer de reservas + botones de contacto flotantes) y una ruta independiente `/links` fuera del chrome. - **yet-another-react-lightbox**: Lightbox completo para la cuadrícula de portfolio con navegación por teclado y color de fondo personalizado. - **lucide-react**: Set de iconos consistentes usados a través de la navegación, tarjetas de cursos, certificaciones y controles interactivos. ### Medios y CDN Todas las imágenes, videos y pares de antes/después se almacenan en un **bucket de Cloudflare R2** (`glambygrisel`) y se sirven desde `assets.glambygrisel.com`. Una única constante `ASSETS_BASE_URL` en `src/config/assets.js` es el único lugar que necesita actualización para cambiar orígenes de CDN en toda la app. ### Cloudflare Pages + Workers - **Pages** aloja el build estático de Vite con entrega edge global. El `vite.config.js` usa `@cloudflare/vite-plugin` para bridge Workers bindings (R2, secrets) durante desarrollo local vía `wrangler`. - **Functions** (`/functions/api/`) exponen Workers de Cloudflare con tipos para listado de galería, proxy de token de Instagram y relay de formulario de contacto, manteniendo todas las credenciales en secretos de Cloudflare, nunca en el bundle del cliente. - Un `vite.config.js` con `historyApiFallback` (dev) y la regla de redirección SPA incorporada de Pages manejan deep-link refreshes sin 404s. ### Hooks y Patrones Personalizados | Hook | Propósito | | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- | | `useScrollReveal(delay)` | Adjunta un `IntersectionObserver` a un ref y alterna una clase CSS para animaciones de revelado fade-up, con delay de stagger configurable. | | `useBookingDrawer` | Patrón publish/subscribe exponiendo `openBookingDrawer()` globalmente, no requiere provider de contexto. | | `usePageTitle` | Establece `document.title` por ruta en un formato consistente `Página, Glam by Grisel`. | ## Desafíos y Soluciones **SPA sin hidratación con soporte de deep-link** Cloudflare Pages no sirve un archivo HTML para rutas desconocidas por defecto. Se solucionó agregando un archivo `_redirects` mapeando `/* → /index.html 200` junto con la opción `historyApiFallback` del dev server de Vite, asegurando que los refreshes en cualquier ruta funcionen en ambos entornos. **API de Galería con R2 en desarrollo local** La galería obtiene datos de `/api/gallery`, que es un Cloudflare Worker con un binding de R2. En desarrollo local, el Worker no está corriendo, así que el fetch está envuelto en un try/catch que silenciosamente hace fallback a un estado vacío, la interfaz muestra grácilmente un placeholder en lugar de fallar. **Refresco de token de Instagram** Los tokens de larga duración de Instagram expiran después de 60 días. Un cron job programado de Cloudflare Worker refresca el token semanalmente y almacena el nuevo valor en un namespace KV, así el feed de producción nunca se estanca sin intervención manual. **Bloqueo de scroll del héroe en móvil** En pantallas pequeñas el héroe está fijo al viewport y el overflow de la página está oculto para prevenir que el contenido debajo haga scroll en vista prematura. Un cleanup de `useEffect` restaura el comportamiento de scroll normal cuando el usuario navega fuera. ## Resultados e Impacto La reconstrucción entrega una superficie de entrega significativamente más ligera: sin runtime Node.js, sin cold starts serverless y sin overhead de framework Next.js, solo un shell HTML pre-renderizado hidratado por React en el edge. La artista ahora tiene: - **Un flujo de reserva listo para conversión** alcanzable desde cada sección en un toque o clic. - **Un feed de Instagram autosostenible** que permanece activo sin refrescos manuales de token. - **Una capa de contenido bilingüe** que sirve a la clientela de habla inglesa y española de Miami sin duplicar páginas. - **Un pipeline de medios respaldado por CDN** en R2 que hace trivial subir nuevas imágenes de galería o pares de antes/después sin tocar el código. - **Un catálogo de cursos** que soporta consultas de inscripción vía WhatsApp, reduciendo fricción para estudiantes potenciales. ## Sitio en Vivo [glambygrisel.com](https://glambygrisel.com/) </article></body></html>