Construction company website sections

For construction companies and general contractors. Services with a drawn building, references with figures, the build schedule, site progress and an inquiry for the project.

5 variants

Switch category

From the first drawing to the handover

Clients choose a builder by what they have built and how reliably they deliver. These sections show both, references with real figures, a build schedule anyone can follow and the progress of sites that are running. The drawn building and the figures build up while scrolling.

Services lets a building rise floor by floor and swaps between shell, turnkey, renovation and commercial, with what is included line by line. References lists projects with floor area, build time and a third figure, filtered by type with totals that follow the filter. Build schedule shows the phases as bars on a week axis, each with its tasks, the client's part and the milestone. Site progress counts a ring up to the progress, fills the trades and adds the site diary entry by entry. Project inquiry asks kind, plot, area, start and budget, with a summary and the typical build time beside it.

Lead with references, three projects with figures say more than a list of services. Use the build schedule in the first meeting and link site progress for running projects, clients check it more often than they call. Keep the inquiry short, the details follow in the conversation.

ServicesNew in 1.2

Pick a service, the drawn building rises floor by floor while scrolling and swaps between shell, turnkey, renovation and commercial. The crane load swings, what is included comes in one line after another.

Installv1.0.0

aiw add @ai-website/construction

Brings along utils, kit, button, icon, section, motion, input, textarea, slider

Usage

<Construction variant="services" services={[{ id, title, summary, text, icon, stage: "turnkey", includes: [], facts: [{ label, value }] }]} />

Source

ReferencesNew in 1.2

Building projects with floor area, build time and a third figure that count up while scrolling. Filter by type, the totals above follow the filter, photos zoom in a little on hover.

Installv1.0.0

aiw add @ai-website/construction

Brings along utils, kit, button, icon, section, motion, input, textarea, slider

Usage

<Construction variant="projects" projects={[{ id, title, kind, location, year, area, months, extra: { label, value }, media }]} />

Source

Build scheduleNew in 1.2

The phases as bars on a week axis that fill one after another while scrolling. Pick a phase with a click or the arrow keys, its tasks, your part and the milestone swap in.

Installv1.0.0

aiw add @ai-website/construction

Brings along utils, kit, button, icon, section, motion, input, textarea, slider

Usage

<Construction variant="schedule" phases={[{ id, title, weeks, text, tasks: [], yours, milestone }]} />

Source

Site progressNew in 1.2

Pick a building site. The ring counts up to the progress, the trades fill as bars one after another, the site diary comes in entry by entry and a dot pulses next to the date of the photo.

Installv1.0.0

aiw add @ai-website/construction

Brings along utils, kit, button, icon, section, motion, input, textarea, slider

Usage

<Construction variant="site-progress" sites={[{ id, name, location, percent, handover, asOf, media, trades: [{ label, percent }], diary: [{ date, text }], next: { label, date } }]} />

Source

Project inquiryNew in 1.2

Project kind, plot, area, start and budget. The summary on the side follows every choice and the typical build time glides along with the area. Required fields explain themselves on sending.

Installv1.0.0

aiw add @ai-website/construction

Brings along utils, kit, button, icon, section, motion, input, textarea, slider

Usage

<Construction variant="inquiry" kinds={[{ id, label, icon, months: [9, 12] }]} budgets={[]} replyDays={2} onSubmit={(data) => …} />

Source

Details

What Construction brings along, read from the registry and the source.

Area: Industries
Variants: 5
Version: 1.0.0 · since 1.2.0
File: components/ui/construction.tsx
Brings along: utilskitbutton iconsectionmotioninput textarea slider
npm packages: None
Languages: English and German, 54 texts of its own
Studio: Adjust in code
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The ConstructionProps interface from components/ui/construction.tsx, with the comments from the code.

variantoptional
ConstructionVariant
servicesprojectsschedulesite-progressinquiry
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
servicesoptional
ConstructionService[]
services
projectsoptional
ConstructionProject[]
projects
phasesoptional
ConstructionPhase[]
schedule
sitesoptional
ConstructionSite[]
site-progress
kindsoptional
ConstructionKind[]
inquiry: project kinds and budget ranges
budgetsoptional
string[]
replyDaysoptional
number
inquiry: working days until the first answer
onSubmitoptional
(data: ConstructionInquiry) => void
linksoptional
{ inquiry?: string }
Jump targets, the inquiry form by default
idoptional
string
Id of the inquiry section, the target of links.inquiry

Built-in texts

Construction writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 54 texts

