Team Cards with Gradient Hover
Premium Our Team section with stacked gradient cards, soft glow effects, and smooth spring-based hover interactions that lift and spread cards on engagement. Ships with dark and pastel light variants.
Category
CardReact
CSS
Custom CSS
Manual
Create a file and paste the following code into it.
src/components/team-section/data.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import type { TeamMember } from "./types";
// Avatars generated via DiceBear notionists style (CC0 license —
// free for commercial use, no attribution required).
// Swap \`seed\` to regenerate any character deterministically.
export const MEMBERS = [
{
id: "junhan-lee",
name: "Junhan Lee",
role: "Founder",
avatar:
"https://api.dicebear.com/9.x/notionists/svg?seed=Junhan%20Lee&backgroundColor=ffffff&radius=30",
theme: "violet",
},
{
id: "maya-chen",
name: "Maya Chen",
role: "Design Director",
avatar:
"https://api.dicebear.com/9.x/notionists/svg?seed=Maya%20Chen&backgroundColor=ffffff&radius=30",
theme: "amber",
},
{
id: "oliver-bennett",
name: "Oliver Bennett",
role: "Principal Engineer",
avatar:
"https://api.dicebear.com/9.x/notionists/svg?seed=Oliver%20Bennett&backgroundColor=ffffff&radius=30",
theme: "cyan",
},
] satisfies readonly TeamMember[];Update the import paths to match your project setup.