<main>
  <div
    class="relative pt-16 flex content-center items-center justify-center"
    style="min-height: 75vh;"
  >
    <div
      class="absolute top-0 w-full h-full bg-center bg-cover bg-gray-700"
    >
    </div>
    <div class="relative mx-auto">
      <div class="items-center flex flex-wrap">
        <div class="w-full lg:w-8/12 px-4 ml-auto mr-auto text-center">
          <div>
            <h1 class="text-white font-semibold text-4xl">
              The Stuff of Legend.
            </h1>
            <p class="mt-6 text-lg text-gray-100">
              Legendary makes it easy to quickly build Phoenix applications with all the bells and whistles.
            </p>
          </div>
        </div>
        <div class="w-full lg:w-8/12 px-4 ml-auto mr-auto text-center my-12">
          <%= styled_button_link "Log In", to: "/session/new" %>
          <%= styled_button_link "Sign Up", to: "/registration/new" %>
        </div>
      </div>
    </div>
  </div>
  <section class="pb-20 bg-gray-300 -mt-24">
    <div class="container mx-auto px-4">
      <div class="flex flex-wrap">
        <div class="w-full md:w-4/12 px-4 text-center">
          <div
            class="relative flex flex-col min-w-0 break-words bg-white w-full h-full mb-6 shadow-lg rounded-lg"
          >
            <div class="px-4 py-6 flex-auto">
              <div
                class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-6 shadow-lg rounded-full bg-red-400"
              >
                <i class="fa fa-battery-full"></i>
              </div>
              <h6 class="text-xl font-semibold">Batteries Included</h6>
              <p class="mt-2 mb-6 text-gray-600">
                We include authentication, content management, administration, Tailwind styles,
                and fluid email templates so that you can build your app as quickly as possible.
              </p>
            </div>
          </div>
        </div>
        <div class="w-full md:w-4/12 px-4 text-center">
          <div
            class="relative flex flex-col min-w-0 break-words bg-white w-full h-full mb-6 shadow-lg rounded-lg"
          >
            <div class="px-4 py-6 flex-auto">
              <div
                class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-6 shadow-lg rounded-full bg-blue-400"
              >
                <i class="fas fa-chart-line"></i>
              </div>
              <h6 class="text-xl font-semibold">Hyper-scalable</h6>
              <p class="mt-2 mb-6 text-gray-600">
                Legendary is built on top of Phoenix and Elixir, so it can handle millions of connections without a problem.
              </p>
            </div>
          </div>
        </div>
        <div class="w-full md:w-4/12 px-4 text-center">
          <div
            class="relative flex flex-col min-w-0 break-words bg-white w-full h-full mb-6 shadow-lg rounded-lg"
          >
            <div class="px-4 py-6 flex-auto">
              <div
                class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-green-400"
              >
                <i class="fas fa-toolbox"></i>
              </div>
              <h6 class="text-xl font-semibold">Flexible Toolbox</h6>
              <p class="mt-2 mb-6 text-gray-600">
                We used our years of experience building Phoenix applications at scale to design Legendary with everything you need.
                But we stay out of your way while you create your application.
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap items-center mt-32">
        <h2 class="w-full text-3xl text-center">
          Features
        </h2>
        <div class="w-full border-gray-400 border-t-2 border-b-2 py-12 px-4 mt-12 flex">
          <div class="lg:w-1/2 mr-12">
            <h1 class="text-2xl">Authentication</h1>
            <p class="text-xl mt-6">
              Look, you don't want to build yet another auth system. You want to build an application. Authentication
              is a solved problem. With Legendary you don't need to reinvent the wheel.
            </p>
          </div>
          <div class="lg:w-1/2">
            <img src="/images/auth.svg" />
          </div>
        </div>
        <div class="w-full border-gray-400  border-b-2 py-12 px-4 flex">
          <div class="lg:w-1/2">
            <img src="/images/content.svg" />
          </div>
          <div class="lg:w-1/2 ml-12">
            <h1 class="text-2xl">Content Management</h1>
            <p class="text-xl mt-6">
              Legendary comes with a simple content management system for building custom pages and blog posts. Don't
              get stuck building simple content pages when your development talent is better spent elsewhere.
          </div>
        </div>
        <div class="w-full border-gray-400 border-b-2 py-12 px-4 flex">
          <div class="lg:w-1/2 mr-12">
            <h1 class="text-2xl">Admin Dashboard</h1>
            <p class="text-xl mt-6">
              There are plenty of tasks that don't require custom code. Legendary integrates the Kaffy admin dashboard 
              so that you can focus on what is unique to your application instead of churning out CRUD or editing database
              rows by hand.
            </p>
          </div>
          <div class="lg:w-1/2">
            <img src="/images/dashboard.svg" />
          </div>
        </div>
        <div class="w-full border-gray-400 border-b-2 py-12 px-4 flex">
          <div class="lg:w-1/2">
            <img src="/images/tailwind.svg" />
          </div>
          <div class="lg:w-1/2 ml-12">
            <h1 class="text-2xl">Tailwind CSS</h1>
            <p class="text-xl mt-6">
            Tailwind is a rad CSS framework that gives you the building blocks you need to implement
            any design, without fighting a super-opinionated CSS framework.
            </p>
          </div>
        </div>
        <div class="w-full border-gray-400 py-12 px-4 pb-24 flex">
          <div class="lg:w-1/2">
            <h1 class="text-2xl">Battle-tested Fluid Email Templates</h1>
            <p class="text-xl mt-6">
            HTML email is hard. But it's also a solved problem. We include an HTML email template and toolkit that has been
            tested across all the major email clients from mobile to desktop. You probably didn't get into this to code yet
            another email template. So don't. Use ours.
            </p>
          </div>
          <div class="lg:w-1/2">
            <img src="/images/email.svg" />
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="bg-gray-100 py-12 pb-32">
      <div class="relative mx-auto">
        <div class="items-center flex flex-wrap">
          <div class="w-full lg:w-8/12 px-4 ml-auto mr-auto text-center">
            <h1 class="text-purple-600 font-semibold text-4xl">
              What are you waiting for?
            </h1>
          </div>
          <div class="w-full lg:w-8/12 px-4 ml-auto mr-auto text-center my-12">
            <%= styled_button_link "Log In", to: "/session/new" %>
            <%= styled_button_link "Sign Up", to: "/registration/new" %>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>
