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:

  1. 1

    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

  2. 2

    Horario

    Señal de disponibilidad y confianza. Se oculta en móvil para priorizar el teléfono y WhatsApp.

    Dato CONTACT.schedule.display

  3. 3

    Teléfono

    Contacto directo con clic-para-llamar. El enlace tel: lo construye telUrl(), no se escribe a mano.

    Dato CONTACT.phone · telUrl()

  4. 4

    WhatsApp

    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

MODO GUÍA

Es una guía, no un sitio de cliente: cada bloque te dice QUÉ poner y DÓNDE editarlo. Los datos viven en src/config/site.ts.

Bloque 1 · Hero

El Hero: di en una frase qué haces y para quién

Es lo primero que se ve. Un H1 único con tu propuesta (incluye ahí tu palabra clave principal) y, debajo, una sola línea que la resuma sin tecnicismos.

Qué incluir. El hero es tu primera impresión y solo tienes unos segundos: en ese instante el visitante decide si se queda. Resuélvelo con un H1 único que diga, en lenguaje claro, qué ofreces y para quién —ahí va tu palabra clave principal, sin forzarla—. Debajo, una sola frase de apoyo que sume el beneficio concreto o despeje la duda más común. Cierra con una o dos acciones, la principal primero, para que el siguiente paso sea obvio. El logotipo vive en el Header: aquí manda el mensaje, no la marca.

Cómo redactarlo. Escribe para una persona, no para un buscador: parte de una necesidad real y promete solo lo que puedas demostrar. Cambia los adjetivos por hechos —«entrega en 48 horas» convence más que «súper rápido»— y apóyate en verbos concretos. Léelo en voz alta: si suena a folleto, reescríbelo hasta que suene a alguien que de verdad sabe del tema. Evita varios H1, párrafos eternos, tecnicismos y promesas vagas; cuando dudes, recorta. Todo esto vive en el componente Hero —title, accent, subtitle y descRight—: esto que lees es, justamente, el ejemplo.

Catálogo

El catálogo: agrupa tu oferta en categorías

Cada tarjeta arma una categoría como si fuera un producto: imagen, título, un texto breve y atajos a las subcategorías. Las cuatro de abajo te muestran, parte por parte, qué poner en cada una y cómo redactarla.

Aquí tu oferta deja de ser una lista larga y se vuelve un mapa: agrupas lo que vendes en pocas categorías que cualquiera entiende de un vistazo. Cada tarjeta funciona como una mini portada —una imagen real, un título con la palabra que la gente busca y una frase que adelanta qué hay dentro—, así el visitante pasa de «¿qué venden aquí?» a «esto es justo lo que necesito» en segundos. Es la diferencia entre una bodega amontonada y una tienda bien señalizada.

Para que funcione, ordena las categorías como las piensa tu cliente, no como las archivas tú: agrupa por lo que la gente busca, nombra cada una con su término real y mantén el mismo criterio en todo el sitio. Redacta cada tarjeta para una persona —un beneficio concreto, la palabra clave sin forzar y un motivo para confiar— y deja que los atajos a las subcategorías hagan de guía. Bien armado, todos ganan: el visitante encuentra antes y los buscadores entienden tu estructura y llegan a tus páginas internas.

La categoría a fondo

La imagen y su texto alt

Esta es la primera tarjeta del catálogo vista por dentro. Una buena imagen de categoría no es decoración: es lo primero que mira el visitante y, en menos de un segundo, le confirma si está en el lugar correcto. Por eso conviene una foto real —no un genérico de banco— que muestre el producto o servicio tal como es y que pese poco para no hacer esperar.

El texto alternativo (el atributo alt) es su pareja invisible: describe en una frase qué se ve, con la palabra clave de la categoría incluida con naturalidad. Ayuda a quien navega con lector de pantalla y da contexto a quien, por una conexión lenta, no alcanza a ver la foto. Si además fijas su ancho y alto, el hueco queda reservado y la página no «salta» mientras carga.

  • Foto real y propia, nunca un genérico de banco de imágenes
  • Peso optimizado (AVIF/WebP) para que cargue al instante
  • Texto alternativo descriptivo, con la palabra clave incluida
  • Ancho y alto fijos para que la maqueta no salte al cargar
Ver la categoría

Flujo de producción

Cómo se construye un sitio

Siete pasos, de definir el alcance hasta publicar. Síguelos en orden: cada paso deja listo el siguiente, así no rehaces trabajo ni se te olvida nada.

Piénsalo como una línea de montaje, no como una lista que atacas al azar. Cada estación le entrega a la siguiente lo que necesita: defines el alcance antes que el contenido, el contenido antes que los metadatos, el diseño antes que las imágenes. Si te saltas un paso, lo pagas al final —contenido sin estructura, diseño sin nada que vestir—.

