feat: implement Figlet, Pastel, and Unit tools with a unified layout

- Add Figlet text converter with font selection and history
- Add Pastel color palette generator and manipulation suite
- Add comprehensive Units converter with category-based logic
- Introduce AppShell with Sidebar and Header for navigation
- Modernize theme system with CSS variables and new animations
- Update project configuration and dependencies

components/ToolCard.tsx

@@ -2,6 +2,9 @@
 
 import { motion } from 'framer-motion';
 import { ReactNode } from 'react';
+import Link from 'next/link';
+
+const MotionLink = motion.create(Link);
 
 interface ToolCardProps {
   title: string;
@@ -16,10 +19,8 @@ interface ToolCardProps {
 
 export default function ToolCard({ title, description, icon, url, gradient, accentColor, index, badges }: ToolCardProps) {
   return (
-    <motion.a
+    <MotionLink
       href={url}
-      target="_blank"
-      rel="noopener noreferrer"
       className="group relative block"
       initial={{ opacity: 0, y: 50 }}
       whileInView={{ opacity: 1, y: 0 }}
@@ -27,15 +28,15 @@ export default function ToolCard({ title, description, icon, url, gradient, acce
       transition={{ duration: 0.5, delay: index * 0.1 }}
       whileHover={{ y: -10 }}
     >
-      <div className="glass relative overflow-hidden rounded-2xl p-8 h-full transition-all duration-300 group-hover:shadow-2xl">
+      <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}`}
+          className={`absolute inset-0 opacity-0 group-hover:opacity-10 dark: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 className={`w-full h-full ${gradient} opacity-20 dark:opacity-30`} />
         </div>
 
         {/* Icon */}
@@ -44,23 +45,14 @@ 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}`}>
+          <div className={`p-4 rounded-xl ${gradient} shadow-lg shadow-black/10`}>
             {icon}
           </div>
         </motion.div>
 
         {/* Title */}
         <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';
-          }}
+          className="text-2xl font-bold mb-3 text-foreground transition-all duration-300 group-hover:text-primary"
         >
           {title}
         </h3>
@@ -71,7 +63,7 @@ export default function ToolCard({ title, description, icon, url, gradient, acce
             {badges.map((badge) => (
               <span
                 key={badge}
-                className="text-xs px-2 py-1 rounded-full bg-white/5 border border-white/10 text-gray-400"
+                className="text-xs px-2 py-1 rounded-full bg-primary/5 border border-primary/10 text-muted-foreground font-medium"
               >
                 {badge}
               </span>
@@ -80,13 +72,13 @@ export default function ToolCard({ title, description, icon, url, gradient, acce
         )}
 
         {/* Description */}
-        <p className="text-gray-400 group-hover:text-gray-300 transition-colors duration-300">
+        <p className="text-muted-foreground group-hover:text-foreground/80 transition-colors duration-300">
           {description}
         </p>
 
         {/* Arrow icon */}
         <motion.div
-          className="absolute bottom-8 right-8 text-gray-400 group-hover:text-gray-200 transition-colors duration-300"
+          className="absolute bottom-8 right-8 text-muted-foreground group-hover:text-primary transition-colors duration-300"
           initial={{ x: 0 }}
           whileHover={{ x: 5 }}
         >
@@ -105,6 +97,6 @@ export default function ToolCard({ title, description, icon, url, gradient, acce
           </svg>
         </motion.div>
       </div>
-    </motion.a>
+    </MotionLink>
   );
 }