From 3eb46029e9dee3e00393a935f66068fbf319aaea Mon Sep 17 00:00:00 2001 From: Matthias Meister Date: Mon, 18 May 2026 08:22:27 +0200 Subject: [PATCH] feat: add footer with impressum and datenschutz links --- .impeccable.md | 17 + src/components/Footer.astro | 26 + src/content/site-content.ts | 24 +- src/layouts/main.astro | 6 +- src/pages/datenschutz.astro | 10 + src/pages/impressum.astro | 10 + src/pages/index.astro | 1415 +++++++++++++++++++++++++---------- 7 files changed, 1096 insertions(+), 412 deletions(-) create mode 100644 .impeccable.md create mode 100644 src/components/Footer.astro create mode 100644 src/pages/datenschutz.astro create mode 100644 src/pages/impressum.astro diff --git a/.impeccable.md b/.impeccable.md new file mode 100644 index 0000000..c23c788 --- /dev/null +++ b/.impeccable.md @@ -0,0 +1,17 @@ +## Design Context + +### Users +Lokale Kundinnen und Kunden in Crimmitschau und Umgebung, die einen Friseurtermin suchen. Die Zielgruppe ist breit gefächert — von jungen Erwachsenen bis Senioren. Die Seite wird typischerweise kurz vor dem Anruf oder der Terminvereinbarung besucht, oft auf dem Smartphone unterwegs oder am Desktop zu Hause. + +### Brand Personality +Edel, bodenständig, persönlich. Warm und einladend ohne kitschig zu wirken. Präzise Handwerkskunst trifft auf entspannte Atmosphäre. Die Kommunikation ist direkt und ehrlich — keine überzogene Marketing-Sprache. + +### Aesthetic Direction +Editorial-warm mit asymmetrischen Layouts, großzügiger Typografie (Playfair Display + Source Sans 3) und einer erdigen, warmen Farbpalette in OKLCH. Lichtmodus, da die Seite tagsüber und in entspannten Kontexten konsumiert wird. Anti-Reference: Überladene Beauty-Salon-Websites mit Glitzer, Neon und Stockfoto-Ästhetik. + +### Design Principles +1. **Ruhe vor Lautstärke** — Weißraum und klare Hierarchie schaffen Vertrauen +2. **Präzision spürbar machen** — Typografie und Layout sollten die Sorgfalt des Salons widerspiegeln +3. **Warm, nicht süß** — Erdige Töne statt pastelliger Süßlichkeit +4. **Funktional, aber nie langweilig** — Asymmetrie und unerwartete Proportionen verleihen Charakter +5. **Barrierefreiheit ist selbstverständlich** — Reduzierte Bewegung respektieren, klare Kontraste, lesbare Typografie diff --git a/src/components/Footer.astro b/src/components/Footer.astro new file mode 100644 index 0000000..0f8eaf2 --- /dev/null +++ b/src/components/Footer.astro @@ -0,0 +1,26 @@ +--- +const currentYear = new Date().getFullYear() +--- + + diff --git a/src/content/site-content.ts b/src/content/site-content.ts index bcb8e26..6fbcf3c 100644 --- a/src/content/site-content.ts +++ b/src/content/site-content.ts @@ -85,7 +85,7 @@ export const siteContent = { eyebrow: "Studio Haarscharf · Crimmitschau", title: "Schnitt, Farbe und Styling mit ruhiger Hand.", intro: - "Ein lokaler Salon für Menschen, die eine Frisur wollen, die im Alltag sitzt und zur Person passt.", + "Frisuren, die im Alltag sitzen und zu Ihnen passen. Beraten, geschnitten und gestylt – mitten in Crimmitschau.", image: { src: "https://images.unsplash.com/photo-1711274093746-b588a17d2716?auto=format&fit=crop&w=1600&q=82", alt: "Eine Person schneidet Haare mit einer Schere in einem Friseurumfeld", @@ -95,7 +95,7 @@ export const siteContent = { }, cta: { primary: { - label: "Termin telefonisch anfragen", + label: "Anrufen & Termin vereinbaren", href: "tel:+4937626781710", }, secondary: { @@ -110,21 +110,21 @@ export const siteContent = { }, { title: "Klassisch bis modern", - text: "Von gepflegten Kurzhaarschnitten bis zu frischen Farb- und Stylingideen bleibt der Look tragbar.", + text: "Von klassischem Kurzhaarschnitt bis zum modernen Farb-Look – wir achten darauf, dass Sie sich damit wohlfühlen.", }, { title: "Vor Ort verwurzelt", - text: "Mitten in Crimmitschau, gut erreichbar in der Annenstraße und unkompliziert per Telefon.", + text: "Mitten in Crimmitschau, unkompliziert erreichbar in der Annenstraße.", }, ], services: [ { title: "Damen- und Herrenhaarschnitte", - text: "Saubere Konturen, Form und Finish für kurze, mittlere und lange Haare.", + text: "Vom pflegenden Kurzhaarschnitt bis zur langen Form – Sie verlassen den Salon mit einer Frisur, die sitzt und Ihren Typ unterstreicht.", }, { title: "Coloration und Haarstyling", - text: "Farbauffrischung, neue Nuancen und Styling für den nächsten Auftritt.", + text: "Ob Ansatz auffrischen oder kompletter Farbwechsel – wir finden den Ton, der zu Ihrem Teint und Ihrem Stil passt.", }, { title: "Hochsteck- und Brautfrisuren", @@ -132,7 +132,7 @@ export const siteContent = { }, { title: "Kinderhaarschnitte", - text: "Ruhig, freundlich und alltagstauglich für kleine Kundinnen und Kunden.", + text: "Geduldig, freundlich und schnell – damit der Kinderschnitt für alle entspannt wird und das Ergebnis im Alltag hält.", }, ], hours: [ @@ -145,26 +145,26 @@ export const siteContent = { ], reviewSummary: { rating: "4,8 / 5", - count: "rund 89 Google-Bewertungen", - text: "Mehrere Brancheneinträge führen Studio Haarscharf mit sehr guter lokaler Bewertung.", + count: "89 Google-Bewertungen", + text: "Kunden bewerten uns bei Google mit 4,8 von 5 Sternen – und regelmäßig in lokalen Branchenportalen.", }, team: [ { name: "Claudia Schäfer", role: "Salonleitung & Stylistin", - bio: "Über 20 Jahre Erfahrung in Schnitt, Farbe und Styling. Spezialisiert auf typgerechte Beratung und festliche Frisuren.", + bio: "Claudia führt den Salon seit über 20 Jahren. Ihre Stärke: Sie hört zu, berät ehrlich und schneidet nicht einfach drauf los.", initials: "CS", }, { name: "Maria Klein", role: "Coloristin & Stylistin", - bio: "Expertin für Farbverläufe, Coloration und kreative Nuancen. Liebt es, mit natürlichen Tönen zu arbeiten.", + bio: "Maria verwandelt Wünsche in Farbe. Ihr Spezialgebiet: natürliche Nuancen und sanfte Verläufe, die sich nicht nur gut ansehen, sondern auch gut anfühlen.", initials: "MK", }, { name: "Sophie Weber", role: "Auszubildende", - bio: "Im 2. Ausbildungsjahr zur Friseurin. Bringt frische Ideen und moderne Styling-Trends mit ins Team.", + bio: "Sophie ist im 2. Lehrjahr und bringt die neuesten Techniken aus der Ausbildung mit. Sie unterstützt bei Schnitt, Styling und Kundenbetreuung.", initials: "SW", }, ], diff --git a/src/layouts/main.astro b/src/layouts/main.astro index e0ac07c..4490122 100644 --- a/src/layouts/main.astro +++ b/src/layouts/main.astro @@ -1,5 +1,6 @@ --- import "@/styles/global.css" +import Footer from "@/components/Footer.astro" const { title = "Haarscharf Crimmitschau | Friseur in der Annenstraße", @@ -19,7 +20,10 @@ const { {title} - + +
+
+
diff --git a/src/pages/datenschutz.astro b/src/pages/datenschutz.astro new file mode 100644 index 0000000..069a1fa --- /dev/null +++ b/src/pages/datenschutz.astro @@ -0,0 +1,10 @@ +--- +import Layout from "@/layouts/main.astro" +--- + + +
+

