caso // E-commerce lead-gen
En producción

OnlyGrass

Césped artificial con precios visibles, garantía de 8 años y contacto directo con el instalador.

2026 · En producción

  • Full-stack developer
  • 3 meses
  • Propietaria
  • Astro 5
  • Tailwind CSS 4
  • Decap CMS
  • Netlify
  • TypeScript
  • WhatsApp
  • SEO local
Ver sitio en vivoHablar de un proyecto parecido
OnlyGrass //
EN PRODUCCIÓN
ONLYGRASS · 2026ver demo
02 // FICHA DEL PROYECTO

OnlyGrass en un vistazo.

Año

2026

Tipo

E-commerce lead-gen

Estado

En producción

Rol

Full-stack developer

Duración

3 meses

Licencia

Propietaria

Stack aplicado //

Astro 5Tailwind CSS 4TypeScript + ZodManrope + Material SymbolsDecap CMS v3Netlifypnpm@astrojs/sitemap
Demo online
ASÍ SE VE //

Capturas reales de OnlyGrass.

Capturas reales del sistema en marcha. Sin mocks, sin renders.

Recorrido completo por OnlyGrass: homepage con antes/después interactivo, catálogo de productos con precios y WhatsApp, formulario de contacto con RGPD, y panel de Decap CMS.

Homepage

Homepage con antes/después

Hero con propuesta de valor y slider interactivo que muestra la transformación real de una instalación — del suelo desnudo al césped instalado.

Catálogo

Catálogo de 11 variedades

Grid de tarjetas con imagen de cada variedad de césped, precio por m² visible y botón "Consultar por WhatsApp" que precarga el mensaje.

Instalaciones

Instalaciones: antes/después

Comparativa antes/después de trabajos reales en formato grid + 6 pasos del proceso de instalación con imágenes.

Contacto

Formulario de contacto RGPD

Formulario con selección de tipo de terreno, recogida de datos legal con aceptación de términos y página de agradecimiento post-envío.

Marca

Sobre nosotros: filosofía directa

Página de marca personal del fundador — valores de honestidad, sin intermediarios, post-venta real.

Mobile

Mobile: catálogo responsive

El catálogo de productos funciona como tienda online sin serlo. Menú hamburguesa, layouts adaptativos y CTAs a WhatsApp en móvil.

Mobile

Mobile: homepage

Hero con propuesta de valor, antes/después y proceso en 3 pasos optimizado para pantallas pequeñas.

Mobile

Mobile: contacto

Formulario adaptado a móvil con selección de tipo de terreno y acceso rápido a WhatsApp.

03 // CONTEXTO

De dónde partía OnlyGrass.

PUNTO DE PARTIDA //

David González, instalador de césped artificial con 8 años de experiencia, apenas tenía presencia digital. Sus clientes llegaban por boca a boca. Competía contra empresas con web propia y presupuesto de marketing. En su sector, lo habitual son presupuestos sin desglose, comerciales que presionan y calidades que no se corresponden con lo prometido.

LO QUE FALTABA //

Necesitaba una web profesional que mostrara su trabajo real, transmitiera honestidad, le permitiera actualizar precios sin depender de nadie y convirtiera visitas en contactos directos.

EL OBJETIVO //

Que OnlyGrass fuera la opción transparente y de calidad para instalar césped artificial en Madrid, con una web rápida que David pudiera mantener por su cuenta.

Para quién es //

  • Particular con jardínCésped que se vea real, que aguante niños y mascotas, y que no requiera mantenimiento.
  • Comunidad de vecinosRenovar zonas comunes (piscina, patio interior) con precio/m2 y durabilidad claros.
  • Pequeño negocioRestaurante, local comercial o terraza con acabado estético y bajo mantenimiento.
04 // LA SOLUCIÓN

Qué se construyó y por qué.

La web funciona como escaparate y herramienta de captación. Muestra el catálogo completo con precios visibles, explica el proceso con claridad y dirige cada contacto a WhatsApp o al formulario, sin pasos intermedios.

01

CMS headless: David gestiona productos y precios desde una interfaz visual, sin tocar código.

02

Conversión por WhatsApp: un clic abre un chat con el instalador. Sin carrito, sin formularios largos.

03

Prueba visual: antes/después interactivo y galería de instalaciones reales que cierran ventas.

04

Muestras gratis a domicilio: lead magnet que capta contactos sin presión de compra.

05

Proceso en 3 pasos: visita, presupuesto, instalación. Siempre el mismo profesional.

Lo que hace //

Tradeoff honesto //

Los nombres de archivo que genera Decap son largos y poco legibles. David nunca los ve, pero el repo se ensucia. Además, requiere que Netlify tenga habilitado Identity y git-gateway.

05 // ARQUITECTURA

Cómo está construido OnlyGrass.

