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

@@ -2,6 +2,9 @@
 
 import { motion } from 'framer-motion';
 import Logo from './Logo';
+import Link from 'next/link';
+
+const MotionLink = motion.create(Link);
 
 export default function Hero() {
   return (
@@ -29,7 +32,7 @@ export default function Hero() {
 
         {/* Subtitle */}
         <motion.p
-          className="text-xl md:text-2xl text-gray-300 mb-4 max-w-2xl mx-auto"
+          className="text-xl md:text-2xl text-muted-foreground mb-4 max-w-2xl mx-auto"
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8, delay: 0.4 }}
@@ -39,13 +42,13 @@ export default function Hero() {
 
         {/* Description */}
         <motion.p
-          className="text-base md:text-lg text-gray-400 mb-12 max-w-xl mx-auto"
+          className="text-base md:text-lg text-muted-foreground/80 mb-12 max-w-xl mx-auto"
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8, delay: 0.6 }}
         >
-          A curated collection of creative and utility tools for developers and creators.
-          Simple, powerful, and always at your fingertips.
+          A curated collection of creative and utility tools for developers and creators
+          Simple, powerful, and always at your fingertips
         </motion.p>
 
         {/* CTA Buttons */}
@@ -55,7 +58,7 @@ export default function Hero() {
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8, delay: 0.8 }}
         >
-          <motion.a
+          <MotionLink
             href="#tools"
             className="group relative px-8 py-4 rounded-full bg-gradient-to-r from-purple-500 to-cyan-500 text-white font-semibold shadow-lg overflow-hidden"
             whileHover={{ scale: 1.05 }}
@@ -68,7 +71,7 @@ export default function Hero() {
               whileHover={{ x: 0 }}
               transition={{ duration: 0.3 }}
             />
-          </motion.a>
+          </MotionLink>
 
           <motion.a
             href="https://dev.pivoine.art/valknar/kit-ui"
@@ -89,7 +92,7 @@ export default function Hero() {
         </motion.div>
 
         {/* Scroll indicator */}
-        <motion.a
+        <MotionLink
           href="#tools"
           className="flex flex-col items-center gap-2 cursor-pointer group"
           initial={{ opacity: 0 }}
@@ -104,7 +107,7 @@ export default function Hero() {
           >
             <div className="w-1 h-2 bg-gradient-to-b from-purple-400 to-cyan-400 rounded-full mx-auto" />
           </motion.div>
-        </motion.a>
+        </MotionLink>
       </div>
     </section>
   );