templates/public/home.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title 'Accueil' %}
  3. {% block body %}
  4.     <!--Slider-->
  5.     <link rel="stylesheet" href="{{ asset('libs/plugins/owl/owl.carousel.css') }}"/>
  6.     <link rel="stylesheet" href="{{ asset('libs/plugins/owl/owl.theme.css') }}"/>
  7.     <link rel="stylesheet" href="{{ asset('libs/plugins/owl/owl.transitions.css') }}"/>
  9.     {# FON #}
  10.     <link rel="stylesheet" href="{{ asset('libs/elshaseries/css/fnon.min.css') }}">
  11.     <script type="text/javascript" src="{{ asset('libs/elshaseries/js/fnon.min.js') }}"></script>
  13.     <link rel="stylesheet" href="{{ asset('libs/css/font-awesome.min.css') }}">
  14.     {% set number = random([1,2,3,4,5]) %}
  15.     <!-- Start Home -->
  16.     <section class="bg-home"
  17.              style="background: url({{ asset('libs/images/banner/banner_'~number~'.jpg') }}) center center no-repeat;">
  18.         <div class="bg-overlay"></div>
  19.         <div class="home-center">
  20.             <div class="home-desc-center">
  21.                 <div class="container">
  22.                     <div class="row justify-content-center">
  23.                         <div class="col-lg-12">
  24.                             <div class="title-heading text-center text-white">
  25.                                 <h1 class="heading font-weight-bold">Vous êtes salarié LIDL?</h1>
  26.                                 <h3 class="small-title text-light mb-3">Vos élus CSE n'ont jamais été plus près de
  27.                                     vous</h3>
  28.                                 <h4 class="heading font-weight-bold">Besoin d'une nounou ou d'un babysitter?</h4>
  29.                             </div>
  30.                         </div>
  31.                     </div>
  32.                 </div>
  33.             </div>
  34.         </div>
  35.     </section>
  36.     <!-- end home -->
  37.     <section class="section js-favorite">
  38.         <div class="container js-filter">
  39.             <div class="row align-items-center">
  40.                 <div class="col-lg-12">
  41.                     <div class="show-results mt-4 js-filter-sorting">
  42.                         {% include 'public/clients/_sorting.html.twig' %}
  43.                     </div>
  44.                 </div>
  45.             </div>
  46.             <div class="row">
  47.                 {% include 'public/clients/_filter.html.twig' with { form : form, min : min, max : max } %}
  48.                 <div class="col-lg-9 col-md-8 js-list">
  49.                     <div class="row js-filter-content">
  50.                         {% include 'public/clients/_list.html.twig' %}
  51.                     </div>
  52.                     <div class="row">
  53.                         <div class="col-lg-12 col-md-12 mt-4 pt-2">
  54.                             <nav aria-label="Page navigation example" class="js-filter-pagination text-center">
  55.                                 {% include 'public/clients/_pagination.html.twig' %}
  56.                             </nav>
  57.                         </div>
  58.                     </div>
  59.                 </div>
  60.             </div>
  61.         </div>
  62.     </section>
  63.     <section class="section pb-0"
  64.              style="background: url({{ asset('libs/images/home/counter-bg.jpg') }}) center center;">
  65.         <div class="bg-overlay"></div>
  66.         <div class="container">
  67.             <div class="row align-items-center">
  68.                 <div class="col-md-6 order-md-1 order-2 mb-3">
  69.                     <div class="job-about-app-img">
  70.                          <img src="{{ asset('libs/images/tmp/pexels-kampus-production-8954823_1_150x150.jpg') }}"
  71.                              alt="" class="img-fluid mx-auto d-block">
  72.                     </div>
  73.                 </div>
  74.                 <div class="col-md-6 order-md-2 order-1">
  75.                     <div class="app-about-content">
  76.                         <div class="app-about-desc text-white">
  77.                             <h4 class="text-white mb-3">Qui sommes-nous?</h4>
  78.                             <p class="font-weight-light text-white-50 text-justify">
  79.                                 Kidos est une plateforme numérique de services à
  80.                                 domicile qui facilite la mise en relation entre les familles et les nounous ou
  81.                                 assistantes maternelles.
  82.                                 Notre communauté basée sur la confiance vise à rassembler plus de 2000 millions de
  83.                                 membres autour d’une idée commune: faciliter la vie des salariés.
  84.                             </p>
  85.                         </div>
  86.                     </div>
  87.                 </div>
  88.             </div>
  89.         </div>
  90.     </section>
  91.     <section class="section">
  92.         <div class="container">
  93.             <div class="row justify-content-center">
  94.                 <div class="col-12">
  95.                     <div class="section-title text-center mb-4 pb-2">
  96.                         <h4 class="title title-line pb-5">4 GARANTIES QUI CHANGENT TOUT</h4>
  97.                     </div>
  98.                 </div>
  99.             </div>
  100.             <div class="row">
  101.                 <div class="col-md-3 mt-4 pt-2">
  102.                     <div class="how-it-work-box bg-light p-4 text-center rounded shadow h_100">
  103.                         <div class="how-it-work-img position-relative rounded-pill mb-3">
  104.                             <img src="{{ asset('libs/images/tmp/img-1.png') }}" alt="" class="mx-auto d-block" height="50">
  105.                         </div>
  106.                         <div>
  107.                             <h5> Kidos est l'employeur
  108.                                 et s'occupe de tout !</h5>
  109.                         </div>
  110.                     </div>
  111.                 </div>
  112.                 <div class="col-md-3 mt-4 pt-2">
  113.                     <div class="how-it-work-box bg-light p-4 text-center rounded shadow">
  114.                         <div class="how-it-work-img position-relative rounded-pill mb-3">
  115.                             <img src="{{ asset('libs/images/tmp/img-1.png') }}" alt="" class="mx-auto d-block" height="50">
  116.                         </div>
  117.                         <div>
  118.                             <h5> Ma nounou est recrutée et suivie par des pros.</h5>
  119.                         </div>
  120.                     </div>
  121.                 </div>
  122.                 <div class="col-md-3 mt-4 pt-2">
  123.                     <div class="how-it-work-box bg-light p-4 text-center rounded shadow">
  124.                         <div class="how-it-work-img position-relative rounded-pill mb-3">
  125.                             <img src="{{ asset('libs/images/tmp/img-1.png') }}" alt="" class="mx-auto d-block" height="50">
  126.                         </div>
  127.                         <div>
  128.                             <h5>Je rencontre mon intervenante avant de m'engager</h5>
  129.                         </div>
  130.                     </div>
  131.                 </div>
  132.                 <div class="col-md-3 mt-4 pt-2">
  133.                     <div class="how-it-work-box bg-light p-4 text-center rounded shadow">
  134.                         <div class="how-it-work-img position-relative rounded-pill mb-3">
  135.                             <img src="{{ asset('libs/images/tmp/img-1.png') }}" alt="" class="mx-auto d-block" height="50">
  136.                         </div>
  137.                         <div>
  138.                             <h5>Je bénéficie des
  139.                                 aides CAF/MSA et crédit d'impôt.</h5>
  140.                         </div>
  141.                     </div>
  142.                 </div>
  143.             </div>
  144.         </div>
  145.     </section>
  146.     <section class="section">
  147.         <div class="container">
  148.             <div class="row justify-content-center">
  149.                 <div class="col-12">
  150.                     <div class="section-title text-center mb-4 pb-2">
  151.                         <h4 class="title title-line pb-5">Témoignages</h4>
  152.                         <p class="text-muted para-desc mx-auto mb-1">Ce que les parents pensent</p>
  153.                     </div>
  154.                 </div>
  155.             </div>
  156.             <div class="row pt-4">
  157.                 <div class="col-lg-12">
  158.                     <div id="owl-testi" class="owl-carousel owl-theme">
  159.                         <div class="item testi-box rounded p-4 mr-3 ml-2 mb-4 bg-light position-relative text-justify">
  160.                             <p class="text-muted mb-5"> Merci Kidos pour m'avoir trouvé une perle pour la garde de ma
  161.                                 petite fille de 2 ans. Les employées sont toujours à l'écoute, répondent facilement au
  162.                                 téléphones et aux différentes préoccupations.</p>
  163.                             <div class="clearfix">
  164.                                 <div class="testi-img float-left mr-3">
  165.                                     <img src="{{ asset('libs/images/tmp/profile.jpg') }}" height="64" alt=""
  166.                                          class="rounded-circle shadow">
  167.                                 </div>
  168.                                 <h5 class="f-18 pt-1">Juliette</h5>
  169.                                 <div class="testi-icon">
  170.                                     <i class="mdi mdi-format-quote-open display-2"></i>
  171.                                 </div>
  172.                             </div>
  173.                         </div>
  175.                         <div class="item testi-box rounded p-4 mr-3 ml-2 bg-light position-relative text-justify">
  176.                             <p class="text-muted mb-5"> Nous avons fait appel à Kidos pour garder en journée nos deux
  177.                                 enfants en bas âge et avons été très satisfaits de notre expérience. Nos intervenantes
  178.                                 étaient très professionnelles...
  179.                             </p>
  180.                             <div class="clearfix">
  181.                                 <div class="testi-img float-left mr-3">
  182.                                     <img src="{{ asset('libs/images/tmp/profile.jpg') }}" height="64" alt=""
  183.                                          class="rounded-circle shadow">
  184.                                 </div>
  185.                                 <h5 class="f-18 pt-1">Alice</h5>
  186.                                 <div class="testi-icon">
  187.                                     <i class="mdi mdi-format-quote-open display-2"></i>
  188.                                 </div>
  189.                             </div>
  190.                         </div>
  191.                     </div>
  192.                 </div>
  193.             </div>
  194.         </div>
  195.     </section>
  196.     <!-- testimonial end -->
  198.     <!-- subscribe start -->
  199.     <section class="section">
  200.         <div class="container">
  201.             <div class="row">
  202.                 <div class="col-lg-4 col-md-5">
  203.                     <div class="float-left position-relative notification-icon mr-2">
  204.                         <i class="mdi mdi-bell-outline text-primary"></i>
  205.                         <span class="badge badge-pill badge-danger">1</span>
  206.                     </div>
  207.                     <h5 class="mt-2 mb-0">Recevoir des notifications</h5>
  208.                 </div>
  209.                 <div class="col-lg-8 col-md-7 mt-4 mt-sm-0">
  210.                     <form action="{{ path('newsletter_subscription') }}" method="POST">
  211.                         <div class="form-group mb-0">
  212.                             <div class="input-group mb-0">
  213.                                 <input name="email" id="email" type="email" class="form-control"
  214.                                        placeholder="Votre adresse email:"
  215.                                        required aria-describedby="newssubscribebtn">
  216.                                 <div class="input-group-append">
  217.                                     <button class="btn btn-primary submitBnt" type="submit" id="newssubscribebtn">
  218.                                         Souscrire
  219.                                     </button>
  220.                                 </div>
  221.                             </div>
  222.                         </div>
  223.                     </form>
  224.                 </div>
  225.             </div>
  226.         </div>
  227.     </section>
  228.     <!-- subscribe end -->
  229.     <script src="{{ asset('libs/js/owl.carousel.min.js') }}"></script>
  230.     <script src="{{ asset('libs/js/home.js') }}"></script>
  231. {% endblock %}