Landing de negocio local

Una página de una sola sección para negocios de barrio: barbería, estética, taller, ferretería, panadería, veterinaria... El objetivo es uno: que el visitante llame, escriba por WhatsApp o llegue al local. Es el proyecto más vendido para freelancers que empiezan: se entrega en un par de días y el cliente ve resultados inmediatos.

Vista previa

Secciones

Sección	Para qué sirve
Header fijo	Logo, menú con anclas y botón "Agendar cita" siempre visible. En móvil se convierte en menú hamburguesa.
Hero	Foto de fondo con capa oscura, propuesta de valor en una frase, dos botones (WhatsApp y precios) y tres datos de confianza.
Servicios y precios	Tarjetas con icono, descripción, precio y duración. Los precios visibles reducen preguntas repetidas.
Nosotros	Historia breve, foto del dueño o equipo y lista de ventajas. Genera confianza.
Galería	Trabajos reales en cuadrícula; la primera foto ocupa el doble.
Opiniones	Reseñas con estrellas y avatar con iniciales (cópialas de Google Maps con permiso).
Horario y ubicación	Tabla de horario que resalta el día de hoy y muestra "Abierto ahora / Cerrado" automáticamente, datos de contacto y mapa.
WhatsApp flotante	Botón verde con animación de pulso en la esquina.

Cómo personalizarla

1. Colores y tipografía

Todo está en variables CSS al inicio del style. Cambia estas líneas y toda la página se adapta:

css

:root {
  --primario: #b45309;          /* color de marca: botones, precios, acentos */
  --primario-oscuro: #92400e;   /* hover de botones */
  --oscuro: #1c1917;            /* header, sección de contacto */
  --crema: #f5efe6;             /* fondo de "Nosotros" */
  --fuente-titulos: Georgia, 'Times New Roman', serif;
}

Ideas de paletas: veterinaria #0d9488, estética #db2777, taller #dc2626, panadería #a16207.

Para usar una fuente de Google Fonts, añade en el head la etiqueta link que te da Google y cambia --fuente-titulos: 'Playfair Display', serif;.

2. WhatsApp

Busca 523312345678 y reemplázalo por el número del cliente con código de país + número, sin espacios ni signos (México: 52 + 10 dígitos). El texto prellenado va codificado en la URL:

txt

https://wa.me/5215512345678?text=Hola%2C%20quiero%20agendar%20una%20cita

Puedes generar el texto codificado con encodeURIComponent('Hola, quiero agendar una cita') en la consola del navegador.

3. Horario

Edita la tabla HTML y el objeto HORARIO del script (día de la semana → [hora de apertura, hora de cierre], domingo = 0):

const HORARIO = { 0: [10, 15], 1: [10, 20], 2: [10, 20], 3: [10, 20], 4: [10, 20], 5: [10, 21], 6: [9, 21] };

Si el negocio cierra un día, usa [0, 0].

4. Mapa

La plantilla usa OpenStreetMap (no requiere cuenta). Para Google Maps: busca el negocio en Google Maps → Compartir → Insertar un mapa → Copiar HTML y pega solo el valor de src en el iframe existente.

5. Imágenes

Sustituye las URLs de picsum.photos por fotos reales del negocio. Recomendaciones:

Hero: 1600×1000 px, en WebP, menos de 250 KB.
Galería: cuadradas, 800×800 px.
Comprime con Squoosh antes de subirlas.

6. SEO local

Cambia el title y la meta description con el nombre del negocio, el servicio y la ciudad ("Barbería en Guadalajara..."). Añade también datos estructurados para que Google muestre horario y ubicación:

html

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BarberShop",
  "name": "Barbería Don Bigote",
  "telephone": "+52 33 1234 5678",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Av. Chapultepec 245, Col. Americana",
    "addressLocality": "Guadalajara",
    "addressRegion": "Jalisco",
    "postalCode": "44160",
    "addressCountry": "MX"
  },
  "openingHours": ["Mo-Th 10:00-20:00", "Fr 10:00-21:00", "Sa 09:00-21:00", "Su 10:00-15:00"],
  "priceRange": "$$"
}
</script>

Publicarla

Guarda el archivo como index.html junto a una carpeta img/ con las fotos.
Súbelo gratis a Netlify (arrastrar y soltar la carpeta), GitHub Pages o Cloudflare Pages, o por FTP al public_html del hosting del cliente.
Conecta el dominio y activa HTTPS.
Da de alta o actualiza el Perfil de Empresa de Google del negocio con el enlace a la página: es lo que más clientes trae a un negocio local.

Formulario de contacto

Si el cliente prefiere recibir mensajes por correo además de WhatsApp, añade el formulario de contacto seguro en PHP o un servicio como Formspree.

Antes de entregar

Revisa que todos los enlaces de WhatsApp y teléfono tengan el número correcto, prueba la página en un celular real y pasa Lighthouse (Chrome DevTools) para verificar rendimiento y accesibilidad.

Landing de negocio local ​

Vista previa ​

Secciones ​

Cómo personalizarla ​

1. Colores y tipografía ​

2. WhatsApp ​

3. Horario ​

4. Mapa ​

5. Imágenes ​

6. SEO local ​

Publicarla ​