←All Projects
Case Study2025· Next.js, Shadcn UI, Prisma

tz baufokus

A construction company with over 15 years of experience deserves a digital presence that is just as solid and well-thought-out as its projects. For TZ Baufokus, we created a website that radiates competence and builds trust.

TZ Baufokus GmbH Website – Next.js Webdesign für Bauunternehmen, creatingfaces Wien
100Lighthouse Score
15+Years Experience
8 StepsProject Inquiry
DSGVOBest Practice

the client

TZ Baufokus GmbH is a construction company with comprehensive expertise in execution, construction management, and planning. Founded by Matthias Trenker and Ivan Zuljevic, who have known each other for over ten years and passed the master builder exam together. Their long-standing partnership and shared career path shape the company's work style: reliable, committed, and with an eye for every detail.

The company accompanies construction projects from the initial idea to successful completion. From residential and commercial construction to industrial projects and complex renovations, TZ Baufokus offers everything from a single source. They rely on state-of-the-art methods and digital tools to ensure transparency and efficiency at every project step.

the requirements

TZ Baufokus wanted a website that clearly stands out from the crowd. Not a typical construction company appearance with generic stock photos and boring layouts, but a digital experience that conveys professionalism and innovation at first glance. The sources of inspiration were clear: platforms like linear.app, shadcn.com, and framer.com showed the direction.

At the same time, the website had to be technically flawless. Maximum performance, perfect SEO optimization, full GDPR compliance, and a professional inquiry system that guides potential customers step by step through the project inquiry process.

our implementation – Next.js Webdesign Wien

Tech Stack

Next.js 16
Shadcn UI
Prisma + SQLite
Framer Motion

We developed a completely custom website with Next.js 16 and the App Router. The design features glassmorphic UI elements with soft blur effects, semi-transparent surfaces, and elegant transitions. High-quality stock photos from our premium database underscore the professional appearance. Every page was excellently optimized for mobile, ensuring the experience is just as compelling on a smartphone as on a desktop.

Core Features:

  • ✓Glassmorphic UI with blur effects and semi-transparent elements
  • ✓Premium stock photos for authentic and high-quality visual language
  • ✓SQLite CMS with Prisma ORM for easy content management
  • ✓JWT-based authentication for the backend
  • ✓Security hardening with CSP, HSTS, and X-Frame-Options
  • ✓Google Analytics 4 with consent-based loading

glassmorphic design

The visual centerpiece of the website is the glassmorphic elements. Semi-transparent surfaces with soft backdrop blur overlay the stock photos, creating a depth that immediately captivates the visitor. This design principle is particularly effective on the services pages: accordion elements with a glass-like surface present individual service areas such as safety coordination, planning coordination, and documentation in a clear and elegant way.

TZ Baufokus Glassmorphic UI with Accordions

Glassmorphic UI with accordion elements for the services overview

multi-step project inquiry

The centerpiece of the conversion strategy is the professional project inquiry form. In eight clearly structured steps, it guides potential customers through the entire inquiry process. From basic data through execution details and priorities to framework conditions, documents, and a final overview. Each step is visually marked by stepper navigation, so the user always knows where they are.

The form captures, among other things, special requirements, the desired completion date, and the budget expectations. This gives TZ Baufokus a comprehensive overview of the construction project before the first conversation and enables targeted consultation.

Project Inquiry Step 1 - Start
Project Inquiry Step 4 - Priorities

Multi-step project inquiry: From start to priorities in eight steps

performance and seo – creatingfaces Wien

With TZ Baufokus, we made no compromises. Every page was optimized according to current best practices for on-page SEO. Schema markup ensures search engines correctly understand the content. Open Graph and Twitter Cards guarantee an appealing presentation when shared on social media. The automatically generated sitemap and a correctly configured robots.txt complete the SEO package.

Technical Highlights

  • ●100/100 Lighthouse Performance Score
  • ●GDPR compliant cookie consent with granular control
  • ●Google Maps loads only after explicit consent
  • ●Schema Markup, Open Graph and Twitter Cards
  • ●Security Headers: CSP, HSTS, X-Frame-Options
  • ●hCaptcha spam protection for all forms

We are particularly proud of the consistent implementation of data protection. Not even Google Maps is loaded without explicit consent. Instead, the visitor sees an elegant placeholder that is only replaced by the interactive map after accepting cookies. This is data protection at the highest level.

the result – Webdesign Projekt Wien

The TZ Baufokus website is proof that construction companies can also have a digital presence that can compete with the most modern tech companies. The glassmorphic design, well-thought-out user experience, and technical perfection create a platform that builds trust and conveys competence.

Matthias Trenker and Ivan Zuljevic have built a company with TZ Baufokus that is based on quality, transparency, and reliability. Their website reflects exactly these values and is therefore not just a digital presence, but a true business card for excellent construction.

Your project awaits

Want a website that is just as professional as your company? Let's talk.

Discuss project→
Live Websitebaufokus.at ↗
Next.jsShadcn UIPrismaConstruction