<div class="lg:pt-24 pt-12 lg:max-w-7xl container mx-auto px-4 lg:px-0">
  <div class="mx-auto">
    <div class="mx-auto">
      <p class="text-base font-light tracking-wide">{{ subtitle }}</p>
      <h2 class="fade-in lg:text-5xl text-4xl font-normal tracking-tight">{{ title }}</h2>

      <p class="mt-6 text-lg font-light">{{ description }}</p>
      <p class="mt-6 text-lg font-light">{{ description2 }}</p>
    </div>
  </div>
  <!-- <div class="mx-auto mt-10">
    <dl class="mx-auto grid grid-cols-1 gap-x-6 gap-y-10 text-base sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:gap-x-8 lg:gap-y-8">
      <div class="relative pl-9">
        <dt class="inline font-semibold ">

          PRODUCTIVITY & COMMUNICATION
        </dt>
        <ul class="mx-4" style="list-style: circle;">
          <li>Secure remote work collaboration.</li>
          <li>Private file sharing between trusted nodes.</li>
          <li>Encrypted voice/video calls.</li>
          <li>Self-hosted messaging systems.</li>
          <li>Secure document collaboration.</li>
        </ul>
      </div>
      <div class="relative pl-9">
        <dt class="inline font-semibold ">

          INFRASTRUCTURE
        </dt>
        <ul class="mx-4" style="list-style: circle;">
          <li>Private cloud computing resources.</li>
          <li>Secure IoT device networks.</li>
          <li>Remote system administration.</li>
          <li>Virtual private networks (VPNs).</li>
          <li>Secure backup systems.</li>
        </ul>
      </div>
      <div class="relative pl-9">
        <dt class="inline font-semibold ">
 
          SERVICES
        </dt>
        <ul class="mx-4" style="list-style: circle;">
          <li>Self-hosted web services.</li>
          <li>Private file sharing between trusted nodes.</li>
          <li>Private DNS systems.</li>
          <li>Personal email servers.</li>
          <li>Secure document collaboration.</li>
        </ul>
      </div>
      <div class="relative pl-9">
        <dt class="inline font-semibold ">

          MEDIA & CONTENT
        </dt>
        <ul class="mx-4" style="list-style: circle;">
          <li>Private media streaming.</li>
          <li>Personal cloud storage.</li>
          <li>Protected content distribution.</li>
          <li>Secure game servers.</li>
          <li>Private git repositories.</li>
        </ul>
      </div>
    </dl>
    <hr class="my-6">

    <div class="mx-auto mt-10 px-6 lg:px-0 lg:max-w-6xl">
      <a href="/download" class=" rounded-2xl bg-black px-6 py-2 text-sm font-semibold text-white shadow-xs hover:bg-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">Get Started</a>
    </div> 
  </div> -->
</div>
