{% extends 'portal/base.html' %}
{% load staticfiles %}
{% load app_tags %}

{% block css %}
{{ block.super }}
{% endblock css %}

{% block scripts %}
{{ block.super }}
{% endblock scripts %}

{% block pageID %}id='homeWrapper'{% endblock %}

{% block content %}
{{ block.super }}

<div id="home_page"></div>

<div class="row row--flex">
    <section class="banner--homepage banner--homepage--teacher col-sm-6">
        <div class="banner col-sm-7">
            <a href="{% url 'teach' %}" class="educate-homepage"></a>
            <h1 class="banner__text--primary"><a href="{% url 'teach' %}">Educate</a></h1>
            <p>Helping teachers and families to inspire the next generation of computer scientists.</p>
            <a href="{% url 'teach' %}" class="button button--big button-primary button--primary--general-educate">Learn more</a>
        </div>
    </section>
    <section class="banner--homepage banner--homepage--student col-sm-6">
        <div class="banner col-sm-7">
            <a href="{% url 'play' %}" class="play-homepage"></a>
            <h1 class="banner__text--primary"><a href="{% url 'play' %}">Play</a></h1>
            <p>Anyone can learn how to code. We will help you learn how. It&rsquo;s fun, free and easy.</p>
            <a href="{% url 'play' %}" class="button button--big button-primary button--primary--general-play">Get started</a>
        </div>
    </section>
</div>

<section>
    <h3>Giving everyone the ability to shape technology&rsquo;s future</h3>
    <div class="col-sm-8 col-center">
        <div class="row row--regular homepage-info">
            <div class="col-sm-3">
                <img title="13%" alt="13% graph" src="{% static 'portal/img/icon_13.png' %}">
                <p class="col-sm-11 col-center"><strong>Just 13%</strong> of computer scientists are women, we want to change that.</p>
            </div>
            <div class="col-sm-3">
                <img title="Controller" alt="Controller image" src="{% static 'portal/img/icon_game.png' %}">
                <p class="col-sm-11 col-center">Gamification helps children <strong>learn whilst having fun!</strong></p>
            </div>
            <div class="col-sm-3">
                <img title="Free" alt="Free image" src="{% static 'portal/img/icon_free.png' %}">
                <p class="col-sm-11 col-center">That&rsquo;s right, <strong>free forever</strong>, that&rsquo;s our gift to you! We&rsquo;re also
                    <strong><a target="_blank" href="https://github.com/ocadotechnology/codeforlife-portal">Open Source</a></strong>.</p>
            </div>
            <div class="col-sm-3">
                <img title="Planet" alt="Planet image" src="{% static 'portal/img/icon_globe.png' %}">
                <p class="col-sm-11 col-center">Code for Life has over <strong>100,000 users</strong> across the world.</p>
            </div>
        </div>
    </div>

    <div class="background">
        <a class="button button--big button--primary--navigation" href="{% url 'about' %}">Find out more about us</a>
    </div>

</section>

<section class="background background--primary">
    <h3>Why you&rsquo;ll love Code for Life</h3>
    <h4 class="col-sm-6 col-center">Don&rsquo;t just take our word for it, here are some lovely quotes from our fabulous teacher friends:</h4>

    <div class="row row--regular">
        <div class="col-sm-9 col-center">
            <div class="col-sm-4">
                <img title="Mandy" alt="Mandy portrait" class="portrait" src="{% static 'portal/img/teacher1.png' %}">
                <blockquote>
                    <p class="says">The kids love it! They all want to move onto the next level, they want to be further on than anyone else.</p>
                    <p>Mandy, ICT Teacher</p>
                </blockquote>
            </div>
            <div class="col-sm-4">
                <img title="Rob" alt="Rob portrait" class="portrait" src="{% static 'portal/img/teacher2.png' %}">
                <blockquote>
                    <p class="says">You can hit all of the computing curriculum, in a structured way. It is perfect for teachers who are struggling.</p>
                    <p>Rob, ICT Teacher</p>
                </blockquote>
            </div>
            <div class="col-sm-4">
                <img title="Dale" alt="Dale portrait" class="portrait" src="{% static 'portal/img/teacher3.png' %}">
                <blockquote>
                    <p class="says">When I came across Code for Life, I thought, yeah, that fits in well, but to have the assessment, that&rsquo;s great!</p>
                    <p>Dale, IT Technician</p>
                </blockquote>
            </div>
        </div>
    </div>
</section>

{% endblock content %}
