🎨 feat(footer): Add new footer component

The changes in this commit introduce a new footer component to the application. The footer includes the following sections:

- Socials: Links to the user's social media profiles (Instagram, Mastodon, GitHub, Steam)
- Games: A link to the "Robot Fire" game
- Other Projects: Links to the "cloudberrygames" and "northfamily" projects

The footer is designed to be responsive, with a different layout for larger and smaller screens. The icons in the footer are also inverted to match the overall color scheme of the application.

components/footer/main.tsx

@@ -0,0 +1,81 @@
+
+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';
+
+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>
+    );
+}