darkwave/app/page.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';
import BlogArea from "../components/blogpost";

import MainHeader from "@/components/header/main";

// Mock data for blog posts
const blogposts = [
  {
    label: 'Retro Futurism: A Journey Through Time',
    body: 'Explore the fascinating world of retro futurism and its impact on modern science and culture.',
    publish: '2023-10-01',
    get_absolute_url: '/blog/retro-futurism',
    tags: ["science", "retro", "science-friction"]
  },
  {
    label: 'The Science Behind Video Games',
    body: 'Discover how video games are pushing the boundaries of technology and human interaction.',
    publish: '2023-09-25',
    get_absolute_url: '/blog/science-video-games',
    tags: ["science", "math", "games"]
  },
  {
    label: 'How to install Docker & Docker Compose',
    body: 'Guide to install Docker & Docker Compose on your machine.',
    publish: '2023-09-25',
    get_absolute_url: '/blog/docker-installation',
    tags: ["docker", "docker-compose", "linux"]
  },
  {
    label: 'Rocket Science',
    body: 'Discover how rocket are work.',
    publish: '2023-09-25',
    get_absolute_url: '/blog/rocket-science',
    tags: ["rocket", "space", "engineering"]
  },
];

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