Claude
c25a3f9381
- 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 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KBHsCnWNXAB2Le3gAEsivF
57 lines
2.7 KiB
Markdown
57 lines
2.7 KiB
Markdown
# Amin B. Ahmadi — Barber & Friseur, Kaiserslautern
|
|
|
|
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:** 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. Schriften (Archivo, Instrument Serif)
|
|
liegen lokal, es gibt keine Cookies und keine externen Einbindungen.
|
|
|
|
## Starten
|
|
|
|
```bash
|
|
npm install
|
|
npm run dev # Entwicklung auf http://localhost:5173
|
|
npm run build # fertige Website in dist/
|
|
npm run preview # Build lokal ansehen
|
|
```
|
|
|
|
## Inhalte ändern
|
|
|
|
| Was | Wo |
|
|
| --- | --- |
|
|
| Preise, Dauer, Leistungen, Öffnungszeiten, Team, Kontakt | `src/data/salon.ts` |
|
|
| 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` |
|
|
|
|
**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
|
|
Setmore-Seite hinter `products=`.
|
|
|
|
## Vor dem Livegang
|
|
|
|
- [ ] 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.
|
|
|
|
## Veröffentlichen
|
|
|
|
`npm run build` erzeugt den Ordner `dist/`. Er läuft auf jedem Webspace (z. B. IONOS, Strato,
|
|
All-Inkl), auf Netlify oder Vercel und in Unterordnern, denn alle Pfade sind relativ.
|
|
Einfach den Inhalt von `dist/` hochladen.
|