🎨 feat(layout): Reorganize page structure and add footer
This commit reorganizes the page structure by moving the main content area and the footer into the layout component. The main content area now only contains the BlogArea component, while the footer has been expanded to include social links, game links, and other project links. The changes were made to improve the overall structure and organization of the application, making it easier to maintain and extend in the future.
This commit is contained in:
86
app/page.tsx
86
app/page.tsx
@@ -1,17 +1,6 @@
|
||||
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 BlogArea from "../components/blogpost";
|
||||
|
||||
import MainHeader from "@/components/header/main";
|
||||
|
||||
// Mock data for blog posts
|
||||
const blogposts = [
|
||||
@@ -47,77 +36,8 @@ const blogposts = [
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="text-xl 2xl:mx-64 xl:mx-32 md:mx-6">
|
||||
<MainHeader />
|
||||
|
||||
<main>
|
||||
<BlogArea blogposts={blogposts} />
|
||||
</main>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<main>
|
||||
<BlogArea blogposts={blogposts} />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user