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

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

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

{% block meta %}
    <meta name="description" content='{{ "technologies_intro_description"|trans|capitalize }}'>
    <meta name="keywords" content='{{ "framework"|trans }},{{ "backend"|trans }},{{ "ux_ui_design"|trans }},{{ "database"|trans }},{{ "task_tools"|trans }}'>
{% 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/" target="_blank" class="bundle-item"><img src="{{asset('img/icon/technologies/symfony.png')}}" alt="Symfony"><span>Symfony</span></a>
                            <a href="https://nestjs.com/" target="_blank" class="bundle-item"><img src="{{asset('img/icon/technologies/nestjs.png')}}" alt="NestJS"><span>NestJS</span></a>
                            <a href="https://angularjs.org/" target="_blank" class="bundle-item"><img src="{{asset('img/icon/technologies/angular.png')}}" alt="Angular"><span>Angular</span></a>
                            <a href="https://react.dev/" target="_blank" class="bundle-item"><img src="{{asset('img/icon/technologies/react.png')}}" alt="React"><span>React</span></a>
                        </div>
                    </div>
                    <h2>{{ "framework"|trans }}</h2>
                </div>
                <div class="partner-item">
                    <div class="bundle-wrapper">
                        <div class="bundle">
                            <a class="bundle-item"><img src="{{asset('img/icon/technologies/javascript.png')}}" alt="Javascript"><span>Javascript</span></a>
                            <a href="https://nodejs.org/" target="_blank" class="bundle-item"><img src="{{asset('img/icon/technologies/node.png')}}" alt="Node.js"><span>Node.js</span></a>
                            <a href="https://www.php.net/" target="_blank" class="bundle-item"><img src="{{asset('img/icon/technologies/php.png')}}" alt="PHP"></a>
                        </div>
                    </div>
                    <h2>{{ "backend"|trans }}</h2>
                </div>
                <div class="partner-item">
                    <div class="bundle-wrapper">
                        <div class="bundle">
                            <a href="https://www.adobe.com/tr/products/photoshop.html" target="_blank" class="bundle-item"><img src="{{asset('img/icon/technologies/adobephotoshop.png')}}" alt="Adobe Photoshop"><span>Adobe Photoshop</span></a>
                            <a href="https://www.adobe.com/tr/products/illustrator.html" target="_blank" class="bundle-item"><img src="{{asset('img/icon/technologies/adobeillustrator.png')}}" alt="Adobe Illustrator"><span>Adobe Illustrator</span></a>
                            <a href="https://adobexdplatform.com/" target="_blank" class="bundle-item"><img src="{{asset('img/icon/technologies/adobexd.png')}}" alt="Adobe XD"><span>Adobe XD</span></a>
                        </div>
                    </div>
                    <h2>{{ "ux_ui_design"|trans }}</h2>
                </div>
                <div class="partner-item">
                    <div class="bundle-wrapper">
                        <div class="bundle">
                            <a href="https://www.mongodb.com/" target="_blank" class="bundle-item"><img src="{{asset('img/icon/technologies/mongodb.png')}}" alt="MongoDB"><span>MongoDB</span></a>
                            <a href="https://redis.io/" target="_blank" class="bundle-item"><img src="{{asset('img/icon/technologies/redis.png')}}" alt="Redis"><span>Redis</span></a>
                            <a href="https://www.mysql.com/" target="_blank" class="bundle-item"><img src="{{asset('img/icon/technologies/mysql.png')}}" alt="MySQL"></a>
                        </div>
                    </div>
                    <h2>{{ "database"|trans }}</h2>
                </div>
                <div class="partner-item">
                    <div class="bundle-wrapper">
                        <div class="bundle">
                            <a href="https://trello.com/" target="_blank" class="bundle-item"><img src="{{asset('img/icon/technologies/trello.png')}}" alt="Trello"></a>
                            <a href="https://www.atlassian.com/software/jira" target="_blank" class="bundle-item"><img src="{{asset('img/icon/technologies/jira.png')}}" alt="Jira"></a>
                        </div>
                    </div>
                    <h2>{{ "task_tools"|trans }}</h2>
                </div>
            </div>
        </div>
    </div>
    <div class="section-wrapper steps-wrapper">
        <div class="content-section steps">
            <div class="content-title-wrapper">
                <h2 class="content-title">{{ "technology_steps_title"|trans|title }}</h2>
            </div>
            <div class="step-item flex justify-content-start">
                <div class="step-img"><img src="{{asset('img/technologies/step-1.webp')}}"></div>
                <div class="step-content">
                    <h3 class="step-title">{{"technology_step_1_title"|trans|title}}</h3>
                    <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/technologies/step-2.webp')}}"></div>
                <div class="step-content">
                    <h3 class="step-title">{{ "technology_step_2_title"|trans|title }}</h3>
                    <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/technologies/step-3.webp')}}"></div>
                <div class="step-content">
                    <h3 class="step-title">{{ "technology_step_3_title"|trans|title }}</h3>
                    <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/technologies/step-4.webp')}}"></div>
                <div class="step-content">
                    <h3 class="step-title">{{ "technology_step_4_title"|trans|title }}</h3>
                    <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/technologies/step-5.webp')}}"></div>
                <div class="step-content">
                    <h3 class="step-title">{{ "technology_step_5_title"|trans|title }}</h3>
                    <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 %}