@extends('layouts.app')
@section('index')
<div class="demo-cont">
        <!-- slider start -->
        <div class="fnc-slider example-slider">
            <div class="fnc-slider__slides">
                <!-- slide start -->
                <div class="fnc-slide m--blend-green m--active-slide">
                    <div class="fnc-slide__inner">
                        <div class="fnc-slide__mask">
                            <div class="fnc-slide__mask-inner"></div>
                        </div>
                        <div class="fnc-slide__content">
                            <h2 class="fnc-slide__heading">
                                <div class="fnc-slide__heading-line">
                                    <span>METTRE DU TEXTE</span>
                                </div>
                                <div class="fnc-slide__heading-line">
                                    <span>METTRE DU TEXTE</span>
                                </div>
                            </h2>
                            <p class="banner-para pl-3 text-white">Lokossue Connect</p>
                        </div>
                    </div>
                </div>
                <!-- slide end -->
                <!-- slide start -->
                <div class="fnc-slide m--blend-dark">
                    <div class="fnc-slide__inner">
                        <div class="fnc-slide__mask">
                            <div class="fnc-slide__mask-inner"></div>
                        </div>
                        <div class="fnc-slide__content">
                            <h2 class="fnc-slide__heading">
                                <div class="fnc-slide__heading-line">
                                    <span>METTRE DU TEXTE</span>
                                </div>
                                <div class="fnc-slide__heading-line">
                                    <span>METTRE DU TEXTE</span>
                                </div>
                            </h2>
                            <p class="banner-para pl-3 text-white">Lokossue Connect</p>
                        </div>
                    </div>
                </div>
                <!-- slide end -->
                <!-- slide start -->
                <div class="fnc-slide m--blend-red">
                    <div class="fnc-slide__inner">
                        <div class="fnc-slide__mask">
                            <div class="fnc-slide__mask-inner"></div>
                        </div>
                        <div class="fnc-slide__content">
                            <h2 class="fnc-slide__heading">
                                <div class="fnc-slide__heading-line">
                                    <span>METTRE DU TEXTE</span>
                                </div>
                                <div class="fnc-slide__heading-line">
                                    <span>METTRE DU TEXTE</span>
                                </div>
                            </h2>
                            <p class="banner-para pl-3 text-white">Lokossue Connect</p>
                        </div>
                    </div>
                </div>
                <!-- slide end -->
                <!-- slide start -->
                <div class="fnc-slide m--blend-blue">
                    <div class="fnc-slide__inner">
                        <div class="fnc-slide__mask">
                            <div class="fnc-slide__mask-inner"></div>
                        </div>
                        <div class="fnc-slide__content">
                            <h2 class="fnc-slide__heading">
                                <div class="fnc-slide__heading-line">
                                    <span>METTRE DU TEXTE</span>
                                </div>
                                <div class="fnc-slide__heading-line">
                                    <span>Mettre du texte</span>
                                </div>
                            </h2>
                            <p class="banner-para pl-3 text-white">Lokossue Connect</p>
                        </div>
                    </div>
                </div>
                <!-- slide end -->
            </div>
            <nav class="fnc-nav">
                <div class="fnc-nav__bgs">
                    <div class="fnc-nav__bg m--navbg-green m--active-nav-bg"></div>
                    <div class="fnc-nav__bg m--navbg-dark"></div>
                    <div class="fnc-nav__bg m--navbg-red"></div>
                    <div class="fnc-nav__bg m--navbg-blue"></div>
                </div>
                <div class="fnc-nav__controls">
                    <button class="fnc-nav__control">
                        Image 1
                        <span class="fnc-nav__control-progress"></span>
                    </button>
                    <button class="fnc-nav__control">
                        Image 2
                        <span class="fnc-nav__control-progress"></span>
                    </button>
                    <button class="fnc-nav__control">
                        Image 3
                        <span class="fnc-nav__control-progress"></span>
                    </button>
                    <button class="fnc-nav__control">
                        Image 4
                        <span class="fnc-nav__control-progress"></span>
                    </button>
                </div>
            </nav>
        </div>
        <!-- slider end -->
    </div>
<!-- about section -->
<section class="w3l-text-6 py-5" id="about">
    <div class="text-6-mian py-lg-5 py-md-4 py-3">
        <div class="container">
            <div class="row top-cont-grid align-items-center">
                <div class="col-lg-6 left-img pr-lg-4">
                    <img src="assets/images/about.jpg" alt="" class="img-responsive img-fluid" />
                    <div class="row mt-sm-4 mt-3">
                        <div class="col-6 img-pad">
                            <img src="assets/images/about2.jpg" alt="" class="img-responsive img-fluid" />
                        </div>
                        <div class="col-6 img-pad-2">
                            <img src="assets/images/about3.jpg" alt="" class="img-responsive img-fluid" />
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 text-6-info mb-lg-0 mb-4 pl-lg-5">
                    <h6>Bienvenue à Lokossué Connect</h6>
                    <h4 class="theme-style-top">La démarche qualité est l’axe majeur de la stratégie de développement de notre entreprise.</h4>
                    <p>Agence de communication digital et stratégie de marque, basée à Abidjan</p>
                    <p>Agence de communication au cœur de l’Occitanie nous accompagnons les entreprises et les institutions dans leur stratégie de communication.</p>
                    
                </div>
            </div>
        </div>
    </div>
