Components
Loading preview...
Here is Team component
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/teamimport { Button } from '@/components/ui/button'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { ChevronRight, Twitter } from 'lucide-react'
import Link from 'next/link'
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card'
const members = [
{ src: 'https://avatars.githubusercontent.com/u/47919550?v=4', name: 'Meschac Irung', role: 'Frontend Engineer' },
{ src: 'https://avatars.githubusercontent.com/u/31113941?v=4', name: 'Bernard Ngandu', role: 'Backend Developer' },
{ src: 'https://avatars.githubusercontent.com/u/68236786?v=4', name: 'Theo Balick', role: 'UI/UX Designer' },
{ src: 'https://avatars.githubusercontent.com/u/99137927?v=4', name: 'Glodie Lukose', role: 'Project Manager' },
{ src: 'https://avatars.githubusercontent.com/u/12345678?v=4', name: 'Sarah Johnson', role: 'DevOps Engineer' },
{ src: 'https://avatars.githubusercontent.com/u/23456789?v=4', name: 'Michael Chen', role: 'QA Specialist' },
{ src: 'https://avatars.githubusercontent.com/u/34567890?v=4', name: 'Aisha Patel', role: 'Data Scientist' },
{ src: 'https://avatars.githubusercontent.com/u/45678901?v=4', name: 'Carlos Rodriguez', role: 'Product Manager' },
{ src: 'https://avatars.githubusercontent.com/u/56789012?v=4', name: 'Emma Wilson', role: 'Content Strategist' },
]
export default function TeamSection() {
return (
<section className="bg-muted/50">
<div className="mx-auto w-full max-w-5xl px-6 py-16 md:py-24">
{/* Header */}
<div className="mb-10 md:mb-12">
<h2 className="text-foreground text-balance text-4xl font-semibold md:text-5xl">
Meet Our Team
</h2>
<p className="text-muted-foreground mt-4 max-w-3xl text-pretty text-lg leading-relaxed">
Our talented professionals bring diverse expertise and passion to every project. Together,
we collaborate to deliver exceptional results and innovative solutions for our clients.
</p>
<Button asChild variant="outline" className="mt-6 h-9 rounded-full pr-2">
<Link href="#">
We're hiring
<ChevronRight className="ml-1 size-4 opacity-60" />
</Link>
</Button>
</div>
{/* Members */}
<div
role="list"
aria-label="Team members"
className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 md:gap-6"
>
{members.map((member, index) => (
<HoverCard key={index} openDelay={150}>
{/* Chip trigger */}
<HoverCardTrigger
className={[
"grid cursor-pointer grid-cols-[auto_1fr] items-center gap-3",
"rounded-(--radius) border bg-background p-3 shadow-sm ring-1 ring-foreground/5",
"transition-colors hover:bg-background/80 focus:outline-none",
"data-[state=open]:ring-2 data-[state=open]:ring-foreground/20",
].join(" ")}
>
<Avatar className="rounded-(--radius) size-10 border border-transparent shadow ring-1 ring-foreground/10">
<AvatarImage src={member.src} alt={member.name} />
<AvatarFallback className="rounded-(--radius) text-sm">
{member.name.charAt(0)}
</AvatarFallback>
</Avatar>
<span className="text-foreground block truncate text-[15px] font-semibold">
{member.name}
</span>
</HoverCardTrigger>
{/* Popover card */}
<HoverCardContent
data-theme="mist"
align="start"
sideOffset={8}
className={[
"w-80 rounded-(--radius) p-4",
"border bg-background shadow-lg ring-1 ring-foreground/5",
].join(" ")}
>
<div className="space-y-3">
<div className="flex items-start justify-between gap-3">
<div className="flex items-center gap-3">
<Avatar className="rounded-(--radius) size-12 border border-transparent shadow ring-1 ring-foreground/10">
<AvatarImage src={member.src} alt={member.name} />
<AvatarFallback className="rounded-(--radius)">
{member.name.charAt(0)}
</AvatarFallback>
</Avatar>
<div className="min-w-0">
<div className="text-foreground truncate text-sm font-semibold sm:text-base">
{member.name}
</div>
<div className="text-muted-foreground truncate text-xs sm:text-sm">
{member.role}
</div>
</div>
</div>
<Button
variant="ghost"
size="icon"
asChild
aria-label={`${member.name} on X (Twitter)`}
className="shrink-0"
>
<Link href="https://x.com/MeschacIrung">
<Twitter className="size-4 fill-muted-foreground stroke-muted-foreground" />
</Link>
</Button>
</div>
</div>
</HoverCardContent>
</HoverCard>
))}
</div>
</div>
</section>
)
}