Claude
61a40437d2
One-Pager mit Vite, React, Tailwind und Motion: WebGL-Seidenhintergrund, Chrom-Wortmarke, Scroll-Laufband, Preisliste mit Direktbuchung pro Leistung (Setmore-Deep-Links), Team-Raster mit Farb-Spotlight, Öffnungszeiten mit Live-Status sowie Impressum und Datenschutz. Logo ist ein Platzhalter. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KBHsCnWNXAB2Le3gAEsivF
57 lines
2.4 KiB
Markdown
57 lines
2.4 KiB
Markdown
# 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)).
|
|
|
|
**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.
|
|
|
|
**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.
|
|
|
|
## 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` |
|
|
| Logo | `src/assets/logo.svg` |
|
|
| Team-Fotos | `src/assets/team/*.webp` |
|
|
| 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.
|
|
|
|
**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
|
|
|
|
- [ ] 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`)
|
|
|
|
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.
|