Naughty Nails Club

Astro TypeScript Tailwind CSS Booking UX Vercel
Naughty Nails Club

Table of Contents

This is a list of all the sections in this post. Click on any of them to jump to that section.

Overview

“Nails that bite back — custom, always.” Nadya runs the studio solo, so the site had to do two things: show the work well enough to sell it, and take a booking without her having to chase anyone through DMs.

Chrome, charms, thorns, editorial sets — the design leans dark and neon-pink, and the build had to keep that loud without getting slow. It’s Astro 7 + Tailwind CSS v4, statically generated, five pages, no runtime framework.

🛠️ What I Did

  • Built the whole site — / · /looks · /menu · /book · /contact — in Astro 7 with Tailwind v4
  • Looks gallery with category and shape filtering (chrome, gothic, 3D charms, editorial), plus saved looks that persist per device via localStorage
  • Service menu with pricing and durations — full sets, fills, press-on drops, removal and repair — and add-ons that adjust both price and time
  • Two-step booking flow: /menu handles the whole selection step (service, add-ons, date, time) and carries the choice to /book as query params, so the second page renders only the details form. The same “Your set” summary component runs on both
  • Wrote the date and time logic: 90 rolling days and half-hour slots from 8:00am to 9:00pm, rebuilt on the client at load so a statically built page never offers a date that has already passed
  • Nothing is hard-blocked — the customer picks whatever suits them, and a soft “outside her usual hours, she’ll confirm” note appears rather than a locked-out calendar
  • Built a small component library on top of the design tokens — Button, Badge, Tag, Card, Checkbox, Field, Select, LookTile, ServiceRow, Marquee — with the design system’s colours, type scale, radii, shadows and easings declared in Tailwind’s @theme
  • Composite values Tailwind has no namespace for — gradients, neon glows, glass blur — live as CSS custom properties and get used through arbitrary values

🗂️ Built to Hand Over

All the copy and content — looks, services, add-ons, slots, nav, stats, marquee lines — lives in one site.ts file. Adding a look or a service is a one-line edit there, with no component changes. Nadya’s working days and hours are a single object; everything downstream follows from it.

That was the point: a solo studio owner shouldn’t need a developer to add a service or change a price.

✨ Results

  • A fast, static site that carries the brand’s attitude without paying for it in load time
  • Booking that fits how she actually works — no deposit, no forced calendar, she confirms
  • Content and pricing she can maintain herself from a single file
  • Direct WhatsApp handoff for anything the form doesn’t cover