darkwave/app/page.tsx

import Image from "next/image";
import AnimatedLink from '../components/animatedLink';
import BlogArea from "../components/blogpost";
import HeaderToolbar from "../components/header/toolbar";

// 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',
  },
  {
    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',
  },
];

export default function Home() {
  return (
    <div className="text-xl mx-64">
      <header className="flex flex-col">
        <div className="flex flex-row mt-12 mb-22">
          <ul className="w-full flex flex-row justify-between list-none">
            <li className="text-6xl p-2 pr-0">
              <AnimatedLink href="https://blog.aderk.tech/en">
                AderKI
              </AnimatedLink>
            </li>
            
            <li className="text-6xl p-2 pr-0">
              <AnimatedLink href="https://blog.aderk.tech/ru">
                RU
              </AnimatedLink>
            </li>
          </ul>
        </div>
        <div className="text-5xl mb-20">
          <p>
          Hello. I am is a programmer, hacker, gamer and otaku. Love comics, coding, read books. There I am posting articles about computer science and another staff, that’s im like.
          </p>
        </div>
        <HeaderToolbar />
      </header>

      <main>
        <BlogArea blogposts={blogposts} />
      </main>

      <footer className="border-t border-white pt-4 flex flex-row justify-around text-2xl">
        <ul className="list-none m-4">
          <li className="text-3xl"><h3>Socials</h3></li>
          <li className="p-3 text-xl"><AnimatedLink href="https://www.instagram.com/aderkitty/">Instagram</AnimatedLink></li>
          <li className="p-3 text-xl"><AnimatedLink href="https://mastodon.social/@aderkonstantin">Mastodon</AnimatedLink></li>
          <li className="p-3 text-xl"><AnimatedLink href="https://github.com/AderKonstantin">GitHub</AnimatedLink></li>
          <li className="p-3 text-xl"><AnimatedLink href="https://steamcommunity.com/yourprofile">Steam</AnimatedLink></li>
        </ul>
        <ul className="list-none m-4">
          <li className="text-3xl"><h3>Games</h3></li>
          <li className="p-3 text-xl"><AnimatedLink href="#">Joe The Rabbit</AnimatedLink></li>
        </ul>
        <ul className="list-none m-4">
          <li className="text-3xl"><h3>Other Projects</h3></li>
          <li className="p-3 text-xl"><AnimatedLink href="#">Ader Berry Bot (Telegram)</AnimatedLink></li>
          <li className="p-3 text-xl"><AnimatedLink href="#">Store</AnimatedLink></li>
        </ul>
      </footer>
    </div>
  );
}