Zum Inhalt springen
UI Kit
Accent

Bauunternehmen Website Sections

Für Bauunternehmen und Generalunternehmer. Leistungen mit gezeichnetem Gebäude, Referenzen mit Kennzahlen, der Bauablauf, der Baustellen-Fortschritt und eine Anfrage zum Bauvorhaben.

5 Variants
Kategorie wechseln

Von der ersten Zeichnung bis zur Übergabe

Bauherren wählen ein Bauunternehmen danach, was es gebaut hat und wie verlässlich es liefert. Diese Sections zeigen beides, Referenzen mit echten Kennzahlen, einen Bauablauf, dem jeder folgen kann, und den Fortschritt laufender Baustellen. Das gezeichnete Haus und die Zahlen bauen sich beim Scrollen auf.

„Leistungen“ lässt ein Haus Etage für Etage wachsen und wechselt zwischen Rohbau, schlüsselfertig, Sanierung und Gewerbebau, mit den Leistungen Zeile für Zeile. „Referenzen“ zeigt Projekte mit Fläche, Bauzeit und einer dritten Kennzahl, gefiltert nach Art, die Summen oben folgen dem Filter. Der „Bauablauf“ zeigt die Phasen als Balken auf einer Wochenachse, jede mit Aufgaben, dem Teil des Bauherrn und dem Meilenstein. „Baustellen-Fortschritt“ zählt einen Ring bis zum Stand hoch, füllt die Gewerke und ergänzt das Bautagebuch Eintrag für Eintrag. Die „Bauanfrage“ fragt Art, Grundstück, Fläche, Baubeginn und Budget ab, mit Zusammenfassung und typischer Bauzeit daneben.

Stell die Referenzen nach vorn, drei Projekte mit Kennzahlen sagen mehr als eine Liste von Leistungen. Nutze den Bauablauf im ersten Gespräch und verlinke den Baustellen-Fortschritt für laufende Projekte, Bauherren schauen dort öfter nach, als sie anrufen. Halte die Anfrage kurz, die Details folgen im Gespräch.

Bauunternehmen

LeistungenNeu in 1.2

Eine Leistung wählen, das gezeichnete Gebäude wächst beim Scrollen Geschoss für Geschoss und wechselt zwischen Rohbau, schlüsselfertig, Sanierung und Gewerbe. Die Last am Kran schwingt, die Leistungen kommen Zeile für Zeile.

ReferenzenNeu in 1.2

Bauprojekte mit Fläche, Bauzeit und einer dritten Kennzahl, die beim Scrollen hochzählen. Nach Art filtern, die Summen darüber folgen dem Filter, Fotos zoomen beim Zeigen leicht heran.

BauablaufNeu in 1.2

Die Phasen als Balken auf einer Wochenachse, die sich beim Scrollen nacheinander füllen. Eine Phase per Klick oder Pfeiltaste wählen, Aufgaben, Ihr Part und der Meilenstein wechseln.

Baustellen-FortschrittNeu in 1.2

Eine Baustelle wählen. Der Ring zählt bis zum Fortschritt, die Gewerke füllen sich als Balken nacheinander, das Bautagebuch kommt Eintrag für Eintrag und neben dem Datum des Fotos pulsiert ein Punkt.

BauanfrageNeu in 1.2

Vorhaben, Grundstück, Fläche, Baubeginn und Budget. Die Übersicht daneben folgt jeder Wahl, die übliche Bauzeit gleitet mit der Fläche mit. Pflichtfelder erklären sich beim Absenden.

Details

Was Bauunternehmen mitbringt, aus Registry und Quellcode gelesen.

Bereich
Industries
Variants
5
Version
1.0.0 · seit 1.2.0
Datei
components/ui/construction.tsx
Bringt mit
utilskitbuttoniconsectionmotioninputtextareaslider
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 54 eigene Texte
Studio
Im Code anpassen

Props

Die Schnittstelle ConstructionProps aus components/ui/construction.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • 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

Eingebaute Texte

