Back to Projects
M-Beauty

M-Beauty

Bilingual marketing site for a beauty salon — services, gallery, pricing and booking

Astro iconVue iconTailwind iconTypeScript icon

A local beauty salon needed a professional online presence — service pages, a gallery, pricing, and a way for clients to reach them. The existing situation was a Facebook page and no dedicated website.

The Problem

The client had an established business with a loyal local clientele but no website. Potential customers searching online couldn’t find service details, pricing, or photos of the work. The salon also serves both Serbian and Hungarian-speaking clients, so a bilingual site was a requirement from the start.

What It Does

A multi-page static marketing site covering the full salon experience:

  • Home — hero, about section, service highlights, CTA
  • Services — categorized service pages with dynamic slugs
  • Gallery — lightbox photo gallery
  • Pricing — full service price list
  • About — owner bio and salon story
  • Contact — contact form and location

Available in Serbian (default) and Hungarian (/hu/... routes).

Architecture

Built with Astro 5 as a fully static site (output: "static"). The bulk of the UI is Astro components, with a single Vue 3 island (GalleryLightbox.vue) handling the interactive gallery modal — no unnecessary JavaScript elsewhere.

Bilingual routing via a custom i18n utility: Serbian is the default locale with no URL prefix, Hungarian lives under /hu/. Centralized SEO helpers generate meta tags, Open Graph, Twitter cards, and JSON-LD BeautySalon schema on every page.

The intentional architecture decision: stay SSG-first, add client-side JS only where interactivity is genuinely needed.