Conecta con tu Ángel

Landing page para una tienda esotérica y espacio de bienestar en Sabadell. Astro estático, sin base de datos, con datos estructurados de negocio local para SEO. Cliente real, en desarrollo.

stack

Astro
CSS puro con custom properties
IntersectionObserver
JSON-LD
OpenStreetMap

Por qué Astro y no un framework de aplicación

El sitio no tiene usuarios, ni carrito, ni contenido que cambie a diario. Es un escaparate. Astro genera HTML, CSS y JavaScript estáticos: sin servidor de aplicación, sin base de datos, sin mantenimiento. Se sube una carpeta por FTP y funciona.

Usar React o Next aquí habría añadido peso y complejidad de despliegue para resolver problemas que este proyecto no tiene. La conversión del negocio es que alguien entre por la puerta o escriba por WhatsApp, y eso lo mueve la velocidad de carga y aparecer en Google, no la interactividad.

SEO local, que es lo que de verdad importa aquí

Para un negocio de barrio, el SEO local es el canal. Se llevó más atención que ninguna otra parte:

Datos estructurados JSON-LD de tipo LocalBusiness, para que Google entienda dirección, horario y tipo de negocio.
Schema FAQPage en las preguntas frecuentes, que puede ganar resultados enriquecidos en la búsqueda.
Meta tags y Open Graph completos, sitemap.xml y robots.txt.
Mapa con OpenStreetMap incrustado, con la chincheta sobre el local. Sin clave de API y sin coste, a diferencia de Google Maps.

Sistema de marca en CSS puro

Sin frameworks de estilos. La paleta —verde salvia, oliva, arena y dorado— sale del logo y vive como custom properties en un único fichero de tokens junto a tipografías y sombras. Para un sitio de este tamaño, un framework de utilidades sería más peso que ayuda.

Las tipografías son Cormorant Garamond para titulares, Pinyon Script para la cursiva del logo y Jost para el texto.

Animaciones

Revelado al hacer scroll con IntersectionObserver, alas y estrella animadas y microinteracciones, todo en CSS. Respeta prefers-reduced-motion: quien tenga esa preferencia activa ve el contenido sin movimiento.

Contenido editable sin tocar componentes

Dirección, teléfono, correos, Instagram, horario y coordenadas del mapa están centralizados en un único fichero de datos. Cambiar un horario es editar una línea y reconstruir, sin buscar el dato repetido por media docena de sitios.