{{-- ✂️ Layout --}}
@extends("layouts.master", ["viewName" => "productPage", "pageName" => "Viva Syndic"])


{{-- ⚙️ Scripts relatifs à la view --}}
@section("js")
{{-- <script src="./test.js"></script> --}}
@stop


{{-- 🎨 Style relatifs à la view ---}}
@section("css")
{{-- <script src="./test.js"></script> --}}
@stop


{{-- 🔥 Content --}}
@section("content")

  {{-- Banner Section --}}
  <section class="banner banner--overlap" role="banner">
    <div class="banner__img">
      <img loading="lazy" class="banner__img__src" src="{{ asset('img/hero.jpg') }}" alt="Alt Text goes here">
    </div>
  </section>

  {{-- Page Body --}}
  <div class="wrapper ">

    {{-- Main --}}
    <section class="mainContent banner--overlap">

      <div class="sectionLayout sectionLayout--indent">
        {{-- Product Header --}}
        <div class="productHeader product--viva">
          <h1 class="productHeader__title">
            <img class="productHeader__titleImg" src="{{ asset('img/logo_vivasyndic_xl.png') }}" alt="Viva Syndic">
          </h1>
          <div data-editable data-name="{!! $contents['productHeader__desc_vs']['id'] ?? '' !!}" style="display: flex;">
            {!! $contents['productHeader__desc_vs']['value'] ?? '' !!}
          </div>

          {{-- Absolute Buttons --}}
          <a class="productHeader__other productHeader__other--left" href="/syndicone">
            <div class="productHeader__content">
              <span class="productHeader__other__desc">Notre Offre</span>
              <img class="productHeader__other__img" src="{{ asset('img/logo_syndicone_xl.png') }}" alt="SyndicOne">
            </div>
            <svg class="icon productHeader__icon product--syndicone">
              <use xlink:href="{{ asset('img/sprite.svg#icon-arrow-right--big') }}">
              </use>
            </svg>
          </a>
          <a class="productHeader__other productHeader__other--right" href="/eseissyndic">
            <div class="productHeader__content">
              <span class="productHeader__other__desc">Notre Offre</span>
              <img class="productHeader__other__img" src="{{ asset('img/logo_eseis_xl.png') }}" alt="">
            </div>
            <svg class="icon productHeader__icon product--eseis">
              <use xlink:href="{{ asset('img/sprite.svg#icon-arrow-right--big') }}">
              </use>
            </svg>
          </a>

        </div>
        {{-- End Product Header --}}

        {{-- Product Body --}}
        <div class="productBody productBody--red">
          <h2 class="productBody__title">En résumé</h2>

          <div data-editable data-name="{!! $contents['productBody__desc_vs']['id'] ?? '' !!}" style="display: flex;">
            {!! $contents['productBody__desc_vs']['value'] ?? '' !!}
          </div>

          <div class="productBody__info">

            <div class="productBody__block">
              <div class="productBody__logoIntro">
                <img class="productBody__logo" src="{{ asset('img/resumered3.png') }}" alt="img">
                <div data-editable data-name="{!! $contents['productBody__text_vs_1']['id'] ?? '' !!}">
                  {!! $contents['productBody__text_vs_1']['value'] ?? '' !!}
                </div>
              </div>
            </div>

            <div class="productBody__block">
              <div class="productBody__logoIntro">
                <img class="productBody__logo" src="{{ asset('img/resumered1.png') }}" alt="img">
                <div data-editable data-name="{!! $contents['productBody__text_vs_2']['id'] ?? '' !!}">
                  {!! $contents['productBody__text_vs_2']['value'] ?? '' !!}
                </div>
              </div>
            </div>

            <div class="productBody__block productBody__block--noborder">
              <div class="productBody__logoIntro">
                <img class="productBody__logo" src="{{ asset('img/resumered2.png') }}" alt="img">
                <div data-editable data-name="{!! $contents['productBody__text_vs_3']['id'] ?? '' !!}">
                  {!! $contents['productBody__text_vs_3']['value'] ?? '' !!}
                </div>
              </div>
            </div>

          </div>


        </div>
        {{-- End product body --}}


        {{-- Concept video --}}
        <a data-fslightbox href="https://www.youtube.com/watch?v=pFBxQOFAeCw&feature=youtu.be" class="product__video">
          <span class="product__video__overlay">&nbsp;</span>
          <img class="product__video__img" src="https://i.ytimg.com/vi/pFBxQOFAeCw/hqdefault.jpg?sqp=-oaymwEZCNACELwBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLBujXjgBLqwLKBOhHuri--cx99LOg" alt="">
          <svg class="icon product__video__icon">
            <use xlink:href="{{ asset('img/sprite.svg#icon-play') }}">
            </use>
          </svg>
          <span class="btn btn--red product__video__btn">Notre concept en vidéo</span>
        </a>
        {{-- End concept video --}}
      </div>


      {{-- Cta horizontal interessé par notre offre ? --}}
      <div class="sectionLayout horizontalCTADesk">
        <section class="horizontalInterest horizontalInterest--red">
          <svg class="icon horizontalInterest__icon">
            <use xlink:href="{{ asset('img/sprite.svg#icon-thumb-up') }}">
            </use>
          </svg>
          <div class="horizontalInterest__content">
            <h3 class="horizontalInterest__title">Intéressé par notre offre ?</h3>
            <p class="horizontalInterest__text">Étudions ensemble votre besoin spécifique afin de vous accompagner le mieux possible !</p>
          </div>
          <div class="horizontalInterest__buttonGroup">
            {{--
            <a href="tel:0600000000" class="btn btn--outline btn--whiteRed btn--icon js-datalayer-contact" data-eventname="contact téléphone" data-actionname="clic" data-position="page">
              <svg class="icon btn--iconImg">
                <use xlink:href="{{ asset('/img/sprite.svg#icon-telephone') }}">
                </use>
              </svg>
              <span class="inlineMob">Par téléphone</span>
              <span class="inlineDesk">06 00 00 00 00</span>
            </a>
            --}}
            <button class="btn btn--outline btn--whiteRed btn--icon js-showpopup js-datalayer-contact" data-eventname="contact email" data-actionname="clic" data-position="page" data-target="contact">
              <svg class="icon btn--iconImg">
                <use xlink:href="{{ asset('/img/sprite.svg#icon-messagerie') }}">
                </use>
              </svg>
              <span>Par email</span>
            </button>
          </div>
        </section>
      </div>

      {{-- L'offre en détail --}}
      <section class="sectionLayout">
        <h2 class="sectionTitle sectionTitle--red">L'offre en détail</h2>

        {{-- Engagement body --}}
        <ul class="engagementBoxes">

          {{-- 01 --}}
          <li class="engagementBox">
            <img class="engagementBox__imgDesk" src="{{ asset('img/engagement_votre-contact.jpg') }}" alt="">
            <div class="engagementBox__container">
              <div class="engagementBox__head">
                <button class="engagementBox__btnOpen js-openEngagementMob" data-target="1">&nbsp;</button>
                <h3 class="engagementBox__title">Votre contact</h3>
                <svg class="icon engagementBox__icon">
                  <use xlink:href="{{ asset('img/sprite.svg#icon-plus') }}">
                  </use>
                </svg>
              </div>
              <div class="engagementBox__content" data-target="1">
                  <div data-editable data-name="{!! $contents['votre_contact_page_vs']['id'] ?? 'votre_contact_page_vs' !!}">
                    {!! $contents['votre_contact_page_vs']['value'] ?? '' !!}
                  </div>
                <img class="engagementBox__img" src="{{ asset('img/engagement_votre-contact.jpg') }}" alt="">
              </div>
            </div>
          </li>

          {{-- 02 --}}
          <li class="engagementBox">
            <img class="engagementBox__imgDesk" src="{{ asset('img/engagement_comptabilite.jpg') }}" alt="">
            <div class="engagementBox__container">
              <div class="engagementBox__head">
                <button class="engagementBox__btnOpen js-openEngagementMob" data-target="2">&nbsp;</button>
                <h3 class="engagementBox__title">Comptabilité / Administratif </h3>
                <svg class="icon engagementBox__icon">
                  <use xlink:href="{{ asset('img/sprite.svg#icon-plus') }}">
                  </use>
                </svg>
                <span class="engagementBox__tag engagementBox__tag--blue">Nous</span>
              </div>
              <div class="engagementBox__content" data-target="2">
                  <div data-editable data-name="{!! $contents['comptabilite_administratif_page_vs']['id'] ?? 'comptabilite_administratif_page_vs' !!}">
                    {!! $contents['comptabilite_administratif_page_vs']['value'] ?? '' !!}
                  </div>
                <img class="engagementBox__img" src="{{ asset('img/engagement_comptabilite.jpg') }}" alt="">
              </div>
            </div>
          </li>

          {{-- 03 --}}
          <li class="engagementBox">
            <img class="engagementBox__imgDesk" src="{{ asset('img/engagement_assemblee-generale.jpg') }}" alt="">
            <div class="engagementBox__container">
              <div class="engagementBox__head">
                <button class="engagementBox__btnOpen js-openEngagementMob" data-target="3">&nbsp;</button>
                <h3 class="engagementBox__title">Assemblée générale</h3>
                <svg class="icon engagementBox__icon">
                  <use xlink:href="{{ asset('img/sprite.svg#icon-plus') }}">
                  </use>
                </svg>
                <span class="engagementBox__tag engagementBox__tag--blue">Nous</span>
              </div>
              <div class="engagementBox__content" data-target="3">
                  <div data-editable data-name="{!! $contents['ag_page_vs']['id'] ?? 'ag_page_vs' !!}">
                    {!! $contents['ag_page_vs']['value'] ?? '' !!}
                  </div>
                <img class="engagementBox__img" src="{{ asset('img/engagement_assemblee-generale.jpg') }}" alt="">
              </div>
            </div>
          </li>

          {{-- 04 --}}
          <li class="engagementBox">
            <img class="engagementBox__imgDesk" src="{{ asset('img/engagement_sinistre-travaux.jpg') }}" alt="">
            <div class="engagementBox__container">
              <div class="engagementBox__head">
                <button class="engagementBox__btnOpen js-openEngagementMob" data-target="4">&nbsp;</button>
                <h3 class="engagementBox__title">Suivi des travaux et contrats</h3>
                <svg class="icon engagementBox__icon">
                  <use xlink:href="{{ asset('img/sprite.svg#icon-plus') }}">
                  </use>
                </svg>
                <span class="engagementBox__tag engagementBox__tag--blue">Nous</span>
              </div>
              <div class="engagementBox__content" data-target="4">
                  <div data-editable data-name="{!! $contents['sinistres_travaux_facturation_page_vs']['id'] ?? 'sinistres_travaux_facturation_page_vs' !!}">
                    {!! $contents['sinistres_travaux_facturation_page_vs']['value'] ?? '' !!}
                  </div>
                  {{--
                <ul class="js-engagement-hideList">
                  <li>Création du dossier travaux</li>
                  <li>Etablissement de la déclaration préalable si nécessaire</li>
                  <li>Dépôt et suivi auprès des services de l’urbanisme de la ville</li>
                  <li>Rédaction et envoi de l’ordre de service à l’entreprise</li>
                  <li>Organisation du chantier avec l’entreprise</li>
                  <li>Validation du devis avec le président du conseil syndical</li>
                  <li>Etablissement et envoi des appels de fonds</li>
                  <li>Réception des chèques, encaissements et relances éventuelles</li>
                  <li>Validation, enregistrement, paiement de l’acompte</li>
                  <li>Préparation des accès à la copropriété (si besoin)</li>
                  <li>Réunion de démarrage du chantier avec l’entreprise</li>
                  <li>Garantie des fonds détenus</li>
                  <li>Suivi et relations avec l’entreprise</li>
                  <li>Relations avec les autres intervenants (Mairie etc…)</li>
                  <li>Visites du chantier</li>
                  <li>Point régulier avec le conseil syndical</li>
                  <li>Vérification de la bonne exécution des travaux</li>
                  <li>Réception des travaux (y compris jusqu’à la levée de réserves)</li>
                  <li>Validation, enregistrement, paiement de la facture</li>
                </ul>
                <a href="#" class="js-engagement-hideList-btn">+ Lire la suite</a>
                --}}
                <img class="engagementBox__img" src="{{ asset('img/engagement_sinistre-travaux.jpg') }}" alt="">
              </div>
            </div>
          </li>

          {{-- 05 --}}
          {{-- <li class="engagementBox">
            <img class="engagementBox__imgDesk" src="{{ asset('img/engagement_validation-devis.jpg') }}" alt="">
            <div class="engagementBox__container">
              <div class="engagementBox__head">
                <button class="engagementBox__btnOpen js-openEngagementMob" data-target="5">&nbsp;</button>
                <h3 class="engagementBox__title">Validation des devis et factures</h3>
                <svg class="icon engagementBox__icon">
                  <use xlink:href="{{ asset('img/sprite.svg#icon-plus') }}">
                  </use>
                </svg>
                <span class="engagementBox__tag engagementBox__tag--red">Ensemble</span>
              </div>
              <div class="engagementBox__content" data-target="5">
                  <div data-editable data-name="{!! $contents['validation_devis_factures_page_vs']['id'] ?? 'validation_devis_factures_page_vs' !!}">
                    {!! $contents['validation_devis_factures_page_vs']['value'] ?? '' !!}
                  </div>
                <img class="engagementBox__img" src="{{ asset('img/engagement_validation-devis.jpg') }}" alt="">
              </div>
            </div>
          </li> --}}

          {{-- 06 --}}
          <li class="engagementBox">
            <img class="engagementBox__imgDesk" src="{{ asset('img/engagement_suivi-projets.jpg') }}" alt="">
            <div class="engagementBox__container">
              <div class="engagementBox__head">
                <button class="engagementBox__btnOpen js-openEngagementMob" data-target="6">&nbsp;</button>
                <h3 class="engagementBox__title">Suivi des projets pour la copropriété</h3>
                <svg class="icon engagementBox__icon">
                  <use xlink:href="{{ asset('img/sprite.svg#icon-plus') }}">
                  </use>
                </svg>
                <span class="engagementBox__tag engagementBox__tag--red">Ensemble</span>
              </div>
              <div class="engagementBox__content" data-target="6">
                  <div data-editable data-name="{!! $contents['suivi_projets_copro_page_vs']['id'] ?? 'suivi_projets_copro_page_vs' !!}">
                    {!! $contents['suivi_projets_copro_page_vs']['value'] ?? '' !!}
                  </div>
                <img class="engagementBox__img" src="{{ asset('img/engagement_suivi-projets.jpg') }}" alt="">
              </div>
            </div>
          </li>
        </ul>

      </section>
      {{-- end Offre en détail --}}

      {{-- L'engagement --}}
      <section class="sectionLayout">
        <h2 class="sectionTitle">L’engagement sergic</h2>
        {{-- Egagement Sergic Loop --}}
        <div class="iconTextBoxes iconTextBoxes--horizontal pt-desk pb-desk">
          {{-- Engagement Sergic Item --}}
          <div class="iconTextBox">
            <div class="iconTextBox__content">
              <h3 class="iconTextBox__title">Des offres claires et transparentes</h3>
              <p class="iconTextBox__text">Sergic vous propose trois offres de syndic qui s’adapte en toute transparence aux besoins de votre copropriété.</p>
            </div>
            <div class="iconTextBox__img">
              <svg class="icon iconTextBox__img__svg">
                <use xlink:href="{{ asset('img/sprite.svg#icon-main-maison') }}">
                </use>
              </svg>
            </div>
          </div>
          {{-- End Engagement Sergic Item --}}



          {{-- Engagement Sergic Item --}}
          <div class="iconTextBox">
            <div class="iconTextBox__content">
              <h3 class="iconTextBox__title">Des valeurs fortes</h3>
              <p class="iconTextBox__text">Depuis 1963, Sergic bâtit sa réputation sur des valeurs de performance, d’ouverture, de simplicité et d’innovation.</p>
            </div>
            <div class="iconTextBox__img">
              <svg class="icon iconTextBox__img__svg">
                <use xlink:href="{{ asset('img/sprite.svg#icon-mains-coeur') }}">
                </use>
              </svg>
            </div>
          </div>
          {{-- End Engagement Sergic Item --}}

          {{-- Engagement Sergic Item --}}
          <div class="iconTextBox">
            <div class="iconTextBox__content">
              <h3 class="iconTextBox__title">Des experts à votre écoute</h3>
              <p class="iconTextBox__text">Dans votre copropriété, dans nos 40 agences ou à distance, nos experts sont disponibles pour répondre à vos questions.</p>
            </div>
            <div class="iconTextBox__img">
              <svg class="icon iconTextBox__img__svg">
                <use xlink:href="{{ asset('img/sprite.svg#icon-experts-ecoute') }}">
                </use>
              </svg>
            </div>
          </div>
          {{-- End Engagement Sergic Item --}}

          {{-- Engagement Sergic Item --}}
          <div class="iconTextBox">
            <div class="iconTextBox__content">
              <h3 class="iconTextBox__title">Des applications mobiles pour vous</h3>
              <p class="iconTextBox__text">Que ce soit chez vous depuis votre ordinateur ou en mobilité avec nos applications, votre espace client est toujours accessible.</p>
            </div>
            <div class="iconTextBox__img">
              <svg class="icon iconTextBox__img__svg">
                <use xlink:href="{{ asset('img/sprite.svg#icon-applications') }}">
                </use>
              </svg>
            </div>
          </div>
          {{-- End Engagement Sergic Item --}}

        </div>
        {{-- End Engagement Sergic Loop --}}
      </section>
      {{-- End L'engagement --}}

      {{-- Avis des utilisateurs  --}}
      <section class="sectionLayout">
        <div class="row">
          <div class="col-xs-12">
            <ul class="users__reviews__listing">

              {{-- Avis 1  --}}
              <li class="users__reviews__item users__reviews__item--desktop">
                <a  href="https://www.immodvisor.com/pro/sergic-lille-59000-23175.html" target="_blank" rel="noopener, noreferrer, nofollow" class="users__reviews__link" class="users__reviews__link">
                  <img class="users__reviews__img" src="{{ asset('img/logo_immodvisor.png') }}" alt="">
                </a>
                <div class="users__reviewsAll--all">
                  <a href="https://www.immodvisor.com/pro/sergic-lille-59000-23175.html" target="_blank" rel="noopener, noreferrer, nofollow" class="users__reviews__link--all">Voir tous les avis</a>
                </div>
                <div class="users__reviews__content users__reviews__content--big">
                  <div class="users__reviews__content--desktop">
                    <h2 class="users__reviews__note">
                      <span class="users__reviews__note users__reviews__note--big">4</span>
                      / 5
                    </h2>
                    <div class="users__reviews__stars">
                      <svg class="icon users__reviews__icon">
                        <use fill="#019ae1" xlink:href="{{ asset('img/sprite.svg#star') }}">
                        </use>
                      </svg>
                      <svg class="icon users__reviews__icon">
                        <use fill="#019ae1" xlink:href="{{ asset('img/sprite.svg#star') }}">
                        </use>
                      </svg>
                      <svg class="icon users__reviews__icon">
                        <use fill="#019ae1" xlink:href="{{ asset('img/sprite.svg#star') }}">
                        </use>
                      </svg>
                      <svg class="icon users__reviews__icon">
                        <use xlink:href="{{ asset('img/sprite.svg#half-star') }}">
                        </use>
                      </svg>
                      <svg class="icon users__reviews__icon">
                        <use xlink:href="{{ asset('img/sprite.svg#star') }}">
                        </use>
                      </svg>
                    </div>
                  </div>
                  <p class="users__reviews__text">Réalisé par un organisme indépendant</p>
                </div>
              </li>

              {{-- Avis 2  --}}
              <li class="users__reviews__item">
                <div class="users__reviews__content">
                  <div class="users__reviews__stars">
                    <svg class="icon users__reviews__icon">
                      <use fill="#019ae1" xlink:href="{{ asset('img/sprite.svg#star') }}">
                      </use>
                    </svg>
                    <svg class="icon users__reviews__icon">
                      <use fill="#019ae1" xlink:href="{{ asset('img/sprite.svg#star') }}">
                      </use>
                    </svg>
                    <svg class="icon users__reviews__icon">
                      <use fill="#019ae1" xlink:href="{{ asset('img/sprite.svg#star') }}">
                      </use>
                    </svg>
                    <svg class="icon users__reviews__icon">
                      <use  fill="#019ae1" xlink:href="{{ asset('img/sprite.svg#star') }}">
                      </use>
                    </svg>
                    <svg class="icon users__reviews__icon">
                      <use xlink:href="{{ asset('img/sprite.svg#star') }}">
                      </use>
                    </svg>
                  </div>
                  <h3 class="users__reviews__title">« Très bonne expérience personnelle, très agréable et à l’écoute. </h3>
                  <p class="users__reviews__text">Prestation réalisée en Juin 2019 </p>
                </div>
              </li>

              {{-- Avis 3 --}}
              <li class="users__reviews__item">
                <div class="users__reviews__content">
                  <div class="users__reviews__stars">
                    <svg class="icon users__reviews__icon">
                      <use fill="#019ae1" xlink:href="{{ asset('img/sprite.svg#star') }}">
                      </use>
                    </svg>
                    <svg class="icon users__reviews__icon">
                      <use fill="#019ae1" xlink:href="{{ asset('img/sprite.svg#star') }}">
                      </use>
                    </svg>
                    <svg class="icon users__reviews__icon">
                      <use fill="#019ae1" xlink:href="{{ asset('img/sprite.svg#star') }}">
                      </use>
                    </svg>
                    <svg class="icon users__reviews__icon">
                      <use fill="#019ae1" xlink:href="{{ asset('img/sprite.svg#star') }}">
                      </use>
                    </svg>
                    <svg class="icon users__reviews__icon">
                      <use fill="#019ae1" xlink:href="{{ asset('img/sprite.svg#star') }}">
                      </use>
                    </svg>
                  </div>
                  <h3 class="users__reviews__title">« Très bonne expérience personnelle, très agréable et à l’écoute. </h3>
                  <p class="users__reviews__text">Prestation réalisée en Juin 2019 </p>
                </div>
              </li>

              {{-- Avis 4 --}}
              <li class="users__reviews__item">
                <a  href="https://www.immodvisor.com/pro/sergic-lille-59000-23175.html" target="_blank" rel="noopener, noreferrer, nofollow" class="users__reviewsAll">
                  <div class="users__reviews__content">
                    <div class="users__reviews__stars">
                      <svg class="icon users__reviews__icon">
                        <use fill="#019ae1" xlink:href="{{ asset('img/sprite.svg#star') }}">
                        </use>
                      </svg>
                      <svg class="icon users__reviews__icon">
                        <use fill="#019ae1" xlink:href="{{ asset('img/sprite.svg#star') }}">
                        </use>
                      </svg>
                      <svg class="icon users__reviews__icon">
                        <use fill="#019ae1" xlink:href="{{ asset('img/sprite.svg#star') }}">
                        </use>
                      </svg>
                      <svg class="icon users__reviews__icon">
                        <use  fill="#019ae1" xlink:href="{{ asset('img/sprite.svg#star') }}">
                        </use>
                      </svg>
                      <svg class="icon users__reviews__icon">
                        <use xlink:href="{{ asset('img/sprite.svg#star') }}">
                        </use>
                      </svg>
                    </div>
                    <h3 class="users__reviews__title">« Très bonne expérience personnelle, très agréable et à l’écoute. </h3>
                    <p class="users__reviews__text">Prestation réalisée en Juin 2019 </p>
                  </div>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </section>
      {{-- End Avis des utilisateurs  --}}


      {{-- Cta horizontal interessé par notre offre ? --}}
      <div class="sectionLayout horizontalCTADesk">
        <section class="horizontalInterest horizontalInterest--red">
          <svg class="icon horizontalInterest__icon">
            <use xlink:href="{{ asset('img/sprite.svg#icon-thumb-up') }}">
            </use>
          </svg>
          <div class="horizontalInterest__content">
            <h3 class="horizontalInterest__title">Intéressé par notre offre ?</h3>
            <p class="horizontalInterest__text">Étudions ensemble votre besoin spécifique afin de vous accompagner le mieux possible !</p>
          </div>
          <div class="horizontalInterest__buttonGroup">
            {{--
            <a href="tel:0600000000" class="btn btn--outline btn--whiteRed btn--icon js-datalayer-contact" data-eventname="contact téléphone" data-actionname="clic" data-position="page">
              <svg class="icon btn--iconImg">
                <use xlink:href="{{ asset('/img/sprite.svg#icon-telephone') }}">
                </use>
              </svg>
              <span class="inlineMob">Par téléphone</span>
              <span class="inlineDesk">06 00 00 00 00</span>
            </a>
            --}}
            <button class="btn btn--outline btn--whiteRed btn--icon js-showpopup js-datalayer-contact" data-eventname="contact email" data-actionname="clic" data-position="page"  data-target="contact">
              <svg class="icon btn--iconImg">
                <use xlink:href="{{ asset('/img/sprite.svg#icon-messagerie') }}">
                </use>
              </svg>
              <span>Par email</span>
            </button>
          </div>
        </section>
      </div>



      {{-- Faq - plus d'infos --}}
      <section class="sectionLayout sectionLayout__smallBgContainer">
        <div class="sectionLayout__smallBg">&nbsp;</div>
        <div class="row">
          <div class="col-xs-12 col-md-6 top-md">
            <section class="plusInfoBox">
              <div class="plusInfoBox__top">
                <svg class="icon  plusInfoBox__img">
                  <use xlink:href="{{ asset('img/sprite.svg#icon-more-infos') }}">
                  </use>
                </svg>
                <h2 class="plusInfoBox__title">Vous avez besoin de plus d’informations ?</h2>
              </div>
                <p class="plusInfoBox__desc">Souscription, aide, accompagnement... Nos équipes répondent à toutes vos questions !</p>
                {{--
                <a href="tel:0600000000" class="btn btn--outline btn--icon js-datalayer-contact" data-eventname="contact téléphone" data-actionname="clic" data-position="footer">
                  <svg class="icon btn--iconImg">
                    <use xlink:href="{{ asset('img/sprite.svg#icon-telephone') }}">
                    </use>
                  </svg>
                  <span class="inlineMob">Par téléphone</span>
                  <span class="inlineDesk">06 00 00 00 00</span>
                </a>
                --}}
                <button class="btn btn--outline btn--icon js-showpopup js-datalayer-contact" data-eventname="contact email" data-actionname="clic" data-position="page" data-target="contact">
                  <svg class="icon btn--iconImg">
                    <use xlink:href="{{ asset('img/sprite.svg#icon-messagerie') }}">
                    </use>
                  </svg>
                  <span>Par email</span>
                </button>
            </section>
          </div>
          <div class="col-md-6">
            <div class="faqBox js-faqAccordion js-showMoreQuestion">
              <div class="faqBox__header">
                <svg class="icon  faqBox__img">
                  <use xlink:href="{{ asset('img/sprite.svg#icon-FAQ') }}">
                  </use>
                </svg>
                <h2 class="faqBox__title">Foire Aux Questions</h2>
              </div>
              <ul class="faqBox__listing ">
                <li class="faqBox__question">
                  <div class="faqBox__question__head">
                    <h3 class="faqBox__question__title">Comment changer de syndic ?</h3>
                    <button class="faqBox__question__btn">
                      <svg class="icon faqBox__question__btn__icon">
                        <use xlink:href="{{ asset('img/sprite.svg#angledown') }}">
                        </use>
                      </svg>
                    </button>
                  </div>
                  <div class="faqBox__question__body">
                    <p>1 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur ipsam exercitationem illo facere saepe nihil fugiat ipsum officiis ducimus commodi quos, distinctio odit soluta quia harum laboriosam perferendis. Optio, necessitatibus.</p>
                  </div>
                </li>
                <li class="faqBox__question">
                  <div class="faqBox__question__head">
                    <h3 class="faqBox__question__title">Comment se passe la passation ? </h3>
                    <button class="faqBox__question__btn">
                      <svg class="icon faqBox__question__btn__icon">
                        <use xlink:href="{{ asset('img/sprite.svg#angledown') }}">
                        </use>
                      </svg>
                    </button>
                  </div>
                  <div class="faqBox__question__body">
                    <p>2 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur ipsam exercitationem illo facere saepe nihil fugiat ipsum officiis ducimus commodi quos, distinctio odit soluta quia harum laboriosam perferendis. Optio, necessitatibus.</p>
                  </div>
                </li>
                <li class="faqBox__question">
                  <div class="faqBox__question__head">
                    <h3 class="faqBox__question__title">Quelle est la différence entre le syndic en ligne et le synidc traditionnel ?</h3>
                    <button class="faqBox__question__btn">
                      <svg class="icon faqBox__question__btn__icon">
                        <use xlink:href="{{ asset('img/sprite.svg#angledown') }}">
                        </use>
                      </svg>
                    </button>
                  </div>
                  <div class="faqBox__question__body">
                    <p>3 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur ipsam exercitationem illo facere saepe nihil fugiat ipsum officiis ducimus commodi quos, distinctio odit soluta quia harum laboriosam perferendis. Optio, necessitatibus.</p>
                  </div>
                </li>
                <li class="faqBox__question">
                  <div class="faqBox__question__head">
                    <h3 class="faqBox__question__title">4. Quelle est la différence entre le syndic en ligne et le synidc traditionnel ?</h3>
                    <button class="faqBox__question__btn">
                      <svg class="icon faqBox__question__btn__icon">
                        <use xlink:href="{{ asset('img/sprite.svg#angledown') }}">
                        </use>
                      </svg>
                    </button>
                  </div>
                  <div class="faqBox__question__body">
                    <p>4 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur ipsam exercitationem illo facere saepe nihil fugiat ipsum officiis ducimus commodi quos, distinctio odit soluta quia harum laboriosam perferendis. Optio, necessitatibus.</p>
                  </div>
                </li>
                <li class="faqBox__question">
                  <div class="faqBox__question__head">
                    <h3 class="faqBox__question__title">Quelle est la différence entre le syndic en ligne et le synidc traditionnel ?</h3>
                    <button class="faqBox__question__btn">
                      <svg class="icon faqBox__question__btn__icon">
                        <use xlink:href="{{ asset('img/sprite.svg#angledown') }}">
                        </use>
                      </svg>
                    </button>
                  </div>
                  <div class="faqBox__question__body">
                    <p>4 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur ipsam exercitationem illo facere saepe nihil fugiat ipsum officiis ducimus commodi quos, distinctio odit soluta quia harum laboriosam perferendis. Optio, necessitatibus.</p>

                  </div>
                </li>
                <li class="faqBox__question">
                  <div class="faqBox__question__head">
                    <h3 class="faqBox__question__title">Quelle est la différence entre le syndic en ligne et le synidc traditionnel ?</h3>
                    <button class="faqBox__question__btn">
                      <svg class="icon faqBox__question__btn__icon">
                        <use xlink:href="{{ asset('img/sprite.svg#angledown') }}">
                        </use>
                      </svg>
                    </button>
                  </div>
                  <div class="faqBox__question__body">
                    <p>4 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur ipsam exercitationem illo facere saepe nihil fugiat ipsum officiis ducimus commodi quos, distinctio odit soluta quia harum laboriosam perferendis. Optio, necessitatibus.</p>
                  </div>
                </li>
              </ul>

              {{-- Show button only if (questions length >= 4) --}}
              <button class="faqBox__btn btn btn--outline js-showMoreFaq">Voir plus de questions</button>
            </div>
          </div>
        </div>
      </section>
      {{-- End - Faq - plus d'infos --}}

    </section>
    {{-- End Main --}}
  </div>


  {{-- Product Bottom Bar --}}
  <section class="productBar productBar--red">
    <div class="wrapper">
      <div class="productBar__content">
        <img class="productBar__img" src="{{ asset('img/logo_vivasyndic_xl.png') }}" alt="Viva Syndic" />
        <div class="productBar__textButton">
          <div class="productBar__text">
            <p>À partir de <span class="productBar__price">13,90 €</span> <span class="productBar__deskInfo">par mois et par logement*</span></p>
            <p class="productBar__terms">*Minimum 2500 € TT pas an pour les coproriétés de 5 à 15 logements</p>
          </div>
          <button class="productBar__terms__btn btn btn--red js-showpopup js-datalayer-action js-datalayer-action" data-eventname="Demande de devis" data-actionname="clic" data-offrename="Viva Syndic" data-target="devis">Demander un devis</button>
        </div>
      </div>
    </div>
  </section>
  {{-- end Product Bottom Bar --}}


    {{-- Popup devis --}}
    @include('partials.popupdevis', ['productName' => 'Viva Syndic'])

    {{-- Popup contact --}}
    @include('partials.popupcontact')

@stop