NotPika69andClaude Opus 5.5
bec24e5bbc
Akquise-Demo mit Startseite (Tor-Intro, 24-h-Renovierung mit Uhr, Über uns, Fachbetrieb statt Discount), Galerie mit Filter und Großansicht, Kontaktseite mit Anfrageformular sowie Impressum- und Datenschutz-Entwürfen. Statisches HTML/CSS/JS, Seiten und Bilder werden über tools/ erzeugt. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
1.8 KiB
Design — HEB Bauelemente
Idee: „Meisterbetrieb mit Gesicht“
Ein Ein-Mann-Fachbetrieb vom Land konkurriert mit Online-Discountern. Sein Argument ist die Person: Beratung, Aufmaß, Montage und Hilfe im Ernstfall von Wolfgang Haas selbst. Die Seite ist deshalb hell, warm und direkt, mit dem Porträt prominent, Telefonnummer überall und Texten in der Ich-/Wir-Form.
Signatur: Beim ersten Besuch liegt ein Sektionaltor aus sechs Lamellen mit HEB-Schild über dem Hero und fährt nach oben weg, mit Lichtkante darunter. Das Lamellenmotiv kehrt als feine Linien in den Seitenköpfen, der 24-h-Sektion und dem CTA-Band wieder.
Tokens
| Token | Wert | Verwendung |
|---|---|---|
--blue |
#00569D |
exakt aus dem HEB-Logo; Buttons, Akzente, Vertrauensleiste, CTA-Band |
--sky |
#7CBCF0 |
Blau auf dunklem Grund |
--amber |
#F2AD33 |
nur die 24-h-Uhr und die erledigten Schritte |
--ink / --text / --muted |
#14202C / #2D3843 / #5D6A77 |
Text |
--paper |
#F4F2ED |
warme Flächen (Über uns, Partner, Seitenköpfe) |
--steel |
#1A232C |
24-h-Sektion, Footer |
Schrift: Barlow Condensed 600/700 für Überschriften (technisch, Torbau), Barlow 400–600 für Text.
Lokal eingebunden, nur Latin-Subset. Radius 4 px. Breite max. 1200 px, Seitenrand clamp(16px, 4vw, 40px).
Bewegung
- Tor-Intro: einmal pro Sitzung (
sessionStorage), nur ohneprefers-reduced-motion, Klick öffnet sofort, Notbremse im Head-Script nach 3,5 s, fallssite.jsnicht lädt. - 24-h-Uhr: Ring und Zähler füllen sich, während man an den vier Schritten vorbeiscrollt (6/12/19/24 h).
- Einblendungen beim Scrollen (
.reveal), Bild-Zoom bei Hover. Alles ohne Bibliotheken.
Mobil
Anrufleiste unten (Anrufen/Anfrage), Menü als Vollbreite-Liste, Hero-Ausschnitt auf das Tor verschoben, Galerie zweispaltig, Großansicht mit Wischen.