generated from knso/webklar-preview-template
Kenso Grimm
5acd7046d3
Im Ordner alt webseite/ lag ein HTTrack-Mirror der alten Seite von lackwerk-kl.de – eine starre 950px-Seite von 2014/2022 mit fixem Layout, Stock-Fotos und einer simplen Bildergalerie. Nicht responsive, nicht mehr zeitgemäß. Was ich Schritt für Schritt gemacht habe 1. Firma recherchiert Aus Altseite, Google, Branchenverzeichnissen und Facebook ein vollständiges Profil erstellt: Lackwerk GmbH, Gienanthstr. 2–4, Kaiserslautern · Inhaber Patric Hertz · gegründet 2014 Leistungen, Öffnungszeiten, Rechtsdaten (HRB 31677, USt DE295225567) Bewertungen: 5,0★ bei 72 Google-Bewertungen, 100 % empfohlen (Facebook), 334 Follower 2. Echte Bilder von Facebook geholt (wie von dir gewünscht) Von der öffentlichen Seite derlackspezialist die echten Arbeitsfotos extrahiert und heruntergeladen: Lackierer in der Spritzkabine → Hero-Bild komplette Porsche-911-Restauration (Rohzustand → Grundierung → frisch lackiert → Hochglanz) → Referenz-Galerie Logo + einige Werkstattmotive aus der Altseite als Ergänzung 3. Neue Webseite gebaut – ein sauberes, modernes index.html (21st-inspiriert, aber seriös): Bereich Inhalt Header Glasig, sticky, Wortmarke, Mobile-Menü Hero Dunkel-elegant, echtes Kabinen-Foto, Gradient-Text, Trust-Zahlen Trust-Leiste Meisterqualität, alle Marken, faire Preise Leistungen 6 Karten mit Icons & Hover-Effekt Über uns Firmengeschichte + Patric Hertz Prozess 4 Schritte von Anfrage bis Übergabe Referenzen Bento-Galerie mit Lightbox (echte Fotos) Bewertungen Nur belegbare Kennzahlen, keine erfundenen Zitate Kontakt Daten, Öffnungszeiten, funktionierende Google-Map Footer Impressum & Datenschutz als Modals Markenfarbe Blau (passend zum Logo), Fonts Sora/Inter, dezente Scroll-Animationen, voll responsiv. 4. Im Browser getestet & gefixt Alle Sektionen, Modal, Map und schnelles Scrollen geprüft. Zwei Details korrigiert: Header-Umbruch bei mittlerer Breite + Absicherung, damit bei schnellem Scrollen keine Sektion unsichtbar bleibt. Dateien index.html – neue Webseite (ersetzt die Platzhalter-Vorlage) assets/ – Logo + Werkstattmotive assets/work/ – echte Facebook-Arbeitsfotos Alte Seite unter alt webseite/ unberührt als Referenz
webklar-preview-template
Vorlage fuer Kunden-Websites mit automatischer Preview unter *.project.webklar.com.
Preview aktivieren
Dieses Repo enthaelt .webklar-preview.json. Beim Push auf den konfigurierten Branch startet der Deploy:
- URL:
https://project.webklar.com/webhook/gitea - Vorschau:
https://<subdomain>.project.webklar.com
Konfiguration (.webklar-preview.json)
| Feld | Beschreibung |
|---|---|
enabled |
true = Preview-Deploy aktiv |
type |
static (Dateien direkt) oder node_build (npm build) |
branch |
Branch fuer Deploy, z. B. main |
displayName |
Anzeigename im Kundenportal |
subdomain |
Optional; Default = Repo-Name |
Keine Passwoerter in dieser Datei.
Beispiel fuer statische Seite
{
"enabled": true,
"type": "static",
"branch": "main",
"displayName": "Friseur Mueller",
"subdomain": "friseur-mueller"
}
Beispiel fuer Vite/React (Build)
{
"enabled": true,
"type": "node_build",
"branch": "main",
"displayName": "Restaurant Demo",
"subdomain": "restaurant-demo"
}
Neues Projekt aus dieser Vorlage
- In Gitea: Use this template / Repository aus Template erstellen
displayNameundsubdomainin.webklar-preview.jsonanpassen- Website-Inhalt ersetzen (
index.htmloder eigenes Frontend) - Push auf
main– Webhook deployt automatisch - Im Admin-Portal (
project.webklar.com) Kunde dem Projekt zuweisen
Gitea-Webhook (einmalig pro Org/Repo)
- URL:
https://project.webklar.com/webhook/gitea - Secret:
GITEA_WEBHOOK_TOKEN(Server-.env) - Events: Push