Datenschutzerklärung

+

Hier folgt die Datenschutzerklärung.

+
+ diff --git a/src/pages/impressum.astro b/src/pages/impressum.astro new file mode 100644 index 0000000..4f5a520 --- /dev/null +++ b/src/pages/impressum.astro @@ -0,0 +1,10 @@ +--- +import Layout from "@/layouts/main.astro" +--- + + +
+

Impressum

+

Angaben gemäß § 5 TMG

+
+ diff --git a/src/pages/index.astro b/src/pages/index.astro index f0fe7bc..b6b660b 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -13,7 +13,7 @@ const navItems = [ -
+
H @@ -23,7 +23,7 @@ const navItems = [
@@ -40,7 +40,7 @@ const navItems = [ - + Anrufen
@@ -68,51 +68,52 @@ const navItems = [
- -
-
-

{siteContent.hero.eyebrow}

+ +
+ +
+

{siteContent.hero.eyebrow}

{siteContent.hero.title}

-

{siteContent.hero.intro}

+

{siteContent.hero.intro}

-
- +
+ {siteContent.cta.primary.label} - + {siteContent.cta.secondary.label}
- -
-
-
Adresse
-
{siteContent.business.address.display}
-
-
-
Telefon
-
{siteContent.business.phone.display}
-
-
-
{siteContent.hours[0].day}
-
{siteContent.hours[0].time}
-
-
+ +
+
+
Adresse
+
{siteContent.business.address.display}
+
+
+
Telefon
+
{siteContent.business.phone.display}
+
+
+
{siteContent.hours[0].day}
+
{siteContent.hours[0].time}
+
+
- -
-
-

Salonversprechen

+ +
+
+

Salonversprechen

Haare dürfen leicht aussehen, auch wenn dahinter Präzision steckt.

-
+
{ siteContent.promise.map((item, index) => ( -
- {String(index + 1).padStart(2, "0")} +
+ {String(index + 1).padStart(2, "0")}

{item.title}

{item.text}

@@ -121,8 +122,8 @@ const navItems = [
- -
+ +
Warm beleuchteter Salon-Innenraum mit Friseurstühlen und SpiegelnAtmosphäre im Salon
- -
-
-

Leistungen

+ +
+
+

Leistungen

Alles, was ein guter Salonbesuch braucht.

-

Die Auswahl bleibt bewusst klar. Details, Wünsche und Termine werden am besten direkt telefonisch besprochen.

+

Fokus auf das Wesentliche: Ihr Look, Ihr Typ, Ihr Termin. Details und Wünsche besprechen wir am besten kurz am Telefon.

-
+
{ siteContent.services.map((service, index) => ( -
- {String(index + 1).padStart(2, "0")} +
+ {String(index + 1).padStart(2, "0")}

{service.title}

{service.text}

@@ -155,14 +156,14 @@ const navItems = [
- -
-
-

Unser Team

+ +
+
+

Unser Team

Die Menschen hinter den Scheren.

-
+
Eine Friseurin bei der Arbeit mit SchereHandwerk mit Präzision
-
+
{ siteContent.team.map((member) => ( -
-
+
+
{member.initials}

{member.name}

-

{member.role}

+

{member.role}

{member.bio}

)) @@ -190,18 +191,18 @@ const navItems = [
- -
-
-

Öffnungszeiten

+ +
+
+

Öffnungszeiten

Planbar von Montag bis Samstag.

Für Termine bitte kurz anrufen. So lässt sich direkt klären, wann genug Zeit für Beratung, Schnitt oder Farbe frei ist.

-
+
{ siteContent.hours.map((entry) => ( -
+
{entry.day}
@@ -210,35 +211,35 @@ const navItems = [
- -
-
-

Lokales Vertrauen

+ +
+
+

Lokales Vertrauen

{siteContent.reviewSummary.rating}

-

+

{siteContent.reviewSummary.count} {siteContent.reviewSummary.text}

- -
-
-

Kontakt & Anfahrt

+ +
+
+

Kontakt & Anfahrt

Mitten in Crimmitschau.

-

Der schnellste Weg zum Termin bleibt ein kurzer Anruf im Salon.

+

Der schnellste Weg zum Termin: ein kurzer Anruf.

-
-
-
+
+
+
{siteContent.business.name} {siteContent.business.address.street} {siteContent.business.address.postalCode} {siteContent.business.address.city}
-
+
Friseur-Werkzeuge: Schere und Kamm auf einer Marmor-Arbeitsfläche
-
- - Telefon +
+ + Telefon {siteContent.business.phone.display} - - E-Mail + + E-Mail {siteContent.business.email} - + Route über Google Maps
- -
-

Bereit für den nächsten Schnitt?

+ +
+

Bereit für den nächsten Schnitt?

Kurz anrufen, Termin abstimmen, vorbeikommen.

-
- +
+ {siteContent.business.phone.display}
@@ -316,419 +317,981 @@ const navItems = [ if (backdrop) backdrop.addEventListener('click', close); links.forEach(link => link.addEventListener('click', close)); })(); + + /* Scroll-triggered section reveals */ + (function() { + var revealSelectors = [ + '.promise-v2__intro', + '.promise-v2__card', + '.editorial-v2', + '.section-heading-v2', + '.services-v2__card', + '.team-image-v2', + '.team-v2__card', + '.hours-v2__row', + '.trust-v2__rating', + '.trust-v2__copy', + '.contact-v2__left', + '.contact-v2__actions', + '.final-cta-v2' + ]; + + var revealElements = document.querySelectorAll(revealSelectors.join(',')); + if (!revealElements.length) return; + + var observer = new IntersectionObserver(function(entries) { + entries.forEach(function(entry) { + if (entry.isIntersecting) { + entry.target.classList.add('is-visible'); + observer.unobserve(entry.target); + } + }); + }, { + threshold: 0.12, + rootMargin: '0px 0px -40px 0px' + }); + + revealElements.forEach(function(el) { + observer.observe(el); + }); + })();