←Alle Projekte
Case Study2025· Next.js, Shadcn UI, Prisma

tz baufokus

Ein Bauunternehmen mit über 15 Jahren Erfahrung verdient einen digitalen Auftritt, der genauso solide und durchdacht ist wie seine Projekte. Für TZ Baufokus haben wir eine Website geschaffen, die Kompetenz ausstrahlt und Vertrauen schafft.

TZ Baufokus GmbH Website – Next.js Webdesign für Bauunternehmen, creatingfaces Wien
100Lighthouse Score
15+Jahre Erfahrung
8 StepsProjektanfrage
DSGVOBest Practice

der kunde

TZ Baufokus GmbH ist ein Bauunternehmen mit umfassender Kompetenz in Ausführung, Baumanagement und Planung. Gegründet von Matthias Trenker und Ivan Zuljevic, die sich seit über zehn Jahren kennen und gemeinsam die Baumeisterprüfung abgelegt haben. Ihre langjährige Partnerschaft und ihr gemeinsamer Werdegang prägen den Arbeitsstil des Unternehmens: zuverlässig, engagiert und mit dem Blick für jedes einzelne Detail.

Das Unternehmen begleitet Bauprojekte von der ersten Idee bis zur erfolgreichen Fertigstellung. Von Wohn- und Gewerbebau über Industrieprojekte bis hin zu komplexen Sanierungen bietet TZ Baufokus alles aus einer Hand. Dabei setzen sie auf modernste Methoden und digitale Werkzeuge, um Transparenz und Effizienz in jedem Projektschritt zu gewährleisten.

die anforderung

TZ Baufokus wollte eine Website, die sich klar von der Masse abhebt. Kein typischer Bauunternehmen-Auftritt mit generischen Stockfotos und langweiligen Layouts, sondern ein digitales Erlebnis, das Professionalität und Innovation auf den ersten Blick vermittelt. Die Inspirationsquellen waren klar: Plattformen wie linear.app, shadcn.com und framer.com zeigten die Richtung.

Gleichzeitig musste die Website technisch makellos sein. Maximale Performance, perfekte SEO Optimierung, vollständige DSGVO Konformität und ein professionelles Anfrage-System, das potenzielle Kunden Schritt für Schritt durch den Projektanfrage-Prozess führt.

unsere umsetzung – Next.js Webdesign Wien

Tech Stack

Next.js 16
Shadcn UI
Prisma + SQLite
Framer Motion

Wir haben eine komplett maßgeschneiderte Website mit Next.js 16 und dem App Router entwickelt. Das Design setzt auf Glassmorphic UI Elemente mit sanften Blur-Effekten, halbtransparenten Flächen und eleganten Übergängen. Hochwertige Stockfotos aus unserer Premium-Datenbank unterstreichen die professionelle Ausstrahlung. Jede Seite wurde mobil exzellent optimiert, sodass das Erlebnis auf dem Smartphone genauso überzeugend ist wie auf dem Desktop.

Kernfeatures:

  • ✓Glassmorphic UI mit Blur-Effekten und halbtransparenten Elementen
  • ✓Premium Stockfotos für authentische und hochwertige Bildsprache
  • ✓SQLite CMS mit Prisma ORM für einfache Inhaltsverwaltung
  • ✓JWT-basierte Authentifizierung für das Backend
  • ✓Security Hardening mit CSP, HSTS und X-Frame-Options
  • ✓Google Analytics 4 mit Consent-basiertem Loading

glassmorphic design

Das visuelle Herzstück der Website sind die Glassmorphic Elemente. Halbtransparente Flächen mit sanftem Backdrop-Blur legen sich über die Stockfotos und schaffen eine Tiefe, die den Besucher sofort in den Bann zieht. Besonders bei den Leistungsseiten kommt dieses Designprinzip zum Tragen: Accordion-Elemente mit glasartiger Oberfläche präsentieren die einzelnen Leistungsbereiche wie Sicherheitskoordination, Planungskoordination und Dokumentation übersichtlich und elegant.

TZ Baufokus Glassmorphic UI mit Accordions

Glassmorphic UI mit Accordion-Elementen für die Leistungsübersicht

multi-step projektanfrage

Das Herzstück der Conversion-Strategie ist das professionelle Projektanfrage-Formular. In acht klar strukturierten Schritten führt es potenzielle Kunden durch den gesamten Anfrageprozess. Von den Grunddaten über die Ausführungsdetails und Prioritäten bis hin zu Rahmenbedingungen, Unterlagen und einer abschließenden Übersicht. Jeder Schritt ist visuell durch eine Stepper-Navigation gekennzeichnet, sodass der Benutzer jederzeit weiß, wo er sich befindet.

Das Formular erfasst unter anderem besondere Anforderungen, den gewünschten Fertigstellungstermin und die Budgetvorstellung. So erhält TZ Baufokus bereits vor dem ersten Gespräch einen umfassenden Überblick über das Bauvorhaben und kann gezielt beraten.

Projektanfrage Step 1 - Start
Projektanfrage Step 4 - Prioritäten

Multi-Step Projektanfrage: Vom Start bis zu den Prioritäten in acht Schritten

performance und seo – creatingfaces Wien

Bei TZ Baufokus haben wir keine Kompromisse gemacht. Jede Seite wurde nach aktuellen Best Practices für On-Page SEO optimiert. Schema Markup sorgt dafür, dass Suchmaschinen die Inhalte korrekt verstehen. Open Graph und Twitter Cards garantieren eine ansprechende Darstellung beim Teilen in sozialen Medien. Die automatisch generierte Sitemap und eine korrekt konfigurierte robots.txt runden das SEO-Paket ab.

Technische Highlights

  • ●100/100 Lighthouse Performance Score
  • ●DSGVO konformes Cookie Consent mit granularer Steuerung
  • ●Google Maps lädt erst nach ausdrücklicher Zustimmung
  • ●Schema Markup, Open Graph und Twitter Cards
  • ●Security Headers: CSP, HSTS, X-Frame-Options
  • ●hCaptcha Spam-Schutz für alle Formulare

Besonders stolz sind wir auf die konsequente Umsetzung des Datenschutzes. Nicht einmal Google Maps wird ohne ausdrückliche Zustimmung geladen. Stattdessen sieht der Besucher einen eleganten Platzhalter, der erst nach Akzeptieren der Cookies durch die interaktive Karte ersetzt wird. Das ist gelebter Datenschutz auf höchstem Niveau.

das ergebnis – Webdesign Projekt Wien

Die Website von TZ Baufokus ist der Beweis, dass auch Bauunternehmen einen digitalen Auftritt haben können, der mit den modernsten Tech-Companies mithalten kann. Das Glassmorphic Design, die durchdachte User Experience und die technische Perfektion schaffen eine Plattform, die Vertrauen aufbaut und Kompetenz vermittelt.

Matthias Trenker und Ivan Zuljevic haben mit TZ Baufokus ein Unternehmen aufgebaut, das auf Qualität, Transparenz und Zuverlässigkeit setzt. Ihre Website spiegelt genau diese Werte wider und ist damit nicht nur ein digitaler Auftritt, sondern eine echte Visitenkarte für exzellentes Bauen.

Ihr Projekt wartet

Sie wollen eine Website, die genauso professionell ist wie Ihr Unternehmen? Lassen Sie uns sprechen.

Projekt besprechen→
Live Websitebaufokus.at ↗
Next.jsShadcn UIPrismaBaubranche