Start here
- Colours and type: change the six colour styles and the text styles (see the style guide). Everything follows.
- Your numbers: set
minutes and average on the LentoClock component. A therapist might use 50 and 15; a physio 60 and 20.
- Your hours: the
hours option. The week dials, the open/closed line and the booking slots all come from it.
- Your people and visits: edit the Team and Services collections. Pages, cards, fees and rulers update themselves.
- Photos: replace the images and set a focal point on each. The grade we used is one curve (desaturated, reds pulled down, fine grain); apply any single look to all of yours.
- Don’t want the concept?
enabled = false. You keep a complete, calm medical site.
What to change in each section
| Page | Section | What to change |
|---|
| Home | Hero | Photo (focal point), the number in the headline, lead, two buttons, proof line. Variant Clock puts the counter first (?hero=clock). |
| Home | Hero card | LentoClock Card: nothing to edit but minutes and average. |
| Home | Counter, comparison | LentoClock Visit and Compare: the five phases are text; switch both off with enabled = false. |
| Home | Services, team, reviews, fees, FAQ, journal | Nothing: all come from the CMS. |
| Home | Process | Four step cards: title, text, photo. |
| Home | Hours, booking | LentoClock Week and Booking: the hours option. |
| All pages | Footer | Address, links, the giant name (one text layer, 100 % width). |
| Book | Form | Form: fields, required flags, the success message. Replace the slot picker with your booking tool’s embed if you use one. |
| Contact | Map | The map is one SVG: replace it with your own or a map embed. |
CMS collections
Five collections, connected by references: Services ↔ Team (who does each visit), Posts → Team and Services, Reviews → Services and Team. In the prototype they live in data/*.json; every localised field is {en, es}.
Services (6)
| Field | Field type | Used for |
|---|
slug | Slug | URL of the page (/services/first-visit) |
title, summary | Plain text | Name and one-line promise; summary is also the meta description |
minutes | Number | Length of the visit: drives the fee ruler and the timeline |
price | Number (€) | Fee, formatted per language |
image | Image + alt + focal point | Card, page header and Open Graph |
chapters[] {at, label} | Array (code prop) or a text list | Chapters on the service’s timeline, at the minute they start |
body, includes, bring | Formatted text / lists | Page text and the two side lists |
doctors | Multi Reference → Team | “Who does this visit”, and the visits on each doctor’s page |
featured, order | Toggle / Number | Shown on the home page; sort order |
Team (4)
| Field | Field type | Used for |
|---|
slug, name, title | Slug / text | URL; plain name; name with Dr./Dra. |
role, bio, quote, story | Text / formatted text | Card, profile header and story |
portrait | Image + alt + focal point | 4:5 card crop and the portrait dial |
since, licence, trained, languages | Number / text | Facts on the profile |
days | Multi Option (0–6) | Days at the practice |
Posts (6)
| Field | Field type | Used for |
|---|
slug, date, title, excerpt | Slug / date / text | URL, sort order, card and meta |
category | Option: practice / visits / tests / prevention | Filter chips on the journal |
cover | Image + alt + focal point | Card and page image |
author | Reference → Team | Byline with portrait; “Written by” on the profile |
service | Reference → Services | Related visit box; “Read before you come” on the service |
body[] {type: p / h2 / quote / fact} | Formatted text | The entry. Reading time is computed at 200 words a minute |
Reviews (6)
| Field | Field type | Used for |
|---|
name, age, stars, date | Text / number | Signature and star rating |
portrait, text | Image / text | The testimonial |
service, doctor | Reference → Services / Team | Shown on the matching service and doctor pages |
FAQs (12)
| Field | Field type | Used for |
|---|
q, a | Text | Question and answer. Reading time is computed from the answer |
topic | Option: visits / booking / fees / practice | Filter chips; fees FAQs on the fees page |
home, order | Toggle / Number | Shown on the home page; sort order |
LentoClock
The only code component. It draws the 07:48 card, the counter, the comparison, the portrait dial, the rulers, the week dials, the booking wall clock, the pocket clock and the favicon. Every part has a static fallback, and reduced motion always gets the static version.
| Prop | Default | What it does |
|---|
enabled | true / false | false hides the counter and comparison sections; everything else keeps working with static text. Try ?lento=off |
variant | live / static | static: final states, no animation, no live time. Try ?lento=static |
minutes | 45 | Length of your visit: a psychologist 50, a physio 60, a nutritionist 40 |
average | 7.8 | The number you compare against, in minutes |
source | {label, url} | Where the average comes from |
colors | {time, ink, paper, rule} | Overrides the colour tokens |
hours | {1: [9, 14], …} | Opening hours per weekday (0 = Sunday); the week dials and the booking slots come from here |
slotMinutes, bookingUrl | 45, book.html | Slot length; where the home picker sends the chosen slot (Cal.com, Doctoralia-style tools…) |
pocket, favicon | true / false | The pocket clock (time on the site) and the live favicon |
timezone, wpm | Europe/Madrid, 200 | The practice’s clock in the footer; reading speed |
Motion
Everything else moves with native CSS/JS effects: Appear (0.7 s, y 24, blur 6, 60 ms stagger), text reveal per line, image reveal with clip and scale, sticky process cards, hover variants and a Wipe page transition. Tokens and demos are in the style guide.
Spanish version
The Spanish site ships as a full second language version. In this template, add ?lang=es to any page.
Changelog
| Version | Date | Changes |
|---|
| 2.0 | 2026-09-26 | Bestseller standard: 16 page templates, 5 CMS collections, photo-led hero, 36 graded photos, motion system, LentoClock with options and a static variant, no third-party scripts. |
| 1.1 | 2026-09-25 | Portrait dial, hours as clock faces, reading times. |
| 1.0 | 2026-09-25 | One-page prototype: odometer counter, comparison, pocket clock, booking wall clock, live favicon. |
Install video (Loom, 6 min): coming with the Marketplace release.