@extends('layouts.default')
@section('title')
    {!! trans('home.meta_title') !!}@stop
@section('description')
    {!! trans('home.meta_desc') !!}@stop
@section('canonical'){{ request()->url() }}@stop
@section('styles')
    <link rel="stylesheet preload" href="{{ url('/css/index.css') }}?v={{ env('ASSET_VERSION') }}" as="style" />
    <link rel="stylesheet preload" href="{{ url('/css/slick.css') }}" as="style" />
    <link rel="stylesheet preload" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick-theme.css"
        as="style" />
@stop
@section('content')


    <main>
        <!-- Banner Section: START-->
        <section>
            <div class="banner_section">
                <div class="content">
                    <!-- add heading -->
                    <div class="estimation">
                        <a href="{{ route('valuation_' . app()->getLocale()) }}"
                            class="btn-new btn_block">{{ trans('home.new_valuation_btn') }}</a>
                        <a href="{{ route('valuation_' . app()->getLocale()) }}" class="text">
                            {{ trans('home.new_valuation_text') }}
                            <span>
                                <x-optimized-image src="images/arrowh-r.png" alt="{{ trans('home.new_valuation_text') }}"
                                    title="{{ trans('home.new_valuation_text') }}" />
                            </span>
                        </a>
                    </div>
                    <p class="banner_heading">{{ trans('home.banner_text') }}</p>
                    <div class="banner_bar" data-action="{{ LaravelLocalization::localizeUrl('/') }}">
                        <div class="dropdown_block ">
                            <p class="heading_dropdown">{{ trans('home.rent_sale') }}</p>
                            <div class="dropdown sale_rent">
                                <span data-purpose="1"
                                    data-href="{{ trans('list.on_sale.slug') }}">{{ trans('home.for_sale') }}</span>
                                <ul class="sale_ul">
                                    <li data-purpose="1" data-href="{{ trans('list.on_sale.slug') }}">
                                        {{ trans('home.for_sale') }}</li>
                                    <li data-purpose="2" data-href="{{ trans('list.on_rent.slug') }}">
                                        {{ trans('home.for_rent') }}</li>
                                </ul>
                            </div>
                        </div>
                        <div class="dropdown_block">
                            <p class="heading_dropdown">{{ trans('home.types') }}</p>
                            <div class="dropdown categories">
                                <span class="cat_list"
                                    data-dumytext="{{ trans('list.bien_text') }}">{{ trans('list.bien_text') }}</span>
                                <ul class="cat_ul">
                                    <li value="1" data-value="{{ trans('list.filter.maison') }}">
                                        {{ trans('list.filter.maison') }}</li>
                                    <li value="2" data-value="{{ trans('list.filter.appartment') }}">
                                        {{ trans('list.filter.appartment') }}</li>
                                    <li value="4" data-value="{{ trans('list.filter.bureau') }}">
                                        {{ trans('list.filter.bureau') }}</li>
                                    <li value="3" data-value="{{ trans('list.filter.terrains') }}">
                                        {{ trans('list.filter.terrains') }}</li>
                                    <li value="5" data-value="{{ trans('list.filter.commerces') }}">
                                        {{ trans('list.filter.commerces') }}</li>
                                    <li value="7" data-value="{{ trans('list.filter.garage') }}">
                                        {{ trans('list.filter.garage') }}</li>
                                </ul>
                            </div>
                        </div>
                        <div class="dropdown_block border">
                            <p class="heading_dropdown">{{ trans('home.price') }}</p>
                            <div class="dropdown max_price max_price_1 active">
                                <span data-price="1000000+">
                                    1.000.000 € +
                                </span>
                                <ul class="price_ul">
                                    <li data-value="200000">200.000 €</li>
                                    <li data-value="300000">300.000 €</li>
                                    <li data-value="400000">400.000 €</li>
                                    <li data-value="500000">500.000 €</li>
                                    <li data-value="600000">600.000 €</li>
                                    <li data-value="700000">700.000 €</li>
                                    <li data-value="800000">800.000 €</li>
                                    <li data-value="900000">900.000 €</li>
                                    <li data-value="1000000+">1.000.000 € +</li>
                                </ul>
                            </div>
                            <div class="dropdown max_price max_price_2">
                                <span data-price="3000+">
                                    3.000 € +
                                </span>
                                <ul class="price_ul">
                                    <li data-value="500">500 €</li>
                                    <li data-value="600">600 €</li>
                                    <li data-value="700">700 €</li>
                                    <li data-value="800">800 €</li>
                                    <li data-value="900">900 €</li>
                                    <li data-value="1000">1.000 €</li>
                                    <li data-value="1100">1.100 €</li>
                                    <li data-value="1200">1.200 €</li>
                                    <li data-value="1300">1.300 €</li>
                                    <li data-value="1400">1.400 €</li>
                                    <li data-value="1500">1.500 €</li>
                                    <li data-value="1600">1.600 €</li>
                                    <li data-value="1700">1.700 €</li>
                                    <li data-value="1800">1.800 €</li>
                                    <li data-value="1900">1.900 €</li>
                                    <li data-value="2000">2.000 €</li>
                                    <li data-value="2100">2.100 €</li>
                                    <li data-value="2200">2.200 €</li>
                                    <li data-value="2300">2.300 €</li>
                                    <li data-value="2400">2.400 €</li>
                                    <li data-value="2500">2.500 €</li>
                                    <li data-value="2600">2.600 €</li>
                                    <li data-value="2700">2.700 €</li>
                                    <li data-value="2800">2.800 €</li>
                                    <li data-value="2900">2.900 €</li>
                                    <li data-value="3000+">3.000 € +</li>
                                </ul>
                            </div>
                        </div>
                        <div class="search_btn" type="submit">
                            <span>
                                <x-optimized-image src="images/search.svg" alt="search" />
                            </span>
                        </div>
                    </div>
                </div>
                <div class="image">
                    <div class="image_Inner">
                        <x-optimized-video src="/videos/video-accueil-v2.mp4" preload="true" />
                        <div class="view_grid">
                            <div class="view_box">
                                <div class="grid_box">
                                    <div>
                                        <ul>
                                            @foreach (range(1, 5) as $i)
                                                <li>
                                                    <img src="{{ url('images/star_yellow.svg') }}" alt="Star"
                                                        width="16" height="16" loading="lazy">
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                    <div>
                                        <x-optimized-image src="images/google-review.png" alt="Google reviews"
                                            class="img" />
                                    </div>
                                </div>
                                <div class="grid_box">
                                    <p class="view_txt"><span>1870 {{ trans('home.avis') }}</span></p>
                                    <p class="view_no"><span>4.8/5</span></p>
                                </div>
                            </div>
                            <div class="view_box">
                                <div class="grid_box">
                                    <a href="https://satisfaction.realadvice.be/avis/Expertissimmo/" target="_blank">
                                        <ul>
                                            @foreach (range(1, 5) as $i)
                                                <li>
                                                    <img src="{{ url('images/star_yellow.svg') }}" alt="Star"
                                                        width="16" height="16" loading="lazy">
                                                </li>
                                            @endforeach
                                        </ul>
                                    </a>
                                    <a href="https://satisfaction.realadvice.be/avis/Expertissimmo/" target="_blank">
                                        <img src="{{ url('images/realadvice_new.png') }}" alt="advice" class="img"
                                            loading="lazy">
                                    </a>
                                </div>
                                <div class="grid_box">
                                    <p class="view_txt"><a href="https://satisfaction.realadvice.be/avis/Expertissimmo/"
                                            target="_blank">2791 {{ trans('home.avis') }}</a></p>
                                    <p class="view_no"><a href="https://satisfaction.realadvice.be/avis/Expertissimmo/"
                                            target="_blank">4.7/5</a></p>
                                </div>
                            </div>
                            <div class="view_box">
                                <div class="grid_box">
                                    <a href="https://www.opinionsystem.fr/fr-fr/certificate/12083" target="_blank">
                                        <ul>
                                            @foreach (range(1, 5) as $i)
                                                <li>
                                                    <img src="{{ url('images/star_yellow.svg') }}" alt="Star"
                                                        width="16" height="16" loading="lazy">
                                                </li>
                                            @endforeach
                                        </ul>
                                    </a>
                                    <a href="https://www.opinionsystem.fr/fr-fr/certificate/12083" target="_blank">
                                        <x-optimized-image src="images/opinion_system_new.png" alt="opinion"
                                            class="img" />
                                    </a>
                                </div>
                                <div class="grid_box">
                                    <p class="view_txt"><a href="https://www.opinionsystem.fr/fr-fr/certificate/12083"
                                            target="_blank">356 {{ trans('home.avis') }}</a></p>
                                    <p class="view_no"><a href="https://www.opinionsystem.fr/fr-fr/certificate/12083"
                                            target="_blank">4.7/5</a></p>
                                </div>
                                <div class="btn_box">
                                    <a href="{{ route('services_' . app()->getLocale()) }}"
                                        class="btn_block">{{ trans('home.sale_rent_property') }}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Banner Section: END-->
        <!-- Video Section: START-->
        <section>
            <div class="video_section_index">
                <div class="side_bar_scroll criteria" data-id="popup">
                    <p class="test">@lang('home.side_bar')</p>
                </div>
                <span class="bg_img"></span>
                <div class="container">

                    <h1 class="subheading center">@lang('home.video_subheading')</h1>
                    <h2 class="heading_main center">{{ trans('home.video_heading') }}</h2>

                    <div class="video_content">
                        <div class="video">
                            <div class="video__inner">
                                <x-optimized-video src="/videos/agences-loop-site.mp4" />
                                <span class="video_button" data-id="popup_video">
                                    <img src="{{ url('images/video_icon.svg') }}" alt="Icon" loading="lazy">
                                </span>
                            </div>
                        </div>
                        <div class="content">

                            <h3 class="heading_top">{{ trans('home.video_text') }}</h3>
                            <div class="p_outer">
                                @lang('home.video_content')
                                <p class="signature_txt">{{ trans('home.sign') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Video Section: END-->
        <!-- Tab Section: START-->
        <section>
            <div class="tab_section">
                <div class="container">
                    <h2 class="heading_main center">{{ trans('home.highlight_text') }}</h2>
                    <div class="tab">
                        <button class="tablinks active" data-id="tab2">{{ trans('home.tab_2') }}</button>
                        <button class="tablinks" data-id="tab3">{{ trans('home.tab_3') }}</button>
                        <button class="tablinks" data-id="tab1">{{ trans('home.tab_1') }}</button>
                        <button class="tablinks" data-id="tab4">{{ trans('home.tab_4') }}</button>
                        <!-- <button class="tablinks" data-id="tab5">{{ trans('home.tab_5') }}</button> -->
                    </div>
                    <div id="tab1" class="tabcontent">
                        <div class="tab_grid">
                            <div class="image">
                                <x-optimized-image src="images/tab_video.jpg" alt="tabs" />
                                <span class="video_tab_btn video_button" data-id="popup_video"
                                    data-url="https://www.youtube.com/embed/51rJoJjlnUw?autoplay=1&mute=1">
                                    <img src="{{ url('images/about_video_btn.svg') }}" alt="video_icon">
                                </span>
                            </div>
                            <div class="content">
                                <h3 class="tab_content_heading">{{ trans('home.tab_title_1') }}</h3>
                                <div class="p_outer">
                                    @lang('home.tab_content_1')
                                    <a href="{{ route('services_' . app()->getLocale()) }}">{{ trans('home.tab_link_1') }}
                                        <img src="{{ url('images/Arrow_Right.svg') }}" alt="tab1"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="tab2" class="tabcontent active">
                        <div class="tab_grid">
                            <div class="image">
                                <div class="video_button" data-id="popup_video"
                                    data-url="{{ url('/videos/Matterport Loop low final.mp4') }}">
                                    <x-optimized-video src="/videos/Matterport Loop low final.mp4" />
                                </div>
                            </div>
                            <div class="content">
                                <h3 class="tab_content_heading">{{ trans('home.tab_title_2') }}</h3>
                                <div class="p_outer">
                                    @lang('home.tab_content_2')
                                    <a href="{{ route('services_' . app()->getLocale()) }}">{{ trans('home.tab_link_2') }}
                                        <img src="{{ url('images/Arrow_Right.svg') }}" alt="tab2"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="tab3" class="tabcontent">
                        <div class="tab_grid">
                            <div class="image">
                                <div class="ba-slider">
                                    <x-optimized-image src="images/after.png" alt="After" class="after" />
                                    <div class="resize">
                                        <x-optimized-image src="images/before.png" alt="Before" title="Before" />
                                    </div>
                                    <span class="handle"></span>
                                </div>
                            </div>
                            <div class="content">
                                <h3 class="tab_content_heading">{{ trans('home.tab_title_3') }}</h3>
                                <div class="p_outer">
                                    @lang('home.tab_content_3')
                                    <a href="{{ route('services_' . app()->getLocale()) }}">{{ trans('home.tab_link_3') }}
                                        <img src="{{ url('images/Arrow_Right.svg') }}" alt="tab3"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="tab4" class="tabcontent">
                        <div class="tab_grid">
                            <div class="image">
                                <div class="ba-slider-new">
                                    <x-optimized-image src="images/virtual-after.png" alt="After" class="after" />
                                    <div class="resize">
                                        <x-optimized-image src="images/virtual-before.png" alt="Before"
                                            title="Before" />
                                    </div>
                                    <span class="handle"></span>
                                </div>
                            </div>
                            <div class="content">
                                <h3 class="tab_content_heading">{{ trans('home.tab_title_4') }}</h3>
                                <div class="p_outer">
                                    @lang('home.tab_content_4')
                                    <a href="{{ route('about_' . app()->getLocale()) }}">{{ trans('home.tab_link_4') }}
                                        <img src="{{ url('images/Arrow_Right.svg') }}" alt="tab4"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <div id="tab5" class="tabcontent">
                                                                                                                                                                                                                                             <div class="tab_grid">
                                                                                                                                                                                                                                              <div class="image">
                                                                                                                                                                                                                                               <img src="{{ url('images/tab_video_3.png') }}" alt="tab4" loading="lazy">
                                                                                                                                                                                                                                              </div>
                                                                                                                                                                                                                                              <div class="content">
                                                                                                                                                                                                                                               <h3 class="tab_content_heading">{{ trans('home.tab_title_5') }}</h3>
                                                                                                                                                                                                                                               <div class="p_outer">
                                                                                                                                                                                                                                                @lang('home.tab_content_5')
                                                                                                                                                                                                                                                <a href="{{ route('gestion_' . app()->getLocale()) }}">{{ trans('home.tab_title_5') }} <img src="{{ url('images/Arrow_Right.svg') }}" alt="tab4"></a>
                                                                                                                                                                                                                                               </div>
                                                                                                                                                                                                                                              </div>
                                                                                                                                                                                                                                             </div>
                                                                                                                                                                                                                                            </div> -->
                </div>
            </div>
        </section>
        <!-- Tab Section: END-->
        <!-- Property Section: START-->
        <section>
            <div class="property_section">
                <div class="property_block">
                    <h2 class="heading_main">
                        @lang('home.property_title')
                    </h2>
                    <p>{{ trans('home.property_text') }}</p>
                </div>
                <div class="property_wrapper">
                    <div class="property_grid">
                        <div class="head">
                            <img src="{{ url('images/building_icon_1.svg') }}" alt="building">+10.000
                        </div>
                        <p>@lang('home.property_type_1')</p>
                    </div>
                    <div class="property_grid">
                        <div class="head">
                            <img src="{{ url('images/building_icon_2.svg') }}" alt="building">+38.000
                        </div>
                        <p>@lang('home.property_type_2')</p>
                    </div>
                    <div class="property_grid">
                        <div class="head">
                            <img src="{{ url('images/building_icon_3.svg') }}" alt="building">+500
                        </div>
                        <p>@lang('home.property_type_3')</p>
                    </div>
                    <div class="property_grid">
                        <div class="head">
                            <img src="{{ url('images/building_icon_4.svg') }}" alt="building">+3.500
                        </div>
                        <p>@lang('home.property_type_4')</p>
                    </div>
                    <div class="property_grid">
                        <div class="head">
                            <img src="{{ url('images/building_icon_5.svg') }}" alt="building">+25.000
                        </div>
                        <p>@lang('home.property_type_5')</p>
                    </div>
                </div>
                <div class="property_footer">
                    <p>@lang('home.property_type_text')</p>
                    <a href="{{ route('estimat_' . app()->getLocale()) }}"
                        class="btn_block">{{ trans('home.property_type_btn') }}</a>
                </div>
            </div>
        </section>
        <!-- Property Section: END-->
        <!-- Experience Section: START-->
        <section>
            <div class="experience_section">
                <div class="image">
                    <x-optimized-image src="images/experience_img.jpg" alt="experience" />
                </div>
                <div class="content">
                    <h2 class="experience_heading">@lang('home.experience')</h2>
                    <div class="experience_block">
                        <div class="grid">
                            <div class="number">
                                <span id="text-num_1">0</span>%
                            </div>
                            <div class="text">
                                <p>@lang('home.experience_text_1')</p>
                            </div>
                        </div>
                        <div class="grid">
                            <div class="number" id="text-num_2">
                                0.000
                            </div>
                            <div class="text">
                                <p>@lang('home.experience_text_2')</p>
                            </div>
                        </div>
                        <div class="grid">
                            <div class="number">
                                <span id="text-num_3">0</span> jours
                            </div>
                            <div class="text">
                                <p>@lang('home.experience_text_3')</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Experience Section: END-->
        <!-- Testimonial Section: START-->
        <section>
            <div class="satisfaction_section dfsd">
                <h2 class="heading_main center">@lang('home.satisfy_title')</h2>
                <div class="satisfaction_wrapper">
                    <div class="content testimonial">
                        <div>
                            <h3>{{ trans('home.testimonial_client_1') }}</h3>
                            <!-- <h5></h5> -->
                            <p>{{ trans('home.testimonial_review_1') }}</p>
                        </div>
                        <div>
                            <h3>{{ trans('home.testimonial_client_2') }}</h3>
                            <!-- <h5></h5> -->
                            <p>{{ trans('home.testimonial_review_2') }}</p>
                        </div>
                        <div>
                            <h3>{{ trans('home.testimonial_client_3') }}</h3>
                            <!-- <h5></h5> -->
                            <p>{{ trans('home.testimonial_review_3') }}</p>
                        </div>
                        <div>
                            <h3>{{ trans('home.testimonial_client_4') }}</h3>
                            <!-- <h5></h5> -->
                            <p>{{ trans('home.testimonial_review_4') }}</p>
                        </div>
                    </div>

                    <div class="view_grid">
                        <div class="view_box">
                            <div class="grid_box">
                                <div>
                                    <ul>
                                        @foreach (range(1, 5) as $i)
                                            <li>
                                                <img src="{{ url('images/star_yellow.svg') }}" alt="Star"
                                                    width="16" height="16" loading="lazy">
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                                <div>
                                    <x-optimized-image src="images/google-review.png" alt="Google reviews" class="img"
                                        width="100" height="45" />
                                </div>
                            </div>
                            <div class="grid_box">
                                <p class="view_txt"><span>1870 {{ trans('home.avis') }}</span></p>
                                <p class="view_no"><span>4.8/5</span></p>
                            </div>
                        </div>
                        <div class="view_box">
                            <div class="grid_box">
                                <a href="https://satisfaction.realadvice.be/avis/Expertissimmo/" target="_blank">
                                    <ul>
                                        @foreach (range(1, 5) as $i)
                                            <li>
                                                <img src="{{ url('images/star_yellow.svg') }}" alt="Star"
                                                    width="16" height="16" loading="lazy">
                                            </li>
                                        @endforeach
                                    </ul>
                                </a>
                                <a href="https://satisfaction.realadvice.be/avis/Expertissimmo/" target="_blank">
                                    <x-optimized-image src="images/realadvice_new.png" alt="Star" class="img" />
                                </a>
                            </div>
                            <div class="grid_box">
                                <p class="view_txt"><a href="https://satisfaction.realadvice.be/avis/Expertissimmo/"
                                        target="_blank">2791 {{ trans('home.avis') }}</a></p>
                                <p class="view_no"><a href="https://satisfaction.realadvice.be/avis/Expertissimmo/"
                                        target="_blank">4.7/5</a></p>
                            </div>
                        </div>
                        <div class="view_box">
                            <div class="grid_box">
                                <a href="https://www.opinionsystem.fr/fr-fr/certificate/12083" target="_blank">
                                    <ul>
                                        @foreach (range(1, 5) as $i)
                                            <li>
                                                <img src="{{ url('images/star_yellow.svg') }}" alt="Star"
                                                    width="16" height="16" loading="lazy">
                                            </li>
                                        @endforeach
                                    </ul>
                                </a>
                                <a href="https://www.opinionsystem.fr/fr-fr/certificate/12083" target="_blank">
                                    <x-optimized-image src="images/opinion_system_new.png" alt="Star"
                                        class="img" />
                                </a>
                            </div>
                            <div class="grid_box">
                                <p class="view_txt"><a href="https://www.opinionsystem.fr/fr-fr/certificate/12083"
                                        target="_blank">356 {{ trans('home.avis') }}</a></p>
                                <p class="view_no"><a href="https://www.opinionsystem.fr/fr-fr/certificate/12083"
                                        target="_blank">4.7/5</a> </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Testimonial Section: END-->
        <!-- Commitment Section: START-->
        @include('sections.commitment')
        <!-- Commitment Section: END-->
        <div class="footer-icon-sec">
            <a href="{{ LaravelLocalization::localizeUrl('/contact') }}"><img
                    src="{{ url('/images/contact-form-icon.svg') }}" alt="contact-form"></a>
        </div>
    </main>

    @include('popups.video_popup')


@stop
@section('scripts')
    <script src="https://www.youtube.com/iframe_api"></script>
    <script type="text/javascript" src="{{ url('js/slick.js') }}" defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countto/1.2.0/jquery.countTo.min.js" defer></script>
    <script src="{{ url('./js/before-after.min.js') }}" defer></script>
    <script async type="text/javascript" src="{{ url('./js/index.min.js') }}?v={{ env('ASSET_VERSION') }}" defer>
    </script>

@stop