El orden también cuida tu tiempo, que casi siempre es el recurso corto. Avanzar en secuencia significa tocar cada archivo una vez y seguir, en vez de regresar a arreglar lo que un paso anterior dejó a medias. Para cuando llegas a QA y deploy ya no hay sorpresas: es una revisión, no un rescate.

  1. Selección

    Defines arquetipo (A/B/C/D) y alcance del sitio.

  2. Scaffold

    Copias el esqueleto y llenas site.ts con datos reales.

  3. Contenido

    Cargas productos, servicios y blog en Content Collections.

  4. Metadatos

    Title, description, JSON-LD por tipo y sitemap por sección.

  5. Diseño

    Ajustas tokens de marca y montas componentes.

  6. Imágenes

    Optimizas a AVIF, nombras por keyword y conectas el CDN.

  7. QA + Deploy

    Checklist en verde y publicación en Cloudflare Pages.

Content Collections

Catálogo de ejemplo

Productos y servicios DEMO cargados desde src/content/. Cada tarjeta nace de un archivo Markdown validado por Zod.

Cada tarjeta que ves aquí no se escribió a mano en la página: nace de un archivo Markdown en src/content/. Redactas el producto o servicio como una nota simple —título, descripción, imagen, precio si aplica— y el sitio arma la tarjeta por ti. Agregas un archivo y aparece; lo quitas y desaparece, sin tocar la página.

La ventaja es consistencia y tranquilidad: un esquema (Zod) revisa cada archivo antes de publicar, así un campo faltante o una ruta de imagen mal puesta detiene el build y te dice qué corregir —ninguna tarjeta rota llega al sitio—. Tú administras el catálogo como texto y el sistema se encarga del diseño: contenido y diseño separados, cada uno en su lugar.

Productos

Servicios

Servicio de instalación de ejemplo

Servicio de instalación de ejemplo

Ficha de servicio DEMO en la categoría instalación. Muestra los campos de servicio: pricing transparente, qué incluye y un hero opcional, todo validado por Zod.

Ver servicio
Servicio de mantenimiento de ejemplo

Servicio de mantenimiento de ejemplo

Segundo servicio DEMO, categoría mantenimiento, para demostrar cómo el catálogo de servicios lista varias entradas y cómo se filtran los borradores con draft.

Ver servicio
Asesoría general de ejemplo

Asesoría general de ejemplo

Tercer servicio DEMO en la categoría general. Ficha mínima con solo los campos obligatorios del esquema, útil como punto de partida para un servicio nuevo.

Ver servicio

Identidad

Sistema de diseño en vivo

Estos colores y tipografías leen los MISMOS tokens que todo el sitio. Cambia la marca en un solo archivo y se reviste completo.

Lo que ves no es una muestra estática de marca: es la paleta y la tipografía reales que lee todo el sitio, en vivo. Colores, fuentes, espaciados y radios viven como «tokens» en un solo archivo (tokens.css), y cada componente bebe de ahí —nada tiene su color escrito a mano—.

Por eso un cambio de marca aquí toma minutos, no días: ajustas --c-primary y la fuente principal y los botones, las tarjetas, el header y esta misma sección se revisten de golpe. Una sola fuente de verdad significa cero búsqueda de colores sueltos regados por mil archivos. Defines la marca una vez y el sitio se mantiene coherente solo.

Paleta

Primary --c-primary
Primary dark --c-primary-dark
Ink --c-ink
Muted --c-muted
Surface --c-surface
Border --c-border

Tipografía

Aa — Títulos

--font-heading · Outfit

Aa — Texto corrido del sitio, legible y neutro.

--font-body · Inter

XL LG Base SM

Astro · metadatos

Metadatos de cada página

Antes que nada se eligen 3 palabras clave y se construyen las metas sobre ellas: el title en 3 módulos (kw1 primero, sin marca) y la description que abre con la kw1 y teje las 3 sin sobreoptimizar.

Los metadatos son lo que tu página dice de sí misma antes de que alguien la abra: el título y la descripción que aparecen en una lista de resultados o cuando compartes el enlace. Aquí eliges tres palabras clave por orden de importancia y construyes ambos sobre ellas —el título arranca con la principal, sin la marca pegada, y la descripción abre con ella y teje las otras dos con naturalidad—.

El oficio está en la mesura: decirlo una vez, claro, para una persona que ojea una lista de opciones —no apilado ni repetido para «verse optimizado»—. La demo lo muestra de las dos formas, bien y mal, y la misma regla (metaAudit) marca sola la versión recargada. Unas buenas metas dan un empujón; el peso de verdad sigue en el contenido de la página.

