frontend/src/components/About.svelte

<script>
  import { _ } from "svelte-i18n";
</script>

<div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
  <div class="text-center mb-8">
    <h1
      class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl">
      {$_('about')}
      🧾
    </h1>
    <p
      class="mt-2 max-w-xl mx-auto text-xl lg:max-w-3xl lg:text-2xl text-gray-300">
      Lauf für Kaya!
      <strong class="text-white font-medium">
        {$_('by')}
        <a href="https://odit.services" class="underline">ODIT.Services</a>
      </strong>
      <br />
      <span class="text-lg">{$_('lfk-is-os')}</span>
    </p>
  </div>
</div>

<div class="pt-0 pb-16 bg-gray-50 overflow-hidden lg:pt-12 lg:py-24">
  <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
    <h2 class="text-4xl font-display font-semibold text-gray-900 md:text-5xl">
      {$_('credits')}
    </h2>
    <div
      class="max-w-3xl mx-auto text-xl leading-8 font-medium text-gray-900 mt-8">
      <p class="text-center">{$_('oss_credit_description')}</p>
    </div>
    <div class="w-screen leading-8 pl-5 mt-5">
      <!--  -->
      <table>
        <thead>
          <tr>
            <th>name</th>
            <th>licenseType</th>
            <th>link</th>
            <th>installedVersion</th>
            <th>author</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>@odit/lfk-client-js</td>
            <td>CC-BY-NC-SA-4.0</td>
            <td>https://git.odit.services/lfk/lfk-client-js</td>
            <td>0.0.5</td>
            <td>ODIT.Services</td>
          </tr>
          <tr>
            <td>filepond</td>
            <td>MIT</td>
            <td>https://github.com/pqina/filepond.git</td>
            <td>4.25.1</td>
            <td>PQINA</td>
          </tr>
          <tr>
            <td>gridjs</td>
            <td>MIT</td>
            <td>https://github.com/grid-js/gridjs.git</td>
            <td>3.2.0</td>
            <td>Afshin Mehrabani</td>
          </tr>
          <tr>
            <td>svelte-filepond</td>
            <td>MIT</td>
            <td>https://github.com/pqina/svelte-filepond.git</td>
            <td>0.0.1</td>
            <td>PQINA</td>
          </tr>
          <tr>
            <td>svelte-i18n</td>
            <td>MIT</td>
            <td>https://github.com/kaisermann/svelte-i18n.git</td>
            <td>3.3.0</td>
            <td>Christian Kaisermann</td>
          </tr>
          <tr>
            <td>tailwindcss</td>
            <td>MIT</td>
            <td>https://github.com/tailwindlabs/tailwindcss.git</td>
            <td>2.0.2</td>
            <td />
          </tr>
          <tr>
            <td>toastify-js</td>
            <td>MIT</td>
            <td>https://github.com/apvarun/toastify-js.git</td>
            <td>1.9.3</td>
            <td>Varun A P</td>
          </tr>
          <tr>
            <td>validator</td>
            <td>MIT</td>
            <td>https://github.com/chriso/validator.js.git</td>
            <td>13.5.2</td>
            <td>Chris O'Hara</td>
          </tr>
          <tr>
            <td>@snowpack/plugin-svelte</td>
            <td>MIT</td>
            <td>https://github.com/snowpackjs/snowpack.git</td>
            <td>3.4.1</td>
            <td />
          </tr>
          <tr>
            <td>autoprefixer</td>
            <td>MIT</td>
            <td>https://github.com/postcss/autoprefixer.git</td>
            <td>10.1.0</td>
            <td>Andrey Sitnik</td>
          </tr>
          <tr>
            <td>postcss</td>
            <td>MIT</td>
            <td>https://github.com/postcss/postcss.git</td>
            <td>8.2.1</td>
            <td>Andrey Sitnik</td>
          </tr>
          <tr>
            <td>postcss-load-config</td>
            <td>MIT</td>
            <td>https://github.com/postcss/postcss-load-config.git</td>
            <td>3.0.0</td>
            <td>Michael Ciniawky</td>
          </tr>
          <tr>
            <td>snowpack</td>
            <td>MIT</td>
            <td>https://github.com/snowpackjs/snowpack.git</td>
            <td>3.0.0-rc.2</td>
            <td>Fred K. Schott</td>
          </tr>
          <tr>
            <td>svelte</td>
            <td>MIT</td>
            <td>https://github.com/sveltejs/svelte.git</td>
            <td>3.31.0</td>
            <td>Rich Harris</td>
          </tr>
          <tr>
            <td>svelte-preprocess</td>
            <td>MIT</td>
            <td>https://github.com/sveltejs/svelte-preprocess.git</td>
            <td>4.6.1</td>
            <td>Christian Kaisermann</td>
          </tr>
        </tbody>
      </table>
      <!--  -->
      <!-- <ul class="list-disc text-gray-500">
        <li>
          Snowpack:
          <a
            class="underline"
            href="https://snowpack.dev"
            target="_blank">https://snowpack.dev</a>
        </li>
        <li>
          SvelteJS:
          <a
            class="underline"
            href="https://svelte.dev"
            target="_blank">https://svelte.dev</a>
        </li>
      </ul> -->
    </div>
    <h2 class="text-4xl font-display font-semibold text-gray-900 md:text-5xl">
      Fragen
    </h2>
    <div class="mt-6 border-t-2 border-gray-100 pt-10">
      <dl class="md:grid md:grid-cols-2 md:gap-8">
        <div>
          <div>
            <dt class="text-lg leading-6 font-medium text-gray-900">Q</dt>
            <dd class="mt-2">
              <p class="text-base text-gray-500">A</p>
            </dd>
          </div>
        </div>
        <div class="mt-12 sm:mt-0">
          <div id="team-pricing">
            <dt class="text-lg leading-6 font-medium text-gray-900">Q</dt>
            <dd class="mt-2">
              <p class="text-base text-gray-500">A</p>
            </dd>
          </div>
          <div class="mt-12">
            <dt class="text-lg leading-6 font-medium text-gray-900">Q</dt>
            <dd class="mt-2">
              <p class="text-base text-gray-500">A</p>
            </dd>
          </div>
        </div>
      </dl>
    </div>
  </div>
</div>