RJjstore

CONTEXTO

Las tiendas de ropa de marca venden por foto en Instagram, sin una vitrina con cara de casa de moda que transmita deseo y exclusividad.

QUÉ SE HIZO

E-commerce de moda con estética de estudio de lujo: hero cinematográfico, lookbook con scroll horizontal, iluminación dinámica siguiendo el cursor, vista rápida del producto, carrito persistente y pedido cerrado directo en WhatsApp, con tema Arena y Blanco alternable.

EDITORIAL DE LUJO · CHECKOUT EN WHATSAPP

SOLUCIONES

• Carrito por variante

  Clave compuesta id+talla en el Context, persistida en localStorage con guarda de hidratación anti-sobrescritura.

• WhatsApp sin fricción

  Talla obligatoria para el carrito, pero el link de WhatsApp nunca se traba: sin selección, agrega "a convenir".

• Lookbook en 3 capas

  Scroll fijo con useScroll/useTransform moviendo riel, imagen y leyenda en direcciones opuestas.

• Tema sin flash

  Script inline bloqueante aplica data-theme del localStorage antes de la hidratación de React.

DETALLE TÉCNICO

• 01Next.js 14 (App Router) sin ninguna dependencia pesada de e-commerce: cero carrito de terceros, cero CMS, cero state manager externo. Solo f…+

  Next.js 14 (App Router) sin ninguna dependencia pesada de e-commerce: cero carrito de terceros, cero CMS, cero state manager externo. Solo framer-motion, Lenis (smooth scroll) y next/font (Cormorant Garamond para los títulos editoriales, Inter para el resto). El README documenta su propio presupuesto de rendimiento: First Load JS ≈ 156 kB en la home, con todas las animaciones resueltas en CSS y Framer Motion en vez de bibliotecas de canvas o WebGL. Es la decisión correcta para un proyecto donde el producto es la fotografía, no un efecto 3D.

• 02El carrito es un Context puro (CartProvider) guardando { id, size, qty }[]. La clave de identidad de una línea es el par producto y talla, n…+

  El carrito es un Context puro (CartProvider) guardando { id, size, qty }[]. La clave de identidad de una línea es el par producto y talla, no solo el producto, así que la misma prenda en P y G se vuelve dos líneas independientes. La persistencia en localStorage usa un useRef como guarda de hidratación: el primer useEffect lee el storage y puebla el state, y solo un segundo useEffect, que revisa la ref, vuelve a escribir. Sin esa guarda, el efecto de escritura se dispararía en el primer render con array vacío y borraría el carrito guardado antes incluso de leerlo.

• 03La talla es obligatoria antes de cualquier conversión. El ProductDetail mantiene un ensureSize() que bloquea el "Agregar a la bolsa" y encie…+

  La talla es obligatoria antes de cualquier conversión. El ProductDetail mantiene un ensureSize() que bloquea el "Agregar a la bolsa" y enciende un aviso inline si no se eligió nada, pero el botón de WhatsApp nunca queda deshabilitado: sin talla, arma el mensaje con "a convenir" en su lugar, para no perder el lead por fricción. En el carrito completo, orderMessage() agrega todas las líneas en un único texto formateado (producto, marca, talla, subtotal, total en negrita markdown de WhatsApp) y abre el wa.me con encodeURIComponent. Todo el flujo de conversión termina fuera de la app, sin backend y sin gateway de pago.

• 04La estética "editorial de lujo" se construye en capas de motion coordinadas, no en una única lib de efectos. El LookbookScroll fija la secci…+

  La estética "editorial de lujo" se construye en capas de motion coordinadas, no en una única lib de efectos. El LookbookScroll fija la sección (position: sticky) y usa useScroll y useTransform de Framer Motion para mapear el progreso de scroll en tres transforms independientes: el riel horizontal se desliza en un sentido, la imagen dentro de cada card se contra-desliza en otro (scale-125 más imgX) y la leyenda se mueve en un tercero, creando parallax multicapa solo con CSS transforms. El Spotlight (luz que sigue el cursor en soft-light) está implementado con useMotionValue y useSpring, y se apaga solo vía matchMedia('(hover: hover) and (pointer: fine)') y useReducedMotion. Es lujo visual que no penaliza mobile ni accesibilidad. El toggle de tema entre Arena/Espresso y Blanco evita el flash de tema equivocado con un script inline y bloqueante en el head que lee el localStorage y aplica data-theme antes de la hidratación de React. Y los detalles "neo-esqueumórficos" (relieve sutil en los swatches de color, profundidad en el botón sólido) viven aislados en un único archivo de tokens (lib/theme.ts) para no filtrarse al resto de la UI, que es deliberadamente flat.

PANTALLAS

RESULTADO

E-commerce de moda con estética de estudio de lujo: hero cinematográfico, lookbook con scroll horizontal, iluminación dinámica siguiendo el cursor, vista rápida del producto, carrito persistente y pedido cerrado directo en WhatsApp, con tema Arena y Blanco alternable.

QUIERO ALGO PARECIDO ↗ABRIR SITIO ↗