"use client"; import * as React from "react"; import { motion } from "motion/react"; import { SocialIcon } from "./social-icons"; const people = [ { name: "Maya Kapoor", role: "Founder & CEO", color: "#C6F432", bio: "Previously design systems at a large fintech. Obsessed with details." , city: "Bengaluru" }, { name: "Lena Ortiz", role: "Design Engineer", color: "#f9a8d4", bio: "Motion, type and the space between them.", city: "Lisbon" }, { name: "Arjun Mehta", role: "Staff Engineer", color: "#7dd3fc", bio: "Registry, CLI and build tooling.", city: "Pune" }, { name: "Sam Okafor", role: "Developer Advocate", color: "#fcd34d", bio: "Talks, docs and too many demos.", city: "Lagos" }, { name: "Noor Haddad", role: "Product Designer", color: "#a78bfa", bio: "Blocks, templates and onboarding.", city: "Amman" }, { name: "Kenji Sato", role: "Accessibility Lead", color: "#34d399", bio: "Makes sure everything works with a keyboard.", city: "Osaka" }, { name: "Ines Moreau", role: "Engineering Manager", color: "#fb923c", bio: "Keeps the team shipping and sane.", city: "Lyon" }, { name: "Theo Brandt", role: "Support Engineer", color: "#f87171", bio: "First responder for every bug report.", city: "Berlin" }, ]; const initials = (n: string) => n.split(" ").map((p) => p[0]).join(""); /** Team grid: cards tilt toward the cursor and flip to show a bio and social links. */ export function TeamPage() { const [flipped, setFlipped] = React.useState(null); return (

Team

The people behind the pixels

Eight people in eight cities. Click a card to say hello.

{people.map((p, i) => ( setFlipped(flipped === p.name ? null : p.name)} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: i * 0.05 }} className="relative aspect-[3/4] text-left" >

{initials(p.name)}

{p.name}

{p.role}

{p.name} {p.city}

{p.bio}

{(["x", "linkedin", "github"] as const).map((n) => )}

))}

); }

Team Page

Installation