Team Section

import { Twitter, Linkedin, Github } from 'lucide-react'

const team = [
  {
    name: "Alex Morgan",
    role: "CEO & Founder",
    avatar: "/placeholder.svg",
    bio: "Former Google engineer with 15+ years in tech.",
    social: { twitter: "#", linkedin: "#", github: "#" },
  },
  // ... more team members
]

export function TeamSection() {
  return (
    <section className="w-full bg-zinc-950 px-4 py-24">
      <div className="mx-auto max-w-6xl">
        <div className="text-center">
          <h2 className="text-3xl font-bold text-white">Meet the people behind the product</h2>
        </div>
        <div className="mt-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
          {team.map((member) => (
            <div key={member.name} className="group rounded-2xl border border-white/10 bg-white/5 p-6 text-center">
              <img src={member.avatar || "/placeholder.svg"} alt={member.name} className="mx-auto h-32 w-32 rounded-full object-cover" />
              <h3 className="mt-6 text-lg font-semibold text-white">{member.name}</h3>
              <span className="inline-block rounded-full bg-indigo-500/10 px-3 py-1 text-xs text-indigo-400">
                {member.role}
              </span>
              <p className="mt-3 text-sm text-zinc-400">{member.bio}</p>
              <div className="mt-4 flex justify-center gap-3">
                {/* Social links */}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}