# Design brief: Thai Therapy home page revamp

You are redesigning the home page of **Thai Therapy**, a traditional Thai massage clinic at 26 Beauchamp Place, Knightsbridge, London SW3 1NJ (tel 020 7589 3709), open since 1999. The current site is an old 2016 WordPress theme. Make this the best page you have ever built: go all out. It should look like a high-end, award-level site made with care for this business, not a template.

The page has ONE job: get a visitor to **book an appointment** or **call**.

## 1. Content: real facts only

- Use ONLY the facts in content.json (attached below). Business name, tagline, address, phone, email, hours, services, prices, durations, about text, qualifications, press lines and customer reviews all come from there.
- Never invent anything: no made-up claims, statistics, awards, years, numbers of clients, star ratings, team names, therapist bios, travel times, tube stations, opening hours, prices, offers or testimonials. If a fact is not in content.json, leave it out.
- Reviews: use only the items in content.json `reviews`, quoted word for word (typos included), with the attribution exactly as shown. No star ratings. (Invented or edited reviews are illegal in the UK under the DMCC Act 2024.)
- Prices: show them exactly as given, and show the label "Prices as shown on their site, Jan 2025" near the price list.
- Hours: show `opening_hours.display` exactly, including the "[check hours]" flag.
- You may write short headings and connecting lines of your own (for example a section title), as long as they state nothing that is not true from content.json.
- Copy style: British English. No emojis. No em dashes. No "it's not X, it's Y" phrasing.

## 2. Main actions

- **Book an appointment** is the primary action. It links to `#book`, a booking section on the same page with a short request form built from the real form fields in content.json `booking` (it may post nowhere: `action="#"`). Mention the £20 deposit. Put a link with the text **[privacy notice]** and `href="#privacy"` beside the submit button, and a link to their terms page.
- **Call 020 7589 3709** (`href="tel:+442075893709"`) is the second action.
- Both must be easy to reach at all times on a phone (within thumb reach), and the booking button must be the one thing that stands out most on the page.
- Footer: address, phone, email, hours, a map link (content.json `contact.map_link`), the [privacy notice] link and the terms link.

## 3. Photos

- There is exactly one photo: `../assets/thai-therapy-hero.jpg` (1694 x 1133, landscape). content.json `photos` describes what it shows and how to crop it. Reference it with exactly that relative path.
- Do not use, hotlink or invent any other image URL (no Unsplash, no placeholders). Shapes, patterns and illustration in CSS or inline SVG are fine.
- Give the photo meaningful alt text.

## 4. Phone first

- Design for a 390 px wide phone first, then scale up to a 1440 px desktop.
- No sideways scrolling at any width. No text cut off at the edges. Nothing overlapping.
- Tap targets at least 44 x 44 px. Body text at least 16 px.
- Twelve services is a long list: on phones, group them (for example tabs by kind of treatment, one group per tab, as cards) rather than one endless list.

## 5. One signature moment, everything else calm

Build the page around ONE striking visual idea, spent in one place, with everything else quiet and confident. Pick one (or invent one that suits this subject):

- **Focus pull:** on load the hero photo goes from blurred and scale 1.08 to sharp, then the headline rises, then the rest. A one-off, cleared when done.
- **Chapters:** full-screen sections crossfading on scroll with a slow push-in (scale 1 to 1.12); a heavy title low-left, a thin rule and a number above it, one short line below.
- **Portal:** a page-coloured layer with a window cut in it (an SVG path with `fill-rule: evenodd`) over the full-bleed photo; scale the layer up from the window's centre as the section scrolls. Transform only.
- **Kinetic type wall:** one giant word repeated in stacked lines, each line moving at a different speed on scroll, in one strong brand colour.
- **Scene to scene:** pinned full-bleed sections with a huge headline revealed line by line.

Motion rules (enforced):

