import { Avatar, AvatarFallback } from "@/components/ui/avatar";

export const meta = {
  name: "Team grid",
  description: "Centered heading and a responsive grid of eight people with initials avatars, names and roles.",
};

const people = [
  { name: "Maya Chen", role: "Co-founder & CEO" },
  { name: "Daniel Okafor", role: "Co-founder & CTO" },
  { name: "Sofia Martínez", role: "Head of Product" },
  { name: "Liam Novak", role: "Head of Engineering" },
  { name: "Priya Raman", role: "Lead Data Scientist" },
  { name: "Jonas Becker", role: "Staff Engineer" },
  { name: "Amara Wells", role: "Head of Design" },
  { name: "Ethan Brooks", role: "Customer Success Lead" },
];

function initials(name: string) {
  return name
    .split(" ")
    .map((part) => part[0])
    .join("")
    .slice(0, 2);
}

export default function Team01() {
  return (
    <section className="mx-auto max-w-6xl px-4 py-16 sm:px-6 sm:py-24">
      <div className="mx-auto max-w-2xl text-center">
        <p className="text-sm font-medium text-primary">Our team</p>
        <h2 className="mt-2 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
          The people building Nimbus
        </h2>
        <p className="mt-4 text-muted-foreground">
          A small, remote-first team of engineers, designers and data nerds across nine time zones.
        </p>
      </div>

      <ul className="mt-12 grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-3 lg:mt-16 lg:grid-cols-4">
        {people.map((person) => (
          <li key={person.name} className="flex flex-col items-center text-center">
            <Avatar className="size-20 ring-4 ring-background sm:size-24">
              <AvatarFallback className="bg-gradient-to-br from-primary/25 to-primary/5 text-lg font-semibold text-primary sm:text-xl">
                {initials(person.name)}
              </AvatarFallback>
            </Avatar>
            <h3 className="mt-4 font-semibold">{person.name}</h3>
            <p className="mt-0.5 text-sm text-muted-foreground">{person.role}</p>
          </li>
        ))}
      </ul>
    </section>
  );
}
Team grid

Team cards with bios

We're hiring
