AderKonstantin/darkwave
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 feat(footer): Add new footer component

Browse Source 
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.
This commit is contained in:
AderKonstantin
2025-03-26 15:38:02 +03:00
parent 0ade5e6e9c
commit c89df4cf2f
2 changed files with 83 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
app/layout.tsx
View File

@@ -1,20 +1,8 @@
import type { Metadata } from "next";
import "./globals.css";
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 MainHeader from "@/components/header/main";
import MainFooter from "@/components/footer/main";
export const metadata: Metadata = {
title: 'AderKI Blog',
@@ -50,71 +38,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
<div className="text-xl 2xl:mx-64 xl:mx-32 md:mx-6">
<MainHeader />
{children}
<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>
<MainFooter />
</div>
</body>
</html>