making the user interface better and adding some animation to the logo's

package.json

@@ -29,11 +29,11 @@
     "fast-glob": "^3.2.12",
     "flexsearch": "^0.7.31",
     "js-yaml": "^4.1.0",
-    "next": "13.4.16",
+    "next": "^13.4.16",
     "next-themes": "^0.2.1",
     "prism-react-renderer": "^2.0.6",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-highlight-words": "^0.20.0",
     "refractor": "^4.8.1",
     "simple-functional-loader": "^1.2.1",

src/app/not-found.jsx

@@ -1,25 +1,85 @@
-import Link from 'next/link'
+"use client";
+import Link from 'next/link';
+import { useState, useEffect } from "react";
+
+const ErrorPage = () => {
+  const [isDarkTheme, setIsDarkTheme] = useState(true);
+  const [eyePosition, setEyePosition] = useState({ x: 0, y: 0 });
+
+  const toggleTheme = () => {
+    setIsDarkTheme(!isDarkTheme);
+  };
+
+  const handleMouseMove = (event) => {
+    const { clientX, clientY } = event;
+    setEyePosition({ x: clientX, y: clientY });
+  };
+
+  useEffect(() => {
+    window.addEventListener('mousemove', handleMouseMove);
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, []);
 
-export default function NotFound() {
   return (
-    <div className="h-[70vh] min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none lg:pl-8 lg:pr-0 xl:px-16">
-      <div className="flex h-full flex-col items-center justify-center text-center">
-        <p className="font-display text-sm font-medium text-slate-900 dark:text-white">
-          404
-        </p>
-        <h1 className="mt-3 font-display text-3xl tracking-tight text-slate-900 dark:text-white">
-          Page not found
-        </h1>
-        <p className="mt-2 text-sm text-slate-500 dark:text-slate-400">
-          Sorry, we couldn’t find the page you’re looking for.
-        </p>
-        <Link
-          href="/"
-          className="mt-8 text-sm font-medium text-slate-900 dark:text-white"
-        >
-          Go back home
-        </Link>
+    <div
+      className={`flex min-h-screen items-center justify-center transition-colors duration-700 ${
+        isDarkTheme
+          ? "bg-gradient-to-b from-black via-gray-800 to-gray-900 text-white"
+          : "bg-gradient-to-b from-gray-100 via-gray-300 to-gray-500 text-black"
+      } animate-fade-in`}
+    >
+      <div className="h-[70vh] min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none lg:pl-8 lg:pr-0 xl:px-16">
+        <div className="flex h-full flex-col items-center justify-center text-center">
+          <div className="flex justify-center gap-4 mb-8">
+            <div className="w-20 h-20 bg-yellow-500 rounded-full flex items-center justify-center shadow-lg relative">
+              <div
+                className="w-8 h-8 bg-black rounded-full eye animate-eye-movement"
+                style={{
+                  transition: 'transform 0.1s ease',
+                  transform: `translate(${eyePosition.x / 50}px, ${eyePosition.y / 50}px)`,
+                }}
+              ></div>
+            </div>
+            <div className="w-20 h-20 bg-yellow-500 rounded-full flex items-center justify-center shadow-lg relative">
+              <div
+                className="w-8 h-8 bg-black rounded-full eye animate-eye-movement"
+                style={{
+                  transition: 'transform 0.1s ease',
+                  transform: `translate(${eyePosition.x / 50}px, ${eyePosition.y / 50}px)`,
+                }}
+              ></div>
+            </div>
+          </div>
+
+          <p className="font-display text-sm font-medium text-gray-400 animate-bounce">404</p>
+          <h1 className="mt-3 font-display text-3xl tracking-tight text-gray-400 animate-bounce">
+            Looks like you&apos;re lost
+          </h1>
+          <p className="mt-2 text-sm text-gray-400 animate-bounce">
+            Sorry, we couldn’t find the page you’re looking for.
+          </p>
+          <Link
+            href="/"
+            className="mt-8 text-sm font-medium inline-block border border-yellow-500 text-lg font-light px-6 py-3 rounded-lg shadow-md hover:shadow-none hover:bg-yellow-500 hover:text-black transition-all transform hover:scale-110"
+          >
+            Go back home
+          </Link>
+        </div>
       </div>
+
+      <button
+        className="absolute top-10 right-10 text-2xl text-yellow-500 cursor-pointer bg-transparent border-none focus:outline-none transition-transform hover:scale-110"
+        onClick={toggleTheme}
+      >
+        {isDarkTheme ? "\u2600" : "\u{1F319}"}
+      </button>
     </div>
-  )
-}
+  );
+};
+
+export default ErrorPage;
+
+
+

src/components/Footer.jsx

@@ -51,7 +51,7 @@ function FooterUi() {
               <Link
                 href={item.link}
                 target={item?.target_blank ? '_blank' : '_self'}
-                className="text-sm leading-6 text-slate-400 hover:text-slate-300"
+                className="text-sm leading-6 text-slate-400 hover:text-slate-300 transition duration-300 ease-in-out transform hover:scale-105"
               >
                 {item.title}
               </Link>
@@ -63,13 +63,13 @@ function FooterUi() {
             const { Icon, Link: link } = item
             return (
               <Link
-                  key={link}
+                key={link}
                 href={link}
-                className="text-gray-400 hover:text-gray-500"
+                className="text-gray-400 hover:text-gray-500 transition duration-300 ease-in-out transform hover:scale-110"
                 target="_blank"
                 aria-label="social media link"
               >
-                <Icon className="h-6 w-6 fill-slate-400 hover:fill-slate-300 dark:hover:fill-slate-300"></Icon>
+                <Icon className="h-6 w-6 fill-slate-400 hover:fill-slate-300 dark:hover:fill-slate-300 transition duration-300 ease-in-out transform hover:scale-125"></Icon>
               </Link>
             )
           })}

src/components/Hero.jsx

@@ -85,9 +85,9 @@ const tabs = [
 function TrafficLightsIcon(props) {
   return (
     <svg aria-hidden="true" viewBox="0 0 42 10" fill="none" {...props}>
-      <circle cx="5" cy="5" r="4.5" />
-      <circle cx="21" cy="5" r="4.5" />
-      <circle cx="37" cy="5" r="4.5" />
+      <circle cx="5" cy="5" r="4.5" fill='red'/>
+      <circle cx="21" cy="5" r="4.5" fill='yellow'/>
+      <circle cx="37" cy="5" r="4.5" fill='green'/>
     </svg>
   )
 }
@@ -105,7 +105,7 @@ export function Hero() {
               src={completeGofrLogo}
               alt="gofrLogo"
               height={150}
-              unoptimized
+              unoptimizedtouc
               priority
             />
             <div className="relative z-10">