</section>
<!-- //about section -->
<div style="margin: 8px auto; display: block; text-align:center;">

<!---728x90--->

</div>
<!-- bg with video icon -->
<section class="w3l-covers-14">
    <div class="covers14-block py-5">
        <div class="container py-sm-5 py-4">
            <div class="covers14-text text-center mx-auto py-lg-5" style="max-width:780px">
                <h4>La perfection dans chaque centimètre de nos produits </h4>
                <div class="video-section">
                    <a href="#small-dialog" class="popup-with-zoom-anim play-view text-center">
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- //bg with video icon -->
<div style="margin: 8px auto; display: block; text-align:center;">

<!---728x90--->

</div>
<!-- image with text section -->
<section class="w3l-text-6" id="services">
    <div class="text-6-mian bottom-space py-5">
        <div class="container py-lg-5 py-md-4 py-3">
            <div class="row top-cont-grid align-items-center">
                <div class="col-lg-5 right-img sec-img-ab">
                    <img src="assets/img/marque.jpg" alt="" class="img-responsive img-fluid" />
                </div>
                <div class="col-lg-1">

                </div>
                <div class="col-lg-6 left-cont mb-lg-0 mb-5">
                    <h6>Pôles d'expertise</h6>
                    <h4>Identité de marque</h4>
                    <p>Nom, logo, charte graphique, positionnement… Nous accompagnons les entreprises dans la définition de leur identité de marque.</p>
                    <p>Chez Lokossué Connect, nous partons du principe que chaque client ou campagne de communication est unique. Notre priorité est avant tout de bien comprendre vos attentes. Quelle que soit la problématique : positionnement de marque ou repositionnement, architecture de marque, création du territoire d’expression, concept de communication…</p>
                    <a href="{{route('expertise')}}" class="btn button-style"> Voir les services</a>
                </div>
            </div>
            <div class="row top-cont-grid top-space align-items-center">
                <div class="col-lg-6 left-cont mb-lg-0 mb-5">
                    <h6>Pôles d'expertise</h6>
                    <h4>Développement web</h4>
                    <p>Nous intervenons sur toute la chaîne du développement web, de la création de sites web à la création d’apps sur mesure.</p>
                    <p>Chez Lokossue, nous conseillons sur les meilleures stratégies en terme d’expérience utilisateur à mettre en place, et ce en fonction de vos problématiques et de vos objectifs. Nous analysons en profondeur votre univers de marque, ainsi que votre marché, et nous construisons, avec vous, l’ergonomie la plus pertinente et la plus efficace.</p>
                    <a href="{{route('expertise')}}" class="btn button-style"> Voir les services</a>
                </div>
                <div class="col-lg-1">

                </div>
                <div class="col-lg-5 right-img">
                    <img src="assets/img/web.jpg" alt="" class="img-responsive img-fluid" />
                </div>
            </div>
        </div>
    </div>
</section>
<!-- image with text section -->

<!-- card section -->
<section class="w3l-features-4" id="do">
    <div class="features4-block text-center py-5">
        <div class="container py-lg-5 py-md-4 py-3">
            <div class="row features4-grids">
                <div class="col-xl-3 col-sm-6">
                    <div class="features4-grid">
                        <div class="feature-images">
                            <span class="fa fa-thumbs-o-up" aria-hidden="true"></span>
                        </div>
                        <h5><a href="#about">Réseaux sociaux</a></h5>
                        <p>Pour amplifier les messages sur les réseaux sociaux, nous configurons des campagnes de médiatisation ciblées, terriblement efficaces.</p>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 mt-sm-0 mt-4">
                    <div class="features4-grid active">
                        <div class="feature-images">
                            <span class="fa fa-sign-language" aria-hidden="true"></span>
                        </div>
                        <h5><a href="#about" class="active">Conseil & stratégie</a></h5>
                        <p>Nous accompagnons les entreprises dans leur stratégie de marque : architecture, positionnement et territoire d’expression de marque.</p>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 mt-xl-0 mt-4">
                    <div class="features4-grid">
                        <div class="feature-images">
                            <span class="fa fa-ravelry" aria-hidden="true"></span>
                        </div>
                        <h5><a href="#about">Création graphique</a></h5>
                        <p>Beau + efficace, tels pourraient être les deux critères de notre approche graphique.</p><br><br> 
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 mt-xl-0 mt-4">
                    <div class="features4-grid">
                        <div class="feature-images">
                            <span class="fa fa-bullhorn" aria-hidden="true"></span>
                        </div>
                        <h5><a href="#about">Branding</a></h5>
                        <p>L’identité visuelle d’une marque est un élément essentiel de sa visibilité et de son appropriation par le public. </p><br>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- //card section -->

