✨ feat(page): add animated links to main page

The changes in this commit add animated link components to the homepage.

The key changes are:

- Imported the `AnimatedLink` component from the `../components/animatedLink` file.
- Replaced the regular `<a>` tags in the main page with `<AnimatedLink>` components, which apply a smooth animation effect on hover.

app/page.tsx

@@ -1,4 +1,5 @@
 import Image from "next/image";
+import AnimatedLink from '../components/animatedLink';
 import BlogArea from "../components/blogpost";
 
 // Mock data for blog posts
@@ -24,9 +25,9 @@ export default function Home() {
         <div className="flex flex-row mt-12 mb-22">
           <ul className="w-full flex flex-row justify-between list-none">
             <li className="text-6xl p-2 pr-0">
-              <a href="https://aderk.tech/" className="text-white no-underline relative hover:text-white">
+              <AnimatedLink href="https://aderk.tech/">
                 AderKI
-              </a>
+              </AnimatedLink>
             </li>
           </ul>
         </div>
@@ -44,19 +45,19 @@ export default function Home() {
       <footer className="border-t border-white pt-4 flex flex-row justify-around text-2xl">
         <ul className="list-none m-4">
           <li className="text-3xl"><h3>Socials</h3></li>
-          <li className="p-3 text-xl"><a href="https://www.instagram.com/aderkitty/">Instagram</a></li>
+          <li className="p-3 text-xl"><AnimatedLink href="https://www.instagram.com/aderkitty/">Instagram</AnimatedLink></li>
-          <li className="p-3 text-xl"><a href="https://mastodon.social/@aderkonstantin">Mastodon</a></li>
+          <li className="p-3 text-xl"><AnimatedLink href="https://mastodon.social/@aderkonstantin">Mastodon</AnimatedLink></li>
-          <li className="p-3 text-xl"><a href="https://github.com/AderKonstantin">GitHub</a></li>
+          <li className="p-3 text-xl"><AnimatedLink href="https://github.com/AderKonstantin">GitHub</AnimatedLink></li>
-          <li className="p-3 text-xl"><a href="https://steamcommunity.com/yourprofile">Steam</a></li>
+          <li className="p-3 text-xl"><AnimatedLink href="https://steamcommunity.com/yourprofile">Steam</AnimatedLink></li>
         </ul>
         <ul className="list-none m-4">
           <li className="text-3xl"><h3>Games</h3></li>
-          <li className="p-3 text-xl"><a href="#">Joe The Rabbit</a></li>
+          <li className="p-3 text-xl"><AnimatedLink href="#">Joe The Rabbit</AnimatedLink></li>
         </ul>
         <ul className="list-none m-4">
           <li className="text-3xl"><h3>Other Projects</h3></li>
-          <li className="p-3 text-xl"><a href="#">Ader Berry Bot (Telegram)</a></li>
+          <li className="p-3 text-xl"><AnimatedLink href="#">Ader Berry Bot (Telegram)</AnimatedLink></li>
-          <li className="p-3 text-xl"><a href="#">Store</a></li>
+          <li className="p-3 text-xl"><AnimatedLink href="#">Store</AnimatedLink></li>
         </ul>
       </footer>
     </div>