# Team 3

> team

A shadcn/ui block from the [@cnippet-blocks](https://blocks.cnippet.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet-blocks/team-3).

- Page, with a live preview: https://shadcn.exchange/r/cnippet-blocks/team-3
- Screenshot: https://shadcn.exchange/shot/cnippet-blocks/team-3/light.png
- Registry item: https://blocks.cnippet.dev/r/team-3.json
- Categories: team
- Listed: 2026-11-01, source last changed 2026-11-01

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/cnippet-blocks/team-3.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/badge`

## Files

### `registry/default/sections/team-3.tsx`

```tsx
import Image from "next/image";
import { Badge } from "@/components/ui/badge";

const teamMembers = [
  {
    img: "https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770279333/a1.jpg",
    name: "Clara Reyes",
    role: "CEO & Co-Founder",
  },
  {
    img: "https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770279333/a2.jpg",

    name: "Liam Chen",
    role: "CTO",
  },
  {
    img: "https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770279333/a3.jpg",

    name: "Priya Sharma",
    role: "VP of Operations",
  },
  {
    img: "https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770279333/a4.jpg",

    name: "David Okafor",
    role: "Head of Engineering",
  },
  {
    img: "https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770279333/a5.jpg",

    name: "Elena Volkov",
    role: "Director of Sustainability",
  },
  {
    img: "https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770279333/a6.jpg",

    name: "Marcus Webb",
    role: "Head of Partnerships",
  },
];

export default function TeamSection() {
  return (
    <section className="relative w-full overflow-hidden py-16 text-black dark:bg-white">
      <div className="mx-auto max-w-full px-5 md:px-10">
        <Badge className="mb-4 rounded-none bg-[#e1fcad] px-3 py-0.5 font-medium text-black text-sm dark:bg-[#e1fcad]">
          Our Team
        </Badge>
        <p className="max-w-5xl font-kanturmuy font-medium text-3xl tracking-tight md:text-4xl">
          Meet the visionary leaders who are shaping Aero's future and driving
          our mission to deliver innovative clean energy solutions.
        </p>
        <div className="mt-14 grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3">
          {teamMembers.map((member) => (
            <div
              className="group cursor-pointer overflow-hidden"
              key={member.name}
            >
              <div className="h-80 overflow-hidden md:h-120">
                <Image
                  alt={member.name}
                  className="h-full w-full object-cover transition-all duration-700 ease-in-out group-hover:scale-105"
                  height={600}
                  src={member.img}
                  width={500}
                />
              </div>
              <div className="py-5">
                <h3 className="font-medium text-2xl tracking-tight">
                  {member.name}
                </h3>
                <p className="font-mono text-neutral-600">{member.role}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
```