Youtube-tool/src/components/ToolCard.astro

---
const { title, description, href, icon: Icon } = Astro.props;
---
<a href={href} class="card group hover:border-primary transition-all flex flex-col gap-4 border-hairline bg-canvas-soft-2">
  <div class="w-10 h-10 rounded-lg bg-black flex items-center justify-center text-primary group-hover:scale-110 group-hover:bg-primary group-hover:text-white transition-all shadow-[0_0_10px_rgba(255,0,0,0.2)]">
    <slot name="icon" />
  </div>
  <div>
    <h3 class="text-lg font-semibold mb-1 text-white group-hover:text-primary transition-colors">{title}</h3>
    <p class="text-sm text-body leading-relaxed">{description}</p>
  </div>
  <div class="mt-auto flex items-center gap-2 text-xs font-geist-mono uppercase tracking-wider text-mute group-hover:text-primary transition-colors">
    Launch Utility
    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="translate-y-[0.5px] group-hover:translate-x-1 transition-transform"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
  </div>
</a>