Bereich 01 · 13 Arbeitsproben
Für Betriebe
Buchung, Speisekarte, Kostenrechner, Bewertungen, Anfrage-Strecke. Jedes Modul funktioniert und lässt sich so in eine echte Seite übernehmen.
Mission Control
Echtzeit-Observability-Dashboard (Bloomberg/NASA-Stil): Live-Charts, KPI-Counter, Welt-Ping-Karte, Event-Stream, Gauges — alles aus einem zentralen Tick.
Live-Buchungssystem
Voll funktionierendes Reservierungs-Modul: Tisch (Restaurant), Zimmer (Hotel) und Termin (Physio) mit Kalender, Echtzeit-Verfügbarkeit und Bestätigungs-Flow.
Produkt-Konfigurator
Modulares Sideboard in Echtzeit-3D konfigurieren: Holzart, Akzent, Module, Untergestell, Griffe — Live-Preis, 360°-Drehen, Anfrage-Flow. R3F.
Vorher / Nachher
Der Sales-Pitch als Demo: draggbarer Vorher/Nachher-Slider zwischen alter & moderner Seite, animierte Ladezeit-Balken und hochzählende Lighthouse-Gauges.
Digitale Speisekarte
Interaktives Menü mit Allergen-/Vegan-Filtern, Warenkorb mit Mengen-Stepper und laufender Summe, simulierte Bestellung. Für Gastro-Kunden.
Standort & Zeiten
Kontakt-Modul mit handgebauter SVG-Karte, Live-Öffnungsstatus aus der Uhrzeit („schließt in 2 Std“), Öffnungszeiten-Tabelle und Route/Anruf-Buttons.
Kosten-Rechner
Interaktiver Kostenvoranschlag für Handwerk: Gewerk wählen, Fläche & Optionen → animierter Live-Preis mit Aufschlüsselung und „von–bis“-Spanne.
Bewertungs-Wall
Social-Proof-Modul im Google-Reviews-Stil: animierter Gesamt-Score, Sterne-Verteilung, Filter, und ein Formular zum Abgeben einer Bewertung.
FAQ Hilfe-Center
Durchsuchbares Hilfe-Center mit Sofort-Filter (diakritik-insensitiv, Treffer-Highlight), Kategorien, Accordion und „War das hilfreich?“.
Galerie-Lightbox
Filterbare Referenz-Galerie (Masonry) mit Lightbox: Prev/Next, Keyboard, Fokus-Trap — inkl. Vorher/Nachher-Kacheln mit eigenem Slider.
Anfrage-Funnel
Mehrstufiger Lead-Funnel: Anliegen → bedingte Details → Kontakt → Übersicht, mit Fortschritt, Schritt-Validierung und animierter Bestätigung.
Gutschein-Reveal
Lead-Capture mit Twist: Anmeldung → Rubbel-Gutschein auf Canvas, Code-Copy und Konfetti. Echter Text unter dem Rubbel-Layer (a11y).
Messestand-Planer
Konfigurator für einen erfundenen Messebauer: Standtyp und Größe wählen oder mit einer Vorlage starten, dann Theken, Lounge, LED-Wand und Kabine auf die 3D-Fläche setzen, ziehen und drehen, per Maus, Touch oder Tastatur. Kollisionen, Wände nach Standtyp, Firmenname auf Wand und Theke, Strahler und Strom rechnen sich mit. Jeder Strahler aus dem Angebot wirft echtes Licht, im Abendmodus sieht man Lichtkegel, leuchtende Theken und Akzentlicht in der Markenfarbe. Eigene Motive für Wände, Roll-ups, Plakate, Leuchtrahmen und Bildschirme mit Druckdaten-Prüfung, Laufweg-Prüfung vom Gang, Zeitplan mit Expresszuschlag, Budget, gespeicherte Varianten, dazu das Angebot nach Posten, Miete gegen Kauf, teilbarer Link und PDF mit Grundriss.
Nächster Bereich
Neue Seitenkonzepte
Websites, die anders funktionieren als Scrollen