@extends('layouts.default')
@section('title'){!! trans('about.meta_title') !!}@stop
@section('description'){!! trans('about.meta_desc') !!}@stop
@section('canonical'){{ request()->url() }}@stop
@section('styles')
    <link rel="stylesheet" type="text/css" href="{{ url('css/about.css') }}?v={{ env('ASSET_VERSION') }}">
@stop
@section('content')
    <main>
        <div class="about_us_page">
            <div class="container">
                <div class="about_video_section">
                    <h1 class="top_txt">@lang('about.title')</h1>
                    <h2 class="heading">
                        @lang('about.heading')
                    </h2>
                    <div class="video_block">
                        <div class="video">
                            <x-optimized-video src="/videos/agences-loop-site.mp4" />
                            <span class="video_about_btn video_button" data-id="popup_video">
                                <img src="{{ url('/images/about_video_btn.svg') }}" alt="video_icon">
                            </span>
                        </div>
                        <div class="content">
                            <h2 class="video_heading">{{ trans('about.video_text') }}</h2>
                            <p>{{ trans('about.video_text_1') }}</p>
                            <p>{{ trans('about.video_text_2') }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="agency_section">
                <span class="overlay_about"></span>
                <div class="container">
                    <h2 class="heading_about heading_main center">{{ trans('about.agences') }}</h2>
                    <div class="agency_grid">
                        <a href="{{ route('woluwe_' . app()->getLocale()) }}" class="agency_box">
                            <x-optimized-image src="images/woluwe_agence.jpg" alt="agency" />
                            <h3>{{ trans('about.woluwe') }}</h3>
                        </a>
                        <a href="{{ route('pierre_' . app()->getLocale()) }}" class="agency_box">
                            <x-optimized-image src="images/pierre.png" alt="agency" />
                            <h3>{{ trans('about.pierre') }}</h3>
                        </a>
                        <a href="{{ route('schaerbeek_' . app()->getLocale()) }}" class="agency_box">
                            <x-optimized-image src="images/schaerbeek-facade-expertissimmo-immobilier.jpg" alt="agency" />
                            <h3>{{ trans('about.schaerbeek') }}</h3>
                        </a>
                        <a href="{{ route('evere_' . app()->getLocale()) }}" class="agency_box">
                            <x-optimized-image src="images/evere-facade-expertissimmo-immobilier.jpg" alt="agency" />
                            <h3>{{ trans('about.evere') }}</h3>
                        </a>

                    </div>
                </div>
            </div>
            <div class="nous-sommes">
                <div class="container">
                    <h5 class="heading">{{ trans('about.cities_heading') }}</h5>
                    <div class="sub-sec-nous">
                        <a class="nous-box"
                            href="{{ route('virtual-agency_' . app()->getLocale(), ['agency' => 'watermael-boitsfort']) }}">
                            <x-optimized-image src="images/nous.png" alt="nous" />
                            <h3> {{ trans('about.agency_in') . trans('about.city_1') }}</h3>
                        </a>
                        <a class="nous-box"
                            href="{{ route('virtual-agency_' . app()->getLocale(), ['agency' => 'ixelles']) }}">
                            <x-optimized-image src="images/nous.png" alt="nous" />
                            <h3>{{ trans('about.agency_in') }} <br>{{ trans('about.city_2') }}</h3>
                        </a>
                        <a class="nous-box"
                            href="{{ route('virtual-agency_' . app()->getLocale(), ['agency' => 'auderghem']) }}">
                            <x-optimized-image src="images/nous.png" alt="nous" />
                            <h3>{{ trans('about.agency_in') }} <br> {{ trans('about.city_3') }}</h3>
                        </a>
                        <a class="nous-box"
                            href="{{ route('virtual-agency_' . app()->getLocale(), ['agency' => 'etterbeek']) }}">
                            <x-optimized-image src="images/nous.png" alt="nous" />
                            <h3>{{ trans('about.agency_in') }} <br>{{ trans('about.city_4') }}</h3>
                        </a>
                        <a class="nous-box"
                            href="{{ route('virtual-agency_' . app()->getLocale(), ['agency' => 'bruxelles']) }}">
                            <x-optimized-image src="images/nous.png" alt="nous" />
                            <h3>{{ trans('about.agency_in') }} <br> {{ trans('about.city_5') }}</h3>
                        </a>
                        <a class="nous-box"
                            href="{{ route('virtual-agency_' . app()->getLocale(), ['agency' => 'kraainem']) }}">
                            <img src="{{ url('/images/nous.png') }}" alt="nous">
                            <h3>{{ trans('about.agency_in') . trans('about.city_6') }}</h3>
                        </a>
                        <a class="nous-box"
                            href="{{ route('virtual-agency_' . app()->getLocale(), ['agency' => 'wezembeek']) }}">
                            <x-optimized-image src="images/nous.png" alt="nous" />
                            <h3>{{ trans('about.agency_in') }} <br> {{ trans('about.city_7') }}</h3>
                        </a>
                        <a class="nous-box"
                            href="{{ route('virtual-agency_' . app()->getLocale(), ['agency' => 'tervuren']) }}">
                            <x-optimized-image src="images/nous.png" alt="nous" />
                            <h3>{{ trans('about.agency_in') }} <br>{{ trans('about.city_8') }}</h3>
                        </a>
                        <a class="nous-box"
                            href="{{ route('virtual-agency_' . app()->getLocale(), ['agency' => 'zaventem']) }}">
                            <x-optimized-image src="images/nous.png" alt="nous" />
                            <h3>{{ trans('about.agency_in') }} <br>{{ trans('about.city_9') }}</h3>
                        </a>
                        <a class="nous-box"
                            href="{{ route('virtual-agency_' . app()->getLocale(), ['agency' => 'sterrebeek']) }}">
                            <x-optimized-image src="images/nous.png" alt="nous" />
                            <h3>{{ trans('about.agency_in') }} <br>{{ trans('about.city_10') }}</h3>
                        </a>
                    </div>
                </div>
            </div>
            <div class="profile_section">
                <x-optimized-image src="images/image_profile_video.png" alt="profile" class="fixed_img" />
                <div class="container">
                    <h2 class="heading_about heading_main center">
                        @lang('about.profiles')
                    </h2>
                    <div class="profile_wrap">
                        <div class="profile_grid">
                            <h4>{{ trans('about.profiles_text') }}</h4>
                        </div>
                        <div class="profile_grid">
                            @lang('about.profiles_content')
                        </div>
                    </div>
                </div>
            </div>
            <div class="team_section">
                @include('sections.team-members')
            </div>
            <section>
                <center class="commitment_box">
                    <p class="subheading">{{ trans('about.commit_ment') }}
                    </p>
                    <h2>{{ trans('about.commitment_text') }}</h2>
                    <div class="commitment_bottom">
                        <a href="{{ LaravelLocalization::localizeUrl('/contact') }}"
                            class="btn_block">{{ trans('about.commitment_button') }}</a>
                    </div>
                </center>
            </section>
            <section>
                <div class="value_warpper">
                    <div class="value_inner_block">
                        <h2 class="center heading">@lang('about.applied_values')</h2>
                        <p class="center centent_txt">{{ trans('about.applied_text') }}</p>
                        <div class="box">
                            <p>{{ trans('about.applied_content') }}</p>
                        </div>
                        <div class="value_list_block">
                            <div class="value_list">
                                <div class="left">
                                    <p>{{ trans('about.value_1') }}</p>
                                </div>
                                <div class="right">
                                    <p>{{ trans('about.value_1a') }}</p>
                                </div>
                            </div>
                            <div class="value_list">
                                <div class="left">
                                    <p>{{ trans('about.value_2') }}</p>
                                </div>
                                <div class="right">
                                    <p>{{ trans('about.value_2a') }}</p>
                                </div>
                            </div>
                            <div class="value_list">
                                <div class="left">
                                    <p>{{ trans('about.value_3') }}</p>
                                </div>
                                <div class="right">
                                    <p>{{ trans('about.value_3a') }}</p>
                                </div>
                            </div>
                            <div class="value_list">
                                <div class="left">
                                    <p>@lang('about.value_4')</p>
                                </div>
                                <div class="right">
                                    <p>{{ trans('about.value_4a') }}</p>
                                </div>
                            </div>
                            <div class="value_list">
                                <div class="left">
                                    <p>{{ trans('about.value_5') }}</p>
                                </div>
                                <div class="right">
                                    <p>{{ trans('about.value_5a') }}</p>
                                </div>
                            </div>
                        </div>
                        <p class="value_bootm center">{{ trans('about.engagement') }}</p>
                    </div>
                </div>
            </section>
        </div>
    </main>
    @include('popups.video_popup')
@stop
@section('scripts')
    <script src="https://www.youtube.com/iframe_api"></script>
    <script async type="text/javascript" src="{{ url('./js/about.min.js') }}" defer></script>
@stop