Landingpages für Marken, Fachthemen und Kampagnen
Konzeptionelle und technische Umsetzung von 14 individuellen Landingpages mit Next.js und Tailwind CSS – von Fach- und Projektseiten bis zu Messe-, Immobilien- und Veranstaltungsauftritten.
- 2025 – 2028
- Web & Digital
- Frontend-Entwicklung und technische Umsetzung
- TBF + Partner AG und Cream of Rock GmbH
- Next.js, Tailwind CSS, next-intl, GitLab CI, Docker
Unterschiedliche Inhalte, eine gemeinsame technische Basis
Ich habe 14 Landingpages für unterschiedliche Themen, Marken und Zielgruppen umgesetzt. Die Projekte reichen von technischen Fachgebieten und komplexen Infrastrukturprojekten über Messeauftritte und Immobilienangebote bis zu einer multimedialen Live-Show.
Alle Landingpages basieren auf Next.js und Tailwind CSS. Dadurch konnte ich auf eine gemeinsame technische Grundlage zurückgreifen und gleichzeitig für jedes Projekt einen eigenständigen Auftritt entwickeln.
Meine Rolle
Mein Schwerpunkt lag auf der Frontend-Entwicklung und der technischen Umsetzung der Landingpages.
Zu meinen Aufgaben gehörten:
- Gestaltungsvorgaben in responsive Webseiten übertragen
- Wiederverwendbare React-Komponenten entwickeln
- Inhalte und Übersetzungen strukturiert einbinden
- Navigationen und interaktive Seitenelemente umsetzen
- Bilder, Videos und Illustrationen integrieren
- Kontakt- und Handlungsaufforderungen einbauen
- Darstellung auf Desktop und Mobilgeräten optimieren
- Produktions-Builds und Deployments vorbereiten
Je nach Projekt arbeitete ich dabei mit weiteren Personen aus Entwicklung, Gestaltung und Kommunikation zusammen.
Gemeinsame Projektstruktur
Die Landingpages verwenden einen wiederverwendbaren Aufbau. Einzelne Bereiche werden als React-Komponenten entwickelt und abhängig vom Inhalt der jeweiligen Seite zusammengestellt.
Typische Komponenten sind:
- Navigation
- Hero-Bereich
- Abschnittsnavigation
- Text- und Bildbereiche
- Karten und Kompetenzübersichten
- Referenz- und Projektbereiche
- Bildergalerien oder Slider
- Videoeinbindungen
- Kontaktbereich
- Footer
Für mehrsprachige Projekte werden die Texte getrennt vom eigentlichen Seitenaufbau verwaltet. Dadurch kann dieselbe Komponentenstruktur für mehrere Sprachen verwendet werden.
Die technische Struktur ermöglicht es, neue Landingpages effizient aufzubauen, ohne dass die einzelnen Seiten dadurch gleich aussehen müssen.
Ausgewählte Projekte
8ties – The 80’s Live Show
Für «The 80’s Live Show» entstand eine emotionale Veranstaltungsseite, die das Lebensgefühl der 1980er-Jahre digital vermittelt.
Die Gestaltung unterscheidet sich bewusst von den sachlicheren Fach- und Unternehmensseiten. Kräftige Pink-, Violett- und Blautöne, leuchtende Schaltflächen, Retro-Objekte und bewegte Medien greifen die visuelle Sprache des Jahrzehnts auf.
Ein Trailer vermittelt einen ersten Eindruck der Show. Danach stellt die Seite das Konzept mit Liveband, Gesang, Tanz, Projektionen und Geschichten vor. Die beteiligten Gruppen werden als «The Band», «The Vocals», «The Dancers», «The Couple» und «The Voice» eingeführt.
Ein wichtiger Bestandteil ist die Übersicht der Auftrittstermine. Besucherinnen und Besucher können sich über Veranstaltungsorte und Daten informieren und direkt zum Ticketverkauf wechseln.
TBF Ventures – Im Windschatten zum Durchbruch
Die Landingpage von TBF Ventures richtet sich an Start-ups aus Bereichen wie PropTech, ConTech und EnergyTech.
Das inhaltliche und visuelle Konzept verwendet den Radsport als durchgängige Metapher. Grossflächige Bilder von Rennradfahrerinnen und Rennradfahrern, Begriffe wie «Windschatten», «Strecke» und «Fahrt aufnehmen» verbinden die einzelnen Abschnitte miteinander.
Die Seite erklärt zunächst die zentralen Vorteile des Angebots:
- Unabhängig bleiben
- Gezielt wachsen
- Ein fachliches Netzwerk nutzen
Anschliessend werden die vier Rollen von TBF Ventures vorgestellt:
- Enabler: Technische und fachliche Expertise bei Bedarf
- Connector: Zugang zu Kontakten und relevanten Netzwerken
- Catalyst: Unterstützung durch Pilotprojekte und Praxisfeedback
- Compass: Strategische Orientierung und Begleitung beim Teamaufbau
Weitere Bereiche behandeln Technologie und Engineering, Finanzierung ohne Kontrollverlust, den Weg vom Prototyp zur Marktreife und die Entwicklung einer Wachstumsstrategie.
Die Landingpage verbindet eine klare Angebotsstruktur mit einer eigenständigen Bildwelt und führt am Ende zu einem unverbindlichen Erstgespräch.
IFAT – Ein digitaler Messeauftritt, der weiterentwickelt wird
Die IFAT-Landingpage habe ich ursprünglich für den Messeauftritt von TBF + Partner an der IFAT Munich 2026 umgesetzt. Für die nächste Ausgabe im Jahr 2028 wird die bestehende Seite inhaltlich und visuell weiterentwickelt.
Die Landingpage verbindet Informationen zum Messeauftritt mit aktuellen Fachthemen aus den Bereichen Energie, Umwelt, Abfall und Abwasser. Dazu gehören unter anderem:
- Innovative Verfahren zur Kreislaufführung wie CCS/U
- Modernisierung von Anlagen während des laufenden Betriebs
- Zukunftsfähige Energiekonzepte
- Fachvorträge und Einblicke in vergangene Messeauftritte
- Kontaktmöglichkeiten und Informationen zum Messestand
Die Version für 2026 stellte zusätzlich das anwesende Messeteam vor und ermöglichte die direkte Vereinbarung persönlicher Termine.
Für die Ausgabe 2028 wird die Seite aktualisiert und an den neuen Messeauftritt angepasst. Dadurch ist die Landingpage kein einmaliges Projekt, sondern ein digitaler Auftritt, der für die wiederkehrende Messe weiterverwendet und weiterentwickelt wird.
Weitere Themenbereiche
Neben den drei ausgewählten Projekten habe ich Landingpages für unterschiedliche fachliche und kommerzielle Einsatzgebiete umgesetzt.
Infrastruktur und Mobilität
Die Landingpages zu Bahntechnik, Klimamobilität und regionalen Sharing-Angeboten bereiten umfangreiche Fachinformationen strukturiert auf.
Die Bahntechnik-Seite zeigt Kompetenzen, Referenzprojekte, Kunden und Schlüsselpersonen aus mehreren technischen Fachbereichen. Die KMP-Seite behandelt Kommunikation und Beteiligung bei der Entwicklung eines Klimamobilitätsplans. Die Sharing-Seite erklärt den Aufbau eines gemeindeübergreifenden Velo- und Trotti-Verleihsystems.
Energie und Umwelt
Mehrere Landingpages beschäftigen sich mit Fernwärme, thermischer Abfallbehandlung, Power-to-Gas und Umwelttechnologien.
Da diese Themen erklärungsbedürftig sind, werden die Inhalte schrittweise aufgebaut. Kompetenzübersichten, Prozessdarstellungen, Projektbeispiele und Kontaktbereiche helfen dabei, komplexe Leistungen verständlich zu vermitteln.
Projekte und Unternehmensangebote
Die Kenova-Seite stellt ein langfristiges Energie- und Wertstoffprojekt vor. Die Kurzintro-Seite gibt einen kompakten Überblick über TBF + Partner, die Standorte, Kompetenzen und interdisziplinäre Arbeitsweise.
TBF Ventures richtet sich dagegen gezielt an Start-ups und zeigt, wie technische Expertise, Netzwerk, Pilotprojekte und strategische Begleitung kombiniert werden können.
Immobilienangebote
Die Seiten für Stuttgart und Böblingen präsentieren verfügbare Büroflächen.
Im Mittelpunkt stehen Lage, Ausstattung, Flächen, Verkehrsanbindung und Möglichkeiten zur Kontaktaufnahme beziehungsweise zur Vereinbarung eines Besichtigungstermins.
Alle Landingpages
- IFAT
- Klimamobilitätsplan
- Fernwärme
- Bahntechnik
- 8ties – The 80’s Live Show
- Ecomondo
- Incineration
- Kenova
- TBF Kurzintro
- Power-to-Gas
- Regionale Sharing-Angebote
- Miete Stuttgart
- Miete Böblingen
- TBF Ventures
Ergebnis
Die gemeinsame technische Grundlage erleichterte die Entwicklung und Pflege der Landingpages. Gleichzeitig erhielt jedes Projekt eine eigene inhaltliche Struktur und visuelle Identität.
Die Sammlung zeigt, wie sich mit Next.js, Tailwind CSS und wiederverwendbaren Komponenten sehr unterschiedliche digitale Auftritte realisieren lassen – von einer kompakten Immobilienseite bis zu umfangreichen Fach-, Messe- und Veranstaltungsseiten.
