<section class="text-gray-700 body-font container mx-auto">
  <div class="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
    <div class="lg:flex-grow lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
      <h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">
        Welcome to Phoenix!
      </h1>
      <p class="mb-8 leading-relaxed">
        Start building rich interactive user-interfaces, writing minimal custom Javascript.
        Built on top of Phoenix LiveView, <strong>Surface</strong> leverages the amazing <strong>Phoenix Framework</strong> to provide a fast and productive solution to build modern web applications.
      </p>
      {#if Code.ensure_loaded?(<%= inspect(web_module) %>.Demo)}
        <div class="flex justify-center">
          <a href="/demo" class="inline-flex text-white bg-teal-500 border-0 py-2 px-6 focus:outline-none hover:bg-teal-600 rounded text-lg">
            Card demo
          </a>
          {#if Application.spec(:surface_catalogue)}
            <a href="/catalogue/components/<%= inspect(web_module) %>.Components.Card/example" class="ml-4 inline-flex text-gray-700 bg-gray-200 border-0 py-2 px-6 focus:outline-none hover:bg-gray-300 rounded text-lg">
              Card examples
            </a>
          {/if}
        </div>
      {/if}
    </div>
  </div>
</section>
<footer class="text-center lg:text-left bg-gray-100 text-gray-600 w-full lg:fixed lg:bottom-0">
  <div class="mx-6 py-10 text-center md:text-left">
    <div class="grid grid-1 md:grid-cols-2 lg:grid-cols-4 gap-8 container mx-auto">
      <div class="">
        <h6 class="uppercase font-semibold mb-4 flex justify-center md:justify-start">
          Surface
        </h6>
        <ul class="space-y-3">
          <li>
            <a href="https://surface-ui.org/">surface-ui.org</a>
          </li>
          <li>
            <a href="https://github.com/surface-ui/surface">Source</a>
          </li>
          <li>
            <a href={"https://github.com/surface-ui/surface/blob/v#{Application.spec(:surface, :vsn)}/CHANGELOG.md"}>
              v{Application.spec(:surface, :vsn)} Changelog
            </a>
          </li>
          <li>
            <a href="https://elixirforum.com/t/surface-a-component-based-library-for-phoenix-liveview/">Forum</a>
          </li>
          <li>
            <a href="https://elixir-slackin.herokuapp.com/">#surface on Slack</a>
          </li>
        </ul>
      </div>
      <div class="">
        <h6 class="uppercase font-semibold mb-4 flex justify-center md:justify-start">
          Phoenix Framework
        </h6>
        <ul class="space-y-3">
          <li>
            <a href="https://phoenixframework.org/">phoenixframework.org</a>
          </li>
          <li>
            <a href="https://github.com/phoenixframework/phoenix">Source</a>
          </li>
          <li>
            <a href={"https://github.com/phoenixframework/phoenix/blob/v#{Application.spec(:phoenix, :vsn)}/CHANGELOG.md"}>
              v{Application.spec(:phoenix, :vsn)} Changelog
            </a>
          </li>
          <li>
            <a href="https://elixirforum.com/c/phoenix-forum">Forum</a>
          </li>
          <li>
            <a href="https://twitter.com/elixirphoenix">Twitter @elixirphoenix</a>
          </li>
        </ul>
      </div>
      <div class="">
        <h6 class="uppercase font-semibold mb-4 flex justify-center md:justify-start">
          Elixir Language
        </h6>
        <ul class="space-y-3">
          <li>
            <a href="https://elixir-lang.org/">elixir-lang.org</a>
          </li>
          <li>
            <a href="https://github.com/elixir-lang/elixir">Source</a>
          </li>
          <li>
            <a href="https://twitter.com/elixirlang">Twitter @elixirlang</a>
          </li>
          <li>
            <a href="https://elixir-slackin.herokuapp.com/">Elixir on Slack</a>
          </li>
          <li>
            <a href="https://discord.gg/elixir">Elixir on Discord</a>
          </li>
        </ul>
      </div>
      <div class="">
        <h6 class="uppercase font-semibold mb-4 flex justify-center md:justify-start">
          Tailwind CSS
        </h6>
        <ul class="space-y-3">
          <li>
            <a href="https://tailwindcss.com/">tailwindcss.com</a>
          </li>
          <li>
            <a href="https://github.com/tailwindlabs/tailwindcss">Source</a>
          </li>
          <li>
            <a href="https://twitter.com/tailwindcss">Twitter @tailwindcss</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</footer>
