import Image from "next/image";

export default function Home() {
  return (
    <div className="text-xl mx-24">
      <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">
              <a href="https://aderk.tech/" className="text-white no-underline relative hover:text-white">
                AderKI
              </a>
            </li>
          </ul>
        </div>
        <div className="text-3xl mb-20">
          <p>
            Hello. This is my personal store. Here I sell hoodies, comics, books, and other items. You can buy them.
          </p>
        </div>
      </header>

      <main>
        {/* Blogpost Components Here */}
      </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"><a href="https://www.instagram.com/aderkitty/">Instagram</a></li>
          <li className="p-3 text-xl"><a href="https://mastodon.social/@aderkonstantin">Mastodon</a></li>
          <li className="p-3 text-xl"><a href="https://github.com/AderKonstantin">GitHub</a></li>
          <li className="p-3 text-xl"><a href="https://steamcommunity.com/yourprofile">Steam</a></li>
        </ul>
        <ul className="list-none m-4">
          <li className="text-3xl"><h3>Games</h3></li>
          <li className="p-3 text-xl"><a href="#">Joe The Rabbit</a></li>
        </ul>
        <ul className="list-none m-4">
          <li className="text-3xl"><h3>Other Projects</h3></li>
          <li className="p-3 text-xl"><a href="#">Ader Berry Bot (Telegram)</a></li>
          <li className="p-3 text-xl"><a href="#">Store</a></li>
        </ul>
      </footer>
    </div>
  );
}