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/Hero.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { motion } from 'framer-motion';
+import { Toolbox } from 'lucide-react';
 import Logo from './Logo';
 
 export default function Hero() {
@@ -29,7 +30,7 @@ export default function Hero() {
 
         {/* Main heading */}
         <motion.h1
-          className="text-6xl md:text-8xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-pink-400 to-cyan-400"
+          className="text-6xl md:text-8xl font-bold mb-6 text-primary"
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8, delay: 0.2 }}
@@ -71,7 +72,10 @@ export default function Hero() {
             whileHover={{ scale: 1.05 }}
             whileTap={{ scale: 0.95 }}
           >
-            <span className="relative z-10">Explore Tools</span>
+            <span className="relative z-10 inline-flex items-center gap-2">
+              <Toolbox className="h-5 w-5" />
+              Explore Tools
+            </span>
             <motion.div
               className="absolute inset-0 bg-gradient-to-r from-purple-600 to-cyan-600"
               initial={{ x: '100%' }}
@@ -80,22 +84,6 @@ export default function Hero() {
             />
           </motion.button>
 
-          <motion.a
-            href="https://dev.pivoine.art/valknar/kit-ui"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="group px-8 py-4 rounded-full border-2 border-gray-600 text-gray-300 font-semibold hover:border-purple-400 hover:text-purple-400 transition-all duration-300 inline-flex items-center gap-2"
-            whileHover={{ scale: 1.05 }}
-            whileTap={{ scale: 0.95 }}
-          >
-            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
-              <line x1="6" y1="3" x2="6" y2="15" strokeLinecap="round" />
-              <circle cx="18" cy="6" r="3" />
-              <circle cx="6" cy="18" r="3" />
-              <path d="M18 9a9 9 0 01-9 9" strokeLinecap="round" />
-            </svg>
-            View on Dev
-          </motion.a>
         </motion.div>
 
         {/* Scroll indicator */}