<!-- products section -->
<section class="w3l-products py-5" id="products">
    <div class="container py-lg-5 py-md-4 py-3">
        <div class="mx-auto" style="max-width: 1020px">
            <h3 class="title-style mb-md-5 mb-4">Projets récent</h3>
            <div class="row text-center">
                <div class="col-4 product-content">
                    <a href="{{route('galery')}}">
                        <img src="assets/img/6.jpg" alt="" class="img-responsive img-fluid" />
                        <h5>Badge</h5>
                    </a>
                </div>
                <div class="col-4 product-content">
                    <a href="{{route('galery')}}">
                        <img src="assets/img/1.jpg" alt="" class="img-responsive img-fluid" />
                        <h5> Carte de visite</h5>
                    </a>
                </div>
                <div class="col-4 product-content">
                    <a href="{{route('galery')}}">
                        <img src="assets/img/3.jpg" alt="" class="img-responsive img-fluid" />
                        <h5> Kakemonos</h5>
                    </a>
                </div>
            </div>
        </div><br><br>
        <div class="mx-auto" style="max-width: 1020px">
            <div class="row text-center">
                <div class="col-4 product-content">
                    <a href="{{route('galery')}}">
                        <img src="assets/img/7.jpg" alt="" class="img-responsive img-fluid" />
                        <h5> Plaquettes</h5>
                    </a>
                </div>
                <div class="col-4 product-content">
                    <a href="{{route('galery')}}">
                        <img src="assets/img/5.jpg" alt="" class="img-responsive img-fluid" />
                        <h5> Chasubles</h5>
                    </a>
                </div>
                <div class="col-4 product-content">
                    <a href="{{route('galery')}}">
                        <img src="assets/img/9.jpg" alt="" class="img-responsive img-fluid" />
                        <h5> Flyers</h5>
                    </a>
                </div>
            </div>
        </div>
        <div class="container py-lg-5 py-md-4 py-3">
            <h3 class="title-style mb-md-5 mb-4">Appels d'offre</h3>
            <div class="row">
                <div class="col-lg-4 col-sm-6">
                    <div class="box13">
                        <img src="assets/img/PNLS.jpg" class="img-fluid img-thumbnail" alt="" />
                        <div class="box-content">
                            <h3 class="title" data-blast="color">Programme National de Lutte contre le SIDA</h3>
                            <span class="post">PNLS</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6 mt-sm-0 mt-4">
                    <div class="box13">
                        <img src="assets/img/PNLT.jpg" class="img-fluid img-thumbnail" alt="" />
                        <div class="box-content">
                            <h3 class="title" data-blast="color">Programme National de Lutte contre la Tuberculose</h3>
                            <span class="post">PNLT</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6 mt-lg-0 mt-4">
                    <div class="box13">
                        <img src="assets/img/PNLP.jpg" class="img-fluid img-thumbnail" alt="" />
                        <div class="box-content">
                            <h3 class="title" data-blast="color">Programme National de Lutte contre le Paludisme</h3>
                            <span class="post">PNLP</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
        <h3 class="title-style mb-md-5 mb-4">Nos partenaires</h3>
        <div class="slider">
    
            <div class="slide-track">
                <div class="slide">
                    <img src="assets/img/partenaires/CIE.jpg" height="100" width="100"alt="">
                </div>
                <div class="slide">
                    <img src="assets/img/partenaires/CDCI.jpg" height="100" width="100"alt="">
                </div>
                <div class="slide">
                    <img src="assets/img/partenaires/CARAT.jpg" height="100" width="100"alt="">
                </div>
                <div class="slide">
                    <img src="assets/img/partenaires/ADJ.jpg" height="100" width="100"alt="">
                </div>
                <div class="slide">
                    <img src="assets/img/partenaires/AFRICA.jpg" height="100" width="100"alt="">
                </div>
                <div class="slide">
                    <img src="assets/img/partenaires/ATELIER.jpg" height="100" width="100"alt="">
                </div>
                <div class="slide">
                    <img src="assets/img/partenaires/CI-ENERGIE.jpg" height="100" width="100"alt="">
                </div>
                <div class="slide">
                    <img src="assets/img/partenaires/ENGENDA.jpg" height="100" width="100"alt="">
                </div>
                <div class="slide">
                    <img src="assets/img/partenaires/FONTIER.jpg" height="100" width="100"alt="">
                </div>
            </div>
        </div>
    </div>
</section>

<!-- fin Partenaires -->

@endsection