|
|
|
|
@@ -171,8 +171,8 @@ export function TeamGrid({ members }: TeamGridProps) {
|
|
|
|
|
<div className="absolute inset-0 opacity-[0.025] pointer-events-none" style={{ backgroundImage: "url('data:image/svg+xml,%3Csvg width=\\'20\\' height=\\'20\\' viewBox=\\'0 0 20 20\\' xmlns=\\'http://www.w3.org/2000/svg\\'%3E%3Crect width=\\'1\\' height=\\'1\\' fill=\\'%23000000\\'/%3E%3C/svg%3E')" }} />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="px-8 pb-8 relative flex-grow flex flex-col">
|
|
|
|
|
{/* Overlapping Profile Picture with Shared Layout Animation */}
|
|
|
|
|
<div className="px-6 sm:px-8 pb-8 relative flex-grow flex flex-col items-center md:items-start text-center md:text-left">
|
|
|
|
|
{/* Overlapping Profile Picture with Shared Layout Animation (Centered & Larger on Mobile) */}
|
|
|
|
|
<m.div
|
|
|
|
|
layoutId={`team-avatar-${member.id}`}
|
|
|
|
|
onClick={() => {
|
|
|
|
|
@@ -181,7 +181,7 @@ export function TeamGrid({ members }: TeamGridProps) {
|
|
|
|
|
}}
|
|
|
|
|
onMouseEnter={() => handlePreload(imageUrl)}
|
|
|
|
|
onTouchStart={() => handlePreload(imageUrl)}
|
|
|
|
|
className="w-32 h-32 md:w-36 md:h-36 rounded-2xl overflow-hidden border-4 border-white shadow-xl bg-white relative -mt-16 md:-mt-20 mb-6 group-hover:-translate-y-2 transition-transform duration-500 cursor-pointer group/avatar"
|
|
|
|
|
className="w-36 h-48 sm:w-40 sm:h-52 md:w-36 md:h-44 mx-auto md:mx-0 rounded-2xl overflow-hidden border-4 border-white shadow-xl bg-white relative -mt-20 md:-mt-24 mb-6 group-hover:-translate-y-2 transition-transform duration-500 cursor-pointer group/avatar"
|
|
|
|
|
>
|
|
|
|
|
{imageUrl ? (
|
|
|
|
|
<>
|
|
|
|
|
@@ -189,8 +189,8 @@ export function TeamGrid({ members }: TeamGridProps) {
|
|
|
|
|
src={imageUrl}
|
|
|
|
|
alt={member.name}
|
|
|
|
|
fill
|
|
|
|
|
sizes="(max-width: 768px) 128px, 144px"
|
|
|
|
|
className="object-cover transition-transform duration-500 group-hover/avatar:scale-105"
|
|
|
|
|
sizes="(max-width: 768px) 160px, 144px"
|
|
|
|
|
className="object-cover object-[center_15%] transition-transform duration-500 group-hover/avatar:scale-105"
|
|
|
|
|
/>
|
|
|
|
|
{/* Zoom Icon Overlay on Hover */}
|
|
|
|
|
<div className="absolute inset-0 bg-black/40 opacity-0 group-hover/avatar:opacity-100 transition-opacity duration-300 flex items-center justify-center text-white cursor-pointer">
|
|
|
|
|
@@ -230,7 +230,7 @@ export function TeamGrid({ members }: TeamGridProps) {
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
|
|
{/* Contacts (Sticky at bottom) */}
|
|
|
|
|
<div className="mt-auto pt-6 border-t border-neutral-100 flex flex-col gap-4">
|
|
|
|
|
<div className="mt-auto pt-6 border-t border-neutral-100 flex flex-col gap-4 w-full text-left">
|
|
|
|
|
{member.email && (
|
|
|
|
|
<a href={`mailto:${member.email}`} className="group/link flex items-center gap-4 text-text-secondary hover:text-primary transition-colors font-medium cursor-pointer">
|
|
|
|
|
<div className="w-10 h-10 rounded-xl bg-neutral-50 flex items-center justify-center text-neutral-400 group-hover/link:bg-primary/10 group-hover/link:text-primary transition-colors border border-neutral-100">
|
|
|
|
|
@@ -365,15 +365,15 @@ export function TeamGrid({ members }: TeamGridProps) {
|
|
|
|
|
scale: { duration: 0.25 },
|
|
|
|
|
}}
|
|
|
|
|
onClick={(e) => e.stopPropagation()}
|
|
|
|
|
className="bg-white rounded-3xl overflow-hidden max-w-lg w-full shadow-2xl border border-white/20 relative flex flex-col z-20 my-auto touch-none cursor-grab active:cursor-grabbing"
|
|
|
|
|
className="bg-white rounded-[2rem] sm:rounded-3xl overflow-hidden max-w-[380px] sm:max-w-md md:max-w-lg w-full shadow-2xl border border-white/20 relative flex flex-col z-20 my-auto touch-none cursor-grab active:cursor-grabbing shrink-0"
|
|
|
|
|
>
|
|
|
|
|
{/* Mobile Drag Indicator Bar */}
|
|
|
|
|
<div className="absolute top-3 left-1/2 -translate-x-1/2 z-30 w-12 h-1.5 rounded-full bg-white/50 backdrop-blur-sm pointer-events-none" />
|
|
|
|
|
|
|
|
|
|
{/* Portrait Container - Height tuned for Mobile without vertical squishing */}
|
|
|
|
|
{/* Portrait Container - Tall Portrait Aspect Framing for Mobile */}
|
|
|
|
|
<m.div
|
|
|
|
|
layoutId={`team-avatar-${selectedMember.id}`}
|
|
|
|
|
className="relative w-full h-[320px] sm:h-[400px] md:h-[450px] bg-neutral-900 overflow-hidden shrink-0"
|
|
|
|
|
className="relative w-full h-[52vh] min-h-[380px] max-h-[520px] md:h-[460px] bg-neutral-900 overflow-hidden shrink-0"
|
|
|
|
|
>
|
|
|
|
|
{selectedMember.image ? (
|
|
|
|
|
<Image
|
|
|
|
|
@@ -381,7 +381,7 @@ export function TeamGrid({ members }: TeamGridProps) {
|
|
|
|
|
alt={selectedMember.name}
|
|
|
|
|
fill
|
|
|
|
|
sizes="(max-width: 768px) 100vw, 600px"
|
|
|
|
|
className="object-cover object-top pointer-events-none select-none"
|
|
|
|
|
className="object-cover object-[center_15%] pointer-events-none select-none"
|
|
|
|
|
priority
|
|
|
|
|
/>
|
|
|
|
|
) : (
|
|
|
|
|
|
