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

{% set pageTitle = "our_technologies"|trans|title %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('styles/technologies.css') }}">
{% endblock %}

{% block content %}

    {% include "components/_intro.html.twig" with {options: {
        title: pageTitle,
        description: "technologies_intro_description"|trans|capitalize,
        skip: ".partners",
        img: false
    }} %}
    <div class="section-wrapper partners-wrapper">
        <div class="content-section partners">
            <div class="partners-content">
                <div class="partner-item">
                    <div class="bundle-wrapper">
                        <div class="bundle">
                            <a href="https://symfony.com/" class="bundle-item"><img src="{{asset('img/icon/technologies/symfony.png')}}" alt="Symfony">Symfony</a>
                            <a href="https://vuejs.org/" class="bundle-item"><img src="{{asset('img/icon/technologies/vue.png')}}" alt="Vue.js">Vue.js</a>
                            <a href="https://angularjs.org/" class="bundle-item"><img src="{{asset('img/icon/technologies/angular.png')}}" alt="Angular">Angular</a>
                            <a href="https://react.dev/" class="bundle-item"><img src="{{asset('img/icon/technologies/react.png')}}" alt="React">React</a>
                        </div>
                    </div>
                    <span>{{"framework"|trans}}</span>
                </div>
                <div class="partner-item">
                    <div class="bundle-wrapper">
                        <div class="bundle">
                            <a href="" class="bundle-item"><img src="{{asset('img/icon/technologies/javascript.png')}}" alt="">Javascript</a>
                            <a href="" class="bundle-item"><img src="{{asset('img/icon/technologies/node.png')}}" alt="">Node.js</a>
                            <a href="" class="bundle-item"><img src="{{asset('img/icon/technologies/php.png')}}" alt="">php</a>
                        </div>
                    </div>
                    <span>{{"backend"|trans}}</span>
                </div>
                <div class="partner-item">
                    <div class="bundle-wrapper">
                        <div class="bundle">
                            <a href="" class="bundle-item"><img src="{{asset('img/icon/technologies/adobephotoshop.png')}}" alt="">Adobe Photoshop</a>
                            <a href="" class="bundle-item"><img src="{{asset('img/icon/technologies/adobeillustrator.png')}}" alt="">Adobe Illustrator</a>
                            <a href="" class="bundle-item"><img src="{{asset('img/icon/technologies/adobexd.png')}}" alt="">Adobe XD</a>
                        </div>
                    </div>
                    <span>{{"ux_ui_design"|trans}}</span>
                </div>
                <div class="partner-item">
                    <div class="bundle-wrapper">
                        <div class="bundle">
                            <a href="" class="bundle-item"><img src="{{asset('img/icon/technologies/mangodb.png')}}" alt="">MangoDB</a>
                            <a href="" class="bundle-item"><img src="{{asset('img/icon/technologies/redis.png')}}" alt="">Redis</a>
                            <a href="" class="bundle-item"><img src="{{asset('img/icon/technologies/mysql.png')}}" alt="">MySQL</a>
                        </div>
                    </div>
                    <span>{{"database"|trans}}</span>
                </div>
                <div class="partner-item">
                    <div class="bundle-wrapper">
                        <div class="bundle">
                            <a href="" class="bundle-item"><img src="{{asset('img/icon/technologies/trello.png')}}" alt="">Trello</a>
                            <a href="" class="bundle-item"><img src="{{asset('img/icon/technologies/jira.png')}}" alt="">Jira</a>
                        </div>
                    </div>
                    <span>{{"task_tools"|trans}}</span>
                </div>
            </div>
        </div>
    </div>
    <div class="section-wrapper steps-wrapper">
        <div class="content-section steps">
            <div class="content-title-wrapper">
                <span class="content-title">{{"technology_steps_title"|trans|title}}</span>
            </div>
            <div class="step-item flex justify-content-start">
                <div class="step-img"><img src="{{asset('img/partners/step-1.jpg')}}"></div>
                <div class="step-content">
                    <span class="step-title">{{"technology_step_1_title"|trans|title}}</span>
                    <span class="step-description">{{"technology_step_1_description"|trans|capitalize}}</span>
                </div>
            </div>
            <div class="step-item flex justify-content-end">
                <div class="step-img"><img src="{{asset('img/partners/step-2.jpg')}}"></div>
                <div class="step-content">
                    <span class="step-title">{{"technology_step_2_title"|trans|title}}</span>
                    <span class="step-description">{{"technology_step_2_description"|trans|capitalize}}</span>
                </div>
            </div>
            <div class="step-item flex justify-content-start">
                <div class="step-img"><img src="{{asset('img/partners/step-3.jpg')}}"></div>
                <div class="step-content">
                    <span class="step-title">{{"technology_step_3_title"|trans|title}}</span>
                    <span class="step-description">{{"technology_step_3_description"|trans|capitalize}}</span>
                </div>
            </div>
            <div class="step-item flex justify-content-end">
                <div class="step-img"><img src="{{asset('img/partners/step-4.jpg')}}"></div>
                <div class="step-content">
                    <span class="step-title">{{"technology_step_4_title"|trans|title}}</span>
                    <span class="step-description">{{"technology_step_4_description"|trans|capitalize}}</span>
                </div>
            </div>
            <div class="step-item flex justify-content-start">
                <div class="step-img"><img src="{{asset('img/partners/step-5.jpg')}}"></div>
                <div class="step-content">
                    <span class="step-title">{{"technology_step_5_title"|trans|title}}</span>
                    <span class="step-description">{{"technology_step_5_description"|trans|capitalize}}</span>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script src="{{asset('js/offices.js')}}"></script>
{% endblock %}