121 lines
2.4 KiB
Text
121 lines
2.4 KiB
Text
---
|
|
interface Props {
|
|
name: string;
|
|
role: string;
|
|
photo: string;
|
|
}
|
|
|
|
const { name, role, photo } = Astro.props;
|
|
const initials = name.split(' ').map((n) => n[0]).slice(0, 2).join('');
|
|
---
|
|
|
|
<div class="card">
|
|
<div class="card-inner">
|
|
<div class="card-fallback" aria-hidden="true">{initials}</div>
|
|
<img
|
|
src={`/images/team/${photo}`}
|
|
alt={name}
|
|
class="card-photo"
|
|
loading="lazy"
|
|
onerror="this.style.opacity='0'"
|
|
/>
|
|
<div class="card-overlay">
|
|
<p class="card-name">{name}</p>
|
|
<p class="card-role">{role}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.card {
|
|
aspect-ratio: 3 / 4;
|
|
overflow: hidden;
|
|
position: relative;
|
|
cursor: default;
|
|
}
|
|
|
|
.card-inner {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: #0A1510;
|
|
}
|
|
|
|
/* Initials fallback — shown when photo fails to load */
|
|
.card-fallback {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 1.6rem;
|
|
letter-spacing: 0.04em;
|
|
color: rgba(240, 250, 245, 0.12);
|
|
z-index: 0;
|
|
}
|
|
|
|
/* Photo fills the card */
|
|
.card-photo {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: top center;
|
|
display: block;
|
|
z-index: 1;
|
|
transition:
|
|
transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94),
|
|
opacity 0.3s ease;
|
|
}
|
|
|
|
.card:hover .card-photo {
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
/* Bottom gradient overlay */
|
|
.card-overlay {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 48px 12px 13px;
|
|
background: linear-gradient(
|
|
to top,
|
|
rgba(0, 0, 0, 0.96) 0%,
|
|
rgba(0, 0, 0, 0.65) 50%,
|
|
transparent 100%
|
|
);
|
|
z-index: 2;
|
|
transition: background 0.35s ease;
|
|
}
|
|
|
|
.card:hover .card-overlay {
|
|
background: linear-gradient(
|
|
to top,
|
|
rgba(0, 0, 0, 0.85) 0%,
|
|
rgba(0, 0, 0, 0.48) 50%,
|
|
transparent 100%
|
|
);
|
|
}
|
|
|
|
.card-name {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
line-height: 1.35;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.card-role {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
color: rgba(255, 255, 255, 0.45);
|
|
line-height: 1.3;
|
|
}
|
|
</style>
|