Mini Project: Profile Card Collection

npm install

import ProfileCard from './components/ProfileCard';
 
export default function App() {
  return <ProfileCard name="Sarah Chen" role="Product Designer" avatar="/avatars/sarah.jpg" />;
}

import ProfileCard from './components/ProfileCard';
 
const team = [
  {
    id: 1,
    name: 'Sarah Chen',
    role: 'Product Designer',
    avatar: '/avatars/sarah.jpg',
  },
  {
    id: 2,
    name: 'Marcus Johnson',
    role: 'Frontend Lead',
    avatar: '/avatars/marcus.jpg',
  },
  {
    id: 3,
    name: 'Elena Rodriguez',
    role: 'Full Stack Developer',
    avatar: '/avatars/elena.jpg',
  },
];
 
export default function TeamPage() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-8">
      {team.map((member) => (
        <ProfileCard key={member.id} name={member.name} role={member.role} avatar={member.avatar} />
      ))}
    </div>
  );
}

import Image from 'next/image';
 
interface ProfileCardProps {
  name: string;
  role: string;
  avatar?: string;
}
 
export default function ProfileCard({ name, role, avatar }: ProfileCardProps) {
  return (
    <div className="bg-card rounded-lg border border-border shadow-sm hover:shadow-md transition-shadow overflow-hidden">
      {/* Header with gradient */}
      <div className="h-20 bg-gradient-to-r from-blue-500 to-purple-500" />
 
      {/* Content */}
      <div className="px-6 pb-6">
        {/* Avatar */}
        <div className="-mt-10 mb-4 flex justify-center">
          <Image
            src={avatar || '/placeholder.svg?height=80&width=80&query=profile%20avatar'}
            alt={name}
            width={80}
            height={80}
            className="rounded-full border-4 border-card bg-muted object-cover"
          />
        </div>
 
        {/* Info */}
        <div className="text-center">
          <h3 className="text-lg font-semibold text-foreground">{name}</h3>
          <p className="text-sm text-muted-foreground mt-1">{role}</p>
        </div>
 
        {/* Action buttons */}
        <div className="flex gap-2 mt-6">
          <button className="flex-1 px-4 py-2 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:opacity-90 transition-opacity">
            Follow
          </button>
          <button className="flex-1 px-4 py-2 rounded-md border border-border text-foreground text-sm font-medium hover:bg-muted transition-colors">
            Message
          </button>
        </div>
      </div>
    </div>
  );
}