{% extends "@TutorkaCore/layout/homepage_layout.html.twig" %}
{% trans_default_domain 'layout' %}
{% block stylesheets %}
{{ parent() }}
<link rel="stylesheet" href="{{ asset('build/css/homepage.css') }}"
{% endblock %}
{% block content %}
<div class="search-panel-wrapper">
<div class="container">
<section class="row search-panel position-relative">
<div class="col-md-12 col-lg-7 col-xl-8">
<h1 class="main-heading">{{ 'homepage.title'|trans }}</h1>
<h1 class="main-heading-mobile">{{ 'homepage.mobile.title'|trans }}</h1>
<p class="sub-heading-mobile">{{ 'homepage.mobile.subtitle'|trans }}</p>
<div class="col-sm-12 col-md-10 col-lg-10 col-xl-10 search-form">
{{ form_start(form) }}
<div class="form-group form-group-lg row m-0">
<div class="col-9 col-md-5 px-0">
{{ form_widget(form.subject, {'attr': {'class': 'autocomplete-subject subject-input'}}) }}
</div>
<div class="col-md-5 px-0 hidden-small-mobile">
{{ form_widget(form.city, {'attr': {'class': 'autocomplete-city city-input'}}) }}
</div>
<div class="col-3 col-md-2 px-0">
{{ form_widget(form.submit, {'attr': {'class': 'btn btn-secondary btn-radius btn-block search-button'}}) }}
</div>
</div>
{{ form_end(form) }}
</div>
</div>
<div class="col-md-12 col-lg-5 col-xl-4 study-graphic hidden-mobile">
</div>
</section>
</div>
</div>
<div class="tutorka-steps-wrapper">
<h1 class="mobile-title">{{ 'homepage.steps.title'|trans }}</h1>
<div class="container">
<section class="row tutorka-steps">
<div class="col-sm-12 col-md-4 col-lg-4 col-xl-4 step-col">
<a href="{{ path('register') }}">
<img src="{{ asset('build/images/svg/homepage/tutorka_step_1.svg') }}" alt="Krok 1"/>
<h5 class="step-title">{{ 'homepage.step.first.title'|trans }}</h5>
</a>
</div>
<div class="col-sm-12 col-md-4 col-lg-4 col-xl-4 step-col">
<a href="{{ path('advert_list') }}">
<img src="{{ asset('build/images/svg/homepage/tutorka_step_2.svg') }}" alt="Krok 2"/>
<h5 class="step-title">{{ 'homepage.step.second.title'|trans }}</h5>
</a>
</div>
<div class="col-sm-12 col-md-4 col-lg-4 col-xl-4 step-col">
<img src="{{ asset('build/images/svg/homepage/tutorka_step_3.svg') }}" alt="Krok 3"/>
<h5 class="step-title">{{ 'homepage.step.third.title'|trans }}</h5>
</div>
</section>
<section class="row text-divider">
<div class="col-12">
<h6 class="upper-title">{{ 'homepage.bestTeachers.title'|trans }}</h6>
<h1 class="main-title">{{ 'homepage.bestTeachers.subtitle'|trans }}</h1>
</div>
</section>
</div>
</div>
<section class="number-divider">
<div class="row container mx-auto">
<div class="col-12 col-sm-6 col-md-3">
<h1 class="main-title">{{ 'homepage.numbers.first.number'|trans }}</h1>
<p class="sub-title">{{ 'homepage.numbers.first.title'|trans }}</p>
</div>
<div class="col-12 col-sm-6 col-md-3">
<h1 class="main-title">{{ 'homepage.numbers.second.number'|trans }}</h1>
<p class="sub-title">{{ 'homepage.numbers.second.title'|trans }}</p>
</div>
<div class="col-12 col-sm-6 col-md-3">
<h1 class="main-title">{{ 'homepage.numbers.third.number'|trans }}</h1>
<p class="sub-title">{{ 'homepage.numbers.third.title'|trans }}</p>
</div>
<div class="col-12 col-sm-6 col-md-3">
<h1 class="main-title">{{ 'homepage.numbers.fourth.number'|trans }}</h1>
<p class="sub-title">{{ 'homepage.numbers.fourth.title'|trans }}</p>
</div>
</div>
</section>
<div class="container">
<section class="row best-teachers">
{% for teacher in bestTeachers %}
<div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-3">
{{ include('@TutorkaCore/Lander/teacherCard.inner.html.twig', {'user': teacher}) }}
</div>
{% endfor %}
</section>
</div>
<div class="popular-search-background">
<section class="container popular-subjects">
<h2 class="section-title">{{ 'homepage.popularSubjects.title'|trans|raw }}</h2>
<div class="row justify-content-center">
{% for subject in popularSubjects %}
<div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-4">
{{ include('@TutorkaCore/Lander/subjectCard.inner.html.twig', {'subjectData': subject}) }}
</div>
{% endfor %}
</div>
<a href="{{ path('advert_list') }}" class="btn btn-secondary btn-radius btn-lg mt-4">{{ 'btn.showAllOffers.label'|trans({}, 'forms') }}</a>
</section>
</div>
<div class="container">
<section class="row become-teacher">
<div class="col-sm-12 col-md-6">
<h1 class="main-title">{{ 'homepage.becomeTeacher.title'|trans }}</h1>
<p class="description">{{ 'homepage.becomeTeacher.subtitle'|trans }}</p>
<a href="{{ path('become_teacher') }}" class="btn btn-secondary btn-radius btn-lg btn-become-teacher">{{ 'btn.beATeacher.label'|trans({}, 'forms') }}</a>
</div>
<div class="col-sm-12 col-md-6 text-right screenshot-col">
<img src="{{ asset('build/images/screenshots/user_dashboard.png') }}" alt="Dashboard" class="screenshot"/>
</div>
</section>
</div>
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script src="{{ asset('build/js/page/homepage.js') }}"></script>
{% endblock %}
{% block footer %}
{{ include('@TutorkaCore/footer.html.twig') }}
{% endblock %}