From 9e22ce616dee6eb0dc5b25991492709d01869aa9 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 29 Sep 2026 15:01:18 +0000 Subject: [PATCH] Galerie "Momente" zwischen Team und Preise MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Schwarze Section mit fünf Fotos aus dem Salon (Haarschnitte und Momente) - Desktop: Section bleibt stehen, die Bildreihe läuft beim Scrollen seitlich durch, dazu ein Fortschrittsbalken - Handy: horizontal wischen mit Einrasten, nächstes Bild lugt hervor - Hover: Bild wird farbig und zoomt leicht; Menüpunkt "Galerie" ergänzt Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01KBHsCnWNXAB2Le3gAEsivF --- README.md | 6 ++ src/App.tsx | 2 + src/assets/gallery/blond.webp | Bin 0 -> 53310 bytes src/assets/gallery/crew.webp | Bin 0 -> 86256 bytes src/assets/gallery/fade-bart.webp | Bin 0 -> 62328 bytes src/assets/gallery/platin.webp | Bin 0 -> 74956 bytes src/assets/gallery/twists.webp | Bin 0 -> 54296 bytes src/components/Gallery.tsx | 111 ++++++++++++++++++++++++++++++ src/components/Menu.tsx | 2 + 9 files changed, 121 insertions(+) create mode 100644 src/assets/gallery/blond.webp create mode 100644 src/assets/gallery/crew.webp create mode 100644 src/assets/gallery/fade-bart.webp create mode 100644 src/assets/gallery/platin.webp create mode 100644 src/assets/gallery/twists.webp create mode 100644 src/components/Gallery.tsx diff --git a/README.md b/README.md index f629c4f..dfefc82 100644 --- a/README.md +++ b/README.md @@ -28,6 +28,7 @@ npm run preview # Build lokal ansehen | Fotos (Hero, Menü) | `src/assets/photos/*.webp` | | Logo | `src/assets/logo/emblem.svg` | | Team-Porträts | `src/assets/team/*.webp` | +| Galerie „Momente“ (Bilder & Titel) | `src/assets/gallery/*.webp`, `src/components/Gallery.tsx` | | Schriftzug oben in der Mitte | `src/components/Nav.tsx` | | Favicon, App-Icon, Vorschaubild zum Teilen | `public/` | | Impressum & Datenschutz | `impressum.html`, `datenschutz.html` | @@ -52,6 +53,10 @@ einfach `emblem.svg` ersetzen (ein `` pro Form, `fill="currentColor"`). abgelegt: `name.webp` (1000 px breit, Team-Liste) und `name-thumb.webp` (320 × 320, Fotoraster und Preis-Thumbnails). Neue Porträts im selben Format ablegen und in `src/data/salon.ts` eintragen. +**Galerie:** Schwarze Section zwischen Team und Preise. Auf dem Desktop bleibt sie stehen und die Bilder +laufen beim Scrollen seitlich durch, auf dem Handy wird gewischt. Neues Bild: als WebP (900 px breit) in +`src/assets/gallery/` ablegen und in `moments` in `Gallery.tsx` eintragen (Titel + Seitenverhältnis). + **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 Setmore-Seite hinter `products=`. @@ -61,6 +66,7 @@ Setmore-Seite hinter `products=`. - [ ] 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 der Kunden auf den Galerie-Fotos einholen - [ ] Einverständnis des Teams für die Verwendung der Fotos einholen (Porträts und Hero sind KI-Bilder nach echten Fotos – vor der Veröffentlichung freigeben lassen) diff --git a/src/App.tsx b/src/App.tsx index 530ac3f..149b374 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,6 +2,7 @@ import Lenis from 'lenis' import { MotionConfig } from 'motion/react' import { useEffect } from 'react' import { Footer } from './components/Footer' +import { Gallery } from './components/Gallery' import { GridLines } from './components/GridLines' import { Hero } from './components/Hero' import { Intro } from './components/Intro' @@ -36,6 +37,7 @@ export default function App() { +