{% extends 'portal/base.html' %}
{% load static %}
{% 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"
                alt="Male teacher helping young female student"
                ></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"
                alt="Two young boys playing on a laptop"
                ></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 660,000 registered users across the world.</p>
        </div>
    </div>

    <div class="background container">
        <div class="d-flex justify-content-end">
            <a class="button button--primary button-right-arrow" href="{% url 'about' %}">About us</a>
        </div>
    </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, Computer Science Teacher" 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, Head of ICT" 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, ICT teacher" 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>
<section class="background container">
    <h3>Want to run a Code for Life coding club?</h3>
        <p class="text-left">
            Take a look at our two club packs that we have put together using our Rapid Router resources. These are fast-paced, session based
            clubs that can be run by anyone keen to help people learn to code. There are guides and resource links with printable cerificates
            for those that complete the course.
        </p>
        <div class="d-flex justify-content-end">
            <a id="find_out_more" href="{% url 'codingClub' %}" class="button button--primary button--icon">
                Find out more<span class="iconify" data-icon="mdi:chevron-right"></span>
            </a>
        </div>
</section>

{% endblock content %}
