@extends('layout.headerAndFooter')

@section('headLinks')
    <link rel="stylesheet" href="{{ asset('siteStyle/home.css') }}">
    <link rel="stylesheet" href="{{ asset('siteStyle/sectionStyle/topSection.css') }}">
    <link rel="stylesheet" href="{{ asset('siteStyle/sectionStyle/brandsShow.css') }}">

    <link rel="stylesheet" href="{{ asset('siteStyle/expertise.css') }}">

    <meta name="description" content="content description">
@stop

@section('title')
    service page
@stop

@section('content')
    <section class="containerB">
        <div class="topSection">
            <div class="titleAndBtn">
                <div>
                    @include('sections.breadcrumbs', [
                        'parentPageLink' => route('home'),
                        'parentPage' => 'Home',
                        'childPageLink' => '',
                        'childPage' => "$pageName",
                        'childPageLink2' => '',
                        'childPage2' => '',
                        'fontColor' => 'lightFont',
                    ])
                    <h1 class="titleTopSection"><span></span>{{ $bigTitle }}</h1>
                    <h2 class="underTitle">{{ $subTitle }}</h2>
                </div>

                <a class="atirao-button atirao-button--primary atirao-button--large" href="{{ route('contact') }}">
                    <span class="txt">Prendre un Rv</span>
                    <span class="bdrl"></span>
                    <span class="bdrr"></span>
                </a>
            </div>
            <div class="image">
                <img src="{{ asset('images/expertises/expertises_IMG1.webp') }}" alt="">
            </div>
        </div>
    </section>

    <!-- brands show section -->
    @include('sections.clients')
    <!-- brands show section -->

    <section class="containerW">
        <div class="itroduction">
            <h2 class="title">Les réseaux sociaux ne dorment jamais.</h2>
            <p class="content">L’approche axée sur les réseaux sociaux est un objectif en constante évolution. Elle ne
                cesse jamais d’évoluer, donc vous ne devriez pas non plus. Nous sommes une agence de marketing social primée
                et à service complet : nous aidons les marques à <span>unifier, amplifier et développer</span> leur
                marketing sur les réseaux sociaux. Nous prenons en charge le travail lourd, de l’idéation et de la stratégie
                à la création, l’exécution et l’analyse, faisant de nous votre <span>guichet unique pour la transformation
                axée sur les réseaux sociaux.</span>
            </p>
        </div>
    </section>

    <!-- Services section -->
    <section class="containerW">
        <div class="services" data-aos="fade-up">
            <button id="whatWeOffre" class="active"> Nos services </button>
            <button id="caseStudies" style="opacity:0"> Etude de cas </button>

            <div class="swiper-container Allservices">
                <div class="swiper-wrapper servicesCards show" id="WWOcontent">
                    @foreach ($offersDetaild as $offerDetaild)
                        <a class="swiper-slide solutionCard services" href="{{ route('expertise', ['view' => 'performance']) }}">
                            <div class="heading">
                                {!! $offerDetaild['offreSvg'] !!}
                                <h2 class="heading_cardTitle">{{ $offerDetaild['offertitle'] }}</h2>
                                <p class="content">
                                    Notre agence digitale de stratégie digitale se distingue par un accompagnement continu et des conseils adaptés à chaque étape de votre stratégie. 
                                </p>
                            </div>
                            <span class="arrow-circle"></span>
                            <span class="arrow-circle-inhover">En savoir plus</span>
                        </a>
                    @endforeach
                </div>

                <button class="slick-arrow slick-prev" aria-label="Previous" type="button" aria-disabled="false">
                    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 41 17" fill="none">
                        <path d="M39.4202 8.28999H1.39985M1.39985 8.28999L8.58194 1.02881M1.39985 8.28999L8.58194 15.4998" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                </button>
                <button class="slick-arrow slick-next" aria-label="Next" type="button" aria-disabled="false">
                    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 41 17" fill="none">
                        <path d="M1.39985 8.28999H39.4202M39.4202 8.28999L32.2381 1.02881M39.4202 8.28999L32.2381 15.4998" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                </button>
            </div>
        </div>
    </section>
    <!-- Services section end -->

    <!-- Approche section -->
    <section class="containerW">
        <!-- NOTRE MÉTHODOLOGIE -->
        <div class="bloc whatWeOffre">
            <h2 class="pageTitles W"><span style="color: var(--red);">Notre travail</span></h2>

            <div class="accordion">
                <div class="accordion__table">
                    <div class="accordion__item show">
                        <div class="shower show"
                            style="background-image: url({{ asset('images/home/tabs/tab1.webp') }})">
                            <div class="accordion__title">
                                <h2>#1 AUDIT & STRATÉGIE DIGITALE</h2>
                            </div>
                        </div>
                        <div class="accordion__content">
                            <div class="WWOimageZone">
                                <img src="{{ asset('images/home/tabs/tab1.webp') }}" alt="">
                            </div>
                            <div class="accordion__text">
                                <h2 class="titre">#1 AUDIT & STRATÉGIE DIGITALE</h2>
                                <p class="disc">Notre processus commence par une analyse minutieuse de votre présence en
                                    ligne, y compris votre site web, réseaux sociaux, et publicités. Ensuite, nous concevons
                                    une stratégie digitale personnalisée, basée sur des données, pour maximiser votre succès
                                    en ligne.</p>
                            </div>
                        </div>
                    </div>

                    <div class="accordion__item">
                        <div class="shower" style="background-image: url({{ asset('images/home/tabs/tab2.webp') }})">
                            <div class="accordion__title">
                                <h2>#2 MISE EN PLACE DE TESTS OPÉRATIONNELS</h2>
                            </div>
                        </div>
                        <div class="accordion__content">
                            <div class="WWOimageZone">
                                <img src="{{ asset('images/home/tabs/tab2.webp') }}" alt="">
                            </div>
                            <div class="accordion__text">
                                <h2 class="titre">#2 MISE EN PLACE DE TESTS OPÉRATIONNELS</h2>
                                <h3 class="disc">En fonction de votre secteur d'activité, de votre public cible et de vos
                                    objectifs, nous choisissons les leviers appropriés, tels que SEA, Réseaux sociaux, etc.
                                    puis nous les optimisons grâce à des tests A/B et à une analyse approfondie des données.
                                </h3>
                            </div>
                        </div>
                    </div>

                    <div class="accordion__item">
                        <div class="shower" style="background-image: url({{ asset('images/home/tabs/tab3.webp') }})">
                            <div class="accordion__title">
                                <h2>#3 ANALYSE DES RÉSULTATS ET OPTIMISATIONS CONTINUS</h2>
                            </div>
                        </div>
                        <div class="accordion__content">
                            <div class="WWOimageZone">
                                <img src="{{ asset('images/home/tabs/tab3.webp') }}" alt="">
                            </div>
                            <div class="accordion__text">
                                <h2 class="titre">#3 ANALYSE DES RÉSULTATS ET OPTIMISATIONS CONTINUS</h2>
                                <h3 class="disc">En gardant un œil vigilant sur les indicateurs clés, nous vous assurons
                                    des améliorations continues et des performances qui dépassent vos attentes.</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <h2 class="pageTitles W"><span style="color: var(--red); margin-left:10%;">Powering everything</span></h2>

    <section class="poweringSection">
        <a href="" class="solutionCard" target="_blank">
            <img src="{{ asset('images/home/solutions/talent.webp') }}" alt="performance">
            <div class="heading">
                {{-- <h2 class="heading_card_sous_Title">performance</h2> --}}
                <h3 class="heading_cardTitle"><img src="{{ asset('images/logoAtirao/1.png') }}" alt="">
                    CreatorOS<sup>TM</sup>
                </h3>
                <p class="content">
                    Experts en acquisition à la performance, nous réalisons des audits,
                    suivons rigoureusement vos campagnes et optimisons constamment
                    pour générer des leads qualifiés à moindre coût, assurant ainsi un meilleur ROI.
                </p>
            </div>
            <span class="arrow-circle"></span>
            <span class="arrow-circle-inhover">Évoluez avec nous</span>
        </a>

        <a href="" class="solutionCard" target="_blank">
            <img src="{{ asset('images/home/solutions/Technology.webp') }}" alt="performance">
            <div class="heading">
                {{-- <h2 class="heading_card_sous_Title">créativité</h2> --}}
                <h3 class="heading_cardTitle"><img src="{{ asset('images/logoAtirao/1.png') }}" alt="">
                    Secure<sup>TM</sup></h3>
                <p class="content">
                    La créativité est au cœur de notre pôle contenu chez Atirao. Nous restons à la pointe des tendances
                    graphiques pour créer des contenus performants qui captivent votre audience cible.
                </p>
            </div>
            <span class="arrow-circle"></span>
            <span class="arrow-circle-inhover">Évoluez avec nous</span>
        </a>
    </section>
@stop

@section('footerScripts')
    <script src="{{ asset('siteScripts/brandsSwiper.js') }}"></script>
    <script src="{{ asset('siteScripts/servicesSwiper.js') }}"></script>
    <script src="{{ asset('siteScripts/notreMethodologie.js') }}"></script>
@stop