Hermes Live-Demo

Hermes Live-Demo

Eine Produktseite, mit der Kanban-Bearbeitung sichtbar wird.

Diese Demo zeigt eine hochwertige responsive Produktseite mit Leistungsuebersicht, FAQ und Kontaktbereich — gebaut, getestet und ueber eine echte GitLab-CI-Pipeline ausgeliefert.

Kontakt aufnehmen Leistungen ansehen

Leistungsuebersicht

Die Demo enthaelt sechs klar abgegrenzte Bausteine — jede ist getestet und in der CI verifiziert.

  • Klarer Hero-Bereich

    Aufmerksamkeitsstarke Eroeffnung mit Produktbotschaft, primaerem Call-to-Action und sekundaerer Navigation.

  • Leistungsuebersicht

    Strukturierte Darstellung der Kernleistungen als responsives Grid mit klaren Ueberschriften und Beschreibungen.

  • Veroeffentlichte FAQ

    Wiederverwendbare FAQ-Komponente, gestuetzt auf typisierte Datenstruktur und vollstaendige Test-Abdeckung.

  • Kontaktbereich mit Validierung

    Eingabefeld-Validierung mit zod-Schema. Inline-Fehleranzeige ohne externe Abhaengigkeiten.

  • Test-Suite (TDD)

    Vitest-basierte Tests fuer Datenstrukturen, Schema-Validierung und Komponenten-Rendering. RED-vor-GREEN-Prozess.

  • CI-verifizierte Auslieferung

    GitLab-CI-Pipeline als Merge-Gate. Build, Typecheck und Tests muessen gruen sein, bevor gemergt wird.

Haeufige Fragen

Antworten zu Stack, CI, Tests und Kontaktmoeglichkeiten.

Worum geht es in dieser Demo?

Diese Seite ist eine Live-Demo fuer das Hermes-Kanban-System. Sie zeigt, wie ein Projekt in Teilaufgaben aufgeteilt, parallel bearbeitet, geprueft und abgeschlossen wird — sichtbar im Kunden-Dashboard.

Welcher Technologie-Stack wird verwendet?

Astro 5 als Static-Site-Framework, React 19 fuer interaktive Komponenten (Kontaktformular), Tailwind 3 fuer Styling, zod fuer Eingabevalidierung und vitest fuer die Tests.

Wie ist die Auslieferung abgesichert?

Eine echte GitLab-CI-Pipeline laeuft bei jedem Merge-Request. Build, Typecheck und Tests muessen gruen sein, bevor der Branch gemergt wird — kein Self-Merge ohne Pipeline.

Wie wird die Qualitaet sichergestellt?

Test-Driven Development: jeder logische Baustein hat einen fehlschlagenden Test zuerst (RED), dann die minimale Implementierung (GREEN). Die Suite laeuft lokal und in der CI.

Wie kann ich Kontakt aufnehmen?

Ueber das Kontaktformular unten auf der Seite. Eingaben werden clientseitig per zod-Schema validiert; bei gueltiger Eingabe sehen Sie eine Bestaetigungsmeldung.

Werden meine Daten gespeichert?

Diese Demo verarbeitet Kontaktanfragen rein im Browser (Client-Side-Validierung). Es findet kein Versand an einen Server statt; nach dem Schliessen des Tabs sind die Daten weg.

Kontaktbereich

Schreiben Sie uns — das Formular prueft Ihre Eingabe lokal im Browser (kein Versand in dieser Demo).