templates/website/accueil.html.twig line 1

Open in your IDE?
  1. {% extends 'website/base_website.html.twig' %}
  2. {% block meta %}
  3. <meta name="description"
  4. content="Nibuco vous propose un service de livraison de particulier à particulier. Faites-vous livrer ce que vous voulez, où vous le voulez et quand vous le voulez."/>
  5. {% endblock %}
  6. {% block title %}<title>Nibuco | Votre Service de Livraison Rapide de Particulier à Particulier</title>{% endblock %}
  7. {% block canonical %}<link rel="canonical" href="https://www.livraison.nibuco.fr"/>{% endblock %}
  8. {% block body %}
  9. <section class="intro">
  10. <div class="container">
  11. <div class="row">
  12. <div class="col-lg-6 col-sm-12 text-left" data-aos="fade-right">
  13. <div class="title-mini">Paris - Lyon - Marseille<br>Bientôt dans toute la France !</div>
  14. <h1>La <span>livraison</span> de<br> particulier à particulier</h1>
  15. <p>Faites-vous livrer ce que vous voulez, où vous le voulez et quand vous le voulez. Laissez-vous porter par l’expérience NIBUCO.</p>
  16. <a class="btn-red-nibuco" href="{{ path('app_delivery') }}" data-toggle="modal" data-target="#ModalComingSoon">Je livre ou je me fais livrer</a>
  17. </div>
  18. <div class="col-lg-6 col-sm-12 header-city my-5">
  19. <div class="header_city text-center" data-aos="zoom-in" data-aos-delay="500">
  20. <img src="{{ asset('assets/imgs/nibuco/header_city.svg') }}" class="w-100" alt="illustration graphique immeubles de Paris">
  21. <div class="header_bike text-center" data-aos="fade-right" data-aos-delay="1000">
  22. <img src="{{ asset('assets/imgs/nibuco/header_bike.svg') }}" class="w-50" alt="illustration graphique coursier sur un vélo">
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. </div>
  28. </section>
  29. <section class="i-am mt-5">
  30. <div class="container">
  31. <div class="row">
  32. <div class="text-center col-lg-4 col-sm-12">
  33. <a id="exp" href="{{ path('app_login') }}">
  34. <div class="btn-dest">
  35. <h2><span>Je suis un</span><br>Expéditeur</h2>
  36. <img src="{{ asset('assets/imgs/nibuco/je-suis-expediteur.png') }}" width="60%" alt="illustration graphique expéditeur livraison"/>
  37. <!--<a class="btn-red-nibuco btn-i-am" href="#">Espace particulier</a>-->
  38. </div>
  39. </a>
  40. </div>
  41. <div class="text-center col-lg-4 col-sm-12">
  42. <a href="{{ path('app_login') }}">
  43. <div class="btn-liv">
  44. <h2><span>Je suis un</span><br>Livreur</h2>
  45. <div id="hover-exp">
  46. <img src="{{ asset('assets/imgs/nibuco/livreur-before.png') }}" width="60%" alt="illustration graphique livreur sur un scooter"/>
  47. </div>
  48. <div id="hover-dest">
  49. <img src="{{ asset('assets/imgs/nibuco/livreur-after-2.png') }}" width="60%" alt="illustration graphique livreur sur un scooter"/>
  50. </div>
  51. <!--<a class="btn-red-nibuco btn-i-am" href="#">espace livreur</a>-->
  52. </div>
  53. </a>
  54. </div>
  55. <div class="text-center col-lg-4 col-sm-12">
  56. <a id="dest" href="{{ path('app_login') }}">
  57. <div class="btn-dest">
  58. <h2><span>Je suis un</span><br>Destinataire</h2>
  59. <img src="{{ asset('assets/imgs/nibuco/je-suis-destinataire.png') }}" width="60%" alt="illustration graphique destinataire livraison "/>
  60. <!--<a class="btn-red-nibuco btn-i-am" href="#">Espace particulier</a>-->
  61. </div>
  62. </a>
  63. </div>
  64. </div>
  65. </div>
  66. </section>
  67. <section class="stage">
  68. <div class="container">
  69. <div class="row box_stage">
  70. <div class="col-lg-8 col-sm-12 text-left">
  71. <div class="title-mini">Livraison à partir de 5€</div>
  72. <h2>La livraison rapide, complète, tout le temps, partout en agglomération !</h2>
  73. <p>Nibuco c'est livrer presque tout ce dont vous avez besoin lorsque que vous en avez le plus besoin. Un service utile à 110% puisque soucieux de l'environnement. Besoin d'un coup de pouce ? Estimez votre livraison ! <strong>Bonne navigation !</strong></p>
  74. <div class="block_stage">
  75. <div class="number">1</div>
  76. <p>Choisissez “Envoyer” ou “Recevoir” un colis</p>
  77. </div>
  78. <div class="block_stage">
  79. <div class="number">2</div>
  80. <p>Entrez l’adresse de départ et d’arrivée</p>
  81. </div>
  82. <div class="block_stage">
  83. <div class="number">3</div>
  84. <p>Estimez le délai <br>et le coût</p>
  85. </div>
  86. <div class="block_stage">
  87. <div class="number">4</div>
  88. <p>Lancez votre<br>livraison !</p>
  89. </div>
  90. <p>Vous voulez faire une simulation du délai et du coût de votre livraison ? Commencez dès maintenant, c'est simple et sans engagement !</p>
  91. <a class="btn-red-nibuco" href="" data-toggle="modal" data-target="#ModalComingSoon">J'estime ma livraison</a>
  92. </div>
  93. <div class="col-lg-4 col-sm-12">
  94. <div class="img_stage_client" data-aos="zoom-in-left">
  95. <img src="{{ asset('assets/imgs/nibuco/cliente-nibuco-sourire.png') }}" width="100%" alt="Cliente souriante avec téléphone dans la main">
  96. </div>
  97. </div>
  98. </div>
  99. </div>
  100. </section>
  101. <section class="livraison bg-image-red text-white">
  102. <div class="container">
  103. <div class="row">
  104. <div class="col-lg-5 col-sm-12 text-justify">
  105. <h2 class="text-yellow">Garant de vos livraisons</h2>
  106. <p>En renseignant votre adresse, nous géolocalisons votre course en temps réel.</p>
  107. <p>L'idée ? Être serein quant à la livraison ou l'expédition de vos produits et ce même les plus précieux.</p>
  108. <p>Nibuco s'inscrit dans une démarche d'assistance de livraison, c'est en ce sens que nous vous assurons, dès le début de votre course, une visibilité claire et limpide de son déplacement.</p>
  109. <p>Sécurité et respect de tous étant une règle d'or, nous vous garantissons en plus de cela, la confidentialité des données communiquées à cet effet.</p>
  110. </div>
  111. <div class="col-lg-7 col-sm-12">
  112. <div class="img_livraison" data-aos="fade-down-left">
  113. <img src="{{ asset('assets/imgs/nibuco/app_phone.png') }}" width="100%" alt="iPhone avec aperçu application Nibuco">
  114. </div>
  115. </div>
  116. </div>
  117. </div>
  118. </section>
  119. <section class="opportunity">
  120. <div class="container">
  121. <div class="row">
  122. <div class="col-lg-8 offset-lg-2 col-sm-12 text-center">
  123. <h3>Rejoignez l'aventure Nibuco, riche en valeurs, en opportunités et en kilomètres, si vous le souhaitez.</h3>
  124. <p>Inscrivez-vous en quelques minutes seulement et commencez à bénéficier d’une rémunération attractive.</p>
  125. <a class="btn-red-nibuco" href="{{ path('delivery_man_register',{string:'livreur'}) }}">Je deviens livreur Nibuco</a>
  126. </div>
  127. </div>
  128. <div class="ill_opportunity">
  129. <img src="{{ asset('assets/imgs/nibuco/delivery_bike_red.png') }}" width="75px" alt="illustration graphique Nibucocity Paris Lyon Marseille">
  130. </div>
  131. <!--<div class="img_opportunity" data-aos="fade-up"><img src="img/happy-blonde-young-woman-smiling-keeps-mobile-phone-hands-looking-with-curiosity-dreamily-right.png" width="75%"></div>-->
  132. </div>
  133. </section>
  134. {% endblock %}