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
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).
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 (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
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.htmlunddatenschutz.htmlausfüllen ([…]) und rechtlich prüfen lassen - Domain in
.envbeiVITE_SITE_URLeintragen (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.