{% extends "base.html" %}

{% load static %}

{% comment %}
This is a temporary landing page for docs
{% endcomment %}

{% block content %}
  <!-- Homepage Hero Section -->
  <main class="my-4 mx-auto md:max-w-7xl px-4">
    <div class="md:flex md:space-x-4 space-y-4 md:space-y-0 mb-4">
      <div
        class="w-full md:w-1/2 block rounded-lg bg-charcoal shadow-lg dark:bg-neutral-700 relative text-white">
        <a href="#" class="rounded bg-orange text-white py-3 px-4 absolute top-5 right-10 shadow-md">New Here?</a>
        {# FIXME #}
        <a href="https://antora.cppalliance.org/doc/user-guide/index.html">
          <img
            class="rounded-t-lg w-full max-h-[470px] overflow-y-hidden"
            src="{% static 'img/fpo/guide.jpg' %}"
            alt="" />
        </a>
        <div class="px-6 py-3 text-white">
          <h5
            class="text-xl font-bold leading-tight text-orange">
            User Guide
          </h5>
          <p class="py-1 border-b border-gray-700 text-green">How to use Boost in your programs</p>
          <ul class="flex flex-wrap mt-2 text-sm">
            <li class="w-1/2"><a href="#">Get the Release</a></li>
            <li class="w-1/2"><a href="#">Including Headers</a></li>
            <li class="w-1/2"><a href="#">Using Bjam</a></li>
            <li class="w-1/2"><a href="#">Running Tests</a></li>
            <li class="w-1/2"><a href="#">Reporting Issues</a></li>
            <li class="w-1/2"><a href="#">Library Documentation</a></li>
            <li class="w-1/2"><a href="#">Build the Libraries</a></li>
            <li class="w-1/2"><a href="#">Linking Your Program</a></li>
            <li class="w-1/2"><a href="#">Using CMake</a></li>
            <li class="w-1/2"><a href="#">Using Bjam</a></li>
            <li class="w-1/2"><a href="#">Requesting Features</a></li>
            <li class="w-1/2"><a href="#">Toolsets</a></li>
          </ul>
        </div>
      </div>

      <div
        class="w-full md:w-1/2 block rounded-lg bg-charcoal shadow-lg dark:bg-neutral-700 relative">
        {# FIXME #}
        <a href="https://antora.cppalliance.org/doc/contributor-guide/index.html">
          <img
            class="rounded-t-lg w-full max-h-[470px] overflow-y-hidden"
            src="{% static 'img/fpo/man-tree.jpeg' %}"
            alt="" />
        </a>
        <div class="px-6 py-3 text-white">
          <h5
            class="text-xl font-bold leading-tight text-orange">
            Contributor Guide
          </h5>
          <p class="py-1 border-b border-gray-300 text-white/60">This is how you can help</p>
          <ul class="flex flex-wrap mt-2 text-sm">
            <li class="w-1/2"><a href="#">Get the Release</a></li>
            <li class="w-1/2"><a href="#">Including Headers</a></li>
            <li class="w-1/2"><a href="#">Using Bjam</a></li>
            <li class="w-1/2"><a href="#">Running Tests</a></li>
            <li class="w-1/2"><a href="#">Reporting Issues</a></li>
            <li class="w-1/2"><a href="#">Library Documentation</a></li>
            <li class="w-1/2"><a href="#">Build the Libraries</a></li>
            <li class="w-1/2"><a href="#">Linking Your Program</a></li>
            <li class="w-1/2"><a href="#">Using CMake</a></li>
            <li class="w-1/2"><a href="#">Using Bjam</a></li>
            <li class="w-1/2"><a href="#">Requesting Features</a></li>
            <li class="w-1/2"><a href="#">Toolsets</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="mb-16 space-y-4">
      <div
        class="flex flex-col rounded-lg bg-charcoal shadow-lg text-white dark:bg-neutral-700 md:flex-row">
        {# FIXME #}
        <a href="https://antora.cppalliance.org/doc/formal-reviews/intro.html">
          <img
            class="h-96 w-full rounded-t-lg object-cover md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"
            src="{% static 'img/fpo/clipboardman.jpeg' %}"
            alt="" />
        </a>
        <div class="flex flex-col justify-start p-6">
          <h5
            class="text-xl font-bold leading-tight">
            Boost Formal Reviews
          </h5>
          <p class="mb-4 py-1 text-base text-neutral-600 dark:text-neutral-200">
            How libraries become part of the collection.
          </p>
          <ul class="flex flex-wrap">
            <li class="w-1/2"><a href="#">Proposing</a></li>
            <li class="w-1/2"><a href="#">Scheduling</a></li>
            <li class="w-1/2"><a href="#">The Manager</a></li>
            <li class="w-1/2"><a href="#">The Review Process</a></li>
            <li class="w-1/2"><a href="#">Submitting a Review</a></li>
          </ul>
        </div>
      </div>

      <div
        class="flex flex-col rounded-lg bg-charcoal shadow-lg dark:bg-neutral-700 md:flex-row">
        <div class="flex flex-col justify-start p-6 w-full">
          <h5
            class="text-xl font-bold leading-tight">
            Release Process
          </h5>
          <p class="mb-4 text-base text-neutral-600 dark:text-neutral-200 py-1">
            "The trains always run on time"
          </p>
          <ul class="flex flex-wrap">
            <li class="w-1/2"><a href="#">Release Calendar</a></li>
            <li class="w-1/2"><a href="#">Process Steps</a></li>
            <li class="w-1/2"><a href="#">Betas and RCs</a></li>
            <li class="w-1/2"><a href="#">Testing the release</a></li>
            <li class="w-1/2"><a href="#">What's in the Archive</a></li>
            <li class="w-1/2"><a href="#">Library Debuts</a></li>
          </ul>
        </div>
        {# FIXME #}
        <a href="https://antora.cppalliance.org/doc/release-process/intro.html">
        <img
          class="h-96 w-full rounded-t-lg object-cover md:h-auto md:w-48 md:rounded-none md:rounded-r-lg"
          src="{% static 'img/fpo/construction.png' %}"
          alt="" />
        </a>
      </div>
    </div>
  </main>
  <!-- End Homepage Hero Section -->

{% endblock %}