{{ define "main" }}
<main>
  <nav>
    <div class="border-b border-gray-200 py-4 flex items-center justify-between mb-16 sm:mb-20 px-4 sm:mx-0 sm:px-0">
      <a href="/" class="uppercase text-xl md:text-2xl">GraphJin</a>

      <div class="flex items-center space-x-6 sm:space-x-10 ml-6 sm:ml-10">
        <a class="text-base leading-6 font-medium hover:text-gray-600 transition-colors duration-200 py-2" href="https://github.com/dosco/graphjin/wiki">
          <span class="sm:hidden">Docs</span>
          <span class="hidden sm:inline">Documentation</span>
        </a>
        
        <a class="text-base leading-6 font-medium hover:text-gray-600 transition-colors duration-200 py-2" href="https://discord.com/invite/6pSWCTZ">
          <span>Chat</span>
        </a>

        <a href="https://github.com/dosco/graphjin" class="text-gray-400 hover:text-gray-500 transition-colors duration-200">
          <span class="sr-only">GraphJin on GitHub</span>
          <svg width="24" height="24" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
        </a>
      </div>
    </div>
  </nav>
  <div class="px-4">
    <h1 class="text-4xl sm:text-6xl lg:text-7xl leading-none font-extrabold tracking-tight text-gray-900 mt-10 mb-8 sm:mt-14 sm:mb-10">Build APIs in 5 minutes not weeks <span class="text-indigo-500 font-semibold">with GraphJin the automagical GraphQL to SQL compiler.</span>
    </h1>
    <div class="flex flex-wrap space-y-4 sm:space-y-0 sm:space-x-4 text-center"><a class="w-full sm:w-auto flex-none bg-gray-900 hover:bg-gray-700 text-white text-lg leading-6 font-semibold py-3 px-6 border border-transparent rounded-xl focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200" href="https://github.com/dosco/graphjin">Get started</a><button type="button" class="w-full sm:w-auto flex-none bg-gray-50 text-gray-400 hover:text-gray-900 font-mono leading-6 py-3 sm:px-6 border border-gray-200 rounded-xl flex items-center justify-center space-x-2 sm:space-x-4 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-300 focus:outline-none transition-colors duration-200"><span class="text-gray-900"><span class="hidden sm:inline text-gray-500" aria-hidden="true">$ </span>brew install dosco/graphjin/graphjin</span><span class="sr-only">(click to copy to clipboard)</span><svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 16c0 1.886 0 2.828.586 3.414C9.172 20 10.114 20 12 20h4c1.886 0 2.828 0 3.414-.586C20 18.828 20 17.886 20 16v-4c0-1.886 0-2.828-.586-3.414C18.828 8 17.886 8 16 8m-8 8h4c1.886 0 2.828 0 3.414-.586C16 14.828 16 13.886 16 12V8m-8 8c-1.886 0-2.828 0-3.414-.586C4 14.828 4 13.886 4 12V8c0-1.886 0-2.828.586-3.414C5.172 4 6.114 4 8 4h4c1.886 0 2.828 0 3.414.586C16 5.172 16 6.114 16 8"></path></svg></button></div>
  </div>

  <div class="px-4 py-6 md:py-16">
    <img src="https://user-images.githubusercontent.com/832235/108806955-1c363180-7571-11eb-8bfa-488ece2e51ae.png" />
  </div>

  <div class="px-4 py-6 md:py-16 grid grid-cols-1 md:grid-cols-3 gap-4">
    <div class="f">
      <h1>Fast queries</h1>
      <p>Query or update your database with simple GraphQL. Deeply nested queries and mutations are supported
      </p>
    </div>

    <div class="f">
      <h1>Realtime subscriptions</h1>
      <p>Subscribe to a query and instantly get all related updates in realtime over websockets
      </p>
    </div>

    <div class="f">
      <h1>Database discovery</h1>
      <p>Just point at a database and we're good to go. Works with Postgres and the distributed YugabyteDB
      </p>
    </div>

    <div class="f">
      <h1>Build fast</h1>
      <p>Out of the box support for infinite scroll, threaded comments, activity feed and other common app patterns
      </p>
    </div>

    <div class="f">
      <h1>Full-text search</h1>
      <p>Leverage the powerful full-text search capability of Postgres for search and auto-complete
      </p>
    </div>

    <div class="f">
      <h1>Authentication</h1>
      <p>Support for JWT, Firebase, Rails cookie and other authentication mechanisms
      </p>
    </div>

    <div class="f">
      <h1>High performance</h1>
      <p>Designed from the ground up to be lightning fast and highly scalable. Built in Go
      </p>
    </div>

    <div class="f">
      <h1>Automatic Persisted Queries</h1>
      <p>Improve network performance with smaller light queries over GET requests
      </p>
    </div>

    <div class="f">
      <h1>Not a startup</h1>
      <p>GraphJin is a pure Apache-licensed open source project with a fast growing community
      </p>
    </div>
  </div>

  <div class="py-6 md:py-12">
    <div class="p-2 md:p-10 grid grid-cols-1 md:grid-cols-2 gap-6 bg-green-300">
      <div><iframe width="100%" height="315" src="https://www.youtube.com/embed/4zXy-4gFSpQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>

      <div><iframe width="100%" height="315" src="https://www.youtube.com/embed/gzAiAbsCMVA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</main>
{{ end }}