Einheitliche Team-Porträts einbauen
- Neue Studio-Porträts für Atena, Ahmad, Ali, Younes und Mo (gleicher Hintergrund, gleiches Licht, schwarzes Shirt) statt der gemischten Originalfotos - Zusätzlich quadratische Thumbnails (320 px) für Fotoraster und Preis-Thumbnails, damit dort keine großen Bilder geladen werden - Team-Liste: Bildausschnitt auf Kopf und Schultern ausgerichtet, neutraler Hintergrund hinter den Porträts - README: Hinweise zu den Porträts und zum fehlenden Foto von Amin Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KBHsCnWNXAB2Le3gAEsivF
No files matched your search
|
After Width: | Height: | Size: 6.3 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 6.8 KiB |
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 7.3 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 6.5 KiB |
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 43 KiB |
@@ -11,7 +11,7 @@ const YEAR = new Date().getFullYear()
|
||||
|
||||
// 3 × 2 Fotoraster zwischen den Wörtern: fünf Porträts und das Logo an der Wand
|
||||
const tiles = [
|
||||
...team.filter((m) => m.key !== 'amin').map((m) => ({ src: m.photo, alt: m.name })),
|
||||
...team.filter((m) => m.key !== 'amin').map((m) => ({ src: m.thumb, alt: m.name })),
|
||||
{ src: image('photos/emblem-quadrat'), alt: 'Logo an der Salonwand' },
|
||||
]
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@ function Faces({ keys, className }: { keys: string[]; className?: string }) {
|
||||
return (
|
||||
<img
|
||||
key={key}
|
||||
src={m.photo}
|
||||
src={m.thumb}
|
||||
alt={m.name}
|
||||
title={m.name}
|
||||
loading="lazy"
|
||||
|
||||
@@ -43,7 +43,7 @@ export function TeamList() {
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<div className="relative order-1 aspect-square overflow-hidden bg-ink md:order-2 md:aspect-auto md:min-h-[32rem]">
|
||||
<div className="relative order-1 aspect-square overflow-hidden bg-[#cfccc6] md:order-2 md:aspect-auto md:min-h-[32rem]">
|
||||
{team.map((m, i) => (
|
||||
<img
|
||||
key={m.key}
|
||||
@@ -52,7 +52,7 @@ export function TeamList() {
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
className={cn(
|
||||
'absolute inset-0 size-full object-cover',
|
||||
'absolute inset-0 size-full object-cover object-[50%_20%]',
|
||||
i === active
|
||||
? 'z-20 [clip-path:inset(0_0_0_0)] transition-[clip-path] duration-700 ease-out-expo'
|
||||
: i === previous
|
||||
|
||||
@@ -134,7 +134,16 @@ export const services: ServiceCategory[] = [
|
||||
},
|
||||
]
|
||||
|
||||
export type Member = { key: string; name: string; short: string; role: string; photo: string }
|
||||
export type Member = {
|
||||
key: string
|
||||
name: string
|
||||
short: string
|
||||
role: string
|
||||
/** großes Porträt für die Team-Liste */
|
||||
photo: string
|
||||
/** quadratischer Ausschnitt fürs Fotoraster und die kleinen Porträts bei den Preisen */
|
||||
thumb: string
|
||||
}
|
||||
|
||||
const images = import.meta.glob<string>(['../assets/team/*.webp', '../assets/photos/*.webp'], {
|
||||
eager: true,
|
||||
@@ -144,12 +153,12 @@ const images = import.meta.glob<string>(['../assets/team/*.webp', '../assets/pho
|
||||
export const image = (path: string) => images[`../assets/${path}.webp`]
|
||||
|
||||
export const team: Member[] = [
|
||||
{ key: 'amin', name: 'Amin B. Ahmadi', short: 'Amin', role: 'Inhaber · Barber', photo: image('photos/emblem-breit-900') },
|
||||
{ key: 'atena', name: 'Atena', short: 'Atena', role: 'Damen · Farbe · Beauty', photo: image('team/atena') },
|
||||
{ key: 'ahmad', name: 'Ahmad', short: 'Ahmad', role: 'Barber', photo: image('team/ahmad') },
|
||||
{ key: 'ali', name: 'Ali', short: 'Ali', role: 'Barber', photo: image('team/ali') },
|
||||
{ key: 'younes', name: 'Younes', short: 'Younes', role: 'Barber', photo: image('team/younes') },
|
||||
{ key: 'mo', name: 'Mo Bargus', short: 'Mo', role: 'Barber', photo: image('team/mo') },
|
||||
{ key: 'amin', name: 'Amin B. Ahmadi', short: 'Amin', role: 'Inhaber · Barber', photo: image('photos/emblem-breit-900'), thumb: image('photos/emblem-quadrat') },
|
||||
{ key: 'atena', name: 'Atena', short: 'Atena', role: 'Damen · Farbe · Beauty', photo: image('team/atena'), thumb: image('team/atena-thumb') },
|
||||
{ key: 'ahmad', name: 'Ahmad', short: 'Ahmad', role: 'Barber', photo: image('team/ahmad'), thumb: image('team/ahmad-thumb') },
|
||||
{ key: 'ali', name: 'Ali', short: 'Ali', role: 'Barber', photo: image('team/ali'), thumb: image('team/ali-thumb') },
|
||||
{ key: 'younes', name: 'Younes', short: 'Younes', role: 'Barber', photo: image('team/younes'), thumb: image('team/younes-thumb') },
|
||||
{ key: 'mo', name: 'Mo Bargus', short: 'Mo', role: 'Barber', photo: image('team/mo'), thumb: image('team/mo-thumb') },
|
||||
]
|
||||
|
||||
export const member = (key: string) => team.find((m) => m.key === key)!
|
||||