@php
  $currentLocale = \Config::get('app.locale');
@endphp

<!--section pillar-->
<section class="pillar">
    <div class="inner-pillar">
        <div class="container">
            <div class="row">
                <div class="col-lg-5 pillar-left">
                    <div class="tab number-tab">

                        <ul class="nav nav-tabs circle-container" role="tablist">
                          <li class="nav-item nav-1">
                            <a data-id="1" href="#number-1" class="nav-link site active show" data-toggle="tab"><span class="nav-number">1</span> <span class="nav-text">{{ __("Recherche des mots clés") }}</span></a>
                          </li>
                          <li class="nav-item nav-2">
                            <a data-id="2" href="#number-2" class="nav-link site" data-toggle="tab"><span class="nav-number">2</span> <span class="nav-text">{{ __("Étude de vos Concurrents") }}</span></a>
                          </li>
                          <li class="nav-item nav-3">
                            <a data-id="3" href="#number-3" class="nav-link site" data-toggle="tab"><span class="nav-number">3</span> <span class="nav-text">{{ __("Arborescence du site Web") }}</span></a>
                          </li>
                          <li class="nav-item nav-4">
                            <a data-id="4" href="#number-4" class="nav-link site" data-toggle="tab"><span class="nav-number">4</span> <span class="nav-text">{{ __("HTML Tag pages « meta tag »") }}</span></a>
                          </li>
                          <li class="nav-item nav-5">
                            <a data-id="5" href="#number-5" class="nav-link site" data-toggle="tab"><span class="nav-number">5</span> <span class="nav-text">{{ __("Sémantique HTML, contenu") }}, <br>{{ __("liens internes") }}</span></a>
                          </li>
                          <li class="nav-item nav-6">
                            <a data-id="6" href="#number-6" class="nav-link site" data-toggle="tab"><span class="nav-number">6</span> <span class="nav-text">{{ __("Backlink") }}</span></a>
                          </li>
                        </ul>

                        <div class="circle-text">
                              <p>{{ __("Les 6 pilliers du") }}</p>
                              <h3>SEO</h3>
                        </div>
                    </div>
                </div>

                <div class="col-lg-7 pillar-right">
                  <div class="pillar-mobile-title mobile">
                    <h2>{{ __("Les 6 pilliers du SEO") }}</h2>
                  </div>
                  <div class="tab-content">
                      <div id="number-1" class="tab-pane fade inner-tab-content active show">
                          <h2>1. {{ __("Recherche des mots clés") }}</h2>
                          <div class="item-system text-center" data-number="1">
                              <img src="{{ asset('web/images/seo/pillars-tab1-1.jpg') }}" />
                              <p class="text-img">{{ __("Quels sont les mots clés saisis par vos clients potentiels?") }}</p>
                              <img src="{{ asset('web/images/seo/pillars-tab1-2.jpg') }}" />
                          </div>
                      </div>
                      <div id="number-2" class="tab-pane fade inner-tab-content">
                        <h2>2. {{ __("Étude de vos Concurrents") }}</h2>
                          <div class="item-system text-center" data-number="2">
                              <img src="{{ asset('web/images/seo/pillars-tab2-1-' . strtolower($currentLocale) . '.jpg') }}" />
                              <ul class="list-question">
                                <li>{{ __("Qui sont-ils?") }}</li>
                                <li>{{ __("Quelle position occupent t-ils dans les résultats de recherche?") }}</li>
                                <li>{{ __("Comment sont-ils référencés?") }}</li>
                              </ul>
                              <p>{{ __("Etude de leur référencement selon les 6 piliers") }}</p>
                          </div>
                      </div>
                      <div id="number-3" class="tab-pane fade inner-tab-content">
                        <h2>3. {{ __("Arborescence du site Web") }}</h2>
                          <div class="item-system" data-number="3">
                              <img src="{{ asset('web/images/seo/pillars-tab3-1.png') }}" />
                              <p>{{ __("Mots clés clairement identifiés et benchmark des concurrents, nous allons construire l'URL de chaque page.") }}</p>
                              <ul class="list-tick">
                                <li>{{ __("Qui sont-ils?") }}</li>
                                <li>{{ __("Quelle position occupent t-ils dans les résultats de recherche?") }}</li>
                                <li>{{ __("Comment sont-ils référencés?") }}</li>
                              </ul>
                              <img src="{{ asset('web/images/seo/pillars-tab3-2.png') }}" />
                          </div>
                      </div>
                      <div id="number-4" class="tab-pane fade inner-tab-content">
                        <h2>4. {{ __("HTML Tag pages « meta tag »") }}</h2>
                          <div class="item-system" data-number="4">
                              <img src="{{ asset('web/images/seo/pillars-tab4-1.png') }}" />

                              <div class="d-flex justify-content-center">
                                <ul class="list-tick text-left mt-4">
                                  <li>{{ __("Doit contenir les mots clés identifiés") }}</li>
                                  <li>{{ __("Chaque balise doit être unique") }}</li>
                                </ul>
                              </div>
                          </div>
                      </div>
                      <div id="number-5" class="tab-pane fade inner-tab-content">
                        <h2>5. {{ __("Sémantique HTML, contenu, liens internes") }}</h2>
                          <div class="item-system" data-number="5">
                              <div class="row">
                                <div class="col-lg-6">
                                  <img src="{{ asset('web/images/seo/pillars-tab5-1.png') }}" />
                                </div>
                                <div class="col-lg-6">
                                  <img src="{{ asset('web/images/seo/pillars-tab5-2.png') }}" />

                                  <h4>{{ __("Balise principale") }} : </h4>
                                  <ul class="list-tick text-left mt-2">
                                    <li>{{ __('Tag')}} &lt;h1&gt;</li>
                                    <li>{{ __('Tag')}} &lt;h2&gt;</li>
                                    <li>{{ __('Images')}}: {{ __('Tag')}} &lt;ATL&gt;</li>
                                    <li>{{ __("Contenu textuel") }}: &lt;strong&gt; ; &lt;u&gt; ; &lt;em&gt; ...</li>
                                    <li>{{ __("Les liens externes et internes doivent contenir les balises title et description")}}</li>
                                    <li>{{ __("Doit contenir les mots clés identifiés") }}</li>
                                    <li>{{ __("Chaque balise doit être unique") }}</li>
                                  </ul>
                                </div>
                              </div>
                          </div>
                      </div>
                      <div id="number-6" class="tab-pane fade inner-tab-content">
                        <h2>6. {{ __("Backlink") }}</h2>
                          <div class="item-system" data-number="6">
                              <div class="row">
                                <div class="col-lg-6 text-center">
                                  <p class="my-3 mobile text-left">
                                    {!! __("<strong>\"Autorité\"</strong> de page est ce que Google utilise pour déterminer l'importance d'une page Web.") !!}
                                    {{ __("C'est l'un des nombreux facteurs utilisés pour déterminer les pages qui apparaissent dans les résultats de recherche en premier") }}.
                                  </p>
                                  <img src="{{ asset('web/images/seo/pillars-tab6-1.png') }}" />
                                  <p class="text-img">{{ __("Nombre de backlink pertinents") }}</p>
                                  <img src="{{ asset('web/images/seo/pillars-tab6-2.png') }}" class="desktop" />
                                  <img src="{{ asset('web/images/seo/pillars-tab6-2-mobile.png') }}" class="mobile-inline" />
                                  <p class="text-img">{{ __("Vous donne un score: autorité de page") }}</p>
                                  <img src="{{ asset('web/images/seo/arrow-down.png') }}" class="mobile-inline" />
                                </div>
                                <div class="col-lg-6" style="order: 1">
                                  <p class="my-3 desktop">
                                    {!! __("<strong>\"Autorité\"</strong> de page est ce que Google utilise pour déterminer l'importance d'une page Web.") !!}
                                    {{ __("C'est l'un des nombreux facteurs utilisés pour déterminer les pages qui apparaissent dans les résultats de recherche en premier") }}.
                                  </p>
                                  <img src="{{ asset('web/images/seo/pillars-tab6-3.png') }}" />
                                  <p class="text-img">{{ __("Donne les résultats du moteur de recherche") }}</p>
                                </div>
                              </div>
                          </div>
                      </div>

                      <div class="slider-system">
                          <div class="slider-nav">
                              <div class="nav flex justify-content-center">
                                  <div class="prev disable">
                                    <i class="lnr lnr-arrow-left"></i> {{ __("Retour") }}
                                  </div>
                                  <div class="next">
                                    {{ __("Suivant") }} <i class="lnr lnr-arrow-right"></i>
                                  </div>
                              </div>
                          </div>
                      </div>
                    </div>
                  </div>
            </div>
        </div>
    </div>
</section>