templates/home/home.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Cartomancie & Voyance Moulins & Montluçon, Allier 03 | Les Ailes Dorées{% endblock %}
  5. {% block metas %}
  6. <meta name="title" content="Cartomancie & Voyance Moulins & Montluçon, Allier 03 | Les Ailes Dorées" />
  7. <meta name="description"
  8. content="Voyance à Moulins & Montluçon par tirages de tarots à domicile, ou consultations par téléphone ou correspondance / e-mail. Je propose également des cours de cartomancie en Allier (03) ou par correspondance." />
  9. {% endblock %}
  11. {% block stylesheets %}
  12. {{ parent() }}
  13. <link rel="stylesheet"
  14. href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"
  15. integrity="sha512-mSYUmp1HYZDFaVKK//63EcZq4iFWFjxSL+Z3T/aCt4IO9Cejm03q3NKKYN6pFQzY0SBOr8h+eCIAZHPXcpZaNw=="
  16. crossorigin="anonymous" referrerpolicy="no-referrer" />
  17. {% endblock %}
  19. {% block body %}
  21. <!-- Heroslider Area -->
  22. <div class="heroslider-area">
  24. <img class="banner-bg" src="{{ asset('assets/images/webp/banner-1.webp') }}" alt="Bannière" />
  25. <div class="banner-overlay ailes-dorees-menu collapse" id="ailes-dorees-menu-overlay"></div>
  26. <!-- <div class="overlay"></div> -->
  28. <div class="heroslider-header-container">
  29. <div class="heroslider-header-container w-100">
  30. <nav class="navbar sticky-top navbar-expand-lg light p-0">
  31. <div class="container-fluid d-block p-0">
  32. <div class="w-100 py-3 mb-lg-3">
  33. <div class="container d-flex justify-content-between ">
  34. <a class="navbar-brand" href="{{ path('app_home') }}"><img
  35. src="{{ asset('assets/images/png/ailes_dorees_logo.png') }}"
  36. alt="Logo Ailes Dorées"></a>
  37. <div class="navbar-controls">
  38. <div class="ailes-dorees-menu d-none d-lg-block" id="ailes-dorees-menu-header">
  39. <ul class="navbar-nav px-3">
  40. <li class="nav-item">
  41. <a class="nav-link" href="{{ path('app_contact') }}">Contact</a>
  42. </li>
  43. <li class="nav-item">
  44. {% if app.user != null %}
  45. <a class="nav-link tm-button" href="{{ path('app_auth_logout') }}">Se
  46. déconnecter</a>
  47. {% else %}
  48. <a class="nav-link tm-button" href="{{ path('app_auth_login') }}">Se
  49. connecter</a>
  50. {% endif %}
  51. </li>
  53. </ul>
  54. </div>
  55. <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
  56. data-bs-target=".ailes-dorees-menu"
  57. aria-controls="ailes-dorees-menu-content ailes-dorees-menu-header ailes-dorees-menu-overlay"
  58. aria-expanded="false" aria-label="Toggle navigation">
  59. <i class="fas fa-bars"></i>
  60. </button>
  61. </div>
  62. </div>
  63. </div>
  65. <div class="collapse navbar-collapse ailes-dorees-menu" id="ailes-dorees-menu-content">
  66. <div class=" container navbar-nav-container d-flex justify-content-center">
  67. <ul class="navbar-nav mr-auto">
  68. <li class="nav-item">
  69. <a class="nav-link active" href="{{ path('app_home') }}">Accueil</a>
  70. </li>
  71. <li class="nav-item">
  72. <a class="nav-link" href="{{ path('app_about_us', {id: 1}) }}">A propos</a>
  74. </li>
  75. <li class="nav-item">
  76. <a class="nav-link" href="{{ path('app_prestations') }}">Prestations</a>
  77. </li>
  78. <li class="nav-item">
  79. <a class="nav-link" href="{{ path('app_blog_index') }}">Blog</a>
  80. </li>
  81. <li class="nav-item">
  82. <a class="nav-link" href="{{ path('app_services') }}">Services</a>
  83. </li>
  84. <li class="nav-item">
  85. <a class="nav-link" href="{{ path('app_testimonials') }}">Témoignages</a>
  86. </li>
  87. {% if app.user != null %}
  88. <li class="nav-item">
  89. <a class="nav-link" href="{{ path('app_my_appointment') }}">Mes rendez-vous</a>
  90. </li>
  91. {% endif %}
  92. <li class="nav-item d-sm-block d-md-block d-lg-none">
  93. <a class="nav-link" href="{{ path('app_contact') }}">Contact</a>
  94. </li>
  95. <li class="nav-item d-sm-block d-md-block d-lg-none">
  96. {% if app.user != null %}
  97. <a class="nav-link" href="{{ path('app_auth_logout') }}">Se déconnecter</a>
  98. {% else %}
  99. <a class="nav-link" href="{{ path('app_auth_login') }}">Se connecter</a>
  100. {% endif %}
  101. </li>
  103. </ul>
  105. </div>
  106. </div>
  107. </div>
  108. </nav>
  110. </div>
  111. </div>
  112. <!-- Heroslider Slider -->
  113. <div class="heroslider-slider heroslider-animated tm-slider-dots tm-slider-dots-left">
  115. <!-- Heroslider Single -->
  116. <div class="heroslider-singleslider d-flex align-items-center h-100">
  117. <div class="container">
  118. <div class="row align-items-center">
  119. <div class="col-md-7">
  120. <div class="p-4 pt-5">
  121. <h2 class="text-uppercase lh-base">Découvrez ce que vous réserve votre année pour prendre
  122. les meilleures décisions !</h2>
  123. <p class="fw-bolder">
  124. Chacun d’entre nous a, selon sa date de naissance, une année personnelle unique.
  125. <br>
  126. En découvrant les énergies de votre année, vous ferez des choix plus justes qui pourront
  127. littéralement changer votre vie.
  128. </p>
  129. </div>
  130. </div>
  131. <div class="col-md-5 col-12 order-2 order-md-1">
  132. <div class="heroslider-content text-white p-4 pb-5">
  133. {% if error %}
  134. <div class="alert alert-danger p-3">{{ error }}</div>
  135. {% endif %}
  136. {{form_start(predictionForm) }}
  137. <div class="mb-3">
  138. {{form_widget(predictionForm.name,{ 'attr': {'class': 'form-control', 'placeholder' :
  139. 'Votre prénom'} })}}
  140. {{form_errors(predictionForm.name)}}
  141. </div>
  142. <div class="mb-3">
  143. {{form_widget(predictionForm.email,{ 'attr': {'class': 'form-control', 'placeholder' :
  144. 'Votre adresse email'} })}}
  145. {{form_errors(predictionForm.email)}}
  146. </div>
  147. <div class="mb-3">
  148. {{form_widget(predictionForm.birthday,{ 'attr': {'class': 'form-control'} })}}
  149. {{form_errors(predictionForm.birthday)}}
  150. </div>
  151. <button type="submit" class="tm-button tm-button-yellow tm-btn-bg-gold mt-3">Je
  152. calcule</button>
  153. {{form_end(predictionForm)}}
  156. </div>
  158. </div>
  159. </div>
  160. </div>
  161. </div>
  162. <!--// Heroslider Single -->
  164. </div>
  165. <!--// Heroslider Slider -->
  166. </div>
  167. <!--// Heroslider Area -->
  168. <!-- Main Content -->
  169. <main class="main-content">
  170. <div class="tm-section home-area tm-padding-section">
  171. <div class="container position-relative">
  172. <div class="row py-4">
  173. <div class="col-lg-12 d-flex align-items-end">
  174. <h2 class="text-uppercase text-yellow">
  175. Voyance Tarot
  176. </h2>
  177. </div>
  179. </div>
  180. <div class="row">
  181. <div class="col-lg-12">
  182. <!-- Slider main container -->
  183. <div class="swiper swiper-collections-area">
  184. <!-- Additional required wrapper -->
  185. <div class="swiper-wrapper">
  186. <!-- Slides -->
  187. <div class="swiper-slide">
  188. <div class="panel">
  189. <img class="panel-bg"
  190. src="{{ asset('assets/images/webp/voyance-tarot-1.png') }}"
  191. alt="Panel background" />
  192. <div class="panel-overlay"></div>
  193. <div class="panel-body">
  194. <h2 class="text-center">Voyance 30 Minutes</h2>
  195. <a href="{{ path('app_prestations') }}#voyance-tarot"
  196. class="tm-button tm-button-yellow text-yellow mt-3">Prendre un rendez-vous</a>
  197. </div>
  198. </div>
  199. </div>
  200. <div class="swiper-slide">
  201. <div class="panel">
  202. <img class="panel-bg" src="{{ asset('assets/images/webp/voyance-tarot-2.png') }}"
  203. alt="Panel background" />
  204. <div class="panel-overlay"></div>
  205. <div class="panel-body">
  206. <h2 class="text-center">Voyance 1 Heure</h2>
  207. <a href="{{ path('app_prestations') }}#voyance-tarot"
  208. class="tm-button tm-button-yellow text-yellow mt-3">Prendre un rendez-vous</a>
  209. </div>
  210. </div>
  211. </div>
  212. <div class="swiper-slide">
  213. <div class="panel">
  214. <img class="panel-bg"
  215. src="{{ asset('assets/images/webp/voyance-tarot-3.png') }}"
  216. alt="Panel background" />
  217. <div class="panel-overlay"></div>
  218. <div class="panel-body">
  219. <h2 class="text-center">Voyance 2 Heures</h2>
  220. <a href="{{ path('app_prestations') }}#voyance-tarot"
  221. class="tm-button tm-button-yellow text-yellow mt-3">Prendre un rendez-vous</a>
  222. </div>
  223. </div>
  224. </div>
  225. <div class="swiper-slide">
  226. <div class="panel">
  227. <img class="panel-bg"
  228. src="{{ asset('assets/images/webp/Groupe de masques 33.webp') }}"
  229. alt="Panel background" />
  230. <div class="panel-overlay"></div>
  231. <div class="panel-body">
  232. <h2 class="text-center">Voyance 3 Heures</h2>
  233. <a href="{{ path('app_prestations') }}#voyance-tarot"
  234. class="tm-button tm-button-yellow text-yellow mt-3">Prendre un rendez-vous</a>
  235. </div>
  236. </div>
  237. </div>
  239. </div>
  240. <div class="swiper-button-next"></div>
  241. <div class="swiper-button-prev"></div>
  242. </div>
  243. </div>
  244. </div>
  245. <div class="row py-4">
  246. <div class="col-lg-12 d-flex align-items-end">
  247. <h2 class="text-uppercase text-yellow">
  248. Apprendre les cartes et le tarot
  249. </h2>
  250. </div>
  252. </div>
  253. <div class="row">
  254. <div class="col-lg-12">
  255. <!-- Slider main container -->
  256. <div class="swiper swiper-collections-area">
  257. <!-- Additional required wrapper -->
  258. <div class="swiper-wrapper">
  259. <!-- Slides -->
  260. <div class="swiper-slide">
  261. <div class="panel">
  262. <img class="panel-bg"
  263. src="{{ asset('assets/images/webp/Groupe de masques 29.webp') }}"
  264. alt="Panel background" />
  265. <div class="panel-overlay"></div>
  266. <div class="panel-body">
  267. <h2 class="text-center">Atelier personnalisable</h2>
  268. <a href="{{ path('app_prestations') }}#apprendre-a-tirer-les-cartes-le-tarot-atelier-personnalisable"
  269. class="tm-button tm-button-yellow text-yellow mt-3">Prendre un rendez-vous</a>
  270. </div>
  271. </div>
  272. </div>
  273. <div class="swiper-slide">
  274. <div class="panel">
  275. <img class="panel-bg" src="{{ asset('assets/images/webp/Groupe de masques 28.webp') }}"
  276. alt="Panel background" />
  277. <div class="panel-overlay"></div>
  278. <div class="panel-body">
  279. <h2 class="text-center">Les 4 niveaux de lecture du Tarot</h2>
  280. <a href="{{ path('app_prestations') }}#apprendre-les-4-niveaux-de-lecture-du-tarot"
  281. class="tm-button tm-button-yellow text-yellow mt-3">Prendre un rendez-vous</a>
  282. </div>
  283. </div>
  284. </div>
  285. <div class="swiper-slide">
  286. <div class="panel">
  287. <img class="panel-bg"
  288. src="{{ asset('assets/images/webp/Groupe de masques 32.webp') }}"
  289. alt="Panel background" />
  290. <div class="panel-overlay"></div>
  291. <div class="panel-body">
  292. <h2 class="text-center">Formation complète pour apprendre le tarot</h2>
  293. <a href="{{ path('app_prestations') }}#formation-complete-tarot-de-marseille"
  294. class="tm-button tm-button-yellow text-yellow mt-3">Prendre un rendez-vous</a>
  295. </div>
  296. </div>
  297. </div>
  299. </div>
  300. <div class="swiper-button-next"></div>
  301. <div class="swiper-button-prev"></div>
  302. </div>
  303. </div>
  304. </div>
  305. <div class="row py-4">
  306. <div class="col-lg-12 d-flex align-items-end">
  307. <h2 class="text-uppercase text-yellow">
  308. Travail énergétique
  309. </h2>
  310. </div>
  312. </div>
  313. <div class="row">
  314. <div class="col-lg-12">
  315. <!-- Slider main container -->
  316. <div class="swiper swiper-collections-full-area">
  317. <!-- Additional required wrapper -->
  318. <div class="swiper-wrapper">
  319. <!-- Slides -->
  320. <div class="swiper-slide">
  321. <div class="panel">
  322. <img class="panel-bg"
  323. src="{{ asset('assets/images/webp/Groupe 2358.webp') }}"
  324. alt="Panel background" />
  325. <div class="panel-overlay"></div>
  326. <div class="panel-body">
  327. <h2 class="text-center">Protocole de libération <br>énergétique</h2>
  328. <div class="d-flex justify-content-center">
  329. <a href="{{ path('app_prestations') }}#travail-energetique-liberation-emotionnelle-nettoyage-karmique-et-transgenerationnel"
  330. class="tm-button tm-button-yellow text-yellow mt-3">Prendre un rendez-vous</a>
  331. </div>
  333. </div>
  334. </div>
  335. </div>
  337. </div>
  338. {# <div class="swiper-button-next"></div> #}
  339. {# <div class="swiper-button-prev"></div> #}
  340. </div>
  341. </div>
  342. </div>
  343. </div>
  344. </div>
  345. </main>
  346. <!--// Main Content -->
  348. {% endblock %}
  350. {% block javascripts %}
  351. {{ parent() }}
  352. <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"
  353. integrity="sha512-T/tUfKSV1bihCnd+MxKD0Hm1uBBroVYBOYSk1knyvQ9VyZJpc/ALb4P0r6ubwVPSGB2GvjeoMAJJImBG12TiaQ=="
  354. crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  355. <script src="{{ asset('assets/dialia/assets/js/main.js') }}"></script>
  356. <script type="text/javascript">
  357. const swiper_collections_area = new Swiper('.swiper.swiper-collections-area', {
  358. // Optional parameters
  359. direction: 'horizontal',
  360. loop: true,
  361. pagination: false,
  362. navigation: {
  363. nextEl: '.swiper-button-next',
  364. prevEl: '.swiper-button-prev',
  365. },
  366. scrollbar: false,
  367. autoplay: false,
  368. slidesPerView: 1,
  369. spaceBetween: 10,
  370. // Responsive breakpoints
  371. breakpoints: {
  372. // when window width is >= 480px
  373. 480: {
  374. slidesPerView: 1,
  375. spaceBetween: 20
  376. },
  377. // when window width is >= 640px
  378. 768: {
  379. slidesPerView: 2,
  380. spaceBetween: 30
  381. },
  382. 1000: {
  383. slidesPerView: 3,
  384. spaceBetween: 40
  385. }
  386. }
  387. });
  391. </script>
  392. {{ encore_entry_script_tags('custom_datepicker_b') }}
  393. {% endblock %}