# Team Section 1

> Solace UI team section block variation 1.

A shadcn/ui block from the [@solaceui](https://www.solaceui.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/solaceui/team-section-1).

- Page, with a live preview: https://shadcn.exchange/r/solaceui/team-section-1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/solaceui/team-section-1-light-9b0b9e1abb60db57.png
- Registry item: https://www.solaceui.com/r/team-section-1.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://www.solaceui.com/r/team-section-1.json
```

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

## Dependencies

- npm packages: `lucide-react`, `motion`

## Files

### `src/registry/blocks/team-section/one/index.tsx`

```tsx
"use client";

import { motion } from "motion/react";
import TeamMemberCard, { type TeamMember } from "@/registry/blocks/team-section/one/team-card-one";

const teamMembers: TeamMember[] = [
  {
    id: 1,
    name: "James",
    role: "Founder",
    image:
      "https://assets.solaceui.com/solaceui-member-four.png",
    cardType: "white", // white, yellow, pink and white-alt
    social: "https://twitter.com/harshitlog",
  },
  {
    id: 2,
    name: "Charlotte ",
    role: "Design Engineer",
    image:
      "https://assets.solaceui.com/solaceui-member-five.png",
    cardType: "white",
    social: "https://twitter.com/harshitlog",
  },
  {
    id: 3,
    name: "Alexander",
    role: "Social Media Manager",
    image:
      "https://assets.solaceui.com/solaceui-member-one.png",
    cardType: "white",
    social: "https://twitter.com/harshitlog",
  },
  {
    id: 4,
    name: "Olivia",
    role: "Product Manager",
    image:
      "https://assets.solaceui.com/solaceui-member-three.png",
    cardType: "white",
    social: "https://twitter.com/harshitlog",
  },
];

export default function Team1() {
  return (
    <section className="py-16 flex flex-col items-center justify-center px-9">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.6 }}
        className="container mx-auto px-4"
      >
        <h2 className="text-4xl font-bold dark:text-white text-black text-center mb-12">
          Meet Our Team
        </h2>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 justify-items-center">
          {teamMembers.map((member) => (
            <TeamMemberCard key={member.id} member={member} />
          ))}
        </div>
      </motion.div>
    </section>
  );
}
```

### `src/registry/blocks/team-section/one/team-card-one.tsx`

```tsx
"use client";

import { motion } from "motion/react";
import Image from "next/image";
import Link from "next/link";
import { useState } from "react";
import { MoveUpRight } from "lucide-react";

export type TeamMember = {
  id: number;
  name: string;
  role: string;
  image: string;
  cardType: "yellow" | "white" | "pink" | "white-alt";
  social?: string;
};

export default function TeamMemberCard({ member }: { member: TeamMember }) {
  const [isHovered, setIsHovered] = useState(false);

  // Card border colors based on type
  const cardBorder = {
    yellow: "border-yellow-300",
    white: "border-white",
    pink: "border-pink-500",
    "white-alt": "border-white",
  };

  return (
    <div
      className={`relative p-2 transition-all duration-300 transform hover:scale-105 ${
        isHovered ? "z-50" : "z-0"
      }`}
    >
      {/* Lanyard clip */}
      <div className="absolute left-1/2 -top-8 transform -translate-x-1/2 w-8 h-8 dark:bg-white bg-black rounded-full flex items-center justify-center z-10">
        <div className="w-4 h-4 dark:bg-[#212121] bg-white rounded-full"></div>
      </div>

      {/* Lanyard */}
      <div className="absolute left-1/2 -top-2 transform -translate-x-1/2 w-1 h-6 dark:bg-gray-300 bg-black"></div>

      {/* ID Card */}
      <motion.div
        className={`relative w-64 h-96 rounded-xl overflow-hidden shadow-lg border-2 gap-4 ${
          cardBorder[member.cardType]
        }`}
        initial={{ y: 10, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        transition={{ duration: 0.5 }}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
      >
        {/* Background Image (Black & White to Color on Hover) */}
        <div className="absolute inset-0">
          <Image
            src={member.image || "/placeholder.svg?height=400&width=300"}
            alt={member.name}
            fill
            className={`object-cover filter transition duration-300 ${
              isHovered ? "grayscale-0" : "grayscale"
            }`}
            unoptimized
          />
        </div>

        <div className="absolute bottom-2 left-0 right-0 z-10 text-center">
          <div className="text-xl font-bold text-white drop-shadow-md">
            Logo
          </div>
        </div>

        {/* Hover overlay with name and designation */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: isHovered ? 1 : 0 }}
          transition={{ duration: 0.3 }}
          className="absolute inset-0 bg-black/70 flex flex-col items-center justify-center p-6 z-10"
        >
          <div className="text-center">
            {member.social ? (
              <Link
                href={member.social}
                target="_blank"
                className="inline-flex items-center gap-1"
              >
                <span className="text-2xl font-bold text-white leading-none">
                  {member.name}
                </span>
                {/* Adjust top offset if needed for perfect alignment */}
                <MoveUpRight className="w-4 h-4 text-white relative top-[1px]" />
              </Link>
            ) : (
              <span className="text-2xl font-bold text-white leading-none">
                {member.name}
              </span>
            )}
            <p className="text-lg text-white mt-1">{member.role}</p>
          </div>
        </motion.div>
      </motion.div>
    </div>
  );
}
```