Dettai · Sistema de componentes
Catálogo de componentes
para la página de boutique
Todo lo que arma la tienda de una marca dentro de Dettai. Cada bloque se auto-puebla desde “Mi Marca” vía GET /storefront/boutiques/:slug/brand — la misma página para todas las marcas, sin tocar Framer cuando una boutique edita su perfil. Esta vista muestra los datos de la boutique demo « marca-demo-lumila ».
10 secciones
1 request · /brand
Datos en vivo en preview
marca-demo-lumila
En esta página
SECCIONES
ÁTOMOS
Nivel 1 · 01–10 — boutique completa
A1–A7 · marca: logo · nombre · esencia · redes
Tienda · 11–13 — grilla + tienda
A8–A14 · galería · reel · FAQ · CTA · encabezado
Compuestos: se arman con átomos
A15–A20 · cada sección como átomo suelto
Cada sección tiene su átomo equivalente
Legacy · 6 monolitos — no usar
En cada sección — Datos: de dónde salen · Requiere: qué cargar en Mi Marca para que se vea · Configura: los props clave en los Property Controls de Framer.
Nivel 1 · Secciones
Secciones listas
Bloques que arman la página de boutique de corrido. Cada uno se auto-puebla desde “Mi Marca”; varios se componen por dentro con los átomos del Nivel 2.
01
Template de marca
NavBoutique // check
Barra superior con el wordmark DETTAI, los links de navegación y la identidad de la marca a la derecha. Es una de las dos piezas que NUNCA desaparecen: sin datos degrada a “DETTAI + navegación”.
Datos
GET /storefront/boutiques/:slug/brand → logos, boutiqueName
Requiere
boutiqueSlug. Logo y nombre de la marca (opcionales) se cargan en Mi Marca.
Configura
Tema: Transparente (flota sobre el hero, tinta blanca) o Sólido · Fijo: sticky que pasa a vidrio al scrollear · Logo Dettai (imagen) · Links de nav (hasta 6).
En esta vista
Lo puse en Sólido y sin fijar para que no flote sobre toda la página.
▾ Vista en vivo · datos de marca-demo-lumila
02
Template de marca
FotoGiroBoutique // check
Portada full-bleed: la foto del hero (es el LCP de la página) con un overlay para legibilidad, un chip con el logo de la marca, la línea de esencia (ELEGANCIA · DECORACIÓN · DISEÑO), el título H1 con énfasis en serif itálica, y la fila de redes sociales.
Datos
/brand → hero.imageUrl, hero.title, essence[], logos, social
Requiere
boutiqueSlug + foto de portada y título en Mi Marca (degrada pieza por pieza si faltan).
Configura
Altura: Completa / Alta / Media (100 / 85 / 70 svh) · Overlay 0–0.6 · Tagline (esencia) on/off · Redes on/off.
Estado
Sin foto → fondo con el color de la marca. Junto con el Header, nunca colapsa.
▾ Vista en vivo · datos de marca-demo-lumila
03
Template de marca
ReelsBoutique // check
Ticker horizontal de reels de Instagram y TikTok (cards verticales 9:16). En desktop hace marquee automático que se pausa al hover; en táctil o con reduced-motion es una fila con scroll-snap. Cada card lleva la barra de plataforma con el handle de la marca.
Datos
/brand → reels[] (oEmbed o portada manual)
Requiere
Reels cargados en Mi Marca (URLs de IG / TikTok).
Configura
Modo: Auto / Marquee / Fija · Altura card 280–560 · Velocidad 10–120 px/s · Gap · Pausar en hover · Bordes difuminados.
Estado
Sin reels → la sección desaparece (en el canvas muestra un hint con el slug).
▾ Vista en vivo · datos de marca-demo-lumila
04
Template de marca
ManifiestoBoutique // check
Bloque editorial: una cita o manifiesto grande sobre un fondo de marca, con palabras de énfasis en color acento. Centrado y con aire para respirar entre secciones.
Datos
/brand → manifesto (texto con *énfasis*), colors.primary, colors.secondary
Requiere
El manifiesto escrito en Mi Marca.
Configura
Colores de marca on/off · Fondo y Énfasis (solo si off) · Ancho máx. del texto 560–1400.
Estado
Sin manifiesto → la sección desaparece.
▾ Vista en vivo · datos de marca-demo-lumila
05
Template de marca
GaleriaGridBoutique // check
Galería de fotos de la marca en mosaico bento o grid uniforme, con lightbox (zoom, flechas, swipe, Escape y focus trap). Lleva un encabezado editorial opcional.
Datos
/brand → gallery[]
Requiere
Imágenes de galería cargadas en Mi Marca.
Configura
Título / Énfasis / Subtítulo (header opcional) · Diseño: Mosaico / Uniforme · Máx. imágenes 1–24 · Gap · Lightbox on/off.
Estado
Sin imágenes → la sección desaparece.
▾ Vista en vivo · datos de marca-demo-lumila
06
Template de marca
VideoMarcaBoutique // check
Reproductor con facade ligero para YouTube, Vimeo o mp4: muestra un póster y solo carga el iframe del video al hacer click (mejor performance). El póster sale de la galería o del hero si no subes uno propio.
Datos
/brand → video (url + proveedor); póster de gallery[0] o hero
Requiere
URL de video en Mi Marca.
Configura
Título / Énfasis / Subtítulo · Aspecto: 16:9 / 21:9 / 1:1 · Póster personalizado · Modo ambiente (solo mp4: mudo en loop, sin facade).
Estado
Sin video → la sección desaparece.
▾ Vista en vivo · datos de marca-demo-lumila
07
Template de marca
FaqFotoBoutique // check
Acordeón de preguntas frecuentes sobre una foto con overlay. Abrir una pregunta cierra la anterior (configurable). Lleva chip superior, título y palabra de énfasis en serif itálica.
Datos
/brand → faq.items[], faq.image
Requiere
Preguntas y respuestas cargadas en Mi Marca.
Configura
Chip · Título + Énfasis · Imagen fallback · Overlay 0–0.8 · Ancho máximo 480–1000 · Abrir múltiples on/off.
Estado
Sin preguntas → la sección desaparece.
▾ Vista en vivo · datos de marca-demo-lumila
08
Template de marca
CtaFotoBoutique // check
Cierre de la página: un llamado a la acción a pantalla completa sobre una foto (en blanco y negro por default, fiel al mock), con título de énfasis y botón. Es la última sección antes del footer.
Datos
/brand → cta.title (*énfasis*), cta.image, cta.button
Requiere
El CTA configurado en Mi Marca.
Configura
Escala de grises on/off · Imagen fallback · Overlay 0–0.8 · Alineación: Centro / Izquierda · Ancho máx. texto 560–1200.
Estado
Sin CTA → la sección desaparece.
▾ Vista en vivo · datos de marca-demo-lumila
09
La tienda de la boutique
GrillaBoutiqueDettai // check
La tienda dentro de la boutique. A diferencia del marketplace, aquí el sidebar se construye por boutique desde el backend: árbol de categorías PROPIO del tenant + filtros dinámicos derivados de su schema de productos. Incluye búsqueda, orden, chips y “ver más”. Sin encabezado de marca (vive dentro de la página de la boutique).
Datos
GET /config (árbol + filtros) · /productos (cards) · /facetas (counts) — 3 fetch en paralelo
Requiere
boutiqueSlug + catálogo de productos publicado de la boutique.
Configura
Slug desde · Ruta detalle (/producto) · Solo destacados · Por página 4–60 · Ancho mín. card · Gap · Curaduría en card (off) · Debug.
URL
Los filtros del visitante viven en la URL: ?categoria, ?f=clave:valor, ?precioMin/Max, ?q, ?sort.
▾ Vista en vivo · datos de marca-demo-lumila
10
Primitivas internas
TextoEnfasis · IconosSociales
Piezas internas que usan los componentes de arriba. No se colocan sueltas en la página (no tienen Property Controls): se documentan aquí con un ejemplo.
TextoEnfasis
Parsea el markup *énfasis* del backend y lo rinde inline, heredando tamaño y color del texto que lo rodea.
Diseño que
enamora
Hecho a
mano
Variante serif (Hero · FAQ · CTA) · variante color (Manifiesto). Tolerante: un asterisco sin pareja vuelve a texto plano.
IconosSociales
Fila de iconos SVG de redes con área táctil ≥ 44px. La usa el Hero y la barra de plataforma de cada reel.
TikTok
YouTube
redesDe(brand) aplana social.instagram / tiktok / youtube / facebook / linkedin + contact.whatsapp → wa.me, en orden estable.
Cómo usarlos en una boutique real
Crea una página dinámica /boutique/:slug, pon en cada componente “Slug desde = Auto” (o Manual con el slug del CMS) y publica. Todo el contenido sale de “Mi Marca” de cada boutique — la misma página sirve a todas las marcas. Recuerda verificar en preview publicado: los datos en vivo y el “1 solo request a /brand” se ven ahí, no en el canvas.
Fuera de boutique
Componentes de tienda
Piezas del home/marketplace (/tienda), no de la boutique: carruseles y grilla con auto-relleno cross-tenant. Aquí solo de referencia.
11
Componente de tienda /tienda
CarruselProductosDettai // nuevos ingresos // check
Carrusel horizontal que se expande a la derecha (flechas en desktop, swipe en móvil; máx 10 productos). Por defecto muestra los ingresos más recientes; con el relleno automático casi nunca queda vacío.
Datos
GET /storefront/home/componentes/tienda-nuevos-ingresos → cards (curados + auto-relleno)
Default
Relleno automático: Nuevos ingresos (los más recientes). El admin puede fijar/ordenar productos en Admin → Página web Dettai; el resto se completa.
Configura
Ancho card, Gap, Texto de card (claro/oscuro), Color título (sigue el tema), Curaduría en card.
▾ Vista en vivo · auto-relleno cross-tenant del marketplace
Nuevos ingresos
12
Componente de tienda /tienda
CarruselProductosDettai // tus favoritos // check
GET /storefront/home/componentes/tienda-favoritos → cards (curados + auto-relleno)
Default
Relleno automático: Más elegidos (destacados). El admin puede fijar/ordenar productos; el resto se completa.
Configura
Componente = “Tienda — Favoritos”. Ancho card, Gap, Texto de card (claro/oscuro), Color título (sigue el tema).
▾ Vista en vivo · auto-relleno cross-tenant del marketplace
Tus favoritos
13
Componente de tienda /tienda
SeccionProductosDettai // grid de tiend //check
Grilla uniforme (reusa el componente del home con la key de tienda). Por defecto muestra los más vendidos del marketplace.
Datos
GET /storefront/home/componentes/tienda-grid → cards (curados + auto-relleno)
Default
Relleno automático: Más vendidos (ranking real de ventas + fallback a destacados → novedad cuando hay pocas ventas).
Configura
Componente = “Personalizada…” + Key = tienda-grid. Ancho mín. card, Gap, Texto de card (claro/oscuro).
▾ Vista en vivo · auto-relleno cross-tenant del marketplace
Más vendidos
Nivel 2 · piezas sueltas
Átomos
Una pieza por variable de “Mi Marca”: arrástralas por separado para componer cualquier sección con control total. Todas comparten el mismo y único request a /brand; los compuestos del Nivel 1 se arman con estas.
A1
Átomo · logos
LogoBoutique
El logo de la marca como pieza suelta: elige claro / oscuro / auto según el fondo, opción de chip glass, y cae al nombre en serif itálica si no hay logo cargado.
Datos
GET /brand → logos.dark · logos.light
Requiere
Mi Marca → Logos (sube el claro y el oscuro).
Configura
Variante (auto/claro/oscuro) · Forzar tinta · Altura · Alineación · Chip glass · Fallback al nombre.
▾ Vista en vivo · marca-demo-lumila
A2
Átomo · boutiqueName
NombreBoutique
El nombre de la marca como wordmark de texto (serif itálica o display), para encabezados o footers donde no haya logo.
Datos
GET /brand → boutiqueName
Requiere
Mi Marca → Nombre de la boutique.
Configura
Variante (serif/display) · Tamaño (s..xl) · Alineación · Tinta.
▾ Vista en vivo · marca-demo-lumila
A3
Átomo · hero.title · la bienvenida
TituloBoutique
El título editorial del hero (H1) con soporte de *énfasis* en serif itálica. La frase de bienvenida; pensado para ir sobre FotoGiroBoutique.
Datos
GET /brand → hero.title (markup *énfasis*)
Requiere
Mi Marca → Título del hero.
Configura
Nivel (h1..h3) · Tamaño · Alineación · Tinta · Ancho máx. de texto.
▾ Vista en vivo · marca-demo-lumila
A4
Átomo · essence[] · las tres palabras
EssenceBoutique
Las palabras de esencia (hasta 3) como una línea o lista: ELEGANCIA | DECORACIÓN | DISEÑO. El tagline que resume a la marca.
Datos
GET /brand → essence[] (≤ 3)
Requiere
Mi Marca → Palabras de esencia.
Configura
Separador · Orientación · Alineación · Mayúsculas · Tamaño · Tracking · Máx. frases.
▾ Vista en vivo · marca-demo-lumila
A5
Átomo · essence[i] · NUEVO
EssenceItemBoutique
UNA palabra de esencia (índice 0–2) como pieza suelta: reparte cada concepto donde quieras —una en el hero, otra junto a la galería— para control total. Hermano de EssenceBoutique.
Datos
GET /brand → essence[indice]
Requiere
Mi Marca → Palabras de esencia.
Configura
Índice (0–2) · Alineación · Mayúsculas · Tinta · Tamaño · Tracking.
▾ Vista en vivo · índice 0 · marca-demo-lumila
A6
Átomo · social + whatsapp · las redes
RedesBoutique
La fila de redes sociales (IG, TikTok, YouTube, Facebook, LinkedIn, WhatsApp) con área táctil ≥ 44px y enlaces seguros en pestaña nueva.
Datos
GET /brand → social.* + contact.whatsapp (→ wa.me)
Requiere
Mi Marca → Contacto / Redes (activa «Mostrar» por canal).
Configura
Tinta · Tamaño de icono · Separación · Alineación · Incluir WhatsApp.
▾ Vista en vivo · marca-demo-lumila
A7
Átomo · social[red] · NUEVO
RedItemBoutique
UNA red social suelta (la que elijas en «Red»): coloca solo WhatsApp en el hero, o solo Instagram en el footer. Hermano de RedesBoutique (la fila completa).
Datos
GET /brand → social[red] · contact.whatsapp
Requiere
Mi Marca → el canal elegido, con «Mostrar» activo.
Configura
Red (instagram…whatsapp) · Tinta · Tamaño de icono · Alineación.
▾ Vista en vivo · red = instagram · marca-demo-lumila
A8
Átomo · gallery[i]
GaleriaItemBoutique
UNA imagen de la galería (por índice) como tile suelto, para composiciones libres. Click → zoom (lightbox local). Hermano de GaleriaGridBoutique (la galería completa).
Datos
GET /brand → gallery[indice]
Requiere
Mi Marca → Galería de marca.
Configura
Índice · Aspecto (4:3 / 4:5 / 1:1 / 16:9) · Radio · Lightbox local.
▾ Vista en vivo · índice 0 · marca-demo-lumila
A9
Átomo · reels[i] · NUEVO
ReelItemBoutique
UN reel/tiktok (por índice) como card 9:16 suelta; la card entera enlaza al reel. Hermano de ReelsBoutique (el ticker completo).
Datos
GET /brand → reels[indice]
Requiere
Mi Marca → Reels.
Configura
Índice (0–4) · Altura card · Alineación.
▾ Vista en vivo · índice 0 · marca-demo-lumila
A10
Átomo · faq.items · las preguntas
FaqAcordeonBoutique
El acordeón de preguntas y respuestas solo (sin foto), en tema claro o sobre foto, como pieza suelta. Hermano de FaqFotoBoutique (la foto de fondo).
Datos
GET /brand → faq.items[]
Requiere
Mi Marca → Preguntas frecuentes.
Configura
Tema (sobreFoto/claro) · Ancho máximo · Permitir múltiples abiertos.
▾ Vista en vivo · marca-demo-lumila
A11
Átomo · cta.title + subtitle
CtaTituloBoutique
El título del CTA (con *énfasis* serif) y, opcional, el subtítulo. Con "Parte" pintas SOLO el subtítulo como pieza aparte.
Datos
GET /brand → cta.title (+ cta.subtitle)
Requiere
Mi Marca → Llamado a la acción → Título / Subtítulo.
Configura
Parte (título/subtítulo/ambos) · Tamaño · Alineación · Tinta · Ancho máx.
▾ Vista en vivo · marca-demo-lumila
A12
Átomo · cta.primary | secondary · NUEVO
CtaBotonBoutique
UN botón del CTA (principal o secundario, según "Botón"). Coloca cada uno por separado. URL relativa = misma pestaña; absoluta = nueva.
Datos
GET /brand → cta.primary | cta.secondary
Requiere
Mi Marca → Llamado → texto + enlace del botón.
Configura
Botón (principal/secundario) · Alineación · Estilo principal (crema/marca).
▾ Vista en vivo · botón principal · marca-demo-lumila
A13
Átomo · cta.primary + secondary
CtaBotonesBoutique
Los DOS botones del CTA juntos (principal + secundario). Hermano de CtaBotonBoutique (uno suelto).
Datos
GET /brand → cta.primary + cta.secondary
Requiere
Mi Marca → Llamado → texto + enlace de cada botón.
Configura
Alineación · Estilo principal (crema/marca) · Separación.
▾ Vista en vivo · marca-demo-lumila
A14
Átomo · manual (sin /brand)
EncabezadoBoutique
Encabezado editorial reutilizable (chip + título + énfasis serif + subtítulo) con contenido MANUAL, para cabeceras de secciones (Galería, Video, FAQ).
Datos
Manual — Property Controls (no usa /brand).
Requiere
Nada; se escribe en el panel de Framer.
Configura
Chip · Título · Título énfasis · Subtítulo · Alineación · Tinta · Color marca.
▾ Demo · contenido manual
Lo que hacemos
Un encabezado de ejemplo.
A15
Sección · banner/hero
FotoGiroBoutique
El banner hero de la boutique: foto a sangre con overlay configurable y color de respaldo de marca. La portada de la página de boutique.
Datos
GET /brand → banner
Requiere
Mi Marca → Banner / Hero.
Configura
Altura · Ajuste (cover/contain) · Opacidad overlay · Color de respaldo (auto).
▾ Vista en vivo · marca-demo-lumila
A16
Sección · manifiesto
ManifiestoBoutique
El manifiesto de marca (la cita) con énfasis en color y fondo de sección opcional en colores de marca.
Datos
GET /brand → manifesto
Requiere
Mi Marca → Manifiesto.
Configura
Fondo de sección · Colores de marca · Color de énfasis · Ancho máx.
▾ Vista en vivo · marca-demo-lumila
A17
Sección · galería completa
GaleriaGridBoutique
La galería completa en grid (mosaico bento o uniforme de 3 columnas) con lightbox y navegación por teclado/swipe. Hermana de GaleriaItemBoutique (un tile suelto).
Datos
GET /brand → gallery[]
Requiere
Mi Marca → Galería de marca.
Configura
Diseño (mosaico/uniforme) · Máx imágenes · Separación · Lightbox.
▾ Vista en vivo · marca-demo-lumila
A18
Sección · video de marca
VideoMarcaBoutique
El video de marca con carga diferida (póster + botón play) que sube a YouTube/Vimeo/HTML5 al hacer click. Relación de aspecto configurable.
Datos
GET /brand → video
Requiere
Mi Marca → Video de marca.
Configura
Aspecto (16:9 / 21:9 / 1:1) · Póster personalizado · Modo ambiente.
▾ Vista en vivo · marca-demo-lumila
A19
Sección · foto del FAQ
FaqFotoBoutique
La foto de fondo de la sección FAQ con overlay, independiente de si hay preguntas (corrige el bug del monolito donde la foto se ocultaba sin preguntas). Se compone detrás de FaqAcordeonBoutique.
Datos
GET /brand → faq.image
Requiere
Mi Marca → Preguntas frecuentes (foto).
Configura
Overlay · Altura · Color de respaldo (auto) · Ocultar si vacío.
▾ Vista en vivo · marca-demo-lumila
A20
Sección · foto del CTA
CtaFotoBoutique
La foto de fondo del CTA en escala de grises (por defecto) con overlay, para componer detrás del título y los botones del CTA.
Datos
GET /brand → cta.image
Requiere
Mi Marca → Llamado a la acción (foto).
Configura
Escala de grises · Overlay · Altura · Color de respaldo (auto) · Ocultar si vacío.
▾ Vista en vivo · marca-demo-lumila
Legacy · no usar
Legacy / no usar
Monolitos reemplazados por los átomos de arriba — no insertar. Solo viven en Framer (no en el repo): HeroBoutique · HeaderBoutique · FaqBoutique · CtaBoutique · VideoBoutique · GaleriaBoutique.
DirectorioBoutiquesDettai — Directorio de boutiques (code component)
Lista TODAS las boutiques publicadas con 3 vistas conmutables: Feed (oscura, mobile-first), Grid (por defecto) y List (compacta). Header = buscador ("por nombre o tags") + switcher. Sin titulo.
Datos: GET /api/v1/storefront/boutiques (Entorno Auto: dettai.mx pega a prod, canvas/preview a staging). El CTA "Conocer boutique" enlaza a /boutique/(slug).
Props clave (panel derecho): Vista inicial, Fondo Feed, Fondo Grid/List, Previews por boutique (6), Columnas Grid, Boutiques por pagina, Entorno.
Fuentes: Afacad + Poppins + Instrument Serif (Italic). Para datos reales: deploy del backend. Lo estetico es iterable.
UX/UI: el componente "DirectorioBoutiquesDettai" esta colocado al FINAL de esta pagina (debajo de todo el contenido existente). Arrastralo / muevelo a donde deba ir. Esta caja lavanda es solo documentacion y puede borrarse al integrarlo.
Buscador global + Cuenta — atomos de nav (code components)
BadgeBuscador (lupa que abre el modal de busqueda global, paleta tipo Cmd-K) · BadgeCuenta (usuario con sesion que va a /profile) · ModalBuscador (el overlay de busqueda, con sus 5 estados demo abajo).
Datos: GET /api/v1/storefront/buscar (Entorno Auto: dettai.mx pega a prod, canvas/preview a staging). Rankea boutiques, productos por nombre y productos por descripcion; cada fila deep-linkea a /boutique/(slug) o /producto.
UX/UI: colocados al FINAL de esta pagina. En produccion estos atomos van en el Navbar nativo del marketplace y en las paginas de comprador; arrastralos a donde deban ir. Esta caja lavanda es solo documentacion y puede borrarse al integrarlos.