templates/home/index.html.twig line 1

  1. {% extends 'site.html.twig' %}
  3. {% block title %}{% endblock %}
  5. {% block body %}
  6.    <!--  Carousel start-->
  7.  <div id="header-carousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
  8.             <div class="carousel-inner">
  9.              <div class="carousel-item active" style="height: 100vh;">
  10.     <img class="w-100" src="/../assets/site/img/IMG_5751.jpg" alt="Image" style="max-height: 100%">
  11.     <div class="carousel-caption d-flex flex-column align-items-center justify-content-center">
  12.         <div class="p-3" style="max-width: 900px;">
  13.             <h5 class="text-white text-uppercase mb-3 animated slideInDown">Prenez le large avec Villennes Boat</h5>
  14.             <h1 class="display-1 text-white mb-md-4 animated zoomIn">Expérimentez des moments de bonheur </h1>
  15.             <a href="https://villennesboats.digital-nautic.com/fr" class="btn btn-primary py-md-3 px-md-5 me-3 animated slideInLeft" style="border-radius: 25px 25px 25px 25px">Réservez votre bateau</a>
  16.             <a href="{{path('app_contact')}}" class="btn btn-outline-light py-md-3 px-md-5 animated slideInRight"style="border-radius: 25px 25px 25px 25px">Contactez nous</a>
  17.         </div>
  18.     </div>
  19. </div>
  21.                 
  22.             </div>
  23.             <button class="carousel-control-prev" type="button" data-bs-target="#header-carousel"
  24.                 data-bs-slide="prev">
  25.                 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  26.                 <span class="visually-hidden">Previous</span>
  27.             </button>
  28.             <button class="carousel-control-next" type="button" data-bs-target="#header-carousel"
  29.                 data-bs-slide="next">
  30.                 <span class="carousel-control-next-icon" aria-hidden="true"></span>
  31.                 <span class="visually-hidden">Next</span>
  32.             </button>
  33.         </div>
  34.     </div>
  35.   
  36.     <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s" id="about" style="margin-top: 40px;">
  37.         <div class="container py-5">
  38.             <div class="row g-5">
  39.                 <div class="col-lg-7">
  40.                     <div class="section-title position-relative pb-3 mb-5">
  41.                         <h5 class="fw-bold text-primary text-uppercase">À propos de nous</h5>
  42.                         <h1 class="mb-0">Naviguez en toute confiance avec Villennes Boat</h1>
  43.                     </div>
  44.                     <p class="mb-4">Villennes Boat est un service de location de bateaux de plaisance situé dans la charmante ville de Villennes-sur-Seine, en Île-de-France, à seulement 25km de Paris. <br> Le site propose une large sélection de bateaux adaptés à tous les goûts et à tous les budgets. <br> L'équipe de Villennes Boat est composée de professionnels passionnés par la navigation et l'expérience client. <br>Ils se feront un plaisir de vous aider à trouver le bateau idéal pour vos besoins et de vous fournir tous les conseils et les informations dont vous avez besoin pour profiter pleinement de votre journée sur l'eau.</p>
  45.                     <div class="row g-0 mb-3">
  46.                         <div class="col-sm-6 wow zoomIn" data-wow-delay="0.2s">
  47.                             <h5 class="mb-3"><i class="fa fa-check text-primary me-3"></i>Équipe Professionnelle</h5>
  48.                             <h5 class="mb-3"><i class="fa fa-check text-primary me-3"></i>Différentes activités</h5>
  49.                         </div>
  50.                         <div class="col-sm-6 wow zoomIn" data-wow-delay="0.4s">
  51.                             <h5 class="mb-3"><i class="fa fa-check text-primary me-3"></i>Disponible 24/7</h5>
  52.                             <h5 class="mb-3"><i class="fa fa-check text-primary me-3"></i>Prix abordables</h5>
  53.                         </div>
  54.                     </div>
  55.                     <div class="d-flex align-items-center mb-4 wow fadeIn" data-wow-delay="0.6s">
  56.                         <div class="bg-primary d-flex align-items-center justify-content-center rounded" style="width: 60px; height: 60px;">
  57.                             <i class="fa fa-phone-alt text-white"></i>
  58.                         </div>
  59.                         <div class="ps-4">
  60.                             <h5 class="mb-2">Contactez nous</h5>
  61.                             <h4 class="text-primary mb-0"> 06 73 82 80 35</h4>
  62.                         </div>
  63.                     </div>
  64.                    <a href="https://villennesboats.digital-nautic.com/fr" class="btn btn-primary py-3 px-5 mt-3 wow zoomIn" data-wow-delay="0.9s" style="border-radius: 25px 25px 25px 25px">Réservez votre Bâteau</a>&nbsp;
  65. <a href="{{path('app_contact')}}" class="btn btn-primary py-3 px-5 mt-3 wow zoomIn" data-wow-delay="0.9s" style="border-radius: 25px 25px 25px 25px">Contactez nous </a>
  67.                 </div>
  68.                 <div class="col-lg-5" style="min-height: 500px;">
  69.                     <div class="position-relative h-100">
  70.                         <img class="position-absolute w-100 h-100 rounded wow zoomIn" data-wow-delay="0.9s" src="/../assets/site/img/IMG_5738.jpg" style="object-fit: cover; box-shadow:8px 8px 10px 0 rgb(38, 139, 200) ;">
  71.                     </div>
  72.                 </div>
  73.             </div>
  74.         </div>
  75.     </div>
  76.    
  78.  
  79.             
  80.             </div>
  81.         </div>
  82.     </div>
  86. <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s">
  87.   <div class="container py-5">
  88.     <div class="section-title position-relative pb-3 mb-5">
  89.       <h5 class="fw-bold text-primary text-uppercase">Nos Activités</h5>
  90.       <h1 class="mb-0">Villennes Boat vous offre une expérience unique sur la Seine</h1>
  91.     </div>
  92.     
  93.     <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-5">
  94.       {% for activity in activities %}
  95.       <div class="col wow zoomIn" data-wow-delay="0.3s" >
  96.         <div class="service-item rounded d-flex flex-column align-items-center justify-content-center text-center" style="background: linear-gradient(rgba(0, 0, 0, 0.32), rgba(26, 49, 85, 0.77)),url({{ vich_uploader_asset(activity, 'imageFile') }}) center center no-repeat; background-color: rgba(0, 0, 0, 0); background-size: auto, auto; background-size: cover;">
  97.           <h4 class="mb-3" style="color:white">{{ activity.title }}</h4>
  98.         </div>
  99.       </div>
  100.       {% else %}
  101.       <div class="col text-center">
  102.        <center> <h3>Aucune activité disponible </h3></center>
  103.       </div>
  104.       {% endfor %}
  105.     </div>
  107.     <div class="d-flex justify-content-center pt-5">
  108.       <a href="{{path('app_activités')}}" class="btn btn-primary rounded-pill px-4 py-2">En savoir plus</a>
  109.     </div>
  110.     
  111.   </div>
  112. </div>
  113. {{ include('boat.twig') }}
  114. {{ include('formules.twig') }}
  116.     <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s">
  117.         <div class="container py-5">
  118.             <div class="row g-5">
  119.                 <div class="col-lg-7">
  120.                     <div class="section-title position-relative pb-3 mb-5">
  121.                         <h5 class="fw-bold text-primary text-uppercase">Réservez maintenant</h5>
  122.                         <h1 class="mb-0">Contactez nous gratuitement</h1>
  123.                     </div>
  124.                     <div class="row gx-3">
  125.                         <div class="col-sm-6 wow zoomIn" data-wow-delay="0.2s">
  126.                             <h5 class="mb-4"><i class="fa fa-reply text-primary me-3"></i>Réponse sous 24 heures</h5>
  127.                         </div>
  128.                         <div class="col-sm-6 wow zoomIn" data-wow-delay="0.4s">
  129.                             <h5 class="mb-4"><i class="fa fa-phone-alt text-primary me-3"></i>Réponse immédiate</h5>
  130.                         </div>
  131.                     </div>
  132.                     <p class="mb-4">Réservez dès maintenant votre excursion  et partez à la découverte des merveilles de la Seine et ses paysages.
  133.                    
  134.                      Que vous soyez à la recherche d'une balade en famille, d'un moment romantique ou d'une journée entre amis, notre équipe se fera un plaisir de vous accompagner dans cette expérience inoubliable.</p> <p> Nous vous proposons des prestations sur-mesure pour répondre à toutes vos envies, du pique-nique aux dégustations de produits locaux.<br>Réservez dès maintenant et vivez une expérience marine unique avec Villennes Boat.</p>
  135.                     <div class="d-flex align-items-center mt-2 wow zoomIn" data-wow-delay="0.6s">
  136.                         <div class="bg-primary d-flex align-items-center justify-content-center rounded" style="width: 60px; height: 60px;">
  137.                             <i class="fa fa-phone-alt text-white"></i>
  138.                         </div>
  139.                         <div class="ps-4">
  140.                             <h5 class="mb-2">Contactez nous</h5>
  141.                             <h4 class="text-primary mb-0">06 73 82 80 35</h4>
  142.                         </div>
  143.                     </div>
  144.                 </div>
  145.                 <div class="col-lg-5">
  146.                     <div class="h-100 d-flex align-items-center p-5 wow zoomIn" data-wow-delay="0.9s">
  147.                       
  148.                         {{ form_start(form) }}
  149.                         <div class="row g-3">
  150.                          <center>  <h5 class="fw-bold text-primary text-uppercase">Formulaire de contact</h5> </center>
  151.                             <div class="col-md-12">
  152.                                 {{ form_row(form.name) }}
  153.                             </div>
  154.                             <div class="col-md-12">
  155.                                 {{ form_row(form.email) }}
  156.                             </div>
  157.                             <div class="col-12">
  158.                                 {{ form_row(form.subject) }}
  159.                             </div>
  160.                             <div class="col-12">
  161.                                 {{ form_row(form.message) }}
  162.                             </div>
  163.                             <div class="col-12">
  164.                                 <button class="btn btn-primary w-100 py-3" type="submit">Envoyer</button>
  165.                             </div>
  166.                         </div>
  167.                         {{ form_end(form) }}
  168.                     </div>
  169.                 </div>
  170.             </div>
  171.         </div>
  172.     </div>
  173.     <!-- Quote End -->
  176.     <!-- Testimonial Start -->
  177.     <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s">
  178.         <div class="container py-5">
  179.             <div class="section-title text-center position-relative pb-3 mb-4 mx-auto" style="max-width: 600px;">
  180.                 <h5 class="fw-bold text-primary text-uppercase">Avis</h5>
  181.                 <h1 class="mb-0">Les avis de nos clients</h1>
  182.             </div>
  183.   <iframe id="digitalNauticReviewFrameSample"
  184.         title="Avis de VILLENNES BOAT"
  185.         width="100%" height="305" style="border:none;"
  186.         src="https://villennesboats.digital-nautic.com/iframes/fr/reviews">
  187.     </iframe>
  189.     
  190.         </div>
  191.     </div>
  194. <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s">
  195.         <div class="container py-5">
  196.             <div class="section-title text-center position-relative pb-3 mb-5 mx-auto" style="max-width: 600px;">
  197.                 <h5 class="fw-bold text-primary text-uppercase">Actualités Instagram</h5>
  198.                 <h1 class="mb-0">Suivez notre compte @Villennes_Boat</h1>
  199.             </div>
  200.             
  201.             <div class="container py-5">
  202.             
  203.     <!-- Place <div> tag where you want the feed to appear -->
  204. <div id="curator-feed-default-feed-layout"></div>
  205.              </div>
  206.         </div>
  207. </div>
  208.               
  209. <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s" style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInUp;">
  210. <div class="container py-5">
  211. <div class="section-title text-center position-relative pb-3 mb-5 mx-auto" style="max-width: 600px;">
  212. <h5 class="fw-bold text-primary text-uppercase">Notre actualités</h5>
  213. <h1 class="mb-0"></h1>
  214. </div>
  215. <div class="row g-5">
  216.   {% for actuality in actualities %}
  217.     <div class="col-lg-4 wow slideInUp" data-wow-delay="0.3s" style="visibility: visible; animation-delay: 0.3s; animation-name: slideInUp;">
  218.         <div class="blog-item bg-light rounded overflow-hidden">
  219.             <div class="blog-img position-relative overflow-hidden">
  220.                 <img class="img-fluid" src="{{ vich_uploader_asset(actuality, 'imageFile') }}" alt="">
  221.                 <a class="position-absolute top-0 start-0 bg-primary text-white rounded-end mt-5 py-2 px-4" href="">{{actuality.label}}</a>
  222.             </div>
  223.             <div class="p-4">
  224.                 <div class="d-flex mb-3">
  225.                     <small class="me-3"><i class="far fa-user text-primary me-2"></i>{{actuality.name}} {{actuality.lastname}}</small>
  226.                     <small><i class="far fa-calendar-alt text-primary me-2"></i>{{ actuality.createdAt ? actuality.createdAt|date(' d-m-Y ') : '' }}</small>
  227.                 </div>
  228.                     <h4 class="mb-3">{{ actuality.title }}</h4>
  229.                         <p>{{ actuality.texte }}</p>
  230.                        
  231.             </div>
  232.         </div>
  233.     </div>
  234.          {% else %}
  235.             <tr>
  236.                 <td colspan="5">Aucun articles </td>
  237.             </tr>
  238.         {% endfor %}
  239. </div>
  240. </div>
  241. </div>
  242.     <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s" style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInUp;">
  243. <div class="container py-5">
  244. <div class="row g-5">
  245. <div class="col-lg-6">
  246. <div class="section-title-1 position-relative pb-3 mb-5">
  247. <h5 class="fw-bold text-primary text-uppercase">Foire aux Questions</h5>
  248. <h1 class="mb-0">Tout ce que vous devez savoir sur la location de bateaux</h1>
  249. </div>
  250. <p class="mb-4">Bienvenue sur la  FAQ de Villennes Boat ! Nous sommes heureux de répondre à toutes vos questions pour vous aider à préparer votre journée de navigation en toute tranquillité.<br> Nous sommes là pour vous aider à planifier votre journée de navigation et répondre à toutes vos questions, alors n'hésitez pas à nous contacter si vous avez besoin d'aide ou si vous avez des questions supplémentaires.</p>
  252. </div>
  253. <div class="col-lg-6">
  254. <div class="accordion accordion-custom" id="accordionExample">
  255. <div class="accordion-item wow fadeInUp" data-wow-delay="0.1s" style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInUp;">
  256. <h2 class="accordion-header" id="headingOne">
  257. <button class="accordion-button fw-semi-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
  258. Quel est l'âge minimum requis pour louer un bateau ? 
  259. </button>
  260. </h2>
  261. <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
  262. <div class="accordion-body">
  263.  L'âge minimum requis pour louer un bateau est de 18 ans
  264. </div>
  265. </div>
  266. </div>
  267. <div class="accordion-item wow fadeInUp" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
  268. <h2 class="accordion-header" id="headingTwo">
  269. <button class="accordion-button collapsed fw-semi-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
  270. Quels sont les moyens de paiement acceptés par Villennes Boat ? 
  271. </button>
  272. </h2>
  273. <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
  274. <div class="accordion-body">
  275. Dolor nonumy tempor elitr et rebum ipsum sit duo duo. Diam sed sed magna et magna diam aliquyam amet dolore ipsum erat duo. Sit rebum magna duo labore no diam.
  276. </div>
  277. </div>
  278. </div>
  279. <div class="accordion-item wow fadeInUp" data-wow-delay="0.3s" style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInUp;">
  280. <h2 class="accordion-header" id="headingThree">
  281. <button class="accordion-button collapsed fw-semi-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
  282.   Est-il possible de louer un bateau pour plusieurs jours ? 
  283. </button>
  284. </h2>
  285. <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
  286. <div class="accordion-body">
  287. Dolor nonumy tempor elitr et rebum ipsum sit duo duo. Diam sed sed magna et magna diam aliquyam amet dolore ipsum erat duo. Sit rebum magna duo labore no diam.
  288. </div>
  289. </div>
  290. </div>
  291. <div class="accordion-item wow fadeInUp" data-wow-delay="0.4s" style="visibility: visible; animation-delay: 0.4s; animation-name: fadeInUp;">
  292. <h2 class="accordion-header" id="headingFour">
  293. <button class="accordion-button collapsed fw-semi-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
  294. Y a-t-il une limite de distance pour naviguer avec les bateaux de Villennes Boat ? 
  295. </button>
  296. </h2>
  297. <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
  298. <div class="accordion-body">
  299. Dolor nonumy tempor elitr et rebum ipsum sit duo duo. Diam sed sed magna et magna diam aliquyam amet dolore ipsum erat duo. Sit rebum magna duo labore no diam.
  300. </div>
  301. </div>
  302. </div>
  303. <div class="accordion-item wow fadeInUp" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.5s; animation-name: fadeInUp;">
  304. <h2 class="accordion-header" id="headingFive">
  305. <button class="accordion-button collapsed fw-semi-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
  306. Quels sont les moyens de paiement acceptés par Villennes Boat ? 
  307. </button>
  308. </h2>
  309. <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionExample">
  310. <div class="accordion-body">
  311. Dolor nonumy tempor elitr et rebum ipsum sit duo duo. Diam sed sed magna et magna diam aliquyam amet dolore ipsum erat duo. Sit rebum magna duo labore no diam.
  312. </div>
  313. </div>
  314. </div>
  315. </div>
  316. </div>
  317. </div>
  318. </div>
  319. </div>
  321. <style>
  324. </style>
  325. <!-- The Javascript can be moved to the end of the html page before the </body> tag --><script type="text/javascript">
  326. /* curator-feed-default-feed-layout */
  327. (function(){
  328. var i,e,d=document,s="script";i=d.createElement("script");i.async=1;i.charset="UTF-8";
  329. i.src="https://cdn.curator.io/published/e7cc826c-08b8-4f3a-b348-d22bfafef4b5.js";
  330. e=d.getElementsByTagName(s)[0];e.parentNode.insertBefore(i, e);
  331. })();
  333. </script>
  335. {% endblock %}