diff --git a/DESIGN.md b/DESIGN.md index a293a1f..7dab21f 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -1,68 +1,23 @@ -# DESIGN.md · Friseur-Team VK +# Design „Raster“ (ab 10.10.2026) -Gestaltungsregeln für die Website. Die Tokens stehen in `src/styles/tokens.css`; diese Datei erklärt, warum sie so sind. +Grundlage: Claude-Design-Variante D „Raster“, für den Livebetrieb verfeinert. Tokens: `src/styles/tokens.css`. -## Haltung - -Ruhiges Premium, wie ein gutes Magazin über einen echten Salon. Hell, handwerklich, selbstbewusst. Die Seite soll Menschen ansprechen, die gezielt für Brautstyling, Balayage und Great Lengths kommen, und Stammkundschaft den kurzen Weg zum Telefon lassen. - -Szene: Eine Frau Anfang dreißig sitzt abends auf dem Sofa, das Handy in der Hand, und vergleicht Salons für ihre Hochzeit im nächsten Sommer. Daraus folgt: helles Thema, große Bilder, kurze Wege zu Preis und Anfrage, nichts, was nach Rabatt aussieht. - -Drei Wörter für die Marke: **hell, präzise, nahbar**. - -## Farbe - -Alle Farben stammen aus dem Logo und aus dem Salon selbst (weiße Räume, blaue Wandpaneele). Strategie: **Restrained mit einer Committed-Fläche pro Seite**. Grund ist Papier-Weiß, Petrol trägt Akzente und genau eine vollflächige Zone (Anfrage-Band am Seitenende). - -| Rolle | Token | OKLCH | Hex (Quelle) | Einsatz | -|---|---|---|---|---| -| Anthrazit | `--c-anthrazit` | `oklch(33.8% 0.012 140.5)` | #343933 | Text, Footer | -| Petrol | `--c-petrol` | `oklch(50.7% 0.105 234)` | #036E98 | Links, Knöpfe, Akzentwörter, Anfrage-Band | -| Hellblau | `--c-hellblau` | `oklch(64.9% 0.076 224.9)` | #5899B2 | nur Deko, nie für Text auf Weiß (3,2:1) | -| Silbergrau | `--c-silber` | `oklch(71.1% 0.009 225.1)` | #9CA3A6 | Rahmen, Formularränder | -| Nebelgrau | `--c-nebel` | `oklch(88.4% 0.008 216.6)` | #D3DADC | Bildgrund, Flächen | -| Papier | `--c-papier` | `oklch(98.7% 0.003 220)` | abgeleitet | Seitengrund, kein reines Weiß | -| Petrol tief | `--c-petrol-tief` | `oklch(36% 0.075 236)` | abgeleitet | Hover, Wandpaneel im Anfrage-Band | -| Text leise | `--c-text-leise` | `oklch(46% 0.012 200)` | abgeleitet | Nebentext, ≥ 4,5:1 auf Papier | - -Kontraste (WCAG 2.1 AA): Anthrazit auf Papier 11,8:1, Petrol auf Papier 5,7:1, Papier auf Petrol 5,7:1. Hellblau und Silbergrau tragen nie Fließtext. +## Idee +Ein weißes Blatt auf kühlem Grund. Zwei feine senkrechte Linien bei 15 % und 40 % teilen das Blatt in drei Spalten (A · B · C). Inhalte richten sich an diesen Linien aus (`.r3` mit `.a`, `.b`, `.c`, `.ab`, `.bc`). Mobil fallen die Linien weg, alles läuft einspaltig. ## Schrift +- Überschriften: Libre Caslon Condensed (variabel, selbst gehostet). Groß, eng, `letter-spacing: -0.018em`. +- Initiale: Pinyon Script, nur der erste Buchstabe einer Hauptüberschrift (`H.astro`), in Blau. Höchstens eine pro Bildschirm. Klammern im Hero ebenfalls Pinyon. +- Text: Albert Sans, 17 px, Zeilenhöhe 1,62, Zeilenlänge max. 36 rem. Nummern und Labels 12,5 px in `--ink-3`. +- Gegenüber dem Entwurf: Fließtext von 13,5–14,5 px auf 17 px angehoben, Überschriften fließend skaliert (h1 52–132 px, h2 44–88 px), Labels lesbarer, Abstände auf 8er-Rhythmus. -Selbst gehostet unter `public/fonts/` (OFL), auf Latin-1 beschnitten, Achsen begrenzt. Keine Anfragen an Google Fonts oder CDNs. +## Farbe +Tinte `--ink`, Blau aus den Wandpaneelen `--blue` (Akzent, Preise, Initialen), Linien `--line`, zarte Fläche `--blue-wash`. Keine Verläufe, keine Schatten außer der Kundenkarte. -- **Bodoni Moda** (variabel, Optical Size 11 bis 96): Überschriften, Zahlen, Zitate. Hoher Kontrast wie im Mode- und Beauty-Magazin; bei großen Größen schaltet die optische Größe automatisch auf feine Haarstriche. Kursiv nur für das Akzentwort einer Überschrift (in Petrol). -- **Archivo** (variabel, Breite 68 bis 100 %, Gewicht 350 bis 700): Fließtext, Formulare. Labels in Großbuchstaben laufen schmal (72 % Breite) und greifen damit die schmale Groteskschrift des Logos („FRISEUR TEAM“) auf. +## Bausteine +Ovaler Knopf (`.oval`, Caslon 19 px, Hover blau), Pfeil-Link (`.go`), Leistungszeilen (`.srow`), Zahlenkacheln (`.tile`), Vorher/Nachher (`.case`), Bewertungen (`.revs`), Schritte (`.steps`), Preisgruppen (`PriceGroup.astro`), FAQ (`details`). -Skala (fließend, Verhältnis ca. 1,25 bis 1,33): Label 13 px · Klein 15 px · Text 17 px · Lead 19 bis 23 px · H4 20 bis 24 px · H3 24 bis 34 px · H2 34 bis 60 px · H1 44 bis 96 px. Untergrenze überall 12 px. Zeilenlänge Fließtext höchstens 38 rem (rund 70 Zeichen). - -## Form und Motive - -- **Bogen**: Bilder und Fotoflächen der Premium-Leistungen haben oben einen Halbkreis (`--arch`). Vorbild ist der Rundbogen-Durchgang im Salon (sichtbar auf salon-innen-2 und -3). -- **Wandpaneel**: Ein senkrechter Petrol-Block hinter Hero-Bildern und im Anfrage-Band, wie die blauen Wandflächen zwischen den Spiegeln. -- **Haarlinien**: Listen und Preise stehen auf 1 px Linien, Abschnittsanfänge auf 1,5 px Anthrazit. Keine Karten-Raster. -- **Knöpfe**: Pille, ein Hauptknopf pro Abschnitt (Petrol), Nebenknopf als Kontur. -- **Fotoflächen (Shotliste)**: Solange Arbeitsfotos fehlen, zeigt `Shot.astro` eine beschriftete Fläche mit Motiv und Bildidee. Das ist die Liste für das Shooting. - -## Abstände - -4-px-Raster (`--s-1` bis `--s-9`). Abschnitte atmen mit `--section` (72 bis 152 px). Seitenrand `--gutter` (20 bis 56 px). Rhythmus bewusst wechselnd: enge Gruppen, große Abstände zwischen Abschnitten. - -## Bewegung - -Ein Auftritt beim Laden (Hero-Text steigt, Wandpaneel wächst), dazu dezentes Einblenden beim Scrollen über CSS `animation-timeline: view()`. Kurve ease-out-quint, keine Federn. Bei `prefers-reduced-motion: reduce` ist alles aus. Die H1 wird nur verschoben, nie ausgeblendet (LCP). - -## Barrierefreiheit - -WCAG 2.1 AA. Fokus sichtbar (2 px Petrol), Touch-Ziele mindestens 44 px, Formularfelder 52 px hoch und 17 px Schrift (kein Zoom auf iOS), Fehlermeldungen als Text mit Fehlerübersicht, Menü und FAQ funktionieren ohne JavaScript (`
`). - -## Nicht machen - -- Beige, Taupe, Rosé, Lila-Verläufe, Glas-Effekte, Neon -- Inter, Roboto, Montserrat, Space Grotesk und andere Standardschriften -- Stockfotos oder KI-Bilder von Frisuren; erfundene Bewertungen oder Zitate -- Gleich große Karten im 3er- oder 6er-Raster für Leistungen -- Pulsierende Knöpfe, Pop-ups, Cookie-Banner (es gibt keine Cookies) -- Farbige Seitenstreifen an Karten, Verlaufstext, große Zahl mit kleinem Label als Statistikreihe -- Gedankenstriche als Satzzeichen in Texten, Superlative, „exklusiv“, „einzigartig“ -- Inline-`style`-Attribute (die CSP erlaubt nur `style-src 'self'`) +## Regeln +- Keine Inline-Styles und keine Inline-Skripte (CSP `style-src 'self'`, `script-src 'self'`). Abstände über Hilfsklassen (`.mt-*`, `.gap-*`). +- Einblenden nur für Elemente unterhalb des ersten Bildschirms (`data-rv`, `data-clip`), bei `prefers-reduced-motion` aus. +- Echte Fotos aus dem Salon. Vorher/Nachher immer paarweise mit Beschriftung. diff --git a/nginx.conf b/nginx.conf index 519d9a4..553434e 100644 --- a/nginx.conf +++ b/nginx.conf @@ -25,6 +25,14 @@ server { location = /balayage { return 301 /balayage-farbe; } location = /haarverdichtung { return 301 /haarverlaengerung; } location = /treuekarte { return 301 /kundenkarte; } + location = /herren { return 301 /barber; } + location = /karriere-jobs { return 301 /karriere; } + # Frühere Ortsseiten (Brückenseiten-Muster) zusammenführen + location = /friseur-tostedt { return 301 /; } + location = /friseur-buchholz-in-der-nordheide { return 301 /kontakt; } + location = /friseur-handeloh { return 301 /kontakt; } + location = /friseur-hollenstedt { return 301 /kontakt; } + location = /friseur-schneverdingen { return 301 /kontakt; } # Abschließenden Schrägstrich entfernen (kanonische URLs ohne /) rewrite ^/(.+)/$ /$1 permanent; diff --git a/public/fonts/LICENSE-FONTS.txt b/public/fonts/LICENSE-FONTS.txt index e668984..7c08a58 100644 --- a/public/fonts/LICENSE-FONTS.txt +++ b/public/fonts/LICENSE-FONTS.txt @@ -1,3 +1,6 @@ -Archivo: SIL Open Font License 1.1, (c) The Archivo Project Authors -Bodoni Moda: SIL Open Font License 1.1, (c) The Bodoni Moda Project Authors -Subset (Latin-1 + Typografie) und Achsen beschnitten mit fontTools; Quelle: @fontsource-variable +Alle Schriften stehen unter der SIL Open Font License 1.1 (https://openfontlicense.org) +und werden selbst gehostet (keine Verbindung zu Google). + +- Libre Caslon Condensed (Pablo Impallari, Rodrigo Fuenzalida), latin, variabel 400–700 +- Pinyon Script (Nicole Fally), latin +- Albert Sans (Andreas Rasmussen), latin, variabel 400–700 diff --git a/public/fonts/albert-sans-var.woff2 b/public/fonts/albert-sans-var.woff2 new file mode 100644 index 0000000..f25b2a3 Binary files /dev/null and b/public/fonts/albert-sans-var.woff2 differ diff --git a/public/fonts/archivo-var.woff2 b/public/fonts/archivo-var.woff2 deleted file mode 100644 index 0de3db4..0000000 Binary files a/public/fonts/archivo-var.woff2 and /dev/null differ diff --git a/public/fonts/bodoni-moda-italic-var.woff2 b/public/fonts/bodoni-moda-italic-var.woff2 deleted file mode 100644 index a4e44aa..0000000 Binary files a/public/fonts/bodoni-moda-italic-var.woff2 and /dev/null differ diff --git a/public/fonts/bodoni-moda-var.woff2 b/public/fonts/bodoni-moda-var.woff2 deleted file mode 100644 index 16ca7cb..0000000 Binary files a/public/fonts/bodoni-moda-var.woff2 and /dev/null differ diff --git a/public/fonts/caslon-cond-italic-var.woff2 b/public/fonts/caslon-cond-italic-var.woff2 new file mode 100644 index 0000000..8782e82 Binary files /dev/null and b/public/fonts/caslon-cond-italic-var.woff2 differ diff --git a/public/fonts/caslon-cond-var.woff2 b/public/fonts/caslon-cond-var.woff2 new file mode 100644 index 0000000..f6230a3 Binary files /dev/null and b/public/fonts/caslon-cond-var.woff2 differ diff --git a/public/fonts/pinyon-script.woff2 b/public/fonts/pinyon-script.woff2 new file mode 100644 index 0000000..32fe855 Binary files /dev/null and b/public/fonts/pinyon-script.woff2 differ diff --git a/public/llms.txt b/public/llms.txt index 58c2f05..2cd201b 100644 --- a/public/llms.txt +++ b/public/llms.txt @@ -1,8 +1,8 @@ # Friseur-Team VK -> Friseursalon und Meisterbetrieb in Tostedt (Landkreis Harburg, Niedersachsen), seit November 2017. Inhaberin: Veronika Sprangel, Friseurmeisterin. Schwerpunkte: Brautstyling, Balayage und Haarfarbe, Haarverlängerung und Haarverdichtung mit Great Lengths. Produkte: Redken, Paul Mitchell. Google: 4,9 Sterne bei 193 Bewertungen (Stand September 2026). +> Friseursalon und Meisterbetrieb in Tostedt (Landkreis Harburg, Niedersachsen), seit November 2017. Inhaberin: Veronika Sprangel, Friseurmeisterin. Offizieller Great-Lengths-Partner mit der Auszeichnung „Master of Great Lengths“ (Haarverlängerung und Haarverdichtung). Paul Mitchell Flagship-Salon, außerdem Redken. Schwerpunkte: Brautstyling, Balayage und Haarfarbe, Great Lengths; dazu Damen, Herren/Barber, Kinder. Google: 4,9 Sterne bei 194 Bewertungen (Stand Oktober 2026). -Termine werden nicht online gebucht, sondern telefonisch, per WhatsApp oder über ein Anfrageformular mit Rückruf vereinbart. +Termine werden nicht online gebucht. Braut, Farbe und Great Lengths beginnen mit einer Anfrage (Formular mit Fotos, Rückruf innerhalb von zwei Werktagen) und einer Beratung. Schnitt, Herren und Kinder telefonisch oder per WhatsApp. ## Kontakt @@ -11,19 +11,30 @@ Termine werden nicht online gebucht, sondern telefonisch, per WhatsApp oder übe - E-Mail: info@friseur-team-vk.de - Öffnungszeiten: Di 9–18, Mi 9–20, Do 9–18, Fr 9–20, Sa 9–14 Uhr; Mo und So geschlossen - Instagram: https://www.instagram.com/friseur.team_vk/ +- Great-Lengths-Partnereintrag: https://www.greatlengthspartner.com/partner/friseur-team-vk-tostedt + +## Häufige Fragen + +- Wer macht Great Lengths in Tostedt? Das Friseur-Team VK, Kastanienallee 1, als Master of Great Lengths. Beratung kostenlos, Verdichtung ab 350 €, Verlängerung ab 650 € (Richtwerte). +- Brautfrisur in Tostedt? Probestyling ab 85 €, Brautfrisur ab 150 €, Styling vor Ort im Umkreis von etwa 30 km (Richtwerte). +- Balayage in Tostedt? Preise nach Haarlänge ab 190 €, Farbberatung 25 € wird verrechnet (Richtwerte). ## Seiten -- [Start](https://vk-friseur.heidrich-digital.de/): Überblick, Schwerpunkte, Team, Öffnungszeiten -- [Brautservice](https://vk-friseur.heidrich-digital.de/brautservice): Beratung, Probetermin, Styling am Hochzeitstag, auch vor Ort; Frisur und Make-up -- [Balayage & Farbe](https://vk-friseur.heidrich-digital.de/balayage-farbe): Balayage, Foliensträhnen, Coloration, Glossing -- [Haarverlängerung](https://vk-friseur.heidrich-digital.de/haarverlaengerung): Great Lengths, Verlängerung und Verdichtung, Beratungstermin vorab -- [Leistungen & Preise](https://vk-friseur.heidrich-digital.de/leistungen-preise): alle Leistungen mit „ab“-Richtpreisen -- [Team](https://vk-friseur.heidrich-digital.de/team): Inhaberin und Team -- [Kundenkarte](https://vk-friseur.heidrich-digital.de/kundenkarte): digitale Stempelkarte (Apple Wallet, Google Wallet, Web-Karte, gedruckt); 6 Stempel = Pflege-Upgrade gratis -- [Anfrage](https://vk-friseur.heidrich-digital.de/anfrage): Formular mit Rückruf -- [Kontakt](https://vk-friseur.heidrich-digital.de/kontakt): Adresse, Telefon, WhatsApp, Öffnungszeiten +- [Start](https://vk-friseur.heidrich-digital.de/): Überblick, Wartezeiten, Ergebnisse, Bewertungen +- [Braut](https://vk-friseur.heidrich-digital.de/brautservice): Ablauf, Galerie, Preise, Fragen +- [Balayage & Farbe](https://vk-friseur.heidrich-digital.de/balayage-farbe): Vorher/Nachher, Preise nach Länge +- [Great Lengths](https://vk-friseur.heidrich-digital.de/haarverlaengerung): Verlängerung und Verdichtung, Vorher/Nachher, Ablauf, Preise +- [Barber](https://vk-friseur.heidrich-digital.de/barber): Herrenschnitt, Bart, Nassrasur +- [Preise](https://vk-friseur.heidrich-digital.de/leistungen-preise): alle Leistungen mit Richtpreisen +- [Neu bei uns](https://vk-friseur.heidrich-digital.de/neue-kundinnen): Ablauf für neue Kundinnen, Warteliste +- [Team](https://vk-friseur.heidrich-digital.de/team) +- [Karriere](https://vk-friseur.heidrich-digital.de/karriere): Stellen mit Gehaltsangabe, Ausbildung +- [Kundenkarte](https://vk-friseur.heidrich-digital.de/kundenkarte): digitale Stempelkarte, 6 Stempel = Pflege-Upgrade +- [Gutscheine](https://vk-friseur.heidrich-digital.de/gutscheine) +- [Anfrage](https://vk-friseur.heidrich-digital.de/anfrage) +- [Kontakt](https://vk-friseur.heidrich-digital.de/kontakt): Adresse, Öffnungszeiten, Anfahrt ## Hinweis -Diese Adresse ist eine Vorschau der neuen Website. Preise sind Richtwerte und werden mit dem Salon abgestimmt. +Diese Adresse ist eine Vorschau der neuen Website. Preise und Wartezeiten sind Beispiele und werden mit dem Salon abgestimmt. diff --git a/src/assets/img/arbeiten/balayage-beige-wellen.jpg b/src/assets/img/arbeiten/balayage-beige-wellen.jpg new file mode 100644 index 0000000..1511f88 Binary files /dev/null and b/src/assets/img/arbeiten/balayage-beige-wellen.jpg differ diff --git a/src/assets/img/arbeiten/balayage-hellblond.jpg b/src/assets/img/arbeiten/balayage-hellblond.jpg new file mode 100644 index 0000000..9e5ee4e Binary files /dev/null and b/src/assets/img/arbeiten/balayage-hellblond.jpg differ diff --git a/src/assets/img/arbeiten/balayage-honigblond.jpg b/src/assets/img/arbeiten/balayage-honigblond.jpg new file mode 100644 index 0000000..3af7581 Binary files /dev/null and b/src/assets/img/arbeiten/balayage-honigblond.jpg differ diff --git a/src/assets/img/arbeiten/balayage-karamell.jpg b/src/assets/img/arbeiten/balayage-karamell.jpg new file mode 100644 index 0000000..5a2b866 Binary files /dev/null and b/src/assets/img/arbeiten/balayage-karamell.jpg differ diff --git a/src/assets/img/arbeiten/balayage-sandblond.jpg b/src/assets/img/arbeiten/balayage-sandblond.jpg new file mode 100644 index 0000000..9ac0df9 Binary files /dev/null and b/src/assets/img/arbeiten/balayage-sandblond.jpg differ diff --git a/src/assets/img/arbeiten/barber-bart.jpg b/src/assets/img/arbeiten/barber-bart.jpg new file mode 100644 index 0000000..77a75ee Binary files /dev/null and b/src/assets/img/arbeiten/barber-bart.jpg differ diff --git a/src/assets/img/arbeiten/barber-konturen.jpg b/src/assets/img/arbeiten/barber-konturen.jpg new file mode 100644 index 0000000..3d20c61 Binary files /dev/null and b/src/assets/img/arbeiten/barber-konturen.jpg differ diff --git a/src/assets/img/arbeiten/barber-rasur.jpg b/src/assets/img/arbeiten/barber-rasur.jpg new file mode 100644 index 0000000..246d6e9 Binary files /dev/null and b/src/assets/img/arbeiten/barber-rasur.jpg differ diff --git a/src/assets/img/arbeiten/braut-blumen-chignon.jpg b/src/assets/img/arbeiten/braut-blumen-chignon.jpg new file mode 100644 index 0000000..68c805f Binary files /dev/null and b/src/assets/img/arbeiten/braut-blumen-chignon.jpg differ diff --git a/src/assets/img/arbeiten/braut-chignon-blueten.jpg b/src/assets/img/arbeiten/braut-chignon-blueten.jpg new file mode 100644 index 0000000..602cd13 Binary files /dev/null and b/src/assets/img/arbeiten/braut-chignon-blueten.jpg differ diff --git a/src/assets/img/arbeiten/braut-flechtfrisur.jpg b/src/assets/img/arbeiten/braut-flechtfrisur.jpg new file mode 100644 index 0000000..598ec02 Binary files /dev/null and b/src/assets/img/arbeiten/braut-flechtfrisur.jpg differ diff --git a/src/assets/img/arbeiten/braut-halboffen-spange.jpg b/src/assets/img/arbeiten/braut-halboffen-spange.jpg new file mode 100644 index 0000000..f0c6c29 Binary files /dev/null and b/src/assets/img/arbeiten/braut-halboffen-spange.jpg differ diff --git a/src/assets/img/arbeiten/braut-hochsteck-haarschmuck.jpg b/src/assets/img/arbeiten/braut-hochsteck-haarschmuck.jpg new file mode 100644 index 0000000..c4b69e3 Binary files /dev/null and b/src/assets/img/arbeiten/braut-hochsteck-haarschmuck.jpg differ diff --git a/src/assets/img/arbeiten/braut-hochsteck-perlen.jpg b/src/assets/img/arbeiten/braut-hochsteck-perlen.jpg new file mode 100644 index 0000000..fe8dde1 Binary files /dev/null and b/src/assets/img/arbeiten/braut-hochsteck-perlen.jpg differ diff --git a/src/assets/img/arbeiten/braut-wellen-bluetenspangen.jpg b/src/assets/img/arbeiten/braut-wellen-bluetenspangen.jpg new file mode 100644 index 0000000..7cc063f Binary files /dev/null and b/src/assets/img/arbeiten/braut-wellen-bluetenspangen.jpg differ diff --git a/src/assets/img/arbeiten/braut-wellen-offen.jpg b/src/assets/img/arbeiten/braut-wellen-offen.jpg new file mode 100644 index 0000000..15ba735 Binary files /dev/null and b/src/assets/img/arbeiten/braut-wellen-offen.jpg differ diff --git a/src/assets/img/arbeiten/braut-zopf-garten.jpg b/src/assets/img/arbeiten/braut-zopf-garten.jpg new file mode 100644 index 0000000..0cf4d11 Binary files /dev/null and b/src/assets/img/arbeiten/braut-zopf-garten.jpg differ diff --git a/src/assets/img/arbeiten/farbe-nachher-blond.jpg b/src/assets/img/arbeiten/farbe-nachher-blond.jpg new file mode 100644 index 0000000..cdd348b Binary files /dev/null and b/src/assets/img/arbeiten/farbe-nachher-blond.jpg differ diff --git a/src/assets/img/arbeiten/farbe-nachher-kupfer.jpg b/src/assets/img/arbeiten/farbe-nachher-kupfer.jpg new file mode 100644 index 0000000..1734870 Binary files /dev/null and b/src/assets/img/arbeiten/farbe-nachher-kupfer.jpg differ diff --git a/src/assets/img/arbeiten/farbe-pastell.jpg b/src/assets/img/arbeiten/farbe-pastell.jpg new file mode 100644 index 0000000..3e6c470 Binary files /dev/null and b/src/assets/img/arbeiten/farbe-pastell.jpg differ diff --git a/src/assets/img/arbeiten/farbe-rose-wellen.jpg b/src/assets/img/arbeiten/farbe-rose-wellen.jpg new file mode 100644 index 0000000..0851496 Binary files /dev/null and b/src/assets/img/arbeiten/farbe-rose-wellen.jpg differ diff --git a/src/assets/img/arbeiten/farbe-vorher-blond.jpg b/src/assets/img/arbeiten/farbe-vorher-blond.jpg new file mode 100644 index 0000000..e9a3360 Binary files /dev/null and b/src/assets/img/arbeiten/farbe-vorher-blond.jpg differ diff --git a/src/assets/img/arbeiten/farbe-vorher-kupfer.jpg b/src/assets/img/arbeiten/farbe-vorher-kupfer.jpg new file mode 100644 index 0000000..ce46b78 Binary files /dev/null and b/src/assets/img/arbeiten/farbe-vorher-kupfer.jpg differ diff --git a/src/assets/img/arbeiten/gl-fuelle-nachher-1.jpg b/src/assets/img/arbeiten/gl-fuelle-nachher-1.jpg new file mode 100644 index 0000000..7c1a6b6 Binary files /dev/null and b/src/assets/img/arbeiten/gl-fuelle-nachher-1.jpg differ diff --git a/src/assets/img/arbeiten/gl-fuelle-nachher-2.jpg b/src/assets/img/arbeiten/gl-fuelle-nachher-2.jpg new file mode 100644 index 0000000..ca281d5 Binary files /dev/null and b/src/assets/img/arbeiten/gl-fuelle-nachher-2.jpg differ diff --git a/src/assets/img/arbeiten/gl-fuelle-nachher-3.jpg b/src/assets/img/arbeiten/gl-fuelle-nachher-3.jpg new file mode 100644 index 0000000..9796070 Binary files /dev/null and b/src/assets/img/arbeiten/gl-fuelle-nachher-3.jpg differ diff --git a/src/assets/img/arbeiten/gl-fuelle-vorher-1.jpg b/src/assets/img/arbeiten/gl-fuelle-vorher-1.jpg new file mode 100644 index 0000000..f68f029 Binary files /dev/null and b/src/assets/img/arbeiten/gl-fuelle-vorher-1.jpg differ diff --git a/src/assets/img/arbeiten/gl-fuelle-vorher-2.jpg b/src/assets/img/arbeiten/gl-fuelle-vorher-2.jpg new file mode 100644 index 0000000..452ebc7 Binary files /dev/null and b/src/assets/img/arbeiten/gl-fuelle-vorher-2.jpg differ diff --git a/src/assets/img/arbeiten/gl-fuelle-vorher-3.jpg b/src/assets/img/arbeiten/gl-fuelle-vorher-3.jpg new file mode 100644 index 0000000..4f95169 Binary files /dev/null and b/src/assets/img/arbeiten/gl-fuelle-vorher-3.jpg differ diff --git a/src/assets/img/arbeiten/gl-laenge-nachher-1.jpg b/src/assets/img/arbeiten/gl-laenge-nachher-1.jpg new file mode 100644 index 0000000..b450997 Binary files /dev/null and b/src/assets/img/arbeiten/gl-laenge-nachher-1.jpg differ diff --git a/src/assets/img/arbeiten/gl-laenge-nachher-2.jpg b/src/assets/img/arbeiten/gl-laenge-nachher-2.jpg new file mode 100644 index 0000000..f923e7b Binary files /dev/null and b/src/assets/img/arbeiten/gl-laenge-nachher-2.jpg differ diff --git a/src/assets/img/arbeiten/gl-laenge-vorher-1.jpg b/src/assets/img/arbeiten/gl-laenge-vorher-1.jpg new file mode 100644 index 0000000..cdc1b25 Binary files /dev/null and b/src/assets/img/arbeiten/gl-laenge-vorher-1.jpg differ diff --git a/src/assets/img/arbeiten/gl-laenge-vorher-2.jpg b/src/assets/img/arbeiten/gl-laenge-vorher-2.jpg new file mode 100644 index 0000000..3757446 Binary files /dev/null and b/src/assets/img/arbeiten/gl-laenge-vorher-2.jpg differ diff --git a/src/assets/img/arbeiten/herren-kurz-1.jpg b/src/assets/img/arbeiten/herren-kurz-1.jpg new file mode 100644 index 0000000..5dbe330 Binary files /dev/null and b/src/assets/img/arbeiten/herren-kurz-1.jpg differ diff --git a/src/assets/img/arbeiten/herren-kurz-2.jpg b/src/assets/img/arbeiten/herren-kurz-2.jpg new file mode 100644 index 0000000..cd936e4 Binary files /dev/null and b/src/assets/img/arbeiten/herren-kurz-2.jpg differ diff --git a/src/assets/img/arbeiten/schnitt-bob-rot.jpg b/src/assets/img/arbeiten/schnitt-bob-rot.jpg new file mode 100644 index 0000000..add27e6 Binary files /dev/null and b/src/assets/img/arbeiten/schnitt-bob-rot.jpg differ diff --git a/src/assets/img/arbeiten/schnitt-bob.jpg b/src/assets/img/arbeiten/schnitt-bob.jpg new file mode 100644 index 0000000..a6cf9d8 Binary files /dev/null and b/src/assets/img/arbeiten/schnitt-bob.jpg differ diff --git a/src/assets/img/arbeiten/schnitt-lob-wellen.jpg b/src/assets/img/arbeiten/schnitt-lob-wellen.jpg new file mode 100644 index 0000000..8e4cfd0 Binary files /dev/null and b/src/assets/img/arbeiten/schnitt-lob-wellen.jpg differ diff --git a/src/assets/img/arbeiten/schnitt-pixie.jpg b/src/assets/img/arbeiten/schnitt-pixie.jpg new file mode 100644 index 0000000..03f3906 Binary files /dev/null and b/src/assets/img/arbeiten/schnitt-pixie.jpg differ diff --git a/src/assets/img/salon-wartebereich.jpg b/src/assets/img/salon-wartebereich.jpg new file mode 100644 index 0000000..de93583 Binary files /dev/null and b/src/assets/img/salon-wartebereich.jpg differ diff --git a/src/assets/img/team/christin.jpg b/src/assets/img/team/christin.jpg new file mode 100644 index 0000000..3527c9a Binary files /dev/null and b/src/assets/img/team/christin.jpg differ diff --git a/src/assets/img/team/dennis.jpg b/src/assets/img/team/dennis.jpg new file mode 100644 index 0000000..46eb333 Binary files /dev/null and b/src/assets/img/team/dennis.jpg differ diff --git a/src/assets/img/team/ella.jpg b/src/assets/img/team/ella.jpg new file mode 100644 index 0000000..46012e3 Binary files /dev/null and b/src/assets/img/team/ella.jpg differ diff --git a/src/assets/img/team/fabian.jpg b/src/assets/img/team/fabian.jpg new file mode 100644 index 0000000..4958a9e Binary files /dev/null and b/src/assets/img/team/fabian.jpg differ diff --git a/src/assets/img/team/iris.jpg b/src/assets/img/team/iris.jpg new file mode 100644 index 0000000..f73f196 Binary files /dev/null and b/src/assets/img/team/iris.jpg differ diff --git a/src/assets/img/team/marco.jpg b/src/assets/img/team/marco.jpg new file mode 100644 index 0000000..b22a3fe Binary files /dev/null and b/src/assets/img/team/marco.jpg differ diff --git a/src/assets/img/team/team-frauen.jpg b/src/assets/img/team/team-frauen.jpg new file mode 100644 index 0000000..1d477c8 Binary files /dev/null and b/src/assets/img/team/team-frauen.jpg differ diff --git a/src/assets/img/team/team-maenner.jpg b/src/assets/img/team/team-maenner.jpg new file mode 100644 index 0000000..c64d619 Binary files /dev/null and b/src/assets/img/team/team-maenner.jpg differ diff --git a/src/assets/img/team/tina.jpg b/src/assets/img/team/tina.jpg new file mode 100644 index 0000000..cbac82a Binary files /dev/null and b/src/assets/img/team/tina.jpg differ diff --git a/src/assets/img/team/veronika.jpg b/src/assets/img/team/veronika.jpg new file mode 100644 index 0000000..dcd676d Binary files /dev/null and b/src/assets/img/team/veronika.jpg differ diff --git a/src/components/BeforeAfter.astro b/src/components/BeforeAfter.astro deleted file mode 100644 index 1b7905c..0000000 --- a/src/components/BeforeAfter.astro +++ /dev/null @@ -1,57 +0,0 @@ ---- -/** Vorher/Nachher-Vergleich. Ohne JS steht der Regler auf der Mitte. */ -import Shot from './Shot.astro'; -interface Props { before: string; after: string; detail?: string } -const { before, after, detail } = Astro.props; ---- -
-
-
-
- - - -
- {detail &&

{detail}

} - -
- - diff --git a/src/components/Closing.astro b/src/components/Closing.astro new file mode 100644 index 0000000..fb14324 --- /dev/null +++ b/src/components/Closing.astro @@ -0,0 +1,29 @@ +--- +/** Abschluss jeder Unterseite: große Zeile, Telefon, Anfrage. */ +import H from './H.astro'; +import { salon } from '../data/site'; +interface Props { title?: string; text?: string; anliegen?: string; cta?: string; phoneFirst?: boolean } +const { + title = 'Bis bald im Salon', + text = 'Für Braut, Balayage und Great Lengths starten wir mit einer kurzen Anfrage. Wir rufen zurück, beraten und tragen den Termin für Sie ein.', + anliegen, + cta = 'Anfrage stellen', + phoneFirst = false, +} = Astro.props; +const href = anliegen ? `/anfrage?anliegen=${anliegen}` : '/anfrage'; +--- +
+
+
+
+
{salon.phoneDisplay}
+
+

{text}

+
+ {!phoneFirst && {cta}} + WhatsApp + Route planen +
+
+
+
diff --git a/src/components/CtaBand.astro b/src/components/CtaBand.astro deleted file mode 100644 index 5e74015..0000000 --- a/src/components/CtaBand.astro +++ /dev/null @@ -1,48 +0,0 @@ ---- -import Icon from './Icon.astro'; -import { salon } from '../data/site'; -interface Props { title?: string; text?: string; anliegen?: string; button?: string } -const { - title = 'Erzählen Sie uns, was Sie vorhaben.', - text = 'Für Brautstyling, Balayage und Haarverlängerung beginnen wir mit einer kurzen Anfrage. Wir melden uns telefonisch, besprechen alles und tragen den Termin für Sie ein.', - anliegen, - button = 'Anfrage stellen', -} = Astro.props; -const href = anliegen ? `/anfrage?anliegen=${anliegen}` : '/anfrage'; ---- -
-
- -
-

Anfrage

-

{title}

-

{text}

-
- {button} - {salon.phoneDisplay} -
-

Schon Kundin oder Kunde bei uns? Rufen Sie einfach an oder schreiben Sie uns per WhatsApp.

-
-
-
- diff --git a/src/components/DraftNote.astro b/src/components/DraftNote.astro deleted file mode 100644 index 146e2ea..0000000 --- a/src/components/DraftNote.astro +++ /dev/null @@ -1,11 +0,0 @@ ---- -interface Props { text: string } -const { text } = Astro.props; ---- -
-

Entwurf · vor Livegang prüfen

-

{text}

-
- diff --git a/src/components/Faq.astro b/src/components/Faq.astro index df8be8f..4ee0ca6 100644 --- a/src/components/Faq.astro +++ b/src/components/Faq.astro @@ -1,43 +1,18 @@ --- -/** Echte, belegbare Fragen. Erzeugt zusätzlich FAQPage-Schema über die Seite. */ +/** Häufige Fragen als details/summary, dazu FAQPage-Schema über die Seite. */ interface Props { items: { q: string; a: string }[]; title?: string } const { items, title = 'Häufige Fragen' } = Astro.props; --- -
-
-
-

Fragen

-

{title}

-
-
- {items.map((it) => ( -
- {it.q} -

{it.a}

+
+
+

{title}

+
+ {items.map((x) => ( +
+ {x.q} +

{x.a}

))}
- diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 1dd16c3..efdd8ac 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -1,92 +1,37 @@ --- -import Logo from './Logo.astro'; -import Icon from './Icon.astro'; -import Hours from './Hours.astro'; -import { salon, nav } from '../data/site'; +import { salon, hours, fmtHours, nav, navMore, PREVIEW } from '../data/site'; const year = new Date().getFullYear(); --- -