- **Composited motion only.** Animate only `transform` (translate, scale, rotate) and `opacity`. Never animate `clip-path`, `filter`, `width`, `height`, `top`/`left`, or masks on scroll: they repaint every frame and stutter on phones. (The one-off focus pull on load may use `filter`, then must clear it.)
- **Short pins:** a pinned section uses about 70 to 80svh of scroll per change, never 100+.
- Respect `prefers-reduced-motion`: show a still or a simple fade instead.
- Mobile gets the same idea, simplified, never broken.
- No hover animation on everything; no animated arrows.

## 6. Allowed tools (free only)

- Fonts: Google Fonts only (1 or 2 families, a clear type scale). If you load only one weight of a font, set `font-synthesis: none`.
- Scripts, only these exact files, all optional:
  - `https://cdnjs.cloudflare.com/ajax/libs/gsap/3.15.0/gsap.min.js`
  - `https://cdnjs.cloudflare.com/ajax/libs/gsap/3.15.0/ScrollTrigger.min.js`
  - `https://cdnjs.cloudflare.com/ajax/libs/gsap/3.15.0/SplitText.min.js`
  - Lenis smooth scroll (not hosted on cdnjs, so use this copy): `https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.min.js` and `https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.css`. If you use Lenis, wire it to ScrollTrigger (`lenis.on('scroll', ScrollTrigger.update)` and drive `lenis.raf` from `gsap.ticker`).
- Nothing else external: no other CDNs, no frameworks, no icon libraries, no analytics, no cookies, no paid anything.
- The page must still work and look complete if the scripts fail to load.

## 7. NEVER (the "vibecoded" defaults)

Allowed only when you deliberately choose one for a stated reason:

- Colour: harsh gradients, rainbow colouring, purple-and-black, neon colours, basic pastels, a pure white (#fff) background.
- Type and copy: Inter, Geist or Space Grotesk by default; emojis; em dashes; "it's not X, it's Y" phrasing.
- Layout: three feature cards in a row, bento grids, a coloured left stripe on cards, a fake terminal window, three pricing tiers by default, dot grids, glowing radial orbs.
- Decoration: icon libraries by default, sparkle icons, tick-mark bullets, drop shadows everywhere, "liquid glass", one soft corner radius on everything, animated arrows, hover animations on everything.
- Substance: fake testimonials, no privacy notice, no terms.

## 8. ALWAYS (the UX laws)

- Hick: few choices, short menus.
- Fitts: big main button, placed where the thumb or eye already is.
- Jakob: familiar patterns for the menu and the form.
- Proximity, similarity, Prägnanz: group related things, style things of the same kind alike, keep shapes simple.
- Miller: chunk information into small groups.
- Doherty: visible feedback within 0.4 s (for example on button press).
- Von Restorff: the booking action is the one thing that stands out.
- Serial position: key content first and last (booking and phone at the top and at the end).
- Peak-end: one high point (the signature moment) and a good ending (the booking section).
- Tesler and Occam: the page absorbs the complexity; remove whatever is not needed.
- Parkinson and Postel: a short form with autofill attributes (`autocomplete`), accepting any reasonable phone format.

## 9. Accessibility basics

- Correct document: `<!doctype html>` as the very first line, `<html lang="en-GB">`, `<meta charset="utf-8">`, a viewport meta tag, a real `<title>`, and `<meta name="robots" content="noindex, nofollow">` (this is a test page).
- Semantic landmarks (`header`, `nav`, `main`, `footer`), one `h1`, headings in order, a skip link.
- Colour contrast at least 4.5:1 for body text and 3:1 for large text, including text over the photo.
- Visible keyboard focus on every link, button and field.
- Every form field has a visible label.
- Alt text on the image.
- Zero console errors.

## 10. Output

- Return ONE complete, self-contained `index.html`: all CSS in one `<style>` block and all JavaScript inline, apart from the Google Fonts stylesheet and the allowed script files above.
- Reference the photo as `../assets/thai-therapy-hero.jpg`.
- Return only the HTML, starting with `<!doctype html>` and ending with `</html>`. No explanations, no markdown, no code fences.