templates/pages/activités/index.html.twig line 1

  1. {% extends 'site.html.twig' %}
  2. {% block title %}Hello PagesController!{% endblock %}
  3. {% block body %}
  4.  
  5.  <div class="container-fluid bg-primary py-5 bg-header-activity" style="margin-bottom: 90px;">
  6.         <div class="row py-5">
  7.             <div class="col-12 pt-lg-5 mt-lg-5 text-center" style="height: 250px">
  8.                 <h1 class="display-4 text-white animated zoomIn" style="margin-top: 60px">Nos Activités</h1>
  9.                   
  10.             </div>
  11.         </div>
  12.  </div>
  13. <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s" style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInUp;">
  14.     <div class="container py-5">
  15.         <div class="section-title-1 text-center position-relative pb-3 mb-5 mx-auto" style="max-width: 600px;">
  16.             <h5 class="fw-bold text-primary text-uppercase">Un instant de Bonheur sur Seine</h5>
  17.             <h1 class="mb-0">Partez à la pêche aux souvenirs avec Villennes Boat !</h1>
  18.         </div>
  19.         <div class="row g-5 portfolio-container">
  20.    {% for activity in activities %}
  21.     <div class="col-xl-4 col-lg-6 col-md-6 portfolio-item wow slideInUp" data-wow-delay="0.1s">
  22.         <div class="position-relative portfolio-box">
  23.             <div class="portfolio-img rounded overflow-hidden">
  24.                 <img class="img-fluid w-100 activity-img" src="{{ vich_uploader_asset(activity, 'imageFile') }}" alt="">
  25.             </div>
  26.             <a class="portfolio-title border-bottom border-5 border-primary" href="">
  27.                 <h4 style="text-align: center">{{ activity.title }}</h4>
  28.             </a>
  29.             <div class="portfolio-btn" style="overflow: hidden; margin: 20px; text-align: justify;">
  30.                 <p data-lightbox="portfolio" style="padding: 60px 60px 60px 60px; color: white; word-wrap: break-word; text-align: center;">{{ activity.description }}</p>
  31.             </div>
  32.         </div>
  33.     </div>
  34. {% else %}
  35.     <div class="col-12">
  36.         <center>
  37.             <h3>Aucune activités disponible</h3>
  38.         </center>
  39.     </div>
  40. {% endfor %}
  41.         </div>
  42.     </div>
  43. </div>
  44. <div class="container-fluid py-5  wow fadeInUp" data-wow-delay="0.1s" id="about">
  45.   <div class="container">
  46.     <div class="section-title-1 text-center position-relative pb-3 mb-5  mx-auto" style="max-width: 600px;">
  47.       <h5 class="fw-bold text-primary text-uppercase">Laissez-vous séduire par les charmes de la Seine</h5>
  48.       <h1 class="mb-0">Réservez votre activité nautique<br> Contactez-nous !</h1>
  49.     </div>
  50.     <div class="row g-5" >
  51.       <div class="col-lg-7">
  52.         <div class="position-relative h-100">
  53.           <img class="position-absolute w-100 h-100 rounded wow zoomIn" data-wow-delay="0.9s" src="/../assets/site/img/IMG_5975.jpg"  style="object-fit: cover; 
  54.                         box-shadow: rgb(38, 139, 200) 8px 8px 10px 0px; 
  55.                         visibility: visible; 
  56.                         animation-delay: 0.9s; 
  57.                         animation-name: zoomIn;">
  58.         </div>
  59.       </div>
  60.       <div class="col-lg-5" style="min-height: 500px;">
  61.         <div class="contact-form">
  62.           <h5 class="fw-bold text-primary text-uppercase text-center mb-4">Formulaire de Devis</h5>
  63.           {{ form_start(form) }}
  64.             <div class="row">
  65.               <div class="col-md-12 mb-3">
  66.                 {{ form_row(form.name, {'attr': {'class': 'form-control', 'placeholder': 'Nom'}}) }}
  67.               </div>
  68.               <div class="col-md-12 mb-3">
  69.                 {{ form_row(form.firstname, {'attr': {'class': 'form-control', 'placeholder': 'Prénom'}}) }}
  70.               </div>
  71.               <div class="col-md-12 mb-3">
  72.                 {{ form_row(form.phone, {'attr': {'class': 'form-control', 'placeholder': 'Téléphone'}}) }}
  73.               </div>
  74.               <div class="col-xl-12 mb-3">
  75.                 {{ form_row(form.society, {'attr': {'class': 'form-control', 'placeholder': 'Société (facultatif)'}}) }}
  76.               </div>
  77.               <div class="col-xl-12 mb-3">
  78.                 {{ form_row(form.city, {'attr': {'class': 'form-control', 'placeholder': 'Ville'}}) }}
  79.               </div>
  80.               <div class="col-xl-12 mb-3">
  81.                 {{ form_row(form.email, {'attr': {'class': 'form-control', 'placeholder': 'Email'}}) }}
  82.               </div>
  83.               <div class="col-xl-12 mb-3">
  84.                 {{ form_row(form.activity, {'attr': {'class': 'form-control', 'placeholder': 'Activité souhaitée'}}) }}
  85.               </div>
  86.               <div class="col-xl-12 mb-3">
  87.                 {{ form_row(form.request, {'attr': {'class': 'form-control', 'placeholder': 'Votre demande'}}) }}
  88.               </div>
  89.               <div class="col-xl-12 mb-3">
  90.                 <input type="submit" value="Envoyer" class="btn btn-primary w-100">
  91.                 <div class="submitting"></div>
  92.               </div>
  93.             </div>
  94.           {{ form_end(form) }}
  95.         </div>
  96.       </div>
  97.     </div>
  98.   </div>
  99. </div>
  100.  <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s" style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInUp;">
  101. <div class="container py-5">
  102. <div class="row g-5">
  103. <div class="col-lg-6">
  104. <div class="section-title-1 position-relative pb-3 mb-5">
  105. <h5 class="fw-bold text-primary text-uppercase">Foire aux Questions</h5>
  106. <h1 class="mb-0">Tout ce que vous devez savoir sur nos activités</h1>
  107. </div>
  108. <p class="mb-4">Bienvenue sur la FAQ de Villennes Boat, votre guide pratique pour découvrir toutes les informations essentielles sur les activités proposées par cette entreprise spécialisée dans les balades en bateau et les croisières sur la Seine.</p>
  109. <p>Cette FAQ a été conçue pour répondre à toutes les questions que vous pourriez avoir sur les activités de Villennes Boat, que vous souhaitiez réserver une balade en bateau, organiser un événement privé ou simplement en savoir plus sur les cours de navigation proposés.</p>
  110. <p>Vous trouverez ici des réponses claires et précises aux questions les plus fréquemment posées, telles que les moyens de paiement acceptés, les restrictions liées aux conditions météorologiques, ou encore la possibilité de privatiser un bateau pour une occasion spéciale.</p>
  111. </div>
  112. <div class="col-lg-6">
  113. <div class="accordion accordion-custom" id="accordionExample">
  114. <div class="accordion-item wow fadeInUp" data-wow-delay="0.1s" style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInUp;">
  115. <h2 class="accordion-header" id="headingOne">
  116. <button class="accordion-button fw-semi-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
  117. Quelles sont les activités proposées par Villennes Boat ?
  118. </button>
  119. </h2>
  120. <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
  121. <div class="accordion-body">
  122. Villennes Boat propose des balades en bateau, des croisières, des cours de navigation, des sorties pêche et des événements privés sur la Seine.
  123. </div>
  124. </div>
  125. </div>
  126. <div class="accordion-item wow fadeInUp" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
  127. <h2 class="accordion-header" id="headingTwo">
  128. <button class="accordion-button collapsed fw-semi-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
  129. Comment réserver une activité chez Villennes Boat ?
  130. </button>
  131. </h2>
  132. <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
  133. <div class="accordion-body">
  134. Vous pouvez réserver une activité chez Villennes Boat en ligne <a href="">ici</a> ou en nous contactant directement par téléphone ou par email
  135. </div>
  136. </div>
  137. </div>
  138. <div class="accordion-item wow fadeInUp" data-wow-delay="0.3s" style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInUp;">
  139. <h2 class="accordion-header" id="headingThree">
  140. <button class="accordion-button collapsed fw-semi-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
  141. Est-il possible de privatiser un bateau pour une occasion spéciale ?
  142. </button>
  143. </h2>
  144. <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
  145. <div class="accordion-body">
  146. Oui, Villennes Boat propose des événements privés pour les occasions spéciales, comme les anniversaires, les mariages et les événements d'entreprise. Contactez-les pour plus d'informations.
  147. </div>
  148. </div>
  149. </div>
  150. <div class="accordion-item wow fadeInUp" data-wow-delay="0.4s" style="visibility: visible; animation-delay: 0.4s; animation-name: fadeInUp;">
  151. <h2 class="accordion-header" id="headingFour">
  152. <button class="accordion-button collapsed fw-semi-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
  153. Faut-il avoir une expérience en navigation pour participer aux activités de Villennes Boat ?
  154. </button>
  155. </h2>
  156. <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
  157. <div class="accordion-body">
  158. Non, il n'est pas nécessaire d'avoir une expérience en navigation pour participer aux activités de Villennes Boat. Ils proposent des cours de navigation pour les débutants et des activités adaptées à tous les niveaux.
  159. </div>
  160. </div>
  161. </div>
  162. <div class="accordion-item wow fadeInUp" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.5s; animation-name: fadeInUp;">
  163. <h2 class="accordion-header" id="headingFive">
  164. <button class="accordion-button collapsed fw-semi-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
  165. Y a-t-il des restrictions concernant les conditions météorologiques pour les activités de Villennes Boat ?
  166. </button>
  167. </h2>
  168. <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionExample">
  169. <div class="accordion-body">
  170. Oui, certaines activités peuvent être annulées en raison de conditions météorologiques défavorables, comme les fortes pluies ou les vents forts. Villennes Boat vous informera en cas d'annulation et vous proposera une alternative ou un remboursement.
  171. </div>
  172. </div>
  173. </div>
  174. </div>
  175. </div>
  176. </div>
  177. </div>
  178. </div>
  179. <style>
  180. .activity-img {
  181.     max-height: 300px;
  182. }
  183. .activity-description {
  184.     text-align: center;
  185.     margin: 20px;
  186. }
  187.   .contact-form {
  188.     background-color: #f8f9fa;
  189.     padding: 40px;
  190.     border-radius
  191.   }
  192.   @media (max-width: 992px) {
  193.   #about .col-lg-7 {
  194.     order: 2;
  195.     margin-bottom: 50px;
  196.   }
  197. }
  198. /* ajustements pour les écrans de petite taille */
  199. @media (max-width: 768px) {
  200.   #about .col-lg-5 {
  201.     margin-top: 20px;
  202.   }
  203. }
  204. #about form label {
  205.   color: #6c757d;
  206.   font-weight: 600;
  207. }
  208. #about form input[type="text"],
  209. #about form input[type="email"],
  210. #about form textarea {
  211.   border: 1px solid #ced4da;
  212.   border-radius: 0;
  213.   padding: 12px 20px;
  214.   margin-bottom: 2px;
  215.   font-size: 14px;
  216. }
  217. #about form input[type="text"]:focus,
  218. #about form input[type="email"]:focus,
  219. #about form textarea:focus {
  220.   border-color: #007bff;
  221.   box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  222.   outline: none;
  223. }
  224. #about form .btn-primary {
  225.   border-radius: 0;
  226.   background-color: #007bff;
  227.   border-color: #007bff;
  228.   font-size: 16px;
  229.   font-weight: 600;
  230.   padding: 14px 30px;
  231.   transition: all 0.3s ease-in-out;
  232. }
  233. #about form .btn-primary:hover {
  234.   background-color: #0069d9;
  235.   border-color: #0062cc;
  236.   transform: translateY(-2px);
  237. }
  238. #about form .submitting {
  239.   color: #007bff;
  240.   margin-top: 10px;
  241.   display: none;
  242. }
  243. #about form .has-error label {
  244.   color: #dc3545;
  245. }
  246. #about form .has-error input,
  247. #about form .has-error textarea {
  248.   border-color: #dc3545;
  249. }
  250. #about form .has-error input:focus,
  251. #about form .has-error textarea:focus {
  252.   box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
  253. }
  254. </style>
  255. {% endblock %}