polish: streamline colors and enhance UX with major improvements

Color System Improvements:
- Added accentColor prop to ToolCard for consistent color identity
- Each tool now has its signature color for hover effects
- Title and arrow icon now change to tool's accent color on hover
- Footer links match card colors for unified visual language

Hero Section Enhancement:
- Added prominent CTA buttons (Explore Tools + View on GitHub)
- Gradient animated button with hover effects
- GitHub button with icon and border hover effect
- Better visual hierarchy with button placement
- Updated scroll indicator text to "Scroll to explore"

User Experience:
- Improved hover interactions with color-coded feedback
- Better visual consistency across all components
- Enhanced call-to-action visibility
- Smooth transitions and micro-interactions

Color Palette:
- Vert: #10b981 (emerald green)
- Paint: #f97316 (vibrant orange)
- Pastel: #a855f7 (purple)
- Stirling: #667eea (indigo blue)
- Units: #2dd4bf (cyan)
- Draw: #ec4899 (pink)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

components/ToolCard.tsx

@@ -9,11 +9,12 @@ interface ToolCardProps {
   icon: ReactNode;
   url: string;
   gradient: string;
+  accentColor: string;
   index: number;
   badges?: string[];
 }
 
-export default function ToolCard({ title, description, icon, url, gradient, index, badges }: ToolCardProps) {
+export default function ToolCard({ title, description, icon, url, gradient, accentColor, index, badges }: ToolCardProps) {
   return (
     <motion.a
       href={url}
@@ -49,7 +50,18 @@ export default function ToolCard({ title, description, icon, url, gradient, inde
         </motion.div>
 
         {/* Title */}
-        <h3 className="text-2xl font-bold mb-3 text-white group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-r group-hover:from-purple-400 group-hover:to-cyan-400 transition-all duration-300">
+        <h3
+          className="text-2xl font-bold mb-3 text-white transition-all duration-300"
+          style={{
+            color: 'white',
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.color = accentColor;
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.color = 'white';
+          }}
+        >
           {title}
         </h3>
 
@@ -74,7 +86,16 @@ export default function ToolCard({ title, description, icon, url, gradient, inde
 
         {/* Arrow icon */}
         <motion.div
-          className="absolute bottom-8 right-8 text-gray-600 group-hover:text-purple-400"
+          className="absolute bottom-8 right-8 text-gray-600 transition-colors duration-300"
+          style={{
+            color: '#6b7280',
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.color = accentColor;
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.color = '#6b7280';
+          }}
           initial={{ x: 0 }}
           whileHover={{ x: 5 }}
         >