Sitio estático Astro 5 con CMS headless (Decap CMS) sobre ficheros Markdown en el repositorio. Sin backend propio, sin base de datos, sin frameworks JS de cliente. Todo el contenido se compila a HTML estático y se sirve desde la CDN de Netlify.

Presentación (Astro 5 + Tailwind CSS 4)

  • 9 páginas estáticas compiladas a HTML puro
  • View Transitions para navegación fluida entre páginas
  • Componentes con estado (lightbox, slider antes/después) suscritos a astro:page-load
  • WhatsApp flotante y CTAs directos con mensaje predefinido

Contenido (Decap CMS + Markdown)

  • Ficheros Markdown para productos y complementos
  • Interfaz visual de admin autenticada con Netlify Identity
  • Commits directos al repositorio desde la interfaz CMS
  • Schemas de contenido validados con Zod

Infraestructura (Netlify)

  • CDN global con caché para imágenes y assets
  • Netlify Forms para captura de leads con anti-spam
  • Netlify Identity para autenticación del CMS
  • Despliegue continuo desde Git (push → deploy)

Flujo de datos //

  1. David edita productos desde Decap CMS (interfaz visual)
  2. Decap hace commit al repositorio Git
  3. Netlify detecta el cambio y despliega automáticamente
  4. Astro compila los Markdown a HTML estático
  5. El visitante carga la página desde la CDN de Netlify
  6. El visitante hace clic en "Consultar por WhatsApp" → se abre wa.me con mensaje predefinido

Autenticación //

Netlify Identity para autenticación del CMS. El propietario accede con email y contraseña. No hay registro de usuarios ni cuentas para visitantes.

Notas técnicas //

  • Sin backend propio: todo el contenido son ficheros Markdown en el repositorio.
  • Sin base de datos: el catálogo vive en ficheros Markdown gestionados por Decap CMS.
  • Sin frameworks JS de cliente: cero React, Vue, etc. Solo JS vanilla para componentes interactivos.
  • Las imágenes se sirven desde Netlify con caché. No hay CDN de imágenes ni optimización automática.
  • View Transitions requiere suscribir la lógica JS a astro:page-load y astro:after-swap.
06 // PROCESO

De la idea a la versión en marcha.

  1. 01

    Definición del problema

    David necesitaba presencia digital profesional sin depender de comerciales agresivos ni presupuestos opacos. El sector sufre de falta de transparencia.

  2. 02

    Elección del stack

    Astro 5 para HTML estático puro, Tailwind CSS 4 para estilos, Decap CMS para que David gestione productos sin código, Netlify para hosting + forms + identity.

  3. 03

    Diseño del catálogo

    11 variedades de césped (gama básica a premium) + 9 complementos. Cada producto con imagen, descripción, precio por m2 y botón de WhatsApp.

  4. 04

    Embudo de conversión

    Todos los CTAs enlazan a WhatsApp con mensaje predefinido. Sin carrito de compra: el negocio requiere presupuesto personalizado.

  5. 05

    Prueba social visual

    Antes/después interactivo en homepage + galería de instalaciones con lightbox. Muestras gratis a domicilio como lead magnet.

  6. 06

    CMS headless

    Decap CMS sobre Markdown con Netlify Identity. David edita productos desde una interfaz visual, los cambios se commitean al repo.

  7. 07

    Despliegue y SEO

    Netlify con despliegue continuo desde Git. Sitemap XML automático. 9 páginas estáticas optimizadas para SEO local en Madrid.

07 // RETOS

Decisiones con criterio.

Problemas reales durante el desarrollo, soluciones aplicadas y compromisos asumidos.

01

CMS sin backend propio

Problema //

David necesitaba actualizar productos sin depender de un desarrollador, pero no había presupuesto para un backend ni un CMS alojado.

Cómo se resolvió //

Decap CMS sobre ficheros Markdown en el repositorio, autenticado con Netlify Identity. David edita desde una interfaz visual y los cambios se commitean directamente al repo.

Tradeoff //

Los nombres de archivo que genera Decap son largos y poco legibles. David nunca los ve, pero el repo se ensucia. Además, requiere que Netlify tenga habilitado Identity y git-gateway.

02

Conversión sin carrito de compra

Problema //

El negocio requiere presupuesto personalizado según superficie, corte e instalación. Un carrito de compra tradicional no encaja con este tipo de venta.

Cómo se resolvió //

Todo el site canaliza la conversión hacia WhatsApp. Cada producto tiene un botón que precarga el mensaje con el nombre del producto — un clic y el cliente habla con David.

Tradeoff //

Se pierde la automatización de la venta. La dependencia del canal conversacional es total, pero a cambio hay relación directa y personalización completa.

03

Imágenes sin optimización automática

Problema //

