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
Amin B. Ahmadi — Barber & Friseur, Kaiserslautern
Minimalistischer One-Pager für den Salon, gestalterisch angelehnt an 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).
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
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.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) - 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.