Key	English	German
services	English Services	German Leistungen
includes	English Included	German Inklusive
talk	English Discuss your project	German Vorhaben besprechen
filter	English Project type	German Projektart
all	English All	German Alle
area	English Floor area	German Fläche
sqm	English {n} m²	German {n} m²
buildTime	English Build time	German Bauzeit
monthsN	English {n} months	German {n} Monate
projectsN	English Projects	German Projekte
builtArea	English Built floor area	German Gebaute Fläche
avgTime	English Average build time	German Bauzeit im Schnitt
phases	English Phases	German Phasen
weeksN	English {n} wk	German {n} Wo.
weeksLong	English {n} weeks	German {n} Wochen
weekAxis	English Weeks from the start	German Wochen ab Start
weekTick	English {n}	German {n}
weOn	English What we do	German Das machen wir
yours	English Your part	German Ihr Part
milestone	English At the end	German Am Ende steht
total	English Overall about {n} weeks	German Insgesamt etwa {n} Wochen
site	English Building site	German Baustelle
done	English complete	German fertig
trades	English Trades	German Gewerke
diary	English Site diary	German Bautagebuch
next	English Next milestone	German Nächster Meilenstein
kind	English What do you want to build?	German Was möchten Sie bauen?
plot	English The plot	German Das Grundstück
plotOwn	English Plot is ready	German Grundstück ist da
plotSearch	English Still looking	German Noch auf der Suche
plotExisting	English Existing building	German Bestandsgebäude
size	English Living or floor area	German Wohn- oder Nutzfläche
start	English Start of construction	German Baubeginn
startSoon	English Within 6 months	German Innerhalb von 6 Monaten
startYear	English In 6 to 12 months	German In 6 bis 12 Monaten
startLater	English Later	German Später
budget	English Budget	German Budget
name	English Name	German Name
phone	English Phone	German Telefon
email	English Email	German E-Mail
place	English Building site, town or postcode	German Bauort oder Postleitzahl
message	English What should we know?	German Was sollten wir wissen?
messageHint	English Plans, wishes, special features of the plot	German Pläne, Wünsche, Besonderheiten des Grundstücks
required	English Please fill in this field.	German Bitte füllen Sie dieses Feld aus.
invalidEmail	English Please enter a valid email address.	German Bitte geben Sie eine gültige E-Mail-Adresse ein.
summary	English Your project	German Ihr Vorhaben
estimate	English Typical build time	German Übliche Bauzeit
estimateRange	English {lo} to {hi} months	German {lo} bis {hi} Monate
estimateNote	English A guide value from our last projects. You get a firm schedule with the offer.	German Ein Richtwert aus unseren letzten Projekten. Den festen Bauzeitenplan bekommen Sie mit dem Angebot.
reply	English We reply within {n} working days with a first assessment and a date for a meeting.	German Wir melden uns innerhalb von {n} Werktagen mit einer ersten Einschätzung und einem Terminvorschlag.
send	English Send project inquiry	German Bauanfrage senden
sent	English Thank you, your inquiry is with us	German Danke, Ihre Anfrage ist bei uns
sentText	English Your site manager looks at it and calls you to arrange a first meeting.	German Ihre Bauleitung sieht sie sich an und ruft Sie für ein erstes Gespräch an.
again	English Send another inquiry	German Weitere Anfrage senden

Read from the source of the component.

Construction handles the keys Arrow up, Arrow down, Arrow left, Arrow right and Space itself.
Sets aria-checked, aria-invalid, aria-label and aria-live, so screen readers announce purpose and state.
Uses the roles radio, radiogroup and status.
Announces changes through a live region without moving focus.
Shows a visible focus ring when used with the keyboard.
The server renders the starting state in full, JavaScript only adds the interaction.

Motion

Brings animations of its own, calmly timed and without wobble.
With reduced motion (prefers-reduced-motion) it stays still. 3 places in the code switch motion off then.

Frequent questions

How do I install Construction?

With aiw add @ai-website/construction. The command puts components/ui/construction.tsx into your project, the code is yours from then on. It brings along button, icon, section, motion, input, textarea and slider. It needs no further npm packages.

Which variants does Construction have?

5 variants, Services, References, Build schedule, Site progress and Project inquiry. You pick one with the variant prop, for example variant="projects".

Can I translate the texts of Construction?

Yes. Construction carries 54 texts of its own in English and German, such as “Services”, “Included” and “Discuss your project”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Construction?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Construction with aiw_components and install it with aiw_add @ai-website/construction. Name the variant in your prompt, for example variant="services", and the assistant writes your content straight into the props.

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to Construction on a page.

From the first drawing to the handover

Construction

ServicesNew in 1.2

ReferencesNew in 1.2

Build scheduleNew in 1.2

Site progressNew in 1.2

Project inquiryNew in 1.2

Details

Props

Built-in texts

Accessibility

Motion

Frequent questions

Similar components, Often combined with

Similar components

Often combined with