# Team Profile 2

> A four-up agent grid with listed-property counts under each portrait

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

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

## Install

```bash
npx shadcn@latest add https://shadcnstore.com/r/team-2.json
```

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

## Dependencies

- Registry items: `button`, `card`

## Files

### `storage/app/registry-sources/marketing/teams/team-2/page.tsx`

```tsx
import { Team2 } from "@/components/blocks/marketing/teams/team-2/components/team-2"

export default function Page() {
  return (
    <div className="flex min-h-svh w-full items-center justify-center">
      <div className="w-full">
        <Team2 />
      </div>
    </div>
  )
}
```

### `storage/app/registry-sources/marketing/teams/team-2/team-2.tsx`

```tsx
import { Card, CardContent } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { contactAgents as agents } from "@/components/data/team-2-contact-agents"

export function Team2() {
  return (
    <section className='w-full py-16 md:py-24'>
      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
        {/* Section Header */}
        <header className='mb-12 text-center'>
          <p className='text-muted-foreground text-sm font-medium tracking-wider uppercase'>Check Out</p>
          <h2 className='text-foreground mt-1 mb-3 text-3xl font-bold text-balance md:text-4xl'>Agents Grid</h2>
          <p className='text-muted-foreground'>RealHomes Elementor widgets for Agents</p>
        </header>

        {/* Agents Grid */}
        <div className='grid grid-cols-1 gap-8 sm:grid-cols-2 md:gap-6 lg:grid-cols-4'>
          {agents.map(agent => (
            <div key={agent.id} className='group relative pt-2 transition-all duration-300 hover:-translate-y-1'>
              <Card className='bg-card relative mt-8 overflow-visible py-0 pt-16 text-center transition-all duration-300 hover:shadow-lg'>
                {/* Floating Image */}
                <div className='absolute inset-x-0 -top-8 flex justify-center'>
                  <div className='border-border bg-background rounded-full border p-1.5 shadow-md transition-transform duration-300 group-hover:-translate-y-1'>
                    <div className='border-background bg-accent size-24 overflow-hidden rounded-full border-2'>
                      <img
                        src={agent.image}
                        alt={`${agent.name}, Real Estate Agent`}
                        width={96}
                        height={96}
                        className='size-full'
                        loading='lazy'
                      />
                    </div>
                  </div>
                </div>

                <CardContent className='flex flex-col justify-between p-6'>
                  <h3 className='text-foreground mb-3 text-xl font-semibold transition-colors'>{agent.name}</h3>

                  <Button
                    variant='link'
                    size='sm'
                    className="h-8 px-3 text-xs text-muted-foreground hover:text-foreground h-auto cursor-pointer p-0 font-medium hover:no-underline"
                    nativeButton={false}
                    render={<a href={`tel:${agent.phone}`} />}
                  >
                    {agent.phone}
                  </Button>

                  <Button
                    variant='link'
                    size='sm'
                    className="h-8 px-3 text-xs text-muted-foreground hover:text-foreground mb-6 h-auto cursor-pointer p-0 text-sm hover:no-underline"
                    nativeButton={false}
                    render={<a href={`mailto:${agent.email}`} />}
                  >
                    {agent.email}
                  </Button>

                  <div className='border-border border-t pt-4 text-center'>
                    <span className='text-foreground mb-1 block text-3xl font-bold'>{agent.properties}</span>
                    <span className='text-muted-foreground text-sm'>Listed Properties</span>
                  </div>
                </CardContent>
              </Card>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

export default Team2
```

### `storage/app/registry-sources/marketing/teams/team-2/team-2-contact-agents.ts`

```ts
export interface ContactAgent {
  id: number
  name: string
  phone: string
  email: string
  image: string
  properties: number
}

export const contactAgents: ContactAgent[] = [
  {
    id: 1,
    name: 'Nathan James',
    phone: '1-234-456-7893',
    email: 'nathan@realhomes.io',
    image: 'https://notion-avatars.netlify.app/api/avatar?preset=male-1',
    properties: 3,
  },
  {
    id: 2,
    name: 'Melissa William',
    phone: '1-234-456-7892',
    email: 'melissa@realhomes.io',
    image: 'https://notion-avatars.netlify.app/api/avatar?preset=female-1',
    properties: 5,
  },
  {
    id: 3,
    name: 'Alice Brian',
    phone: '1-234-456-7891',
    email: 'alice@realhomes.io',
    image: 'https://notion-avatars.netlify.app/api/avatar?preset=female-2',
    properties: 5,
  },
  {
    id: 4,
    name: 'John David',
    phone: '1-234-456-7890',
    email: 'john@realhomes.io',
    image: 'https://notion-avatars.netlify.app/api/avatar?preset=male-2',
    properties: 6,
  },
]
```