Team Portrait Cards

// Team section on a grey panel: heading and intro, then white cards with the
// name and a round portrait, followed by role and short bio.
// Pure Tailwind, no dependencies. Works with Tailwind v3 and v4.

type Member = { name: string; role: string; bio: string; photo: string };

type Props = {
  heading?: string;
  intro?: string;
  members?: Member[];
};

const face = (id: string) => `https://images.unsplash.com/photo-${id}?w=500&h=500&q=80&auto=format&fit=crop&crop=faces`;

const DEFAULT_MEMBERS: Member[] = [
  { name: "Daniel Reyes", role: "Creative director", bio: "Fifteen years shaping brands for hospitality, retail and tech.", photo: face("1472099645785-5658abf4ff4e") },
  { name: "Lena Hart", role: "Design lead", bio: "Turns strategy into identities, systems and type that hold up everywhere.", photo: face("1438761681033-6461ffad8d80") },
  { name: "Omar Aziz", role: "Developer", bio: "Builds the fast, accessible websites our designs become.", photo: face("1500648767791-00dcc994a43e") },
];

export default function TeamPortraitCards({
  heading = "The team",
  intro = "A small, senior team. You work directly with the people doing the work, from the first call to launch.",
  members = DEFAULT_MEMBERS,
}: Props) {
  return (
    <section className="bg-[#f7f7f7] px-5 py-20 font-['Inter',ui-sans-serif,system-ui,sans-serif] text-black antialiased md:px-10 md:py-28">
      <div className="mx-auto max-w-7xl">
        <h2 className="text-[clamp(32px,4vw,56px)] font-bold leading-tight tracking-[-0.03em]">{heading}</h2>
        <p className="mt-6 max-w-3xl text-xl font-medium md:mt-8 md:text-2xl">{intro}</p>

        <ul className="mt-12 grid gap-x-8 gap-y-12 sm:grid-cols-2 lg:mt-16 lg:grid-cols-3">
          {members.map((m) => (
            <li key={m.name} className="flex flex-col gap-5">
              <div className="flex aspect-[424/457] flex-col bg-white p-5">
                <h3 className="text-lg font-semibold">{m.name}</h3>
                <div className="flex flex-1 items-center justify-center pb-6">
                  <img src={m.photo} alt={m.name} loading="lazy" className="aspect-square w-3/5 rounded-full object-cover" />
                </div>
              </div>
              <div className="flex flex-col gap-2.5">
                <p className="text-lg font-semibold">{m.role}</p>
                <p className="font-medium text-[#595959]">{m.bio}</p>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}