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

{% block content %}
<div id="home_page"></div>

<div class="row row--flex mx-0">
    <div class="banner--homepage banner--homepage--teacher col-sm-6">
        <div class="banner col-sm-11">
            <div class="banner__item">
                <a href="{% url 'teach' %}" class="educate-homepage"></a>
            </div>
            <div class="banner-home-content">
                <div class="banner-home-text">
                    <h1><a href="{% url 'teach' %}">Educate</a></h1>
                    <p>Helping teachers and families to inspire the next generation of computer scientists.</p>
                </div>
                <div class="banner-home-button">
                    <a href="{% url 'teach' %}" class="button button--home button-right-arrow">
                        Learn more
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="banner--homepage banner--homepage--student col-sm-6">
        <div class="banner col-sm-11">
            <div class="banner__item">
                <a href="{% url 'play' %}" class="play-homepage"></a>
            </div>
            <div class="banner-home-content">
                <div class="banner-home-text">
                    <h1><a href="{% url 'play' %}">Play</a></h1>
                    <p>Anyone can learn how to code. We will help you learn how. It's fun, free and easy.</p>
                </div>
                <div class="banner-home-button">
                    <a href="{% url 'play' %}" class="button button--home button-right-arrow">
                        Get started
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<section>
    <h4 class="background">Giving everyone the ability to shape technology's future</h4>
    <div class="col-sm-10 col-center image-row">
        <div class="col-sm-3">
            <img title="16%" alt="16% graph" src="{% static 'portal/img/icon_piechart.png' %}">
            <p class="col-sm-11 col-center">Just 16% of university computer science graduates (2018/19) in the UK were
                women<a href="https://www.wisecampaign.org.uk/statistics/core-stem-graduates-2019/">*</a>, we want to change that.</p>
        </div>
        <div class="col-sm-3">
            <img title="Controller" alt="Controller image" src="{% static 'portal/img/icon_controller.png' %}">
            <p class="col-sm-11 col-center">Gamification helps children learn whilst having fun!</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's right, free forever: our gift to you! We're also
                Open Source.</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 350,000 registered users across the world.</p>
        </div>
    </div>

    <div class="background">
        <a class="button button--primary button-right-arrow" href="{% url 'about' %}">About us</a>
    </div>

</section>

<section class="background background--primary">
    <h3>Why you'll love Code for Life</h3>
    <div class="col-sm-6 col-center subtitle1">Don't just take our word for it, here are some lovely quotes from our fabulous teacher friends.
        Interested in getting involved? <a href="{% url 'getinvolved' %}">Get in touch</a>.
    </div>

    <div class="col-sm-10 col-center image-row">
        <div class="col-sm-4">
            <img title="Reuben" alt="Reuben portrait" class="portrait" src="{% static 'portal/img/reuben.png' %}">
            <blockquote>
                <p class="says">“My year 10's have been using Rapid Router to develop their Python skills and it has been a great transition into the Python IDE."</p>
                <p><small><b>Reuben</b>
                <br />Computer Science teacher
                </small></p>
            </blockquote>
        </div>
        <div class="col-sm-4">
            <img title="Sian" alt="Sian portrait" class="portrait" src="{% static 'portal/img/sian.png' %}">
            <blockquote>
                <p class="says">“I like the slow build of layers of block coding that allows students to work at their own pace and fully embed their understanding of the different blocks."</p>
                <p><small><b>Sian</b>
                <br />Head of ICT
                </small></p>
            </blockquote>
        </div>
        <div class="col-sm-4">
            <img title="Rob" alt="Rob portrait" class="portrait" src="{% static 'portal/img/rob.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><small><b>Rob</b>
                <br />ICT teacher
                </small></p>
            </blockquote>
        </div>
    </div>
</section>

{% endblock content %}