src/Tutorka/Bundle/CoreBundle/Resources/views/Teacher/becomeTeacher.html.twig line 1

{% extends "@TutorkaCore/layout/homepage_layout.html.twig" %}

{% trans_default_domain 'layout' %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('build/css/becomeTeacher.css') }}"
{% endblock %}

{% block content %}
    <div class="header-wrapper">
        <div class="container">
            <section class="row header-panel position-relative">
                <div class="col-md-12 col-lg-7 col-xl-8">
                    <h1 class="main-heading">{{ 'becomeTeacher.title'|trans }}</h1>
                    <h1 class="main-heading-mobile">{{ 'becomeTeacher.mobile.title'|trans }}</h1>
                    <p class="sub-heading-mobile">{{ 'becomeTeacher.mobile.subtitle'|trans }}</p>
                    <div class="header-buttons">
                        <a href="{{ path('register') }}" class="btn btn-secondary btn-radius btn-lg">{{ 'becomeTeacher.btnRegister.label'|trans }}</a>
                        <a href="#" class="btn btn-default btn-scroll click-and-scroll" data-target=".tutorka-benefits-wrapper">{{ 'becomeTeacher.btnShowMore.label'|trans }} &downarrow;</a>
                    </div>
                </div>
                <div class="col-md-12 col-lg-5 col-xl-4 study-graphic hidden-mobile">
                </div>
            </section>
        </div>
    </div>
    <section class="tutorka-benefits-wrapper">
        <h1 class="benefits-title">{{ 'becomeTeacher.benefits.title'|trans|raw }}</h1>
        <h2 class="benefits-mobile-title">{{ 'becomeTeacher.benefits.mobile.title'|trans }}</h2>
        <div class="container">
            <section class="row tutorka-benefits justify-content-center">
                <div class="col-sm-12 col-md-5 col-lg-5 col-xl-5 benefit-col benefit-first">
                    <img src="{{ asset('build/images/svg/icons/money.svg') }}" alt="Money" class="benefit-icon"/>
                    <h5 class="benefit-title">{{ 'becomeTeacher.benefit.first.title'|trans }}</h5>
                    <p class="benefit-description">{{ 'becomeTeacher.benefit.first.desc'|trans }}</p>
                </div>
                <div class="col-sm-12 col-md-5 col-lg-5 col-xl-5 benefit-col benefit-second">
                    <img src="{{ asset('build/images/svg/icons/star.svg') }}" alt="Money" class="benefit-icon"/>
                    <h5 class="benefit-title">{{ 'becomeTeacher.benefit.second.title'|trans }}</h5>
                    <p class="benefit-description">{{ 'becomeTeacher.benefit.second.desc'|trans }}</p>
                </div>
                <div class="w-100"></div>
                <div class="col-sm-12 col-md-5 col-lg-5 col-xl-5 benefit-col benefit-third">
                    <img src="{{ asset('build/images/svg/icons/calendar.svg') }}" alt="Money" class="benefit-icon"/>
                    <h5 class="benefit-title">{{ 'becomeTeacher.benefit.third.title'|trans }}</h5>
                    <p class="benefit-description">{{ 'becomeTeacher.benefit.third.desc'|trans }}</p>
                </div>
                <div class="col-sm-12 col-md-5 col-lg-5 col-xl-5 benefit-col benefit-fourth">
                    <img src="{{ asset('build/images/svg/icons/life-ring.svg') }}" alt="Money" class="benefit-icon"/>
                    <h5 class="benefit-title">{{ 'becomeTeacher.benefit.fourth.title'|trans }}</h5>
                    <p class="benefit-description">{{ 'becomeTeacher.benefit.fourth.desc'|trans }}</p>
                </div>
            </section>
            <div class="text-center my-5">
                <a href="{{ path('register') }}" class="btn btn-secondary btn-radius btn-lg">{{ 'becomeTeacher.btnRegister.label'|trans }}</a>
            </div>
        </div>
    </section>

    <div class="laptop-carousel-background">
        <section class="container laptop-carousel">
            <h2 class="section-title">{{ 'becomeTeacher.laptop.title'|trans|raw }}</h2>
            <div class="laptop-skeleton">
                <div id="carouselTestimonialControls" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img class="d-block w-100 laptop-image" src="{{ asset('build/images/screenshots/user_my_adverts.png') }}" alt="Moje inzeraty">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100 laptop-image" src="{{ asset('build/images/screenshots/user_teacher_profile.png') }}" alt="Profil lektora">
                        </div>
                    </div>
                    <a class="carousel-control-prev" href="#carouselTestimonialControls" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselTestimonialControls" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
        </section>
    </div>

    <section class="testimonial-wrapper container">
        <h2 class="section-title">{{ 'becomeTeacher.testimonial.title'|trans|raw }}</h2>
        {% set number = random(['first', 'second', 'third']) %}
        <div class="testimonial-box justify-content-center align-items-center row no-gutters">
            <div class="text-center col-md-5 col-lg-4">
                <img src="{{ asset('build/images/testimonial/testimonial-' ~ number ~ '.png') }}" alt="Testimonial" class="testimonial-image">
            </div>
            <div class="text-left col-md-7 col-lg-8">
                <h6>{{ ('becomeTeacher.testimonial.' ~ number ~ '.userName')|trans }}</h6>
                <p>{{ ('becomeTeacher.testimonial.' ~ number ~ '.text')|trans }}</p>
            </div>
        </div>
        <div class="text-center my-5">
            <a href="{{ path('register') }}" class="btn btn-secondary btn-radius btn-lg">{{ 'becomeTeacher.btnWantRegister.label'|trans }}</a>
        </div>
    </section>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('build/js/page/homepage.js') }}"></script>
{% endblock %}

{% block footer %}
    {{ include('@TutorkaCore/footer.html.twig') }}
{% endblock %}