jalil.arfaoui.net/src/components/code/ProjectCard.astro

---
interface Props {
  title: string;
  description: string;
  technologies?: string[];
  url?: string;
  github?: string;
  featured?: boolean;
}

const { title, description, technologies, url, github, featured = false } = Astro.props;
---

<div class:list={[
  "facet-card rounded-2xl border p-6 flex flex-col h-full transition-all duration-300 hover:scale-[1.02]",
  featured
    ? "bg-white/[0.12] border-purple-300/20 hover:bg-white/[0.18] hover:border-purple-300/30"
    : "bg-white/[0.06] border-white/[0.1] hover:bg-white/[0.12] hover:border-white/[0.2]",
]}>
  <div class="flex items-start justify-between mb-2">
    <h3 class="text-lg font-bold text-white">
      {title}
    </h3>
    {featured && (
      <span class="text-[10px] font-semibold px-2 py-0.5 rounded-full bg-purple-400/20 text-purple-200 border border-purple-300/20">
        Featured
      </span>
    )}
  </div>

  <p class="text-sm text-white/60 leading-relaxed flex-1 mb-4">
    {description}
  </p>

  {technologies && technologies.length > 0 && (
    <div class="flex flex-wrap gap-1.5 mb-4">
      {technologies.map((tech) => (
        <span class="inline-block px-2 py-0.5 text-xs rounded-full bg-white/[0.08] text-white/60 border border-white/[0.08]">
          {tech}
        </span>
      ))}
    </div>
  )}

  <div class="flex gap-4">
    {url && (
      <a href={url} target="_blank" rel="noopener noreferrer" class="text-sm font-medium text-purple-200 hover:text-white transition-colors">
        Voir le site &rarr;
      </a>
    )}
    {github && (
      <a href={github} target="_blank" rel="noopener noreferrer" class="text-sm font-medium text-white/50 hover:text-white transition-colors">
        GitHub &rarr;
      </a>
    )}
  </div>
</div>