A from-scratch marketing site for Masaje Esencial, a massage and wellness studio in Spain run by a therapist named Marian. It presents five signature treatments, a decontracturing massage, a Japanese facial lift, body wood therapy (maderoterapia), a relaxing aromatherapy massage, and an energy therapy with Tibetan bowls and Reiki, inside a calm, hand-built lavender aesthetic. The whole thing is a self-contained static site with no CMS and no database, and bookings happen directly over WhatsApp and Instagram rather than through forms or accounts.
Features
- Branded Design System: a hand-built lavender and plum palette with a Cormorant Garamond display serif over Inter body text, all defined as central CSS
@themetokens (colors, a fluid type scale, spacing) instead of scattered utility classes - Five Treatments From One Source: each service is authored once in a typed TypeScript data model and rendered through a single dynamic route, so adding or editing a treatment is a one-place change
- Motion With Restraint: a word-by-word hero entrance and scroll-revealed sections driven by IntersectionObserver, all switched off automatically under
prefers-reduced-motion - Frictionless Booking: WhatsApp, click-to-call, and Instagram links in place of a contact form, so every enquiry lands where the owner already replies
- Hand-Coded Components, No Page Builder: a custom header with a mobile nav drawer, an SVG lotus logo mark, section separators, and reusable service cards, none of it from a template
- Accessible by Default: semantic landmarks, visible focus rings, an AA-contrast palette, and per-page titles and descriptions for search and social
Tech Stack
- Astro 7 with a fully static build, no server and no client-side UI framework
- Tailwind CSS v4 wired in through the
@tailwindcss/viteplugin, layered over a custom design-token theme - TypeScript throughout, with the service catalogue modeled as a typed data array rather than a CMS
- Cormorant Garamond and Inter served via Google Fonts, with an SVG logo and favicon
- Progressive-enhancement scripts only (scroll reveal, nav drawer), so the core content renders without JavaScript
- Deployed as a static site at masajeesencial.es
One Data Model, Five Pages
Every treatment lives as a single typed entry in a Servicio data array: hook, eyebrow, subtitle, intro, benefits, “what it involves”, an optional closing block, and a final quote. A getStaticPaths step reads that array and generates one static detail page per service through a shared [slug] route and layout, so the home page cards and the detail pages are always built from the same source of truth. A ready flag gates which services are published, letting new treatments be drafted in the data model and switched on when their page is finished, without touching any routing code.
Frequently Asked Questions
What is Masaje Esencial?
It is a marketing site I built from scratch for Masaje Esencial, a massage and wellness studio in Spain run by a therapist named Marian. The site presents five signature treatments: a decontracturing massage, a Japanese facial lift, body wood therapy (maderoterapia), a relaxing aromatherapy massage, and an energy therapy with Tibetan bowls and Reiki.
What platform does it run on?
It is a fully static site deployed at masajeesencial.es, with no CMS and no database behind it. The core content renders without JavaScript, and the only scripts are progressive-enhancement touches like the scroll reveal and the nav drawer.
What is it built with?
Astro 7 with a fully static build, no server and no client-side UI framework. Tailwind CSS v4 is wired in through the @tailwindcss/vite plugin over a custom design-token theme, and TypeScript is used throughout, with the service catalogue modeled as a typed data array. Cormorant Garamond and Inter come from Google Fonts, alongside an SVG logo and favicon.
How do bookings work?
There is no contact form. Bookings happen directly over WhatsApp, click-to-call, and Instagram links, so every enquiry lands where the owner already replies.
Un sitio de presentación hecho desde cero para Masaje Esencial, un estudio de masaje y bienestar en España que lleva una terapeuta llamada Marian. Presenta cinco tratamientos propios: un masaje descontracturante, un lifting facial japonés, maderoterapia corporal, un masaje relajante de aromaterapia y una terapia energética con cuencos tibetanos y Reiki, dentro de una estética lavanda, tranquila y hecha a mano. El conjunto es un sitio estático autónomo, sin CMS y sin base de datos, y las reservas se hacen directamente por WhatsApp e Instagram, no mediante formularios ni cuentas.
Funciones
- Sistema de diseño con marca: una paleta lavanda y ciruela hecha a mano, con una serif de titulares Cormorant Garamond sobre el texto de cuerpo Inter, todo definido como tokens centrales de CSS
@theme(colores, una escala tipográfica fluida, espaciado) en lugar de clases de utilidad repartidas - Cinco tratamientos desde una sola fuente: cada servicio se redacta una vez en un modelo de datos tipado en TypeScript y se renderiza por una única ruta dinámica, así que añadir o editar un tratamiento es un cambio en un solo sitio
- Movimiento con mesura: una entrada del héroe palabra a palabra y secciones que se revelan al desplazar, impulsadas por IntersectionObserver, y todo se desactiva solo bajo
prefers-reduced-motion - Reserva sin fricción: enlaces de WhatsApp, de llamada con un toque y de Instagram en lugar de un formulario de contacto, para que cada consulta llegue donde la dueña ya responde
- Componentes escritos a mano, sin constructor de páginas: una cabecera propia con un cajón de navegación en el móvil, un logotipo de loto en SVG, separadores de sección y tarjetas de servicio reutilizables, nada de ello sacado de una plantilla
- Accesible de serie: regiones semánticas, anillos de foco visibles, una paleta con contraste AA, y títulos y descripciones por página para la búsqueda y las redes
Pila técnica
- Astro 7 con una construcción totalmente estática, sin servidor y sin framework de interfaz en el cliente
- Tailwind CSS v4 conectado mediante el plugin
@tailwindcss/vite, en capas sobre un tema propio de tokens de diseño - TypeScript en todo el proyecto, con el catálogo de servicios modelado como un array de datos tipado y no como un CMS
- Cormorant Garamond e Inter servidas mediante Google Fonts, con logotipo y favicon en SVG
- Solo scripts de mejora progresiva (revelado al desplazar, cajón de navegación), de modo que el contenido principal se renderiza sin JavaScript
- Desplegado como sitio estático en masajeesencial.es
Un modelo de datos, cinco páginas
Cada tratamiento vive como una sola entrada tipada en un array de datos Servicio: gancho, antetítulo, subtítulo, introducción, beneficios, «en qué consiste», un bloque de cierre opcional y una cita final. Un paso getStaticPaths lee ese array y genera una página estática de detalle por servicio, a través de una ruta y un layout compartidos [slug], de modo que las tarjetas de la portada y las páginas de detalle se construyen siempre desde la misma fuente de verdad. Una bandera ready decide qué servicios están publicados y permite redactar tratamientos nuevos en el modelo de datos y activarlos cuando su página está terminada, sin tocar ningún código de enrutado.
Preguntas frecuentes
¿Qué es Masaje Esencial?
Es un sitio de presentación que construí desde cero para Masaje Esencial, un estudio de masaje y bienestar en España que lleva una terapeuta llamada Marian. El sitio presenta cinco tratamientos propios: un masaje descontracturante, un lifting facial japonés, maderoterapia corporal, un masaje relajante de aromaterapia y una terapia energética con cuencos tibetanos y Reiki.
¿En qué plataforma funciona?
Es un sitio totalmente estático, desplegado en masajeesencial.es, sin CMS y sin base de datos detrás. El contenido principal se renderiza sin JavaScript, y los únicos scripts son toques de mejora progresiva, como el revelado al desplazar y el cajón de navegación.
¿Con qué está hecho?
Con Astro 7 y una construcción totalmente estática, sin servidor y sin framework de interfaz en el cliente. Tailwind CSS v4 se conecta mediante el plugin @tailwindcss/vite sobre un tema propio de tokens de diseño, y se usa TypeScript en todo el proyecto, con el catálogo de servicios modelado como un array de datos tipado. Cormorant Garamond e Inter vienen de Google Fonts, junto a un logotipo y un favicon en SVG.
¿Cómo funcionan las reservas?
No hay formulario de contacto. Las reservas se hacen directamente por enlaces de WhatsApp, de llamada con un toque y de Instagram, así que cada consulta llega donde la dueña ya responde.