{% extends "base.html" %}
{% load i18n %}
{% load static %}

{% block title %}{% trans "Learn" %}{% endblock %}

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

{% block content %}
  <!-- Homepage Hero Section -->
  <main class="px-4 my-4 mx-auto md:max-w-7xl">
    <div class="mb-4 space-y-4 md:flex md:space-y-0 md:space-x-4">
      <div
        class="block relative w-full text-white bg-white rounded-lg shadow-lg md:w-1/2 dark:bg-charcoal dark:bg-neutral-700">
        {# FIXME #}
        <a href="/doc/user-guide/">
          <img
            class="overflow-y-hidden w-full rounded-t-lg max-h-[470px]"
            src="{% static 'img/fpo/user_guide.png' %}"
            alt="" />
        </a>
        <div class="py-3 px-6 dark:text-white text-slate">
          <h5
            class="text-xl font-bold leading-tight text-orange">
            User Guide
          </h5>
          <p class="py-1 border-b border-gray-700">How to use Boost in your programs</p>
          <ul class="flex flex-wrap mt-2 text-sm">
            <li class="w-1/2"><a href="/doc/user-guide/intro.html">Introduction to Boost</a></li>
            <li class="w-1/2"><a href="/doc/user-guide/getting-started.html">Getting Started</a></li>
            <li class="w-1/2"><a href="/doc/user-guide/boost-history.html">History of Boost</a></li>
            <li class="w-1/2"><a href="/doc/user-guide/library-naming.html">Library Organization</a></li>
            <li class="w-1/2"><a href="/doc/user-guide/header-organization-compilation.html">Header Organization</a></li>
          </ul>
        </div>
      </div>

      <div
        class="block relative w-full bg-white rounded-lg shadow-lg md:w-1/2 dark:bg-charcoal dark:bg-neutral-700">
        {# FIXME #}
        <a href="/doc/contributor-guide/">
          <img
            class="overflow-y-hidden w-full rounded-t-lg max-h-[470px]"
            src="{% static 'img/fpo/contributor_guide.png' %}"
            alt="" />
        </a>
        <div class="py-3 px-6 dark:text-white text-slate">
          <h5
            class="text-xl font-bold leading-tight">
            <a href="/doc/contributor-guide/index.html" class="link-header">Contributor Guide</a>
          </h5>
          <p class="py-1 border-b border-gray-700">This is how you can help</p>
          <ul class="flex flex-wrap mt-2 text-sm">
            <li class="w-1/2"><a href="/doc/contributor-guide/getting-involved.html">Getting Involved</a></li>
            <li class="w-1/2"><a href="/doc/contributor-guide/requirements/library-requirements.html">Library Requirements</a></li>
            <li class="w-1/2"><a href="/doc/contributor-guide/requirements/license-requirements.html">License Requirements</a></li>
            <li class="w-1/2"><a href="/doc/contributor-guide/requirements/portability-requirements.html">Portability Requirements</a></li>
            <li class="w-1/2"><a href="/doc/contributor-guide/requirements/organization-requirements.html">Organization Requirements</a></li>
            <li class="w-1/2"><a href="/doc/contributor-guide/design-guide/design-guide.html">Design Guide</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="mb-16 space-y-4">
      <div
        class="flex flex-col text-white bg-white rounded-lg shadow-lg md:flex-row dark:bg-charcoal dark:bg-neutral-700">
        {# FIXME #}
        <a href="/doc/formal-reviews/" class="block md:w-1/2">
          <img
            class="object-cover overflow-x-hidden w-auto h-full rounded-t-lg md:rounded-none md:rounded-l-lg"
            src="{% static 'img/fpo/formal_reviews.png' %}"
            alt="" />
        </a>
        <div class="flex flex-col justify-start p-6 md:w-1/2 dark:text-white text-slate">
          <h5
            class="text-xl font-bold leading-tight text-orange">
            Boost Formal Reviews
          </h5>
          <p class="py-1 border-b border-gray-700">
            How libraries become part of the collection.
          </p>
          <ul class="flex flex-wrap">
            <ul class="flex flex-wrap mt-2 text-sm">
              <li class="w-1/2"><a href="/doc/formal-reviews/index.html">Introduction</a></li>
              <li class="w-1/2"><a href="/doc/formal-reviews/submissions.html">Submit a Library</a></li>
              <li class="w-1/2"><a href="/doc/formal-reviews/writing-reviews.html">Write a Review</a></li>
              <li class="w-1/2"><a href="/doc/formal-reviews/managing-reviews.html">Manage a Review</a></li>
            </ul>






          </ul>
        </div>
      </div>
    </div>
  </main>
  <!-- End Homepage Hero Section -->

{% endblock %}