Guía · Topbar
Barra utilitaria superior (la franja por encima del menú). Cada punto se alimenta de
src/config/site.ts (fuente única); no se escribe a mano. Esto es lo que va en cada lugar:
Propuesta principal
Lo primero que se lee: una frase corta que posiciona la marca. El logotipo NO va aquí — va en el Header, justo debajo.
Dato SITE.tagline
Horario
Señal de disponibilidad y confianza. Se oculta en móvil para priorizar el teléfono y WhatsApp.
Dato CONTACT.schedule.display
Teléfono
Contacto directo con clic-para-llamar. El enlace tel: lo construye telUrl(), no se escribe a mano.
Dato CONTACT.phone · telUrl()
CTA principal de contacto. El enlace SIEMPRE se arma con waUrl(); el mensaje precargado sale de WA_MESSAGES.
Dato waUrl(WA_MESSAGES.cotizar)
Edita en src/components/TopBar.astro · src/config/site.ts
Guía · Header
Barra de navegación principal (logotipo + menú), bajo el topbar. Todo el menú
—escritorio, paneles y móvil— se genera desde NAV en
src/config/site.ts (fuente única); no se escribe a mano. Esto es lo que va en cada lugar:
Logotipo
La marca, a la izquierda, enlazando a la home. Es el ancla de identidad y el «volver al inicio» que todos esperan. Aquí SÍ va el logo (en el topbar no).
Dato SITE.brand · SITE.name
Navegación
Las secciones del sitio. No se hardcodea ningún enlace: se itera NAV, la misma fuente para escritorio y móvil. En móvil colapsa en el menú ☰.
Dato NAV
Paneles (mega / dropdown)
Las secciones con hijos despliegan un panel al pasar el cursor o con el teclado; su contenido sale de la taxonomía, no de una lista aparte.
Dato NAV[].panel · items
CTA · Cotizar
El botón de conversión a WhatsApp, siempre visible a la derecha. El enlace se arma con waUrl(); el mensaje precargado sale de WA_MESSAGES.
Dato waUrl(WA_MESSAGES.cotizacion)
Edita en src/components/Header.astro · src/config/site.ts
Guía · Migas de pan
La ruta que muestra dónde está el visitante dentro de la jerarquía del sitio, justo debajo del header.
Sirve para dos cosas a la vez: orientar y dejar volver a cualquier nivel superior, y alimentar el
BreadcrumbList de schema.org que el buscador usa para mostrar la ruta en sus resultados.
Cada página define su ruta una sola vez con la prop breadcrumbs; el JSON-LD lo emite
buildSchema (no este componente, para no duplicarlo). Esto es cada eslabón:
Raíz (Inicio)
El primer eslabón: siempre enlaza a la home. Es el punto de partida de la ruta y el «volver al inicio» que todos esperan de la jerarquía.
Dato items[0] · href '/'
Eslabón intermedio
Cada nivel ancestro entre la home y la página actual (categoría, subcategoría). Son enlaces: dejan saltar a cualquier nivel superior.
Dato items[].href
Separador
El icono (›) entre eslabones. Es decorativo —va con aria-hidden— y solo marca la dirección de la jerarquía; nunca es un enlace.
Dato SVG · aria-hidden
Página actual
El último eslabón: la página donde estás. No enlaza (ya estás ahí) y se marca con aria-current="page" para los lectores de pantalla.
Dato item sin href · aria-current
Edita en src/components/Breadcrumbs.astro · prop breadcrumbs de cada página
Tercer producto DEMO en la categoría general. Muestra una ficha mínima válida: solo los campos obligatorios del esquema (título, descripción, categoría e imagen).
Precio bajo cotización
Descripción
Este producto usa únicamente los campos obligatorios. Es el ejemplo más
pequeño que pasa la validación Zod .strict(): cualquier campo extra no
declarado en el esquema haría fallar el build.