import Layout from "~/components/Layout";
import "../styles/pages/stack.scss";

function stack() {
  return (
    <Layout site="stack">
      <h1>The Stack</h1>
      <section>
        <img src="/assets/logos/kotlin.svg" alt="Kotlin 'K' logo" />
        <div class="stackgrid_3 stackitm">
          <h1>The Kotlin programming language</h1>
          <p>
            A programming language, which runs in the JVM. Also my main
            language.
          </p>
        </div>
      </section>
      <section>
        <img src="/assets/logos/kord.png" alt="The Kord logo" />
        <div class="stackgrid_3 stackitm">
          <h1>The Kord library</h1>
          <p>A Kotlin library for creating Discord bots. Pretty bare bones.</p>
        </div>
      </section>
      <section>
        <img
          src="/assets/logos/kordextensions.png"
          alt="The Kord-Extensions logo"
        />
        <div class="stackgrid_3 stackitm">
          <h1>The Kord Extensions library</h1>
          <p>A Kotlin library to improve the Kord experience.</p>
        </div>
      </section>
      <section>
        <img src="/assets/logos/pgelephant.png" alt="The PostgreSQL elephant" />
        <div class="stackgrid_3 stackitm">
          <h1>The PostgreSQL database</h1>
          <p>
            A fast and reliable database. Also something, which I already used
            beforehand.
          </p>
        </div>
      </section>
      <section class="stack-note">
        <p>
          To view all used libraries and their licenses, check the{" "}
          <a href="/acknowledgements">Acknowledgements</a>.
        </p>
      </section>
    </Layout>
  );
}

export default stack;