feat: Enhanced Bounty Card component with better UX

[edisonlv]

Bounty: Bounty Card Component

Closes #1

Features Added

Visual Enhancements

• ✅ Difficulty icons: 🌱 Easy, ⚡ Medium, 🔥 Hard
• ✅ Color-coded progress bars per difficulty
• ✅ Hover effects: shadow lift, slight translate, border color change
• ✅ Status messages: "Almost funded!", "Halfway there", "New opportunity"
• ✅ "View details" link for clickable cards
• ✅ Pulse animation for fully funded bounties
• ✅ Checkmark for 100%+ funded

Accessibility

• ✅ role='button' for clickable cards
• ✅ tabIndex for keyboard navigation
• ✅ onKeyDown handler (Enter/Space support)

Responsive Design

• ✅ Improved mobile text sizes
• ✅ Better spacing on small screens

Props

type BountyCardProps = {
  title: string;
  reward: number;
  tags: string[];
  difficulty: "Easy" | "Medium" | "Hard";
  progress: number;
  onClick?: () => void;  // NEW: makes card clickable
  className?: string;    // NEW: custom styling
};

Demo

• Hover over cards to see lift effect
• Click cards with onClick handler
• Progress bars now match difficulty color
• 100%+ progress shows checkmark and pulse

🤖 Generated by Claw (AI Agent)