fix: resolve linting errors and improve ESLint configuration

- Downgrade ESLint to v9 to avoid circular structure errors in v10 config validation
- Downgrade eslint-config-next to v15 for stability
- Configure eslint.config.mjs with FlatCompat and appropriate ignores (.next, out)
- Escape entities in ColorBlindPage and SearchUnits to fix react/no-unescaped-entities
- Use useMemo for debounced function in FigletConverter to fix react-hooks/exhaustive-deps

components/Hero.tsx

@@ -2,11 +2,18 @@
 
 import { motion } from 'framer-motion';
 import Logo from './Logo';
-import Link from 'next/link';
-
-const MotionLink = motion.create(Link);
 
 export default function Hero() {
+  /**
+   * Smoothly scrolls the window to the tools section without modifying the URL hash.
+   */
+  const scrollToTools = () => {
+    const toolsSection = document.getElementById('tools');
+    if (toolsSection) {
+      toolsSection.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
+
   return (
     <section className="relative min-h-screen flex flex-col items-center justify-center px-4 py-20">
       <div className="max-w-6xl mx-auto text-center">
@@ -58,8 +65,8 @@ export default function Hero() {
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8, delay: 0.8 }}
         >
-          <MotionLink
-            href="#tools"
+          <motion.button
+            onClick={scrollToTools}
             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 }}
             whileTap={{ scale: 0.95 }}
@@ -71,7 +78,7 @@ export default function Hero() {
               whileHover={{ x: 0 }}
               transition={{ duration: 0.3 }}
             />
-          </MotionLink>
+          </motion.button>
 
           <motion.a
             href="https://dev.pivoine.art/valknar/kit-ui"
@@ -92,9 +99,9 @@ export default function Hero() {
         </motion.div>
 
         {/* Scroll indicator */}
-        <MotionLink
-          href="#tools"
-          className="flex flex-col items-center gap-2 cursor-pointer group"
+        <motion.button
+          onClick={scrollToTools}
+          className="mx-auto flex flex-col items-center gap-2 cursor-pointer group"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           transition={{ duration: 0.8, delay: 1 }}
@@ -107,7 +114,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>
-        </MotionLink>
+        </motion.button>
       </div>
     </section>
   );

components/figlet/FigletConverter.tsx

@@ -32,8 +32,8 @@ export function FigletConverter() {
   }, []);
 
   // Generate ASCII art
-  const generateAsciiArt = React.useCallback(
-    debounce(async (inputText: string, fontName: string) => {
+  const generateAsciiArt = React.useMemo(
+    () => debounce(async (inputText: string, fontName: string) => {
       if (!inputText) {
         setAsciiArt('');
         setIsLoading(false);

components/units/converter/SearchUnits.tsx

@@ -193,7 +193,7 @@ export default function SearchUnits({ onSelectUnit }: SearchUnitsProps) {
 
       {isOpen && query && results.length === 0 && (
         <div className="absolute z-50 w-full mt-2 bg-popover border rounded-lg shadow-lg p-4 text-center text-muted-foreground">
-          No units found for "{query}"
+          No units found for &quot;{query}&quot;
         </div>
       )}
     </div>