templates/Content/Public/About/index.html.twig line 1

{% extends 'base.html.twig' %}

{% block content %}
    <div class="content">
        <div class="row about-us">
            <div class="about-us-box">
                <div class="about-us-text">
                    <img src="{{ asset('assets/static/blue/logo-white.png') }}" alt="">
                    <h3>{{ 'about.reliable-and-safe'|trans }}</h3>
                    <h1>{{ 'about.for-every-problem'|trans }}</h1>
                </div>
            </div>

            <div class="about-us-image-box">
                <img src="{{ asset('assets/static/about-hero-2.png') }}" alt="People working on computer">
            </div>
        </div>

        <div class="row">
            <div class="our-mission">
                <h2>{{ 'about.our-mission'|trans }}</h2>
                <div class="arrow-tilted">
                    <img src="{{ asset('assets/static/arrow-tilted.svg') }}" alt="People working on computer">
                </div>
                <div class="mission">
                    <p>{{ 'about.mission'|trans }}</p>
                    <p class="text-color-grey">{{ 'about.vision'|trans }}</p>
                </div>
            </div>
        </div>

        {% include 'partials/components/icon_content.html.twig' %}

        <div class="row team">
            <h2>{{ 'about.team.gets-things-going'|trans }}</h2>
            <p class="text-color-grey">{{ 'about.team.description'|trans }}</p>
        </div>

        <div class="row">
            <div class="team-member">
                <img src="{{ asset('/assets/static/team-member1.png') }}" class="team-member-img" alt="Team Member">
                <a href="#"><img class="in-white" src="{{ asset('/assets/static/linkedin-white.svg') }}" alt="Linkedin"></a>
                <h3>{{ 'about.team.vinko'|trans }}</h3>
                <p>{{ 'about.team.founder-director'|trans }}</p>
            </div>
            <div class="team-member">
                <img src="{{ asset('/assets/static/team-member2.png') }}" class="team-member-img" alt="Team Member">
                <a href="#"><img class="in-white" src="{{ asset('/assets/static/linkedin-white.svg') }}" alt="Linkedin"></a>
                <h3>{{ 'about.team.goran'|trans }}</h3>
                <p>{{ 'about.team.founder-director'|trans }}</p>
            </div>
            <div class="team-info-card">
                <img src="{{ asset('/assets/static/team-members-info.png') }}" class="info-img" alt="info">
                <div class="description">
                    <p>{{ 'about.team.info.description'|trans }}</p>
                    <div class="bottom-text">
                        <img class="in-black" src="{{ asset('/assets/static/linkedin-black.svg') }}" alt="black in">
                        <a href="#">{{ 'about.team.info.optima-group'|trans }}<img src="{{ asset('assets/static/arrow-button.svg') }}" alt="Arrow white"></a>
                    </div>
                </div>
            </div>
        </div>

        <div class="row team-members">
            {% set logos = {
                'Team 1': 'assets/static/team.png',
                'Team 2': 'assets/static/team1.png',
                'Managing team': 'assets/static/team2.png',
                'Team 3': 'assets/static/team3.png',
            } %}
            <div class="slider">
                <div id="optimaSlider" class="carousel carousel-fade slide" data-ride="carousel">
                    <div class="carousel-inner">
                        {% for title, logo in logos %}
                            <div class="carousel-item{{ loop.first ? ' active' : '' }}">
                                <img class="d-block" src="{{ asset(logo) }}" alt="{{ title }}">
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>

        <div class="row team">
            <div class="headline">
                <h2>{{ 'about.complete-coverage'|trans }}</h2>
            </div>
            <div class="row icon-section">
                <div class="optima-serbia">
                    <img src="{{ asset('assets/static/logo-serbia.png') }}" alt="Optima Serbia">
                    <h2>Optima</h2>
                    <p class="text-color-grey">{{ 'about.optima-description'|trans }}</p>
                </div>

                <div class="optima-bosnia">
                    <img src="{{ asset('assets/static/logo-bosnia.png') }}" alt="Optima Bosnia">
                    <h2>Vig Lager</h2>
                    <p class="text-color-grey">{{ 'about.vig-lager-description'|trans }}</p>
                </div>

                <div class="optima-slovenia">
                    <img src="{{ asset('assets/static/logo-slovenia.png') }}" alt="Optima Slovenia">
                    <h2>Optima SI</h2>
                    <p class="text-color-grey">{{ 'about.optima-si-description'|trans }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="homepage-map minus-top-margin">
        <img src="{{ asset('assets/static/map.svg') }}" alt="optima map">
    </div>
{% endblock %}