kw1 · principal plantilla astro
kw2 · secundaria contenido markdown
kw3 · variante sitio profesional
✓ Según la regla generado desde KEYWORDS

ejemplos.mx inicio

Plantilla astro | contenido markdown | sitio profesional

Plantilla astro lista para producción: contenido en Markdown y diseño listos para lanzar un sitio profesional, rápido y fácil de editar. Clónala y publica.

Title Plantilla astro | contenido markdown | sitio profesional 56/60
Descr. Plantilla astro lista para producción: contenido en Markdown y diseño listos para lanzar un sitio profesional, rápido y fácil de editar. Clónala y publica. 155/160
  • ✓ kw1 en title
  • ✓ kw2 en title
  • ✓ kw3 en title
  • ✓ kw1 en descr.
  • ✓ kw2 en descr.
  • ✓ kw3 en descr.
  • ✓ abre con kw1
  • ✓ sin sobreoptimización
✗ Cómo NO hacerlo marca + tokens repetidos + keyword apilada
Title Plantilla web astro | diseño web astro | página web astro | Ejemplos.mx 71/60
Descr. Plantilla web astro: la mejor plantilla web astro. Diseño web astro y página web astro. Plantilla web astro para todo tu sitio web astro. 137/160
  • ⚠ Title de 71 chars: pasa de 60, Google puede recortarlo.
  • ⚠ El title incluye la marca: la regla pide title sin marca.
  • ⚠ El title repite tokens: web, astro. Diferencia los módulos.
  • ⚠ La description no abre con la kw1.
  • ⚠ La kw2 ("contenido markdown") no está cubierta en la description.
  • ⚠ La kw3 ("sitio profesional") no está cubierta en la description.
  • ⚠ Sobreoptimización: "web, astro" se repite demasiado en la description.

Hoja de ruta

Tipos de página y sus layouts

Cada tipo de página (home, categoría, ficha, artículo…) tiene su layout listo en src/layouts/. Reúsalos: tú defines el contenido y el layout pone la estructura, así no rehaces el armazón en cada página.

Un sitio no es una página repetida: son unos pocos tipos de página, cada uno con su trabajo —la home presenta, la categoría lista, la ficha de producto o servicio vende el detalle, el artículo explica—. Nombrarlos desde el principio (home, categoría, ficha, artículo, directorio) te da el mapa de qué construir y en qué orden.

Cada tipo ya tiene su layout esperando en src/layouts/, hecho una vez y reutilizable: tú traes el contenido y el layout trae la estructura —header, espaciados y bloques en su sitio—. Así nunca rehaces el armazón página por página; solo lo llenas. La lista de abajo marca lo que ya está cableado y lo que viene después.

L1 Home (esta página) Incluida
L2 Categoría (catálogo) Próxima parte
L4 Producto (ficha) Próxima parte
L4 Servicio (ficha) Próxima parte
L3 Artículo de blog Próxima parte
L3 Directorio / Zona Próxima parte

Preguntas sobre esta plantilla

¿Esto es un sitio de cliente?

No. Es una plantilla-guía: un sitio dummy de referencia para construir futuros sitios Astro. Los datos (teléfono, dirección, catálogo) son DEMO y se reemplazan en site.ts.

¿Dónde edito los textos y los datos?

Casi todo vive en src/config/site.ts (identidad, contacto, taxonomía, mensajes de WhatsApp). El catálogo vive en src/content/ y la marca (colores, tipografía) en src/styles/tokens.css.

¿Cómo agrego una página o un producto?

Para catálogo, agrega un Markdown en src/content/productos o src/content/servicios y aparece solo. Para páginas nuevas, crea un .astro en src/pages/ usando un layout de src/layouts/.

¿Por qué WhatsApp y no un formulario?

El sistema prioriza la conversión por WhatsApp: respuesta inmediata, sin fricción y con mensaje pre-armado por intención (WA_MESSAGES). Todos los enlaces se generan con waUrl().

¿Cómo cambio la identidad visual?

Edita las variables de src/styles/tokens.css (sobre todo --c-primary y las fuentes). Todo el sitio se reviste solo: es la fuente única de diseño.

Cierra con una llamada a la acción

Termina cada página repitiendo la acción principal: una línea breve y un botón que no deje dudas sobre el siguiente paso. En el ejemplo apunta a WhatsApp (el enlace se arma con waUrl()); en tu sitio, dirígelo a lo que quieras que haga el visitante.

Bloque final · CTA

¿Necesitas ayuda?