c89df4cf2f
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.
81 lines
3.5 KiB
TypeScript
81 lines
3.5 KiB
TypeScript
|
|
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>
|
|
);
|
|
} |