Particle Card

import ParticleCard from '@/components/rareui/ParticleCard';

export default function App() {
  return (
    <ParticleCard
      name="Sam Jenkins"
      role="Product Designer"
      bio="Passionate about creating intuitive and beautiful user experiences."
      img="https://images.unsplash.com/photo-1676377630534-a08fd9778701"
      tags={['UI/UX', 'React', 'Motion', 'Figma']}
    />
  );
}

<ParticleCard
  name="Jane Doe"
  role="Senior Developer"
  bio="Full-stack engineer with 8+ years building scalable web applications and distributed systems."
  img="https://images.unsplash.com/photo-1494790108377-be9c29b29330"
  tags={['React', 'Node.js', 'TypeScript', 'PostgreSQL']}
/>

<ParticleCard
  cols={30}
  rows={36}
/>

const team = [
  { name: 'Alice Chen', role: 'CEO', tags: ['Leadership', 'Strategy'] },
  { name: 'Bob Smith', role: 'CTO', tags: ['Engineering', 'Architecture'] },
  { name: 'Carol Wang', role: 'Designer', tags: ['UI/UX', 'Branding'] },
];

export default function TeamGrid() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
      {team.map((member) => (
        <ParticleCard key={member.name} {...member} />
      ))}
    </div>
  );
}