<div id="about">
    <div class="about-wrapper">

        @if ($blocks->has("about_row"))

            <div class="about-first-row">

                {{--KEY VALUES BLOCK--}}
                <div class="key-values-block">
                    <div class="key-values-content">
                        @if ($blocks->has("key_values_block"))
                            <h2 class="sub-title animation-fade">{{ $blocks->get("key_values_block")->translation->name }}</h2>
                            {{--{{ $blocks->get("key_values_block")->translation->description }}--}}
                            <ul>
                                <li class="animation-fade">
                                    <span class="icon">
                                        <img src="/img/icons/maatwerk_icon.svg" />
                                    </span>
                                    @lang('translations.tailer_made')
                                </li>
                                <li class="animation-fade">
                                    <span class="icon">
                                        <img src="/img/icons/kostenrisico_icon.svg" />
                                    </span>
                                    @lang('translations.no_cost_risk')
                                </li>
                                <li class="animation-fade">
                                    <span class="icon">
                                        <img src="/img/icons/globe_icon_blue.svg" />
                                    </span>
                                    @lang('translations.international_network')
                                </li>
                            </ul>
                        @endif
                    </div>
                </div>


                {{--ABOUT INTRO BLOCK--}}
                <div class="about-intro-wrapper">
                    <div class="about-intro-block">
                        <div class="about-intro-block-content">
                            @if ($blocks->has("about_intro_block"))
                                    <h2>{{ $blocks->get("about_intro_block")->translation->name }}</h2>
                                    {{ $blocks->get("about_intro_block")->translation->description }}

                                    <a href="#"><div class="btn btn-secondary btn-dark internalScroll" data-href="contact">@lang('translations.appointment')<span class="arrow-icon-down"><img src="/img/icons/arrow-blue.svg"></span></div></a>
                            @endif
                        </div>
                        <div class="scroller internalScroll" data-href="services"><img src="/img/icons/arrow.svg"></div>
                    </div>

                    <div class="image-background">
                    </div>
                </div>

                {{--FLOATING BLOCK || ABOUT US--}}
                <div class="about-floating-block">
                    <div class="about-floating-block-content">
                        @if ($blocks->has("about_floating_block"))
                            <div class="floating-block-title">
                                <span class="icon">
                                    <img src="/img/icons/over_ons_icon.svg" />
                                </span>
                                <h2 class="sub-title">{{ $blocks->get("about_floating_block")->translation->name }}</h2>
                            </div>

                            {{ $blocks->get("about_floating_block")->translation->description }}

                            <a href="@lang('translations.vacancyButton.route')" class="btn btn-secondary btn-light internalScroll">@lang('translations.vacancyButton.text')<span class="arrow-icon"><img src="/img/icons/arrow.svg"></span></a>
                        @endif
                    </div>
                </div>

            </div>

            <div class="about-second-row">

                {{--ABOUT US || EXTRA CONTENT--}}
                <div class="about-extra-content-block">
                    <div class="about-extra-content-block-content">
                        @if ($blocks->has("about_extra_content_block"))
                                <h2 class="sub-title">{{ $blocks->get("about_extra_content_block")->translation->name }}</h2>
                                {{ $blocks->get("about_extra_content_block")->translation->description }}
                        @endif
                    </div>
                </div>

                {{--QUOTE--}}
                <div class="about-quote-block">
                    <div class="about-quote-block-content">
                        @if ($blocks->has("about_quote_block"))

{{--                            <div class="profile-next-to-name">--}}

{{--                                <div class="profile-image-wrapper">--}}
{{--                                    <img src="/img/structure/profile_sergio.png"/>--}}
{{--                                </div>--}}

{{--                                <div class="profile-image-name">--}}
{{--                                    <h2>{{ $blocks->get("about_quote_block")->translation->name }}</h2>--}}
{{--                                </div>--}}

{{--                            </div>--}}

                                {{ $blocks->get("about_quote_block")->translation->description }}

                                <a href="#"><div class="btn btn-secondary btn-dark internalScroll" data-href="contact">@lang('translations.appointment')<span class="arrow-icon-down"><img src="/img/icons/arrow-blue.svg"></span></div></a>
                        @endif
                    </div>
                </div>

            </div>

        @endif

    </div>
</div>