Freeframe
Business8 pages · 2 downloads · Free

Keystone

An architectural, high-trust site for a design-build construction firm, with a project estimator and case studies.

Stack
v1.0.0 changelog
DocsLive demo Download .zip192 KB

About this template

Keystone is a complete website for Corbel Design-Build, a fictional Milwaukee architecture studio and general contractor. It pairs a blueprint-inspired design (technical line drawings, dimension lines and a safety-orange accent) with a filterable project portfolio, a case study with a before/after slider and drawing gallery, a five-step cost estimator that feeds a validated quote request, and pages for services, leadership, safety record, careers and offices.

Features

  • Five-step project estimator with a live cost range, build time and breakdown, saved in localStorage and validated on load
  • Quote request form fed by the estimate, with inline validation and a success state
  • Project portfolio with type filters, live search, result count and shareable URLs
  • Case study page with a facts table, a keyboard-accessible before/after slider and a drawing gallery lightbox
  • Hero line drawing that draws itself in, plus count-up stats that respect reduced motion
  • Process timeline, safety and accreditation strip, and a hand-drawn SVG safety-record chart
  • Contact page with live open/closed status for each office, an SVG map and a validated contact form
  • Services page with sectors, contract models and an accessible FAQ accordion
  • Blueprint-style SVG project drawings, team portraits and a keystone 404 page, no external images
  • Accessible mobile menu, skip link, scroll reveals, back-to-top button, SEO and Open Graph tags

Pages included

Quick start

unzip keystone.zip && cd keystoneopen index.html        # that's it # optional, after adding new Tailwind classes:npm install && npm run build
Read the Keystone documentation →

Changelog

  1. v1.0.0

    Added

    • Eight pages: home, projects, a project case study, services, estimator, about, contact and a 404 page.
    • Five-step project estimator (type, size, finish, timeline, details) with a live cost range, build time and breakdown, remembered in localStorage (validated on load), feeding a quote request form with inline validation and a success state.
    • Project portfolio with type filters, live search, a result count and shareable ?type= / ?q= URLs.
    • Case study with a facts table, a keyboard-accessible before/after slider, a drawing gallery with an accessible lightbox and related projects.
    • Services page with sectors, contract models and an FAQ accordion; about page with a history timeline, values, leadership, an SVG safety-record chart and open roles; contact page with live open/closed office status, an SVG map and a validated contact form.
    • Hero line drawing that draws itself in, count-up stats, scroll reveals (all off for reduced motion), an accessible mobile menu and a back-to-top button.
    • Blueprint-style SVG project drawings, before/after views, team portraits, SVG favicon and a PNG social image (SVG source included). Full documentation in DOCS.md.

More templates