✨ feat: add posts page, changed icons to react-icons

components/footer/main.tsx

@@ -1,81 +1,51 @@
-
-import mastodonPic from '@/public/mastodon.svg';
-import githubPic from '@/public/github.svg';
-import instagramPic from '@/public/instagram.svg';
-import steamPic from '@/public/steam.svg';
-
-import gamePic from '@/public/gamepad.svg';
-import projectPic from '@/public/project.svg';
-
-import Image from "next/image";
 import Link from "next/link";
-import AnimatedLink from '@/components/animatedLink';
+import { 
+  FaMastodon, 
+  FaGithub, 
+  FaSteam, 
+  FaProjectDiagram 
+} from "react-icons/fa";
 
 export default function MainFooter() {
-    return (
-        <footer className="border-t border-white pt-4 flex lg:flex-row max-md:flex-col justify-around text-2xl">
-            <ul className="list-none m-4">
-                <li className="text-2xl mb-3"><h3>Socials</h3></li>
-                <li className="inline text-xl pr-2 mr-2">
-                    <Link href="https://www.instagram.com/aderkitty/">
-                        <Image
-                            src={instagramPic}
-                            alt="lang"
-                            width={32}
-                            height={32}
-                            className="inline filter brightness-0 invert"
-                        />
-                    </Link>
-                </li>
-                <li className="inline text-xl pr-2 mr-2">
-                    <Link href="https://mastodon.social/@aderkonstantin">
-                        <Image
-                            src={mastodonPic}
-                            alt="lang"
-                            width={32}
-                            height={32}
-                            className="inline filter brightness-0 invert"
-                        />
-                    </Link>
-                </li>
-                <li className="inline text-xl pr-2 mr-2">
-                    <Link href="https://github.com/AderKonstantin">
-                        <Image
-                            src={githubPic}
-                            alt="lang"
-                            width={32}
-                            height={32}
-                            className="inline filter brightness-0 invert"
-                        />
-                    </Link>
-                </li>
-                <li className="inline text-xl pr-2 mr-2">
-                    <Link href="https://steamcommunity.com/yourprofile">
-                        <Image
-                            src={steamPic}
-                            alt="lang"
-                            width={32}
-                            height={32}
-                            className="inline filter brightness-0 invert"
-                        />
-                    </Link>
-                </li>
-            </ul>
-            <ul className="list-none m-4">
-                <li className="text-2xl mb-3"><h3 className='inline'>Games</h3><Image src={gamePic} alt="lang" width={24} height={24} className="ml-2 inline filter brightness-0 invert" /></li>
-                <li className="text-xl">
-                    <AnimatedLink href="#">Robot Fire</AnimatedLink>
-                </li>
-            </ul>
-            <ul className="list-none m-4">
-                <li className="text-2xl mb-3"><h3 className='inline'>Other Projects</h3><Image src={projectPic} alt="lang" width={24} height={24} className="ml-2 inline filter brightness-0 invert" /></li>
-                <li className="text-xl">
-                    <AnimatedLink href="#">cloudberrygames</AnimatedLink>
-                </li>
-                <li className="text-xl">
-                    <AnimatedLink href="#">northfamily</AnimatedLink>
-                </li>
-            </ul>
-        </footer>
-    );
+  return (
+    <footer className="border-t dark:border-white border-black pt-4 text-2xl">
+      <div className="flex lg:flex-row max-md:flex-col justify-around items-start">
+        <div className="m-4">
+          <h3 className="text-xl mb-3">Socials</h3>
+          <div className="flex items-center gap-4">
+            <Link href="https://mastodon.social/@aderkonstantin" 
+                  className="text-gray-800 dark:text-gray-200 hover:text-primary-500 dark:hover:text-primary-400 transition-colors">
+              <FaMastodon size={32} />
+            </Link>
+            <Link href="https://github.com/AderKonstantin" 
+                  className="text-gray-800 dark:text-gray-200 hover:text-primary-500 dark:hover:text-primary-400 transition-colors">
+              <FaGithub size={32} />
+            </Link>
+            <Link href="https://steamcommunity.com/yourprofile" 
+                  className="text-gray-800 dark:text-gray-200 hover:text-primary-500 dark:hover:text-primary-400 transition-colors">
+              <FaSteam size={32} />
+            </Link>
+          </div>
+        </div>
+        <div className="m-4">
+          <div className="flex items-center gap-2 mb-3">
+            <h3 className="text-xl inline">Other Projects</h3>
+            <span className="text-gray-800 dark:text-gray-200">
+              <FaProjectDiagram size={24} />
+            </span>
+          </div>
+          <div className="text-lg">
+            <Link href="sihirtia.ru" 
+                  className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 transition-colors">
+              Sihirtia Softworks
+            </Link>
+          </div>
+        </div>
+      </div>
+      <div className="mt-8 md:text-center text-foreground-accent px-6">
+        <p className="text-base mt-2 dark:text-gray-200 text-gray-700">Ader Konstantin &copy; {new Date().getFullYear()}</p>
+        <p className="text-sm my-2 text-gray-500">Made with &hearts; by <Link href="https://aderk.org" target="_blank" className="text-primary-500 hover:text-primary-600">AderK</Link></p>
+      </div>
+    </footer>
+  );
 }