@extends('templates.base')

@section('title', 'Espuna' . (!empty($title) ? ' | ' . $title : null))

@section('head')
    <link rel="stylesheet" href="{{ url('assets/css/bootstrap.css') }}">
    <link rel="stylesheet" href="{{ url('assets/css/slick.css') }}">
    <link rel="stylesheet" href="{{ url('assets/css/app.css') }}">
@endsection

@push('scripts')
    <script src="{{ url('/dist/js/bootstrap.min.js') }}"></script>
    <script src="{{ url('/dist/js/jquery.min.js') }}"></script>
    <script src="{{ url('/dist/js/slick.min.js') }}"></script>
    <script src="{{ url('/assets/js/app.js') }}"></script>
@endpush

@section('body')

    <header>
        <nav class="navbar fixed-top navbar-expand-lg navbar-light">
            <div class="container">
                <a class="navbar-brand" href="{{ route('soudure') }}"><img src="./assets/images/logo.png"
                        alt="Logo ESPUNA" width="100"></a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#missions">Nos missions</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#produits">Nos produits</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#histoire">Notre savoir-faire</a>
                        </li>
                        <li class="nav-item">
                            <a class="btn btn-primary" href="#contact">Nous contacter</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <main>

        <!-- [HERO] -->
        <section id="hero">
            @yield('hero')
        </section>

        <!-- [PRODUCTS] -->
        <section id="produits" class="p--lg">
            @yield('products')
        </section>

        <!-- [MISSIONS] -->
        <section id="missions" class="text-center bg-dark text-light p--md">
            <div class="container">
                <h2 class="text-primary">Nos missions</h2>
                <p class="description">
                    Nous sommes soucieux d’apporter la meilleure réponse à nos clients et nos équipes sont en permanence
                    dédiées à ces objectifs.
                </p>

                <hr class="divider" size="4">

                <div class="row">
                    <div class="col-md-4">
                        <div>
                            <img src="./assets/images/ico-shield.png" alt="Icone bouclier">
                        </div>
                        <h3>
                            Préventeur
                        </h3>
                        <p>
                            Notre expertise est mise en premier lieu au service de la prévention des hommes et des femmes
                            qui ont besoin de se protéger dans leur univers de travail.
                        </p>
                    </div>
                    <div class="col-md-4">
                        <div>
                            <img src="./assets/images/ico-edit.png" alt="Icone crayon">
                        </div>
                        <h3>
                            Créateur
                        </h3>
                        <p>
                            Après analyse des situations par nos équipes, nous sommes en mesure de proposer les produits les
                            mieux adaptés.
                        </p>
                    </div>
                    <div class="col-md-4">
                        <div>
                            <img src="./assets/images/ico-marker.png" alt="Icone marqueur">
                        </div>
                        <h3>
                            Producteur local
                        </h3>
                        <p>
                            Le choix des meilleures matières premières, et une production de qualité dans notre usine de
                            fabrication française située à Lézignan-Corbières.
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- [EPI] -->
        <section id="epi" class="p--lg">
            <div class="container">
                <h2 class="mb-5 text-center">
                    Des EPI adaptés à vos besoins métiers
                </h2>
                <hr class="divider" size="4">
                <div class="row">
                    <div class="col-md-3">
                        <h3 class="mb-4">À chaque secteur</h3>
                        <ul>
                                                    </ul>
                    </div>
                    <div class="col-md-3">
                        <h3 class="mb-4">À chaque usage</h3>
                        <ul>
                                                    </ul>
                    </div>
                    <div class="col-md-6">
                        <div class="card bg-dark text-light">
                            <div class="card-body">
                                <h3>
                                    Besoin de renseignements ? <br>
                                    Un projet ?
                                </h3>
                                <p>
                                    Vous recherchez un conseil, vous souhaitez un renseignement technique, vous avez un
                                    besoin urgent d’équipements de protection individuelle ?  N’hésitez pas à contacter l’un
                                    de nos experts. Nous sommes à votre entière disposition et nous serons heureux de
                                    pouvoir contribuer à vos projets futurs.
                                </p>
                                <a href="#contact" class="btn btn-primary">Contactez nos experts </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- [HISTORY] -->
        <section id="histoire" class="bg-dark text-light p--lg">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 offset-lg-6">
                        <div class="mobile-bg">
                            <h2 class="text-primary">ESPUNA Aujourd'hui</h2>
                            <p>
                                Fabricant français, spécialisé dans les équipements de protection individuelle depuis 1967,
                                Espuna a participé aux travaux de normalisation européenne des EPI. A ce titre, l’entreprise
                                a toujours été soucieuse de satisfaire ses clients en maîtrisant sa chaîne de fabrication,
                                des matières premières jusqu’au produit fini. Espuna est aujourd’hui une entreprise fédérant
                                des hommes et des femmes autour d’une même passion, la protection pour tous !
                            </p>
                            <div>
                                <img src="./assets/images/labels.png" alt="Label" height="50">
                            </div>
                            <div class="mt-4">
                                <a href="#contact" class="btn btn-primary">Nous contacter</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </main>
    <footer class="bg-dark text-light">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <img src="./assets/images/logo--white.png" alt="Logo" height="80">
                    <p>
                        44 Boulevard Ferdinand Buisson,<br>
                        route de Luc - BP 110 11205 Lézignan Corbières France Cedex, France<br>
                        Phone : +33 (0)4 68 27 05 72<br>
                        Fax : +33 (0) 4 68 27 28 38
                    </p>
                    <div class="social-networks mb-3">
                        <a href="https://www.linkedin.com/company/espuna-sas/">
                            <img src="./assets/images/ico-linkedin.png" alt="Logo Linkedin">
                        </a>
                        <a href="https://www.facebook.com/Espuna-International-311021015597468/">
                            <img src="./assets/images/ico-facebook.png" alt="Logo Facebook">
                        </a>
                    </div>
                </div>
                <div class="col-md-3">
                    <h3>
                        ESPUNA
                    </h3>
                    <ul>
                        <li><a href="#missions">Nos mission</a></li>
                        <li><a href="#produits">Nos produits</a></li>
                        <li><a href="#histoire">Notre savoir-faire</a></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <h3>
                        Secteurs
                    </h3>
                    <ul>
                                            </ul>
                </div>
                <div class="col-md-3">
                    <h3>
                        Usages
                    </h3>
                    <ul>
                                            </ul>
                </div>
            </div>
            <hr>
            <div class="text-center">
                <a href="https://www.espuna.fr/politique-de-confidentialite/" target="_blank">Politique de
                    confidentialité</a>
                <p class="m-0">
                    Espuna International © 2021 | Tous droits réservés
                </p>
            </div>
        </div>
    </footer>

@endsection