{% extends 'base.html.twig' %}
{% set pageTitle = "about_us"|trans|capitalize %}

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

{% block content %}
    {% include "components/_intro.html.twig" with {options: {
        title: "about_us_intro_title"|trans|title,
        description: "about_us_intro_description"|trans,
        skip: ".about-wrapper",
        bg: false,
        img: false
    }} %}
    <div class="section-wrapper about-wrapper">
        <div class="content-section about">
            <div class="content-title-wrapper">
                <span class="content-title">{{"begining"|trans|title}}</span>
            </div>
            <div class="content-inner">
                <div class="content-img"><img src="{{asset('img/about/about-1.webp')}}" alt=""></div>
                {% include 'components/_text-container.html.twig' with {content: {
                    title: 'about_us_text_1_title'|trans|title,
                    description: 'about_us_text_1_description'|trans
                }} %}
            </div>
        </div>
    </div>
    <div class="section-wrapper about-wrapper">
        <div class="content-section about">
            <div class="content-title-wrapper">
                <span class="content-title">{{"our_focus"|trans|title}}</span>
            </div>
            <div class="content-inner">
                {% include 'components/_text-container.html.twig' with {content: {
                    title: 'about_us_text_2_title'|trans|title,
                    description: 'about_us_text_2_description'|trans
                }} %}
                <div class="content-img"><img src="{{asset('img/about/about-2.jpg')}}" alt=""></div>
            </div>
        </div>
    </div>
    <div class="section-wrapper about-wrapper">
        <div class="content-section about">
            <div class="content-title-wrapper">
                <span class="content-title">{{"innovation"|trans|title}}</span>
            </div>
            <div class="content-inner">
                <div class="content-img"><img src="{{asset('img/about/about-3.jpeg')}}" alt=""></div>
                {% include 'components/_text-container.html.twig' with {content: {
                    title: 'about_us_text_3_title'|trans,
                    description: 'about_us_text_3_description'|trans,
                    list: [
                        {(locale):'about_us_text_3_list_1'|trans},
                        {(locale):'about_us_text_3_list_2'|trans},
                        {(locale):'about_us_text_3_list_3'|trans},
                        {(locale):'about_us_text_3_list_4'|trans}
                    ]
                }} %}
            </div>
        </div>
    </div>
    {% include "components/_locations-slider.html.twig" %}
    <div class="section-wrapper about-wrapper">
        <div class="content-section about">
            <div class="content-title-wrapper">
                <span class="content-title">{{"services"|trans|title}}</span>
            </div>
            <div class="content-inner">
                {% include 'components/_text-container.html.twig' with {content: {
                    title: 'about_us_text_4_title'|trans|title,
                    description: 'about_us_text_4_description'|trans,
                }} %}
                {% include 'components/_ddbox-container.html.twig' with {
                    ddboxItems: [
                        {
                            title: {(locale):'about_us_ddbox_web_title'|trans|title},
                            content: {(locale):'about_us_ddbox_web_content'|trans},
                            link: path('service_detail', {'alias': 'web'})
                        },
                        {
                            title: {(locale):'about_us_ddbox_software_title'|trans|title},
                            content: {(locale):'about_us_ddbox_software_content'|trans},
                            link: path('service_detail', {'alias': 'sogtware'})
                        },
                        {
                            title: {(locale):'about_us_ddbox_mobile_title'|trans|title},
                            content: {(locale):'about_us_ddbox_mobile_content'|trans},
                            link: path('service_detail', {'alias': 'mobile'})
                        },
                        {
                            title: {(locale):'about_us_ddbox_commerce_title'|trans|title},
                            content: {(locale):'about_us_ddbox_commerce_content'|trans},
                            link: path('service_detail', {'alias': 'commerce'})
                        },
                        {
                            title: {(locale):'about_us_ddbox_mvp_title'|trans|title},
                            content: {(locale):'about_us_ddbox_mvp_content'|trans},
                            link: path('service_detail', {'alias': 'mvp'})
                        },
                        {
                            title: {(locale):'about_us_ddbox_saas_title'|trans|title},
                            content: {(locale):'about_us_ddbox_saas_content'|trans},
                            link: path('service_detail', {'alias': 'saas'})
                        }
                    ]
                } %}
            </div>
        </div>
    </div>
    {% include "components/_blog-section.html.twig" %}
    {% include "components/_intern-section.html.twig" %}
{% endblock %}