From c25a3f93814b66b71724f4c88d9a22c3699dac77 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 29 Sep 2026 12:41:03 +0000 Subject: [PATCH] Redesign im Stil von crispmtl.com: minimalistisch, Foto-Hero, weniger CTAs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Hell mit feinen Rasterlinien, breite Versal-Headlines (Archivo Expanded), kleine Serifen-Labels, eckige Buttons mit Füll-/Text-Roll-Hover - Hero: Foto aus dem Salon statt animiertem Hintergrund, eine Headline, ein Button; "Termin buchen" oben rechts nur noch als Textlink - Chrom-Wortmarke, Seidenhintergrund, Laufband, Kreis-Badge, großer Schluss-CTA und mobile Buchungsleiste entfernt; deutlich weniger Text - Neue interaktive Elemente: Menü-Overlay mit Bildwechsel pro Link, Team als Namensliste mit Porträt-Wisch-Übergang, Preise als Akkordeon mit Team-Thumbnails, Footer mit Fotoraster zwischen den Wörtern - Bilder aus den echten Salon-Fotos (Logo-Wand), neues Favicon/OG-Bild Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01KBHsCnWNXAB2Le3gAEsivF --- README.md | 30 +-- THIRD-PARTY-NOTICES.md | 42 +--- datenschutz.html | 10 +- impressum.html | 8 +- index.html | 6 +- package-lock.json | 18 +- package.json | 3 +- public/apple-touch-icon.png | Bin 7785 -> 2486 bytes public/favicon.svg | 5 +- public/og.jpg | Bin 119450 -> 108846 bytes src/App.tsx | 36 ++-- src/assets/logo.svg | 6 - src/assets/photos/emblem-breit-900.webp | Bin 0 -> 79756 bytes src/assets/photos/emblem-quadrat.webp | Bin 0 -> 31550 bytes src/assets/photos/emblem.webp | Bin 0 -> 66766 bytes src/assets/photos/mo-wand.webp | Bin 0 -> 98742 bytes src/assets/photos/salon-wand-800.webp | Bin 0 -> 83722 bytes src/assets/photos/salon-wand.webp | Bin 0 -> 234810 bytes src/components/BookButton.tsx | 42 ---- src/components/Button.tsx | 45 +++++ src/components/FinalCta.tsx | 57 ------ src/components/Footer.tsx | 137 ++++++++++--- src/components/GridLines.tsx | 14 ++ src/components/Hero.tsx | 108 ++++------ src/components/Icons.tsx | 36 +--- src/components/Intro.tsx | 36 ++++ src/components/Logo.tsx | 26 --- src/components/Magnetic.tsx | 36 ---- src/components/Marquee.tsx | 98 ---------- src/components/Menu.tsx | 109 +++++++++++ src/components/MobileBookBar.tsx | 50 ----- src/components/Nav.tsx | 116 +++++------ src/components/Prices.tsx | 118 +++++++++++ src/components/Reveal.tsx | 122 +++++------- src/components/RotatingBadge.tsx | 47 ----- src/components/SectionLabel.tsx | 11 -- src/components/Services.tsx | 140 ------------- src/components/SilkBackground.tsx | 250 ------------------------ src/components/StatusPill.tsx | 19 -- src/components/Team.tsx | 126 ------------ src/components/TeamList.tsx | 68 +++++++ src/components/Visit.tsx | 85 -------- src/data/salon.ts | 37 +++- src/index.css | 120 ++++-------- src/legal.ts | 3 +- src/lib/hours.ts | 15 ++ src/lib/scroll.ts | 25 +++ src/lib/useFitText.ts | 45 ----- src/main.tsx | 4 +- 49 files changed, 815 insertions(+), 1494 deletions(-) delete mode 100644 src/assets/logo.svg create mode 100644 src/assets/photos/emblem-breit-900.webp create mode 100644 src/assets/photos/emblem-quadrat.webp create mode 100644 src/assets/photos/emblem.webp create mode 100644 src/assets/photos/mo-wand.webp create mode 100644 src/assets/photos/salon-wand-800.webp create mode 100644 src/assets/photos/salon-wand.webp delete mode 100644 src/components/BookButton.tsx create mode 100644 src/components/Button.tsx delete mode 100644 src/components/FinalCta.tsx create mode 100644 src/components/GridLines.tsx create mode 100644 src/components/Intro.tsx delete mode 100644 src/components/Logo.tsx delete mode 100644 src/components/Magnetic.tsx delete mode 100644 src/components/Marquee.tsx create mode 100644 src/components/Menu.tsx delete mode 100644 src/components/MobileBookBar.tsx create mode 100644 src/components/Prices.tsx delete mode 100644 src/components/RotatingBadge.tsx delete mode 100644 src/components/SectionLabel.tsx delete mode 100644 src/components/Services.tsx delete mode 100644 src/components/SilkBackground.tsx delete mode 100644 src/components/StatusPill.tsx delete mode 100644 src/components/Team.tsx create mode 100644 src/components/TeamList.tsx delete mode 100644 src/components/Visit.tsx create mode 100644 src/lib/scroll.ts delete mode 100644 src/lib/useFitText.ts diff --git a/README.md b/README.md index 3654f41..e695a4e 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,15 @@ # Amin B. Ahmadi — Barber & Friseur, Kaiserslautern -One-Pager für den Salon: dunkel, modern, wenig Text. Jede Buchung läuft über die bestehende -Setmore-Seite ([aminbahmadi.setmore.com](https://aminbahmadi.setmore.com)). +Minimalistischer One-Pager für den Salon, gestalterisch angelehnt an [crispmtl.com](https://www.crispmtl.com): +helles Layout mit feinen Rasterlinien, breite Versal-Headlines, kleine Serifen-Labels, eckige Buttons. +Jede Buchung läuft über die bestehende Setmore-Seite ([aminbahmadi.setmore.com](https://aminbahmadi.setmore.com)). -**Bereiche:** Hero mit animiertem Seidenhintergrund (WebGL) · Laufband · Leistungen & Preise -(jede Zeile öffnet direkt die passende Setmore-Buchung) · Team · Adresse & Öffnungszeiten mit -Live-Status „Jetzt geöffnet“ · großer Buchungs-CTA · Impressum & Datenschutz. +**Bereiche:** Menü-Overlay (Bild wechselt je Link) · Hero mit Foto aus dem Salon · Über uns mit Bild-Reveal · +Team als Namensliste mit Porträtwechsel · Preise als Akkordeon (jede Zeile öffnet direkt die passende +Setmore-Buchung) · Footer mit Fotoraster, Adresse, Öffnungszeiten und Live-Status „Jetzt geöffnet“. -**Technik:** Vite, React, TypeScript, Tailwind CSS, Motion, Lenis. Effekte nach Vorlagen von -[React Bits](https://reactbits.dev) (Silk, Scroll Velocity, Circular Text, Chroma Grid, Magnet, -Split Text). Schriften (Instrument Serif, Geist) liegen lokal, es gibt keine Cookies und keine -externen Einbindungen. +**Technik:** Vite, React, TypeScript, Tailwind CSS, Motion, Lenis. Schriften (Archivo, Instrument Serif) +liegen lokal, es gibt keine Cookies und keine externen Einbindungen. ## Starten @@ -26,14 +25,15 @@ npm run preview # Build lokal ansehen | Was | Wo | | --- | --- | | Preise, Dauer, Leistungen, Öffnungszeiten, Team, Kontakt | `src/data/salon.ts` | -| Logo | `src/assets/logo.svg` | -| Team-Fotos | `src/assets/team/*.webp` | +| Fotos (Hero, Über uns, Menü, Fotoraster) | `src/assets/photos/*.webp` | +| Team-Porträts | `src/assets/team/*.webp` | +| Schriftzug oben in der Mitte | `src/components/Nav.tsx` | | Favicon, App-Icon, Vorschaubild zum Teilen | `public/` | | Impressum & Datenschutz | `impressum.html`, `datenschutz.html` | -**Logo:** Das aktuelle Logo ist ein Platzhalter-Monogramm. Das echte Logo als SVG unter -`src/assets/logo.svg` ablegen. Die Farbe im SVG ist egal (die Seite färbt es selbst ein), der -Hintergrund muss aber transparent sein. +**Fotos:** Alle Bilder stammen aus den Team-Fotos der Setmore-Seite (Logo-Wand im Salon). Für den +Hero lohnt sich ein eigenes, hochauflösendes Foto (mind. 2400 px breit), z. B. ein Barber bei der Arbeit. +Einfach `salon-wand.webp` bzw. `salon-wand-800.webp` ersetzen. **Direktbuchung:** Jede Leistung trägt ihre Setmore-ID (`id`). Wird bei Setmore eine Leistung neu angelegt, bekommt sie eine neue ID. Sie steht im Buchungslink der Leistung auf der @@ -41,10 +41,10 @@ Setmore-Seite hinter `products=`. ## Vor dem Livegang -- [ ] Echtes Logo einsetzen (siehe oben) - [ ] Platzhalter in `impressum.html` und `datenschutz.html` ausfüllen (`[…]`) und rechtlich prüfen lassen - [ ] Domain in `.env` bei `VITE_SITE_URL` eintragen (für das Vorschaubild bei WhatsApp/Facebook) - [ ] Rollen im Team prüfen (`src/data/salon.ts`) +- [ ] Einverständnis des Teams für die Verwendung der Fotos einholen Der Live-Status „Jetzt geöffnet“ rechnet mit den Öffnungszeiten aus `src/data/salon.ts` und kennt keine Feiertage. diff --git a/THIRD-PARTY-NOTICES.md b/THIRD-PARTY-NOTICES.md index d34c70b..eb5e2d6 100644 --- a/THIRD-PARTY-NOTICES.md +++ b/THIRD-PARTY-NOTICES.md @@ -1,40 +1,10 @@ # Third-Party Notices -## React Bits - -Some effects on this site are adapted from React Bits (https://reactbits.dev, -https://github.com/DavidHDev/react-bits): Silk (`src/components/SilkBackground.tsx`), -Scroll Velocity (`src/components/Marquee.tsx`), Circular Text, Chroma Grid, Magnet and Split Text. - -``` -MIT + Commons Clause License Condition v1.0 - -Copyright (c) 2026 David Haz - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, and distribute the Software **as part of an application, website, or product**, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -## Commons Clause Restriction - -You may use this Software, including for any commercial purpose, **so long as you do not sell, sublicense, or redistribute the components themselves-whether alone, in a bundle, or as a ported version.** - -## No Warranty - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. -``` - ## Fonts -Instrument Serif and Geist / Geist Mono are licensed under the SIL Open Font License 1.1 -(bundled via Fontsource). +Archivo and Instrument Serif are licensed under the SIL Open Font License 1.1 +and are bundled via Fontsource. + +## Libraries + +React, Motion and Lenis are MIT-licensed; their license texts ship with the packages in `node_modules`. diff --git a/datenschutz.html b/datenschutz.html index 767d809..e8c431e 100644 --- a/datenschutz.html +++ b/datenschutz.html @@ -5,14 +5,14 @@ Datenschutz · Amin B. Ahmadi Friseur Salon - + -
- ← Zur Startseite -

Datenschutz

+
+ ← Zur Startseite +

Datenschutz

Verantwortlicher

@@ -61,7 +61,7 @@ Rheinland-Pfalz.

-

Stand: September 2026

+

Stand: September 2026

diff --git a/impressum.html b/impressum.html index 8f6a6b1..c7ec023 100644 --- a/impressum.html +++ b/impressum.html @@ -5,14 +5,14 @@ Impressum · Amin B. Ahmadi Friseur Salon - + -
- ← Zur Startseite -

Impressum

+
+ ← Zur Startseite +

Impressum

Angaben gemäß § 5 DDG

diff --git a/index.html b/index.html index 52acff3..780d223 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ name="description" content="Barber & Friseur in Kaiserslautern: Herrenschnitt, Bart, Damen, Farbe & Beauty. Mo–Sa 9–19 Uhr, Richard-Wagner-Straße 10. Jetzt online Termin buchen." /> - + @@ -57,10 +57,10 @@