refactor: externalize tool definitions and polish app shell

- Create lib/tools.tsx as single source of truth for all tool metadata
  (title, shortTitle, navTitle, description, summary, icon, etc.)
- Update AppSidebar to render nav from centralized tools list with
  descriptions, remove collapse footer button
- Update AppHeader with sidebar collapse toggle, tool short title,
  and app logo; remove breadcrumbs
- Update AppPage to auto-resolve tool icon from pathname
- Update ToolsGrid/ToolCard to use shared tools data, remove per-card
  gradients for uniform styling
- Add per-tool HTML title via metadata exports (title template in root
  layout)
- Style landing page and 404 headings with primary theme color
- Add Toolbox icon to hero CTA, GitFork icon link in footer
- Remove footer from error page and "View on Dev" buttons
- Extract ColorPage client component for RSC metadata compatibility

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

components/ToolCard.tsx

@@ -11,13 +11,11 @@ interface ToolCardProps {
   description: string;
   icon: ReactNode;
   url: string;
-  gradient: string;
-  accentColor: string;
   index: number;
   badges?: string[];
 }
 
-export default function ToolCard({ title, description, icon, url, gradient, accentColor, index, badges }: ToolCardProps) {
+export default function ToolCard({ title, description, icon, url, index, badges }: ToolCardProps) {
   return (
     <MotionLink
       href={url}
@@ -29,15 +27,8 @@ export default function ToolCard({ title, description, icon, url, gradient, acce
       whileHover={{ y: -10 }}
     >
       <div className="glass relative overflow-hidden rounded-2xl p-8 h-full transition-all duration-300 group-hover:shadow-2xl group-hover:bg-card/80">
-        {/* Gradient overlay on hover */}
-        <div
-          className={`absolute inset-0 opacity-0 group-hover:opacity-15 transition-opacity duration-300 ${gradient}`}
-        />
-
-        {/* Glow effect */}
-        <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur-xl -z-10">
-          <div className={`w-full h-full ${gradient} opacity-30`} />
-        </div>
+        {/* Subtle hover overlay */}
+        <div className="absolute inset-0 opacity-0 group-hover:opacity-10 transition-opacity duration-300 bg-primary" />
 
         {/* Icon */}
         <motion.div
@@ -45,15 +36,13 @@ export default function ToolCard({ title, description, icon, url, gradient, acce
           whileHover={{ scale: 1.1, rotate: 5 }}
           transition={{ type: 'spring', stiffness: 300 }}
         >
-          <div className={`p-4 rounded-xl ${gradient} shadow-lg shadow-black/10`}>
+          <div className="p-4 rounded-xl bg-primary/10 text-primary shadow-lg shadow-black/5">
             {icon}
           </div>
         </motion.div>
 
         {/* Title */}
-        <h3
-          className="text-2xl font-bold mb-3 text-foreground transition-all duration-300 group-hover:text-primary"
-        >
+        <h3 className="text-2xl font-bold mb-3 text-foreground transition-all duration-300 group-hover:text-primary">
           {title}
         </h3>