darkwave/components/footer/main.tsx

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>
    );
}