From b319b6508a5b1f8db9321a227dd89f82a207aeb7 Mon Sep 17 00:00:00 2001
From: AderKonstantin <aderkonstantin9@gmail.com>
Date: Sat, 1 Mar 2025 08:23:57 +0300
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(page):=20add=20animated=20link?=
 =?UTF-8?q?s=20to=20main=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index a2ae316..1f22be8 100644
--- a/app/page.tsx
+++ b/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"><a href="https://mastodon.social/@aderkonstantin">Mastodon</a></li>
-          <li className="p-3 text-xl"><a href="https://github.com/AderKonstantin">GitHub</a></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://www.instagram.com/aderkitty/">Instagram</AnimatedLink></li>
+          <li className="p-3 text-xl"><AnimatedLink href="https://mastodon.social/@aderkonstantin">Mastodon</AnimatedLink></li>
+          <li className="p-3 text-xl"><AnimatedLink href="https://github.com/AderKonstantin">GitHub</AnimatedLink></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"><a href="#">Store</a></li>
+          <li className="p-3 text-xl"><AnimatedLink href="#">Ader Berry Bot (Telegram)</AnimatedLink></li>
+          <li className="p-3 text-xl"><AnimatedLink href="#">Store</AnimatedLink></li>
         </ul>
       </footer>
     </div>