<script setup lang="ts">
</script>

<template>
  <main class="main-intro">
    <article class="container border-red">
      <div class="intro">
        <p>
          The documentation concerning
          <br>
          the npm modules of
        </p>
        <h1 class="title">
          Twoslash
        </h1>
        <p>
          In which markdown code samples are powered by
          <br>
          the syntax engine of Visual Studio Code
          <br>
          mixed with the TypeScript compiler's information
        </p>

        <a href="/guide/" class="action-button" inline-block my-10>
          Get Started
        </a>

        <div mb-15 mt-5>
          <img class="dark:invert" style="margin: 0 auto" src="/svgs/squiggle.svg" alt="Decoration" width="70" height="25.5">
        </div>

        <div class="intro">
          <p class="by">
            By <a href="https://orta.io">Orta Therox</a>
          </p>
          <p>
            Purveyor of <a href="https://puzzmo.com/">Puzzles</a>, shipper of renowned open source code
            <br>
            and ex-TypeScript compiler team member
          </p>

          <p class="by">
            And <a href="https://antfu.me">Anthony Fu</a>
          </p>

          <p>
            A veritable open sourceror.
          </p>
        </div>

        <div style="margin-top: 3rem">
          <img style="margin: 0 auto" src="/logo.svg" alt="Shiki Logo" width="167" height="238">
        </div>
      </div>
    </article>
  </main>
</template>
