Claude
790e18e8a6
- Hero zeigt Amin mit Schere und Kamm am Kunden (Desktop 2000/1000 px, eigener Hochformat-Ausschnitt fürs Handy per <picture>) - Headline und Button auf Desktop unten links, damit Gesichter, Schere und Kamm frei bleiben; auf dem Handy weiterhin zentriert - Oben stärker abgedunkelt: Navigation (mix-blend-difference) auf dem hellen Studiohintergrund jetzt mit ca. 6:1 statt 2:1 Kontrast - Menü: "Preise" zeigt ein Detail (Hände, Schere, Kamm), "Team" ein 3 × 2 Raster aller Porträts - Nicht mehr genutzte Fotos entfernt, Vorschaubild (og.jpg) und README aktualisiert Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KBHsCnWNXAB2Le3gAEsivF
66 lines
3.4 KiB
Markdown
66 lines
3.4 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ü) | `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` |
|
||
|
||
**Hero:** Amin bei der Arbeit (per Bild-KI erstellt), abgelegt als `hero.webp` (2000 px), `hero-1000.webp`
|
||
und `hero-mobile.webp` (Hochformat-Ausschnitt fürs Handy). Die Headline steht unten links, damit Gesichter,
|
||
Schere und Kamm frei bleiben. Beim Austauschen alle drei Dateien ersetzen, den Handy-Ausschnitt so wählen,
|
||
dass Gesicht und Hände darin liegen. `hero-detail.webp` (Hände mit Schere und Kamm) erscheint im Menü.
|
||
|
||
**Salon-Fotos:** „Über uns“ und der Menüpunkt „Kontakt“ zeigen das Logo an der Wand im Salon
|
||
(`emblem.webp`, `emblem-breit-900.webp`, aus den Fotos der Setmore-Seite).
|
||
|
||
**Team-Porträts:** Einheitliche Studio-Porträts (per Bild-KI aus den Originalfotos erstellt), je zweimal
|
||
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.
|
||
|
||
**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 (Porträts und Hero sind KI-Bilder
|
||
nach echten Fotos – vor der Veröffentlichung freigeben lassen)
|
||
|
||
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.
|