Technology Stack
React 19, Vite 7, Tailwind CSS 3.4, JavaScript, ESLint 9, PostCSS, Vercel
Overview
Duration: 2/2026
ACME — Amalgamated Construction Services Corp — is a licensed asbestos testing, removal, and demolition contractor operating in Massachusetts. Asbestos abatement is a trust purchase before it is a price purchase: the person filling in the form is usually a property owner or general contractor who has just found something they were not expecting, and who needs to know the company is licensed, insured, and will not create a bigger problem than the one it is solving.
So the page is built around proof rather than persuasion. Licences and certifications sit high on the page, the work itself is shown in photography and video instead of described, and the contact form asks for the project type up front so the callback can be useful from the first sentence. A single scrolling page — no routing, no CMS for the client to maintain — delivered to pixel fidelity against the approved design.
Page Structure
Eight sections, each its own component, composed in one place:
- Hero — full-screen background video behind the navigation and the primary calls to action
- Services — the three core offerings, testing, removal, demolition, as image cards
- Stats — headline numbers plus the licence and certification block
- Projects — featured work in an asymmetric grid
- Team video — crews on site, to put faces to a trade people are wary of
- Process — the four-step engagement flow, from assessment through clearance
- Contact — the enquiry form with a project-type selector
- Footer — company details, links, and social
Design & Typography
- A full display family, self-hosted — fourteen OpenType files, Thin through Black with matching italics, served from the same origin so the display face never falls back mid-render
- Editorial and UI faces alongside it for body and interface text
- Gold on navy — a high-contrast palette that reads as industrial and licensed rather than cheap
- Layout anchored to the design's art-board width with responsive overrides per breakpoint, which is what keeps the build faithful to the approved design rather than an approximation of it
Motion & Interaction
- Scroll-triggered reveals — each section owns an observer and flips a single visibility flag, so content animates in as it is reached rather than all at once on load
- Counting stats — the same flag drives the numbers, 25+ years, 1,500+ projects, 100% compliance, 500+ clients, animating up from zero with accompanying progress bars
- Video that actually autoplays — the hero video carries the specific attribute combination that lets it start on iOS without a tap, under two stacked gradient overlays that hold text contrast steady regardless of the frame behind it
- A custom select for project type, built from scratch rather than a native control so it matches the design, with an outside-click listener closing it correctly
The enquiry form is fully controlled with native validation on required fields, ready to connect to whichever mail or CRM endpoint the client chooses — everything in front of that boundary is finished and tested.
This is an execution build, and the value is exactly that: matching an approved design precisely, keeping a media-heavy page fast and responsive across every breakpoint, and making a compliance-driven trade look credible inside the first five seconds.