Consulting Site & Estimator
A construction consulting website whose rental estimator turns pricing questions into qualified leads
The client is a Calgary-based construction consulting firm whose credibility rests on decades of real project work, solar installations, commercial concrete, hospital railings, drainage and waterproofing repairs. We built its website end to end: information architecture, visual design implementation, every page and interaction, the estimator logic, and the email inquiry backend.
The site does two jobs at once. It presents the firm's six consulting services and a portfolio of 17 completed projects with roughly ninety genuine site photographs, and it gives the firm's seasonal revenue line, winter rental of the E3000 Hydronic Heater for ground thawing and concrete curing, its own conversion path, built around a self-service cost estimator.
There is no CMS, database, or third-party platform behind it. For a firm whose content changes rarely, we kept the content in typed constants and components, which keeps hosting simple and removes an entire class of maintenance overhead.
Proving a track record, and pricing a rental without friction
Construction consulting is a relationship business. The website needed to put the firm's real project history front and centre, actual site photography rather than stock imagery, so the portfolio reads as a body of work, not a grid of thumbnails.
The firm also had a seasonal offering to promote: renting hydronic heating equipment during Alberta winters. Pricing a rental involves several variables, site area, frost depth, rental duration, delivery, tarps, power, and setup, so a static "call us for a quote" page would add friction exactly where the firm wanted leads.
A brand site that doubles as a sales tool
We scoped deliberately: content-first pages with no CMS overhead, since the firm's services and history change rarely. The engineering effort went where it pays off, the estimator, the funnel, and the interaction details.
Rather than a brochure page, the E3000 offering got its own landing page structured as a conversion path: cover, estimator, product details, features, then a contact form that arrives pre-filled with the visitor's own quote.
Motion was used deliberately. Scroll-triggered Framer Motion reveals fire once per section so the site feels alive on first read without re-animating, and the greyscale hero video plays only while in view, saving bandwidth on a media-heavy page.
From pricing curiosity to a pre-qualified inquiry
The Ground Thaw Estimator computes a rental price entirely in the browser from the visitor's inputs: thaw area through a custom-masked length-by-width field with live sanitization, frost depth, rental duration, and four toggleable add-ons, delivery and pickup, insulated tarps, power availability, and equipment setup. It applies the firm's day rate and add-on charges, formats a total, and warns when the requested area exceeds the machine's 6,000 sq ft thawing capacity.
After calculating, a "Contact Us with Quote" button serializes every selection and the computed total into a readable summary, scrolls the visitor to the contact form, and pre-fills the message with it. The firm receives inquiries that already contain the project's dimensions, duration, options, and expected price, a qualified lead instead of a cold question.
Around the funnel sits the full brand presence: a full-viewport greyscale video hero, a six-card services grid, differentiators, an About page with company history and a founder profile, and a Projects page rendering each of the 17 portfolio entries as its own full-width section with an autoplaying, swipeable photo carousel in alternating split-background layouts. Contact forms validate on the client and submit to a Next.js API route that emails inquiries to the firm over SMTP.
Ground Thaw Estimator
A client-side pricing engine computing E3000 rental quotes from area, frost depth, duration, and four add-ons, with capacity warnings when a site exceeds the machine's 6,000 sq ft coverage.
Quote-to-inquiry funnel
The calculated quote is serialized into a readable summary and pre-filled into the contact form, so every estimator-driven inquiry arrives with dimensions, options, and expected price attached.
Photographic project portfolio
17 real construction projects and roughly ninety site photographs presented in autoplaying, swipeable carousels with alternating layouts, the firm's track record as proof, not stock imagery.
Six-service consulting catalog
Feasibility assessments, project management, strategic planning, compliance and risk management, custom solutions, and winter construction, presented in a card grid with consultation calls-to-action.
Validated inquiry pipeline
Contact forms across the site enforce required fields, email and phone formats, and minimum lengths, then deliver templated inquiries to the firm's inbox with clear success and error states.
Deliberate motion design
Scroll-triggered reveal animations that fire once per section and a viewport-aware hero video that pauses when scrolled out of view, polish that stays out of the way.
- 01
Next.js App Router in TypeScript
Pages composed from a library of section components with interactive sections as client components, and a single route handler dispatching contact submissions via Nodemailer over TLS SMTP.
- 02
Client-side pricing engine
The estimator's rate logic runs entirely in the browser, instant feedback, no server round-trip, nothing to deploy beyond the static page. Quote state is lifted into the E3000 page so the estimator and contact form stay decoupled while the funnel stays connected.
- 03
Input masking for dimension entry
The area field accepts natural typing, "30 60", "30*60", decimals, and sanitizes it live into a canonical L * W format with regex validation as a backstop, cutting form friction on the highest-value input.
- 04
Tailwind theme and typography system
A charcoal-and-orange project theme with custom keyframe animations, the Nexa display face loaded as local fonts alongside Poppins via Next's font optimization, and Swiper-powered carousels with autoplay, pagination, and navigation.
- 05
Viewport-aware media
The S3-hosted hero video plays only while visible via IntersectionObserver, and roughly ninety project photographs render through Next's image component.
- A complete six-page brand presence for the firm, from services through portfolio to contact.
- A self-service rental pricing tool that converts pricing curiosity into pre-qualified email inquiries containing project dimensions, options, and expected cost.
- A portfolio system presenting 17 real projects and around ninety site photographs in polished, swipeable galleries.
- An email-based inquiry pipeline with full client-side validation and clear submission feedback, with no CMS or database to maintain.