El catálogo usa imágenes JPEG locales subidas al repo. Sin CDN de imágenes ni generación automática de formatos modernos, el peso de las páginas podía dispararse.

Cómo se resolvió //

Astro compila a HTML estático y las imágenes se sirven desde Netlify con caché. El navegador gestiona la carga directamente.

Tradeoff //

Sin generación de múltiples tamaños ni formatos como WebP o AVIF. David sube imágenes ya optimizadas manualmente.

04

View Transitions y re-inicialización de componentes

Problema //

Los componentes con estado (lightbox, acordeón FAQ, slider antes/después) no se re-inicializaban tras la navegación con View Transitions de Astro.

Cómo se resolvió //

Toda la lógica JS se suscribe a los eventos astro:page-load y astro:after-swap en lugar de DOMContentLoaded.

Tradeoff //

Mayor complejidad en el código cliente. Los scripts se ejecutan en cada navegación, no solo en la carga inicial.

08 // RESULTADOS

Métricas y consecuencias reales.

Variedades de césped

11

gama básica a premium

Complementos

9

adhesivos, cintas, arena, grapas

Páginas estáticas

9

home, catálogo, complementos, instalaciones, sobre nosotros, contacto, gracias, 404, legales

Dependencias runtime

3

sin frameworks JS de cliente

Garantía

8 años

en instalación profesional

Rendimiento //
  • HTML estático puro: cero JS por defecto, carga instantánea.
  • CDN global de Netlify: caché para imágenes y assets en todo el mundo.
  • Sin frameworks JS de cliente: cero React, Vue, etc. Solo JS vanilla para componentes interactivos.
  • View Transitions nativas de Astro: navegación fluida sin recarga completa.
Experiencia de uso //
  • Conversión directa por WhatsApp: un clic y hablas con el instalador.
  • Antes/después interactivo: prueba social visual que cierra ventas.
  • Muestras gratis a domicilio: lead magnet sin presión de compra.
  • Proceso en 3 pasos claro: visita, presupuesto, instalación.
Impacto //
  • Diferenciación de marca frente a competidores: tono honesto y "trato directo con el instalador".
  • Mantenibilidad cero-coste para el propietario: sin cuotas de CMS, sin backend que mantener.
  • SEO local en Madrid con páginas estáticas rápidas y sitemap.
  • Captación de leads cualificados sin ecommerce transaccional.
09 // LO QUE APRENDÍ

Lo que deja este caso.

LO QUE FUNCIONÓ //
  • Astro 5 para HTML estático puro: rendimiento excepcional sin complejidad de frameworks JS.
  • Decap CMS sobre Markdown: el propietario gestiona productos sin código, los cambios se commitean al repo.
  • Conversión por WhatsApp: canal directo sin fricción, ideal para negocios locales con presupuesto personalizado.
  • Antes/después interactivo: prueba social visual que genera confianza y cierra ventas.
  • Netlify como plataforma todo-en-uno: hosting + forms + identity + despliegue continuo.
QUE MEJORARÍA //
  • Integrar Google Analytics 4 para medir tráfico, conversiones y leads generados.
  • Implementar optimización automática de imágenes (WebP, AVIF) con @astrojs/image.
  • Automatizar el flujo de solicitud de muestras gratis (formulario → email → envío).
  • Añadir blog con estrategia de contenido SEO para posicionar términos clave en Madrid.
LO QUE APRENDÍ //
  • Un sitio estático con CMS headless es la solución ideal para negocios locales que necesitan autogestión sin complejidad técnica.
  • La conversión por WhatsApp funciona mejor que un carrito de compra cuando el negocio requiere presupuesto personalizado.
  • La prueba social visual (antes/después, galería) genera más confianza que cualquier copy de venta.
  • View Transitions de Astro requiere suscribir la lógica JS a astro:page-load, no a DOMContentLoaded.
  • Netlify Forms + Identity resuelven captura de leads y autenticación CMS sin backend propio.
10 // SIGUE EXPLORANDO

Servicios, proyectos y lecturas relacionadas

Otros puntos de la web donde se aplica este mismo enfoque o se profundiza en temas cercanos.

Servicio

Software a medida con IA integrada

Aplicaciones web nuevas donde la IA es parte del producto desde el inicio: paneles, portales, CRMs y herramientas internas.

Proyecto

Gym Tracker

Tu diario de gimnasio, rápido y sin complicaciones. PWA offline first con API de asistente IA para conectar cualquier LLM, n8n o Telegram.

Artículo

¿SaaS o herramienta a medida? Cómo decidir

SaaS vs desarrollo a medida: criterios prácticos para decidir cuándo comprar, cuándo construir y cómo evitar errores comunes en empresas pequeñas.

Servicio

Integrar IA en tu aplicación

Añadir IA al software que ya usas: chat con tus documentos y datos (RAG), clasificación, extracción y resúmenes.