Obsidian: A Dark, Photo-Led Site for a Premium Barbershop in Alicante

The Challenge

Obsidian is a premium barbershop with its own tattoo studio in Alicante. Its clients are locals and the many foreigners and visitors in the city, so the site needed Spanish, English and Russian from the start.

In this business the site has one job: make the visitor want to book, then make booking take one tap. A barbershop is chosen with the eyes, so the design had to be built around photographs, not text.

Designed Around Photos

The site is dark only - a black, gold-accented look that matches the shop and lets the photos carry the page.

• A before-and-after slider, built for both touch and mouse, shows the real transformation: what a cut actually changes.
• The team section lists the barbers with links to their Instagram, and the photo gallery opens full screen.
• The tattoo studio has its own section with styles, starting prices and a separate gallery of tattoo work.
• Products and gift cards for the shop’s grooming range and for presents.

Clear Prices, One-Tap Booking

Services come in three levels - Normal, Premium and Luxury - with the price of each for a haircut and for a haircut with beard. The visitor sees what they get at each level before choosing.

Every “Book now” button leads to the shop’s Booksy page, where clients already book and leave reviews. WhatsApp and a phone link are always at hand. The site has no forms of its own, so it collects no personal data.

Trust Built In

The Google rating and number of reviews are fetched from the Google Places API every time the site is built, so the figure on the page follows the real one without anyone editing it.

Pages with a Purpose

Beyond the home page, the site has two landing pages, each aimed at a specific question:

• The Obsidian Method explains why a cut starts with a consultation and a diagnosis, compared with the “same cut for everyone” approach.
• Tattoo holiday speaks to visitors who want to get tattooed while in Spain, with English-speaking artists and a free WhatsApp consultation as the first step.

Speed and Search

• The hero image is served in responsive sizes, preloaded and given priority, because it is the largest element of the first screen.
• Critical CSS is inlined and the HTML is compressed; fonts are loaded as separate files rather than embedded in the stylesheet.
• The Spanish home page - the main language of the local market - is tuned for barbershop searches in Alicante.
• Language versions are linked with hreflang, every page has a canonical URL, and unknown addresses return a real 404.

Tech Stack

- Generator: Astro (static build)
- Styling: Tailwind CSS 4 + daisyUI 5 + @yatoday/astro-ui
- Interactive parts: Svelte 5, PhotoSwipe
- Booking: Booksy
- Ratings: Google Places API, fetched at build time
- CI/CD: GitLab CI → Cloudflare Pages

Result

A fast static site in three languages that presents the barbershop the way it wants to be seen: through its work. Prices are clear, the rating is always current, and every page leads to Booksy or WhatsApp. There is no server or CMS to maintain.