{% extends 'landing_base.html' %}

<!-- START OF NEW CONTENT  -->
<!-- 
  Note: See TailwindUI preview and TailwindCSS docs, they are used heavily
 -->

{% block content %}
{% load static %}
<div class="max-w-5xl mx-auto md:flex md:text-left block text-center justify-center text-left items-center py-24">
  <div class="mr-4 sm:my-6">
    <h2
      class="text-4xl tracking-loose font-extrabold text-gray-900 md:text-6xl"
    >
      Production<span class="text-blue-600">Graph</span>
    </h2>
    <p class="mx-auto text-gray-600 text-md lg:text-xl md:text-lg sm:text-md">
      A web service for estimating prices and labor times of commodities in the whole economy.
    </p>
    <div class="flex-1 pt-6 justify-center items-center">
      <button
        class="font-semibold text-md shadow bg-blue-500 hover:bg-blue-700 text-white py-3 px-8 rounded mr-2 focus:outline-none transition duration-150 ease-in-out"
        onclick="window.location.href='/products/'"
      >
        View Products
      </button>
	  {% if not request.user.is_authenticated %}
      <button
        class="font-semibold text-md shadow text-blue-600 hover:bg-gray-200 rounded py-3 px-8 rounded mr-2 focus:outline-none transition duration-150 ease-in-out"
        onclick="window.location.href='/login'"
      >
        Login
      </button>
	  {% endif %}
    </div>
  </div>

  <div class="md:mt-0 mt-4">
    <img src="{% static 'assets/stock-exchange-data-illustration/4027811.jpg' %}" />
  </div>
</div>

    <div class="bg-white">
        <div class="max-w-5xl mx-auto px-4 lg:px-8">
            <div class="text-center">
                <p class="text-base leading-6 font-semibold tracking-wide uppercase">Main Features</p>
                
            </div>

            <div class="mt-10">
                <div class="md:flex block justify-between md:space-x-6 text-center">
                    <div class="md:w-1/3 w-full rounded overflow-hidden shadow-lg p-6">
                      <h3 class="p-2 text-lg tracking-loose font-extrabold text-gray-900">Create your <span class="text-blue-600">products</span></h3>
                      <p class="text-gray-700">
						Enter the known direct costs and labor times of your economy's products
                      </p>
                    </div>
                    <div class="md:w-1/3 md:mt-0 mt-4 w-full rounded-md overflow-hidden shadow-lg p-6">
                      <h3 class="p-2 text-lg tracking-loose font-extrabold text-gray-900">Set your <span class="text-blue-600">dependencies</span></h3>
                      <p class="text-gray-700">
						Describe dependency relations between products to get an accurate estimate
                      </p>
                    </div>
                    <div class="md:w-1/3  md:mt-0 mt-4 w-full rounded overflow-hidden shadow-lg p-6">
                      <h3 class="p-2 text-lg tracking-loose font-extrabold text-gray-900">Model your <span class="text-blue-600">economy</span></h3>
                      <p class="text-gray-700">
						When all products and dependencies are entered, you'll be able to view accurate estimates
						of labor times and costs of products, with analytics
                      </p>
                    </div>
                    {% comment %} <img class="w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="https://images.unsplash.com/photo-1494959764136-6be9eb3c261e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80" alt=""> {% endcomment %}
                </div>
            </div>
            <div class="mt-12 grid grid-cols-2 divide-x divide-gray-400 py-20">
                <div class="flex text-left justify-center">
                    <h2 class="max-w-sm text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">
                    Let us handle all the
                    <br>
                        <span class="text-blue-600">tedious calculations!</span>
                    </h2>
                </div>
                <div class="flex text-left justify-center">
                    <p class="max-w-sm text-lg leading-7 text-gray-500">
                        Production graph will automatically re-calculate the virtual economy per item insertion and edit, 
                        and will alert you of data entry errors or economic crises in your dataset
                    </p>
                </div>

            </div>
        </div>
    </div>

{% endblock %}
