Ar Clean — Appointment-Slip Landing Page
A single-file HTML landing page for Ar Clean Ar-Condicionado, an installation, cleaning, and maintenance service in Mandaguari (PR). The most repeated praise on its public Google profile is punctuality, so the page turns that into its signature: a perforated appointment slip with a reserved time, the neighborhood, and a check mark that draws itself on load, followed by a weekly agenda grid that shows exactly why the schedule holds — Monday to Friday, booked by the hour, closed on weekends. An ice-and-pine identity with a single green signal, a Bricolage Grotesque / Inter / IBM Plex Mono type system, a six-card service grid, a three-cell reputation strip, review themes, WhatsApp-first CTAs, and a fixed mobile bar. Zero dependencies, zero build step, one self-contained file, built from public Google Maps information as a demonstration.
Project metrics
4 key metricsA ticket-style card with punched notches, drawn entirely in CSS — the signature element
Monday to Friday, 8am–6pm, booked by the hour — the reason the schedule holds
23 reviews on Google, punctuality the most repeated theme
Self-contained single HTML file — no dependencies, no build step
Problem statement
Everyone in the trade promises to arrive on time and most customers have been stood up anyway. The page had to make punctuality tangible in the first screen and then explain the operational reason it is possible, while staying one self-contained HTML file with every conversion on WhatsApp.
"We arrive at the agreed time" is the single most common — and least trusted — promise in local services
The praise exists in the reviews, but a wall of quotes is not proof, it is repetition
A schedule promise needs a mechanism behind it or it reads as marketing
Customers want to picture the appointment itself: the day, the hour, the confirmation
A 5.0-star / 23-review reputation had to appear early, with every CTA opening WhatsApp
Constraints
- Zero external dependencies beyond web fonts — no npm, no bundlers, no CSS frameworks
- Single-file delivery — the entire page must be one self-contained .html file
- No backend — the slip is an illustration of the process, not a live booking system
- Demonstration page built from public Google Maps data — marked noindex, nofollow and clearly labeled as not the official site
Approach & modules
A single-file landing page on an ice-blue canvas with a deep pine structure and one green signal. The signature is a perforated appointment slip — booked time, weekday, neighborhood, and a self-drawing check mark — backed by a weekly agenda grid that explains the mechanism: five days, booked by the hour, weekends closed. A six-card service grid, a three-cell reputation strip, and review themes complete the page.
The Perforated Appointment Slip
The signature element: a ticket-style card with a dark header, a dashed perforation line whose punched notches are pseudo-elements colored to match the page background, a large reserved time, and a check mark animated with stroke-dasharray on load. It renders an abstract promise — "your slot is confirmed" — as a physical object, with reduced-motion drawing the check instantly
The Weekly Agenda
A seven-cell week grid on a deep pine panel, five days lit in green and the weekend left dark, with a note explaining that the hour-by-hour booking is exactly why arrival times hold. It answers the follow-up question a punctuality claim always raises — how? — instead of repeating the claim louder
Ice & Pine Identity
An ice-blue canvas with white cards, a deep pine structure, and a single green signal reserved for action, rules, and the lit agenda days. Bricolage Grotesque carries the display, Inter the body, and IBM Plex Mono the uppercase micro-labels — clean and clinical, which suits a page about cleaning and schedules
Services, Proof & WhatsApp CTAs
A six-card service grid (install, sanitizing, repair, relocation, BTU sizing advice, scheduled preventive visits), a three-cell reputation strip with the 5.0★ / 23-review rating and hours, four review themes on green-ruled cards, and a contact block with address and coverage — every CTA a wa.me deep link, plus a fixed bottom action bar on mobile that hides at 720px
System design
Single-file delivery with no build step, no JavaScript, and no runtime dependencies beyond Google Fonts. The palette, the radius scale, and the hairline rules are CSS custom properties in one document. The slip perforation is drawn with a dashed border plus two circular pseudo-elements painted in the page background color, and the check mark is a single SVG path animated with stroke-dasharray — no images, no libraries, and a reduced-motion block that renders the final state directly.
Process visualization
Step-by-step workflow showing how data and operations flow through the system.
Take punctuality — the most repeated review theme — and make it the page's structural argument
Define the ice-and-pine identity with a single green signal and the Bricolage Grotesque / Inter / IBM Plex Mono type system
Build the perforated ticket card with punched notches, the reserved time, and the self-drawing check mark
Lay out the seven-cell week grid on the pine panel and write the note that explains why the schedule holds
Assemble the six-card service grid, the reputation strip, and the four review themes
Wire every CTA to a pre-filled WhatsApp deep link, pin the fixed mobile bar, and export as one self-contained .html file
Project journey
Key milestones and phases throughout the project lifecycle.
Punctuality As Object
Decided the punctuality promise would be shown as an appointment artifact rather than repeated as a sentence
Ice & Pine
Established the ice-blue canvas, deep pine structure, single green signal, and the Bricolage Grotesque / Inter / IBM Plex Mono type system
The Slip
Built the perforated ticket card in pure CSS — dashed rule, punched notch pseudo-elements — with an SVG check animated by stroke-dasharray
Agenda & Services
Laid out the seven-cell weekly agenda with its explanatory note, the six-card service grid, and the three-cell reputation strip
Contact & Mobile
Built the contact block with address, hours, and coverage area, wired the WhatsApp deep links, pinned the fixed mobile bar, and exported the single-file page
Punctuality As Object
Decided the punctuality promise would be shown as an appointment artifact rather than repeated as a sentence
Ice & Pine
Established the ice-blue canvas, deep pine structure, single green signal, and the Bricolage Grotesque / Inter / IBM Plex Mono type system
The Slip
Built the perforated ticket card in pure CSS — dashed rule, punched notch pseudo-elements — with an SVG check animated by stroke-dasharray
Agenda & Services
Laid out the seven-cell weekly agenda with its explanatory note, the six-card service grid, and the three-cell reputation strip
Contact & Mobile
Built the contact block with address, hours, and coverage area, wired the WhatsApp deep links, pinned the fixed mobile bar, and exported the single-file page
Dive into the documentation
Detailed implementation guides, architecture decisions and technical specifications for this project.