Team

1"use client";23import { cn } from "@/lib/utils";45type Team01Props = {6  className?: string;7};89const MEMBERS = [10  {11    name: "Maya Chen",12    role: "CEO",13    avatar: "/assets/brand/demos/avatars/avatar-1.png",14  },15  {16    name: "Jordan Hale",17    role: "Design",18    avatar: "/assets/brand/demos/avatars/avatar-2.png",19  },20  {21    name: "Priya Nair",22    role: "Engineering",23    avatar: "/assets/brand/demos/avatars/avatar-3.png",24  },25  {26    name: "Chris Ortega",27    role: "Product",28    avatar: "/assets/brand/demos/avatars/avatar-4.png",29  },30  {31    name: "Sam Okonkwo",32    role: "Marketing",33    avatar: "/assets/brand/demos/avatars/avatar-5.png",34  },35  {36    name: "Elena Voss",37    role: "Support",38    avatar: "/assets/brand/demos/avatars/avatar-6.png",39  },40] as const;4142export function Team01({ className }: Team01Props) {43  return (44    <section className={cn("@container w-full bg-background", className)}>45      <div className="mx-auto w-full max-w-4xl px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">46        <div className="mx-auto max-w-md text-center">47          <h2 className="text-xl font-medium tracking-wide text-foreground @[32rem]:text-2xl">48            Meet the team49          </h2>50          <p className="mt-2 text-sm tracking-wide text-muted-foreground">51            The people shipping blocks, tokens, and docs every week.52          </p>53        </div>54        <ul className="mt-8 grid grid-cols-2 gap-x-4 gap-y-8 @[32rem]:grid-cols-3 @[40rem]:grid-cols-6">55          {MEMBERS.map((member) => (56            <li key={member.name} className="flex flex-col items-center text-center">57              <img58                src={member.avatar}59                alt=""60                className="size-16 rounded-full object-cover @[32rem]:size-[4.5rem]"61              />62              <p className="mt-3 text-sm font-medium tracking-wide text-foreground">63                {member.name}64              </p>65              <p className="mt-0.5 text-xs tracking-wide text-muted-foreground">66                {member.role}67              </p>68            </li>69          ))}70        </ul>71      </div>72    </section>73  );74}

1"use client";23import { cn } from "@/lib/utils";45type Team02Props = {6  className?: string;7};89const MEMBERS = [10  {11    name: "Maya Chen",12    role: "CEO & Co-founder",13    bio: "Previously design systems at Northline. Obsessed with defaults that feel finished.",14    avatar: "/assets/brand/demos/avatars/avatar-1.png",15  },16  {17    name: "Jordan Hale",18    role: "Head of Design",19    bio: "Owns the visual language — type, space, and how every block sits on a page.",20    avatar: "/assets/brand/demos/avatars/avatar-2.png",21  },22  {23    name: "Priya Nair",24    role: "Eng Manager",25    bio: "Keeps the registry sharp and the install path boring in the best way.",26    avatar: "/assets/brand/demos/avatars/avatar-3.png",27  },28  {29    name: "Chris Ortega",30    role: "Product",31    bio: "Turns customer asks into blocks teams can drop in without a redesign tax.",32    avatar: "/assets/brand/demos/avatars/avatar-4.png",33  },34] as const;3536export function Team02({ className }: Team02Props) {37  return (38    <section className={cn("@container w-full bg-background", className)}>39      <div className="mx-auto w-full max-w-4xl px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">40        <div className="mx-auto max-w-md text-center">41          <h2 className="text-xl font-medium tracking-wide text-foreground @[32rem]:text-2xl">42            Built by practitioners43          </h2>44          <p className="mt-2 text-sm tracking-wide text-muted-foreground">45            Small team, high taste — design and engineering in the same room.46          </p>47        </div>48        <ul className="mt-8 grid grid-cols-1 gap-3 @[40rem]:grid-cols-2">49          {MEMBERS.map((member) => (50            <li51              key={member.name}52              className="flex gap-4 rounded-xl bg-muted p-4"53            >54              <img55                src={member.avatar}56                alt=""57                className="size-14 shrink-0 rounded-xl object-cover"58              />59              <div className="min-w-0">60                <p className="text-sm font-medium tracking-wide text-foreground">61                  {member.name}62                </p>63                <p className="mt-0.5 text-xs tracking-wide text-muted-foreground">64                  {member.role}65                </p>66                <p className="mt-2 text-xs tracking-wide text-muted-foreground">67                  {member.bio}68                </p>69              </div>70            </li>71          ))}72        </ul>73      </div>74    </section>75  );76}

1"use client";23import { cn } from "@/lib/utils";45type Team03Props = {6  className?: string;7};89const MEMBERS = [10  {11    name: "Maya Chen",12    role: "CEO & Co-founder",13    avatar: "/assets/brand/demos/avatars/avatar-1.png",14  },15  {16    name: "Jordan Hale",17    role: "Head of Design",18    avatar: "/assets/brand/demos/avatars/avatar-2.png",19  },20  {21    name: "Priya Nair",22    role: "Eng Manager",23    avatar: "/assets/brand/demos/avatars/avatar-3.png",24  },25] as const;2627export function Team03({ className }: Team03Props) {28  return (29    <section className={cn("@container w-full bg-background", className)}>30      <div className="mx-auto w-full max-w-4xl px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">31        <div className="mx-auto max-w-md text-center">32          <h2 className="text-xl font-medium tracking-wide text-foreground @[32rem]:text-2xl">33            Leadership34          </h2>35          <p className="mt-2 text-sm tracking-wide text-muted-foreground">36            The people setting direction for product, design, and engineering.37          </p>38        </div>39        <ul className="mt-8 grid grid-cols-1 gap-4 @[40rem]:grid-cols-3">40          {MEMBERS.map((member) => (41            <li key={member.name} className="group relative aspect-[3/4] overflow-hidden rounded-xl bg-muted">42              <img43                src={member.avatar}44                alt=""45                className="absolute inset-0 size-full object-cover transition-transform duration-500 ease-out group-hover:scale-[1.03]"46              />47              <div className="absolute inset-x-0 bottom-0 translate-y-0 p-3 transition-transform duration-300 ease-out [@media(hover:hover)]:translate-y-full [@media(hover:hover)]:group-hover:translate-y-0">48                <div className="rounded-lg bg-background/70 px-3 py-2.5 backdrop-blur-md">49                  <p className="text-sm font-medium tracking-wide text-foreground">50                    {member.name}51                  </p>52                  <p className="mt-0.5 text-xs tracking-wide text-muted-foreground">53                    {member.role}54                  </p>55                </div>56              </div>57            </li>58          ))}59        </ul>60      </div>61    </section>62  );63}