# Day 56 — Esthetician / Skincare Template

A free, open-source Astro template for licensed estheticians and boutique skincare studios. Features a full treatments menu (facials, chemical peels, microneedling, dermaplaning, LED therapy), a before/after results section, esthetician bio + credentials, client testimonials, a skincare FAQ, hours & location, and booking CTA — all in a clean, clinical-meets-botanical visual register.

**Live demo:** [templates.allanninal.dev/esthetician-skincare/](https://templates.allanninal.dev/esthetician-skincare/)

Part of the [365 free Astro templates](https://templates.allanninal.dev/) project by [Allan Ninal](https://www.linkedin.com/in/allanninal/).

---

## Features

- **Treatments menu** — 6 signature treatments with duration, price, benefits, and a "Most Requested" highlight badge
- **Before/After results** — 3-pairing results section with treatment label and anonymized client notes
- **Esthetician bio** — credentials, philosophy, portrait photo with overlay badge
- **Studio section** — space photo + amenity list
- **Trust callouts** — 4 clinical-authority points (licensed, medical-grade tech, ingredient-first, private studio)
- **Testimonials** — 5 client quotes with service context
- **FAQ accordion** — 8 skincare-specific questions with keyboard navigation (arrow keys)
- **Intake consultation note** — contextual callout for new-client prep
- **Hours & Location** — weekly hours table + address + Vagaro booking CTAs
- **Booking CTA** — closing section with primary + phone fallback

## Tech stack

- Astro 4 (static output)
- Tailwind CSS v3
- DM Serif Display + DM Sans Variable (self-hosted via @fontsource)
- Schema.org: `HealthAndBeautyBusiness`, `LocalBusiness`, `Person`, `Service`
- Playwright + axe-core for a11y testing
- Lighthouse CI (Performance / Accessibility / Best Practices / SEO ≥ 95)

## Color palette

| Token | Hex | Use |
|-------|-----|-----|
| `--color-green` | `#2D5016` | Primary accent (9.8:1 on bg — AAA) |
| `--color-clay-dark` | `#8B3F2A` | Eyebrows / decorative text (5.9:1 — AA) |
| `--color-bg` | `#FDF8F4` | Page background |
| `--color-text-muted` | `#5C3D2E` | Body copy (5.5:1 — AA) |

## Quick start

```bash
git clone https://github.com/allanninal/365-templates.git
cd templates/esthetician-skincare
npm install
npm run dev
```

Copy `.env.example` to `.env` and fill in your details.

## Customization

All placeholder content lives in `src/data/config.ts`:
- `esthetician` — name, business name, tagline, address, phone, email, booking URL, credentials, hours
- `treatments` — treatment list with description, duration, price, benefits
- `addOns` — add-on enhancement options
- `beforeAfters` — before/after result descriptions and client notes
- `testimonials` — client reviews
- `faqs` — FAQ accordion content
- `trustPoints` — why-choose callout cards
- `studioAmenities` — studio feature list

Replace photos in `public/images/` with your own.

## Deploy

Works on Netlify, Vercel, Cloudflare Pages, or any static host. Set `PUBLIC_BASE_PATH=/` for root deploys. Leave `PUBLIC_TEMPLATE_HUB_URL` blank to hide the download bar and analytics.

## License

MIT © 2026 Allan Ninal