Diese Texte schreibt Bauunternehmen selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 54 Texte anzeigen
servicesEnglisch ServicesDeutsch Leistungen
includesEnglisch IncludedDeutsch Inklusive
talkEnglisch Discuss your projectDeutsch Vorhaben besprechen
filterEnglisch Project typeDeutsch Projektart
allEnglisch AllDeutsch Alle
areaEnglisch Floor areaDeutsch Fläche
sqmEnglisch {n} m²Deutsch {n} m²
buildTimeEnglisch Build timeDeutsch Bauzeit
monthsNEnglisch {n} monthsDeutsch {n} Monate
projectsNEnglisch ProjectsDeutsch Projekte
builtAreaEnglisch Built floor areaDeutsch Gebaute Fläche
avgTimeEnglisch Average build timeDeutsch Bauzeit im Schnitt
phasesEnglisch PhasesDeutsch Phasen
weeksNEnglisch {n} wkDeutsch {n} Wo.
weeksLongEnglisch {n} weeksDeutsch {n} Wochen
weekAxisEnglisch Weeks from the startDeutsch Wochen ab Start
weekTickEnglisch {n}Deutsch {n}
weOnEnglisch What we doDeutsch Das machen wir
yoursEnglisch Your partDeutsch Ihr Part
milestoneEnglisch At the endDeutsch Am Ende steht
totalEnglisch Overall about {n} weeksDeutsch Insgesamt etwa {n} Wochen
siteEnglisch Building siteDeutsch Baustelle
doneEnglisch completeDeutsch fertig
tradesEnglisch TradesDeutsch Gewerke
diaryEnglisch Site diaryDeutsch Bautagebuch
nextEnglisch Next milestoneDeutsch Nächster Meilenstein
kindEnglisch What do you want to build?Deutsch Was möchten Sie bauen?
plotEnglisch The plotDeutsch Das Grundstück
plotOwnEnglisch Plot is readyDeutsch Grundstück ist da
plotSearchEnglisch Still lookingDeutsch Noch auf der Suche
plotExistingEnglisch Existing buildingDeutsch Bestandsgebäude
sizeEnglisch Living or floor areaDeutsch Wohn- oder Nutzfläche
startEnglisch Start of constructionDeutsch Baubeginn
startSoonEnglisch Within 6 monthsDeutsch Innerhalb von 6 Monaten
startYearEnglisch In 6 to 12 monthsDeutsch In 6 bis 12 Monaten
startLaterEnglisch LaterDeutsch Später
budgetEnglisch BudgetDeutsch Budget
nameEnglisch NameDeutsch Name
phoneEnglisch PhoneDeutsch Telefon
emailEnglisch EmailDeutsch E-Mail
placeEnglisch Building site, town or postcodeDeutsch Bauort oder Postleitzahl
messageEnglisch What should we know?Deutsch Was sollten wir wissen?
messageHintEnglisch Plans, wishes, special features of the plotDeutsch Pläne, Wünsche, Besonderheiten des Grundstücks
requiredEnglisch Please fill in this field.Deutsch Bitte füllen Sie dieses Feld aus.
invalidEmailEnglisch Please enter a valid email address.Deutsch Bitte geben Sie eine gültige E-Mail-Adresse ein.
summaryEnglisch Your projectDeutsch Ihr Vorhaben
estimateEnglisch Typical build timeDeutsch Übliche Bauzeit
estimateRangeEnglisch {lo} to {hi} monthsDeutsch {lo} bis {hi} Monate
estimateNoteEnglisch A guide value from our last projects. You get a firm schedule with the offer.Deutsch Ein Richtwert aus unseren letzten Projekten. Den festen Bauzeitenplan bekommen Sie mit dem Angebot.
replyEnglisch We reply within {n} working days with a first assessment and a date for a meeting.Deutsch Wir melden uns innerhalb von {n} Werktagen mit einer ersten Einschätzung und einem Terminvorschlag.
sendEnglisch Send project inquiryDeutsch Bauanfrage senden
sentEnglisch Thank you, your inquiry is with usDeutsch Danke, Ihre Anfrage ist bei uns
sentTextEnglisch Your site manager looks at it and calls you to arrange a first meeting.Deutsch Ihre Bauleitung sieht sie sich an und ruft Sie für ein erstes Gespräch an.
againEnglisch Send another inquiryDeutsch Weitere Anfrage senden

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Bauunternehmen reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links, Pfeil rechts und Leertaste.
  • Setzt aria-checked, aria-invalid, aria-label und aria-live, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen radio, radiogroup und status.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
  • Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 3 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Bauunternehmen?

Mit aiw add @ai-website/construction. Der Befehl legt die Datei components/ui/construction.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, section, motion, input, textarea und slider. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Bauunternehmen?

5 Varianten, Leistungen, Referenzen, Bauablauf, Baustellen-Fortschritt und Bauanfrage. Du wählst sie mit der Prop variant, zum Beispiel variant="projects".

Kann ich die Texte von Bauunternehmen übersetzen?

Ja. Bauunternehmen bringt 54 eigene Texte auf Deutsch und Englisch mit, etwa „Leistungen“, „Inklusive“ und „Vorhaben besprechen“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Bauunternehmen einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Bauunternehmen mit aiw_components und installieren sie mit aiw_add @ai-website/construction. Nenn im Prompt die Variante, etwa variant="services", dann schreibt der Assistent deine Inhalte direkt in die Props.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert