templates/index.html.twig line 1

1. {% extends 'base.html.twig' %}
3. {% block body %}
4.     {{ render(controller('App\\Controller\\Frontend\\FrontendController::banner' )) }}
5.     <section id="content">
6.         <div class="content-wrap">
7.             <div class="container">
8.                 <div class="mx-auto text-center" style="max-width: 900px;">
9.                     <img class="mb-5" src="{{ asset('frontend/images/bikes.png') }}" alt="Image" style="width: 200px;">
10.                     <h1>Parc Vélo Solidaire <span>SoliBikes</span>.</h1>
11.                 </div>
12.                     <div class="heading-block text-center">
13.                         <span class="mx-auto">SOLIBIKES le premier parc vélos solidaire à Djerba qui donne la possibilité de louer des vélos en autonomie ou pour des visites guidées des circuits culturels à vélo, est une chance pour tous ceux qui adorent se déplacer en vélo pour découvrir de près la richesse patrimoniale de l’île dans une belle ambiance</span>
14.                     </div>
16.                 <div class="row align-items-center col-mb-50 mb-4">
17.                         <div class="col-lg-4 col-md-6">
19.                             <div class="feature-box  fbox-effect flex-md-row-reverse text-md-end" data-animate="fadeIn">
20.                                 <div class="fbox-icon">
21.                                     <a href="#"><i class="fa-solid fa-person-biking"></i></a>
22.                                 </div>
23.                                 <div class="fbox-content">
24.                                     <h3>Location de Vélo</h3>
25.                                     <p>Louez des vélos pour explorer Djerba en toute autonomie et profitez de la richesse culturelle de l'île à votre rythme.</p>
26.                                 </div>
27.                             </div>
29.                             <div class="feature-box  fbox-effect flex-md-row-reverse text-md-end  mt-5" data-animate="fadeIn">
30.                                 <div class="fbox-icon">
31.                                     <a href="#"><i class="bi-tools"></i></a>
32.                                 </div>
33.                                 <div class="fbox-content">
34.                                     <h3>Coin de réparation</h3>
35.                                     <p>Réparez vos vélos facilement avec notre espace dédié équipé des outils nécessaires pour des réparations rapides.</p>
36.                                 </div>
37.                             </div>
40.                         </div>
42.                         <div class="col-lg-4 d-md-none d-lg-block text-center">
43.                         <img src="{{ asset('frontend/images/services/svelo.jpg') }}" alt="iphone 2">
44.                     </div>
46.                         <div class="col-lg-4 col-md-6">
48.                             <div class="feature-box  fbox-effect flex-md-row-reverse text-md-end" data-animate="fadeIn">
49.                                 <div class="fbox-icon">
50.                                     <a href="#"><i class="fa-solid fa-map-location-dot"></i></a>
51.                                 </div>
52.                                 <div class="fbox-content">
53.                                     <h3>Des visites guidées </h3>
54.                                     <p>Découvrez les circuits culturels de Djerba avec nos visites guidées à vélo. Explorez l'île tout en apprenant sur son patrimoine.</p>
55.                                 </div>
56.                             </div>
58.                             <div class="feature-box  fbox-effect flex-md-row-reverse text-md-end  mt-5" data-animate="fadeIn">
59.                                 <div class="fbox-icon">
60.                                     <a href="#"><i class="fa-solid fa-shopping-basket"></i></a>
61.                                 </div>
62.                                 <div class="fbox-content">
63.                                     <h3>Boutique de vente</h3>
64.                                     <p>Trouvez tout ce dont vous avez besoin pour votre aventure cycliste dans notre boutique. Équipez-vous pour une expérience de vélo inoubliable.</p>
65.                                 </div>
66.                             </div>
67.                             <div class="feature-box  fbox-effect flex-md-row-reverse text-md-end  mt-5" data-animate="fadeIn">
68.                                 <div class="fbox-icon">
69.                                     <a href="#"><i class="fa-solid fa-project-diagram"></i></a>
70.                                 </div>
71.                                 <div class="fbox-content">
72.                                     <h3>Des points de relais</h3>
73.                                     <p>Bénéficiez d'une plus grande flexibilité avec nos points de relais stratégiquement placés, où vous pouvez récupérer et déposer vos vélos en toute simplicité.</p>
74.                                 </div>
75.                             </div>
77.                         </div>
78.                     </div>
80.             </div>
81.             <div class="mx-auto text-center" style="max-width: 900px;">
82.                 <img class="mb-5" src="{{ asset('frontend/images/bikes.45845.svg') }}" alt="Image">
83.             </div>
84.             <a href="#" class="button button-full button-dark text-center text-end ">
85.                 <div class="container">
86.                         Bénéficiez de nos avantages toute l'année à moindre coûts et des remises sur notre boutique. <strong>Abonnement Solidaire</strong> <i class="fa-solid fa-caret-right" style="top:4px;"></i>
87.                     </div>
88.             </a>
89.             <div class="content-wrap" id="services">
90.                 <div class="container">
91.                     <div class="fancy-title title-border title-center mb-5">
92.                         <h4 id="explore-more-elements" class="h3" data-onepage-settings="{&quot;offset&quot;:60,&quot;speed&quot;:1250,&quot;easing&quot;:false}">
93.                             <a href="icons.html" class="btn btn-warning btn-lg ">Nos Services<i class="bi-arrow-right ms-2" style="position: relative; top: 1px;"></i>
94.                             </a>
95.                         </h4>
96.                     </div>
98.                     <div class="row justify-content-center">
99.                         <div class="col-md-4">
100.                             <div class="team">
101.                                 <div class="team-image">
102.                                     <img src="{{ asset('frontend/images/services/service1.jpg') }}" alt="John Doe" class="rounded-6">
103.                                     <div class="bg-overlay">
104.                                         <div class="bg-overlay-content align-items-end" data-hover-animate="fadeIn" data-hover-speed="400"></div>
105.                                         <div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-speed="400"></div>
106.                                     </div>
107.                                 </div>
108.                                 <div class="team-desc team-desc-bg">
109.                                     <div class="team-title">
110.                                         <h4>Accessoire et pièce de rechange</h4>
111.                                     </div>
112.                                 </div>
113.                             </div>
114.                         </div>
115.                         <div class="col-md-4">
116.                             <div class="team">
117.                                 <div class="team-image">
118.                                     <img src="{{ asset('frontend/images/services/service2.jpg') }}" alt="John Doe" class="rounded-6">
119.                                     <div class="bg-overlay">
120.                                         <div class="bg-overlay-content align-items-end" data-hover-animate="fadeIn" data-hover-speed="400"></div>
121.                                         <div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-speed="400"></div>
122.                                     </div>
123.                                 </div>
124.                                 <div class="team-desc team-desc-bg">
125.                                     <div class="team-title">
126.                                         <h4>Entretien et réparations</h4>
127.                                     </div>
128.                                 </div>
129.                             </div>
130.                         </div>
131.                         <div class="col-md-4">
132.                             <div class="team">
133.                                 <div class="team-image">
134.                                     <img src="{{ asset('frontend/images/services/service3.jpg') }}" alt="John Doe" class="rounded-6">
135.                                     <div class="bg-overlay">
136.                                         <div class="bg-overlay-content align-items-end" data-hover-animate="fadeIn" data-hover-speed="400"></div>
137.                                         <div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-speed="400"></div>
138.                                     </div>
139.                                 </div>
140.                                 <div class="team-desc team-desc-bg">
141.                                     <div class="team-title">
142.                                         <h4>Sorties Guidées</h4>
143.                                     </div>
144.                                 </div>
145.                             </div>
146.                         </div>
148.                     </div>
149.                 </div>
150. <div class="section parallax  mb-6" style="padding: 100px 0;    margin-top: 0px;" data-bs-theme="dark">
151.                     <div class="simpleParallax" style="overflow: hidden;"><img src="{{ asset('frontend/images/purchase_bg.jpg') }}" class="parallax-bg" data-parallax-speed="3" style="transform: translate3d(0px, 54px, 0px) scale(1.3); will-change: transform;"></div>
153.                     <div class="container">
155.                         <div class="row">
156.                             <div class="col-lg-3 text-center bounceIn animated" data-animate="bounceIn">
157.                                 <i class="i-plain  i-large mx-auto mb-0 fa-solid fa-person-biking"></i>
158.                                 <div class="counter counter-lined"><span data-from="3" data-to="45" data-refresh-interval="45" data-speed="2500" data-comma="true">45</span>+</div>
159.                                 <h5>Vélos</h5>
160.                             </div>
162.                             <div class="col-lg-3 text-center bounceIn animated" data-animate="bounceIn" data-delay="200">
163.                                 <i class="i-plain i-large mx-auto mb-0  uil-calendar-alt"></i>
164.                                 <div class="counter counter-lined"><span data-from="3" data-to="30" data-refresh-interval="2" data-speed="2500" data-comma="true">30</span>+</div>
165.                                 <h5>Sorties vélo</h5>
166.                             </div>
168.                             <div class="col-lg-3 text-center bounceIn animated" data-animate="bounceIn" data-delay="400">
169.                                 <i class="i-plain i-large mx-auto mb-0 fa-solid fa-ruler-combined "></i>
170.                                 <div class="counter counter-lined"><span data-from="100" data-to="900" data-refresh-interval="50" data-speed="5000" data-comma="true">900</span>+</div>
171.                                 <h5>Km </h5>
172.                             </div>
174.                             <div class="col-lg-3 text-center bounceIn animated" data-animate="bounceIn" data-delay="600">
175.                                 <i class="i-plain i-large mx-auto mb-0 fa-brands uil-smile-beam"></i>
176.                                 <div class="counter counter-lined"><span data-from="25" data-to="150" data-refresh-interval="30" data-speed="4700" data-comma="true">150</span>+</div>
177.                                 <h5>Participants satisfaits</h5>
178.                             </div>
179.                         </div>
181.                     </div>
183.                 </div>
184.                 {{ render(controller('App\\Controller\\Frontend\\FrontendController::bike' )) }}
185.                 {{ render(controller('App\\Controller\\Frontend\\FrontendController::circuit' )) }}
186.             </div>
187.         </div>
188.     </section>
189. {% endblock %}
191. {% block javascripts %}
192.     {# counter #}
193.     <script src="{{ asset('frontend/js/plugins.parallax.js') }}"></script>
194.     <script src="{{ asset('frontend/js/plugins.counter.js') }}"></script>
196.     {# banner #}
197.     <script src="{{ asset('frontend/js/plugins.swiper.js') }}"></script>
199.     {# bike #}
200.     <script src="{{ asset('frontend/js/plugins.lightbox.js') }}"></script>
201.     <script src="{{ asset('frontend/js/plugins.carousel.js') }}"></script>
202. {% endblock %}