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.