<?php /* Template Name: Accueil */ get_header(); ?>
<div id="content_aeb">
    <main>
        <section id="ioz-1">
            <picture>
                <source srcset="<?= get_template_directory_uri().'/images/bannieres-ent-mobile.jpg' ?>" media="(max-width: 800px)">
                <img class="banner" src="<?= get_template_directory_uri().'/images/bannieres-ent-big.jpg'?>" alt="banner image" />
            </picture>
            <div class="container">
                <div class="text-ban">
                    <div class="main-title">
                        <h1 class="my-0">l'eau<br> micro-filtrée<br> <span>pour vos collaborateurs</span></h1>
                        <button type="button" class="button">
                            <a href="#">EN SAVOIR PLUS</a>
                        </button>
                    </div>
                    <figure class="">
                        <img src="<?= get_template_directory_uri().'/images/machine-ioz.png'?>" alt="">
                    </figure>
                </div>
            </div>
        </section>

        <section id="ioz-2">
            <div class="container">
                <div class="row">
                    <div class="bloc-3">
                        <h2>une entreprise <span>bretonne <br> à vos côtés</span></h2>
                    </div>
                    <div class="bloc-3">
                        <img src="<?= get_template_directory_uri()."/images/ioz-bretagne.svg"?>" alt="carte implentation Bretagne">
                    </div>

                    <div class="bloc-3">
                        <p>
                            Avec IOZ, vous bénéficiez des services d’une entreprise locale, implantée dans le Morbihan.
                        </p>
                        <p>
                            Cela se traduit par une <strong>grande proximité avec nos équipes</strong> pour le conseil
                            en amont mais
                            c’est aussi <strong>un réel gage de rapidité</strong> pour l’installation de votre fontaine,
                            l’accès à tous
                            nos
                            services et les rendez-vous de maintenance.
                        </p>
                    </div>
        </section>


        <section id="ioz-3" class="service">
            <div class="container">
                <div class="title">
                    <h2 class="before-title">nos services</h2>
                    <p class="subtitle">Installées à Vannes, les équipes IOZ sont à votre écoute et font de la
                        proximité
                        clients une priorité absolue.</p>
                </div>
                <div class="row">
                    <div class="bloc-3">
                        <h3 class="title-bloc title-bloc-1">Rendez-vous</h3>
                        <p>Nous fixons un rendez-vous ensemble dans votre établissement pour établir un audit précis de
                            vos
                            attentes, besoins et contraintes. </p>
                        <p>Il est essentiel de se rencontrer et d’échanger pour définir précisément la solution la plus
                            adaptée.</p>
                    </div>
                    <div class="bloc-3">
                        <h3 class="title-bloc title-bloc-2">Prise en main</h3>
                        <p>Une fois la fontaine à eau IOZ installée, nous formons vos équipes à une utilisation et un
                            entretien optimal de la machine.
                        </p>
                        <p>
                            Nous pourrons également les sensibiliser et apporter des réponses à toutes leurs questions
                            sur la consommation de l’eau micro-filtrée.
                        </p>
                    </div>
                    <div class="bloc-3">
                        <h3 class="title-bloc title-bloc-3">Suivi</h3>
                        <p>2 visites de maintenance au minimum tous les ans. </p>
                        <p>Prévention et entretien de la machine, changement du système de filtration, assainissement et
                            nettoyage complet.</p>
                        <p>24h pour une intervention d’urgence si besoin.</p>
                        <p>Délai de services d’urgences le plus rapide en France, notamment en province.</p>

                    </div>
                </div>
                <div class="button-center-container">
                    <button class="button">
                        <a href="#">Prenons Rendez-vous</a>
                    </button>
                </div>
            </div>
        </section>

        <section id="ioz-4">
            <!-- <img src="images/fond-machines.jpg" alt="background section"> -->
            <div class="container">
                <div class="row">
                    <div class="bloc-4-5">
                        <div class="row multiple-items">
                            <figure class="bloc-3">
                            
                                <img src="<?= get_template_directory_uri().'/images/lagrandioz.jpg' ?>" alt="appareil 1">
                                <figcaption>
                                    La Grand'Ioz
                                </figcaption>
                            </figure>
                            <figure class="bloc-3">
                            <img src="<?= get_template_directory_uri().'/images/lapetitioz.jpg' ?>" alt="appareil 1">
                                <figcaption>
                                    La Petit'Ioz
                                </figcaption>
                            </figure>
                            <figure class="bloc-3">
                            <img src="<?= get_template_directory_uri().'/images/laminioz.jpg' ?>" alt="appareil 1">

                                <figcaption>
                                    La Min'Ioz
                                </figcaption>
                            </figure>
                            <figure class="bloc-3">
                            <img src="<?= get_template_directory_uri().'/images/lagrandioz.jpg' ?>" alt="appareil 1">
                                <figcaption>
                                    La Grand'Ioz
                                </figcaption>
                            </figure>
                            <figure class="bloc-3">
                            <img src="<?= get_template_directory_uri()."/images/lapetitioz.jpg" ?>" alt="appareil 1">

                                <figcaption>
                                    La Petit'Ioz
                                </figcaption>
                            </figure>
                            <figure class="bloc-3">
                            <img src="<?= get_template_directory_uri()."/images/laminioz.jpg" ?>" alt="appareil 1">
                                <figcaption>
                                    La Min'Ioz
                                </figcaption>
                            </figure>
                        </div>

                    </div>
                </div>
            </div>
        </section>

        <section id="ioz-5">
            <div class="container">
                <div class="row">
                    <div class="bloc-3">
                        <div class="flex">
                            <div class="rea-img">
                            <img src="<?= get_template_directory_uri()."/images/sure.svg"?>" alt="appareil 1">

                            </div>
                            <div>
                                <h3>sûre</h3>
                                <p>Issue de votre réseau local, l’eau est régulièrement contrôlée pour garantir
                                    votre
                                    sécurité.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="bloc-3">
                        <div class="flex">
                            <div class="rea-img">
                            <img src="<?= get_template_directory_uri()."/images/pure.svg"?>" alt="appareil 1">

                            </div>
                            <div>
                                <h3>pure</h3>
                                <p>Une eau purifiée, sans chlore, sans microparticules de plastique, sans
                                    aucune
                                    mauvaise
                                    saveur.
                                    Idéal pour se désaltérer et pour toutes vos préparations à base
                                    d’eau (infusions, thés…).
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="bloc-3">
                        <div class="flex">
                            <div class="rea-img">
                            <img src="<?= get_template_directory_uri()."/images/locale.svg"?>" alt="appareil 1">


                            </div>
                            <div>
                                <h3>locale</h3>
                                <p>Prélevée directement depuis votre réseau, l’eau est garantie 100% locale.
                                </p>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </section>

        <section id="ioz-6">
            <div class="row">
                <figure class="bloc-3">
                <img src="<?= get_template_directory_uri()."/images/ioz1.jpg"?>" alt="appareil 1">


                </figure>
                <figure class="bloc-3">
                <img src="<?= get_template_directory_uri()."/images/ioz2.jpg"?>" alt="appareil 1">


                </figure>
                <figure class="bloc-3">
                <img src="<?= get_template_directory_uri()."/images/ioz3.jpg"?>" alt="appareil 1">
                </figure>
            </div>
        </section>

        <section id="ioz-7">
            <div class="container">
                <div>
                    <h2 class="before-title2">les avantages <br> <span>pour l'entreprise</span></h2>


                </div>
                <div class="row">
                    <div class="bloc-3 simple">
                        <h3>+ simple</h3>

                        <ul>
                            <li>
                                <strong>Gain de place</strong><br />
                                Plus besoin de stockage de bouteilles
                            </li>
                            <li>
                                <strong>Gain de temps</strong><br />
                                Plus besoin de passer de commandes et gérer les consignes
                            </li>
                            <li>
                                <strong>Coûts maîtrisés</strong><br>
                                Un prix fixe mensuel sans surprise adapté à vos besoins
                            </li>
                            <li>
                                <strong>Fiabilité</strong><br>
                                Fontaines fabriquées à la main en Italie, résistantes et performantes
                            </li>
                            <li>
                                <strong>Sécurité</strong><br>
                                Eau du réseau ultra contrôlée
                                et purifiée
                            </li>
                        </ul>

                    </div>


                    <div class="bloc-3 ecologique">
                        <h3>+ écologique</h3>

                        <ul>
                            <li>
                                <strong>Solution bénéfique pour l’environnement.</strong><br>
                                Vous éliminez le plastique
                                en choisissant une solution
                                zéro déchet.
                            </li>
                            <li>
                                <strong>Baisse de votre empreinte carbone</strong> <br>
                                Vous utilisez la ressource
                                locale ce qui signifie zéro
                                transport.
                            </li>
                            <li>
                                <strong>Un approvisionnement garanti sans gâchis d’eau</strong><br>
                            </li>
                        </ul>

                    </div>
                    <div class="bloc-3 services">
                        <h3>+ de services</h3>

                        <ul>
                            <li>
                                <strong>Rendez-vous en présentiel</strong><br>
                                Avec nos équipes pour vous
                                garantir une solution sur-mesure.
                            </li>

                            <li>
                                <strong>Formation de vos équipes.</strong><br>
                            </li>
                            <li>
                                <strong>Maintenance</strong><br>
                                De vos fontaines
                                au minimum 2 fois par an.
                            </li>
                            <li>
                                <strong>Intervention</strong><br>
                                Rapide en 24h si besoin.
                            </li>
                        </ul>

                    </div>
                </div>
            </div>

        </section>

        <section id="ioz-8">
            <div class="container">
                <h2>ils nous font confiance</h2>
                <div class="row">
                <img class="arrow2 left" src="<?= get_template_directory_uri()."/images/arrow2.png"?>" alt="appareil 1">
                <img class="arrow2 right" src="<?= get_template_directory_uri()."/images/arrow2.png"?>" alt="appareil 1">
                    <div class="trust"></div>
                    <div class="trust"></div>
                    <div class="trust"></div>
                    <div class="trust"></div>
                    <div class="trust"></div>
                    <div class="trust"></div>
                    <div class="trust"></div>
                    <div class="trust"></div>
                </div>
                <div class="button-container">
                    <button class="button bg-grey" type="button">POURQUOI PAS VOUS ?</button>
                </div>

            </div>


        </section>

        <section id="ioz-9">
            <div class="container">
                <div class="row">
                    <div>
                        <h2 class="before-title2">envie de passer à Ioz ?</h2>
                        <p>Renseignez le formulaire et nous vous recontacterons <br>pour convenir d’un rendez-vous.</p>

                    </div>
                    <div class="container">
                        <form action="" method="post">
                            <div class="form-body">
                                <div class="bloc-2">
                                    <label for="firstname">
                                        <input type="text" id="firstname" name="firstname" placeholder="Prénom *">
                                    </label>
                                    <label for="lastname">
                                        <input type="text" id="lastname" name="lastname" placeholder="Nom *">
                                    </label>
                                    <label for="institution">
                                        <input type="text" id="institution" name="institution"
                                            placeholder="Nom de votre établissement *">
                                    </label>
                                    <div class="form-body">
                                        <label for="cp" class="bloc-2">
                                            <input type="number" id="cp" name="cp" placeholder="Code postal">
                                        </label>
                                        <label for="city" class="bloc-2">
                                            <input type="tel" id="city" name="city" placeholder="Ville">
                                        </label>
                                    </div>
                                    <label for="phone">
                                        <input type="tel" id="phone" name="phone" placeholder="Téléphone">
                                    </label>
                                    <label for="email">
                                        <input type="email" id="email" name="email" placeholder="E-mail *">
                                    </label>
                                </div>

                                <label for="message" class="bloc-2">
                                    <textarea name="message" id="message" cols="30" rows="10">Votre message</textarea>
                                </label>
                            </div>
                            <div class="tos">
                                <input type="checkbox" id="tos" name="tos">
                                <label for="tos">J’accepte la <strong><a href="">politique de
                                            confidentialité</a></strong>. *
                                </label>
                                <p>* champs obligatoires</p>
                            </div>


                        </form>
                        <div class="formbtn">
                            <button type="submit" class="button">ENVOYER</button>
                        </div>
                    </div>
                </div>

            </div>
        </section>
                </div>
            </div>
        </section>	
    </main>
</div>
<?php get_footer(); ?>