{{ define "main" }}
<section class="hero">
  <div class="hero-text">
    <h1>Your apps, your server, and how to use them.</h1>
    <p class="hero-lede">Federated Computer runs a private copy of each application below on a virtual machine dedicated to you. These guides cover what each one does, which paid services it can stand in for, and how to get your work done in it.</p>
    <p class="hero-links">
      <a class="btn" href="{{ "getting-started/" | relURL }}">Start with the basics</a>
      <a class="btn btn-quiet" href="{{ "getting-started/superpanel/" | relURL }}">Manage things in Superpanel</a>
    </p>
  </div>
  <figure class="swap" aria-label="Examples of services you can replace">
    <ol class="swap-list">
      <li><s>Google Drive</s><span class="swap-arrow" aria-hidden="true"></span><a href="{{ "apps/nextcloud/" | relURL }}">Nextcloud</a></li>
      <li><s>Slack</s><span class="swap-arrow" aria-hidden="true"></span><a href="{{ "apps/element/" | relURL }}">Element</a></li>
      <li><s>Zoom</s><span class="swap-arrow" aria-hidden="true"></span><a href="{{ "apps/jitsi/" | relURL }}">Jitsi</a></li>
      <li><s>1Password</s><span class="swap-arrow" aria-hidden="true"></span><a href="{{ "apps/vaultwarden/" | relURL }}">Vaultwarden</a></li>
      <li><s>Calendly</s><span class="swap-arrow" aria-hidden="true"></span><a href="{{ "apps/calcom/" | relURL }}">Cal.com</a></li>
      <li><s>DocuSign</s><span class="swap-arrow" aria-hidden="true"></span><a href="{{ "apps/docuseal/" | relURL }}">DocuSeal</a></li>
    </ol>
  </figure>
</section>

<section class="home-section" aria-labelledby="all-apps">
  <div class="home-section-head">
    <h2 id="all-apps">All applications</h2>
    <p>Grouped by what you would use them for. The struck-through names are the paid services each one can replace.</p>
  </div>
  {{ partial "directory.html" (dict "headingLevel" 3) }}
</section>
{{ end }}