templates/theme/default/component-blocks/etaps-block.html.twig line 1

Open in your IDE?
  2. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
  3. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
  5. {% if bloc.data[0] is defined and bloc.data[0] is not empty %}
  6. {% set data_etaps = bloc.data[0] %}
  8. {% if bloc.template == "1" or bloc.template is empty %}
  9. <div id="box-etaps-{{bloc.id}}" style="{{ data_etaps.bg_color ? 'background-color:' ~ data_etaps.bg_color ~ ';' : '' }}" class="box-etaps {{data_etaps.style_option|default('')}} {{'model-' ~ bloc.template|default('1') }} {{bloc.className ?? ''}}">
  10. <div class="container-fluid content-wrapper">
  11. {% if data_etaps.globalDesc is not empty or data_etaps.typeLien != 1 or data_etaps.globalTitleOption is not empty or data_etaps.globalTitle is not empty or data_etaps.globalDescOption is not empty %}
  14. <div class="row content-header b-3">
  15. {% if data_etaps.globalTitleOption is not empty or data_etaps.globalTitle is not empty %}
  16. <div class="col-sm-12" data-aos="fade-up" data-aos-easing="linear" data-aos-delay="50">
  17. <span class="site_title" style="{{ data_etaps.text_color ? 'color:' ~ data_etaps.text_color ~ ';' : '' }}">{{data_etaps.globalTitleOption|raw}}</span>
  18. <h2 class="main-title" style="{{ data_etaps.text_color ? 'color:' ~ data_etaps.text_color ~ ';' : '' }}">
  19. {{data_etaps.globalTitle|raw}}
  20. </h2>
  21. </div>
  22. {% endif %}
  23. {% if data_etaps.globalDesc is not empty or data_etaps.globalDescOption is not empty or data_etaps.typeLien != 1 or data_etaps.typeLien != '' %}
  24. <div class="col-sm-12" data-aos="fade-up" data-aos-easing="linear" data-aos-delay="50">
  25. <div class="bloc-description" style="{{ data_etaps.text_color ? 'color:' ~ data_etaps.text_color ~ ';' : '' }}">
  26. {% if data_etaps.globalDesc is defined and data_etaps.globalDesc is not empty %}
  27. <div class="description">
  28. {{data_etaps.globalDesc|raw}}</div>
  29. {% endif %}
  30. {% if data_etaps.globalDescOption is defined and data_etaps.globalDescOption is not empty %}
  31. <div class="description-option" style="{{ data_etaps.text_color2 ? 'color:' ~ data_etaps.text_color2 ~ ';' : '' }} {{ data_etaps.bg_color2 ? 'background-color:' ~ data_etaps.bg_color2 ~ ';' : '' }}">
  32. {{data_etaps.globalDescOption|raw}}</div>
  33. {% endif %}
  34. {% if data_etaps.typeLien != 1 and data_etaps.typeLien != '' %}
  35. {% if data_etaps.typeLien == '4' %}
  36. <a onclick="window.location.href = 'tel:{{data_etaps.telephone}}';" class="btn-theme">{{data_etaps.globalLien}}</a>
  37. {% elseif data_etaps.typeLien == '2' %}
  38. <a href="{{resolveInternalSlugLink(data_etaps.lieninterne)}}" class="btn-theme">{{data_etaps.globalLien}}</a>
  39. {% elseif data_etaps.typeLien == '3' %}
  40. <a href="{{data_etaps.lienExterne}}" class="btn-theme" target="_blank">{{data_etaps.globalLien}}</a>
  41. {% endif %}
  42. {% endif %}
  43. </div>
  44. </div>
  45. {% endif %}
  47. {% if bloc.image is not empty %}
  48. <div class="image_boxes text-center" data-aos="fade-right" data-aos-easing="linear">
  49. {% if bloc.image is not empty %}
  50. <div class="image one">
  51. <img src="{{ asset_image(bloc.image, 'medium', ['800x/uploads', '800x/uploads', '480x/uploads']) }}" alt="{{ bloc.altimage|default(data_etaps.globalTitle|raw) }}" class="img-fluid">
  52. </div>
  53. {% endif %}
  54. {% if bloc.image2 is not empty %}
  55. <div class="image two">
  56. <img src="{{ asset_image(bloc.image2, 'medium', ['800x/uploads', '800x/uploads', '480x/uploads']) }}" alt="{{ bloc.altimage2|default(data_etaps.globalTitle|raw) }}" class="img-fluid">
  57. </div>
  58. {% endif %}
  59. </div>
  60. {% endif %}
  61. </div>
  62. {% endif %}
  63. {% if data_etaps.etaps is not empty %}
  66. <div class="row content-body">
  68. {% if data_etaps.globalDescOption is defined and data_etaps.globalDescOption is not empty %}
  69. <div class="description-option" style="{{ data_etaps.text_color2 ? 'color:' ~ data_etaps.text_color2 ~ ';' : '' }} {{ data_etaps.bg_color2 ? 'background-color:' ~ data_etaps.bg_color2 ~ ';' : '' }}">
  70. {{data_etaps.globalDescOption|raw}}</div>
  71. {% endif %}
  72. {% set duree = '100' %}
  73. {% if data_etaps.etaps is defined and data_etaps.etaps is not empty %}
  75. {% set colClass = data_etaps.globalGridItems is not empty ? 'col-lg-' ~ data_etaps.globalGridItems: "col-md-3" %}
  78. {% for item in data_etaps.etaps %}
  79. <div class="col-md-4 {{colClass}} body-content" data-aos="fade-up" data-aos-easing="linear" data-aos-delay="{{duree}}">
  80. <div class="bloc-content" {% if item.bg_color %} style="background-color: {{item.bg_color}};" {% endif %}>
  81. {% if item.icon %}
  82. <div class="item-picto">
  83. <img src="{{item.icon}}" alt="{{item.sous_titre|default('')}}" width="80" height="80" loading="lazy">
  84. </div>
  85. {% endif %}
  87. {% if item.description or item.title or item.sous_titre %}
  88. <div class="description-item" {% if item.text_color %} style="color: {{item.text_color}};" {% endif %}>
  89. {% if item.title %}
  90. <h3 class="title" {% if item.text_color %} style="color: {{item.text_color}};" {% endif %}>
  91. {{item.title}}</h3>
  92. {% endif %}
  93. {% if item.sous_titre is not empty %}
  94. <span class="sous-titre">{{item.sous_titre|raw}}</span>
  95. {% endif %}
  96. {% if item.description %}
  97. <div class="description-item" {% if item.text_color %} style="color: {{item.text_color}};" {% endif %}>{{item.description|raw}}</div>
  98. {% endif %}
  99. {% if item.description2 %}
  100. <div class="description-option-item" {% if item.bg_color2 or item.text_color2 %} style="background-color: {{item.bg_color2}}; color: {{item.text_color2}};" {% endif %}>
  101. {{item.description2|raw}}
  102. </div>
  103. {% endif %}
  105. </div>
  106. {% endif %}
  107. {% if item.type_lien is defined and item.type_lien != '1' and item.title_lien is not empty %}
  108. <div class="bloc-button-item">
  109. {% if item.type_lien == '2' %}
  110. <a href="{{ resolveInternalSlugLink(item.lien_interne) }}" class="btn-theme">{{ item.title_lien|raw }}</a>
  111. {% elseif item.type_lien == '3' %}
  112. <a href="{{ item.lien_externe }}" target="_blank" class="btn-theme">{{ item.title_lien|raw }}</a>
  113. {% elseif item.type_lien == '4' %}
  114. <a href="tel:{{ item.phone_number }}" class="btn-theme">{{ item.title_lien|raw }}</a>
  115. {% endif %}
  116. </div>
  117. {% endif %}
  118. </div>
  119. </div>
  120. {% set duree = duree + '100' %}
  121. {% endfor %}
  122. {% endif %}
  125. </div>
  126. {% endif %}
  128. </div>
  129. </div>
  130. </div>
  131. {% elseif bloc.template == "2" %}
  132. <div id="box-etaps-{{bloc.id}}" style="{{ data_etaps.bg_color ? 'background-color:' ~ data_etaps.bg_color ~ ';' : '' }}" class="box-etaps {{data_etaps.style_option|default('')}} {{'model-' ~ bloc.template }} {{bloc.className ?? ''}}">
  133. <div class="container-fluid content-wrapper">
  134. {% if data_etaps.globalTitleOption is not empty or data_etaps.globalTitle is not empty or data_etaps.globalDesc is not empty or data_etaps.typeLien != 1 or data_etaps.globalDescOption is not empty %}
  135. <div class="row header">
  136. <div class="col-sm-12 col-md-12" data-aos="fade-up" data-aos-easing="linear" data-aos-delay="50">
  137. {% if data_etaps.globalTitleOption is defined and data_etaps.globalTitleOption is not empty %}
  138. <span class="site_title" style="{{ data_etaps.text_color ? 'color:' ~ data_etaps.text_color ~ ';' : '' }}">{{data_etaps.globalTitleOption|raw}}</span>
  139. {% endif %}
  140. {% if data_etaps.globalTitle is defined and data_etaps.globalTitle is not empty %}
  141. <h2 class="main-title" style="{{ data_etaps.text_color ? 'color:' ~ data_etaps.text_color ~ ';' : '' }}">
  142. {{data_etaps.globalTitle|raw}}
  143. </h2>
  144. {% endif %}
  145. {% if data_etaps.globalDesc is defined and data_etaps.globalDesc is not empty %}
  146. <div class="description" style="{{ data_etaps.text_color ? 'color:' ~ data_etaps.text_color ~ ';' : '' }}">
  147. {{data_etaps.globalDesc|raw}}</div>
  148. {% endif %}
  149. {% if data_etaps.globalDescOption is defined and data_etaps.globalDescOption is not empty %}
  150. <div class="description-option" style="{{ data_etaps.text_color2 ? 'color:' ~ data_etaps.text_color2 ~ ';' : '' }} {{ data_etaps.bg_color2 ? 'background-color:' ~ data_etaps.bg_color2 ~ ';' : '' }}">
  151. {{data_etaps.globalDescOption|raw}}</div>
  152. {% endif %}
  153. {% if data_etaps.typeLien != 1 and data_etaps.typeLien != '' %}
  154. {% if data_etaps.typeLien == '4' %}
  155. <a onclick="window.location.href = 'tel:{{data_etaps.telephone}}';" class="btn-theme">{{data_etaps.globalLien}}</a>
  156. {% elseif data_etaps.typeLien == '2' %}
  157. <a href="{{resolveInternalSlugLink(data_etaps.lieninterne)}}" class="btn-theme">{{data_etaps.globalLien}}</a>
  158. {% elseif data_etaps.typeLien == '3' %}
  159. <a href="{{data_etaps.lienExterne}}" class="btn-theme" target="_blank">{{itdata_etapsem.globalLien}}</a>
  160. {% endif %}
  161. {% endif %}
  162. </div>
  163. </div>
  164. {% endif %}
  165. {% if data_etaps.etaps is defined and data_etaps.etaps is not empty %}
  166. <div class="row content-body">
  167. {% set duree = '100' %}
  168. {% set colClass = data_etaps.globalGridItems is not empty ? 'col-md-' ~ data_etaps.globalGridItems: "col-md-3" %}
  169. {% for item in data_etaps.etaps %}
  170. <div class="col-sm-12 col-md-6 {{colClass}} text-start" data-aos="fade-up" data-aos-easing="linear" data-aos-delay="{{duree}}">
  171. <div class="bloc-content d-flex " {% if item.bg_color %} style="background-color: {{item.bg_color}};" {% endif %}>
  172. {% if item.icon is not empty %}
  173. <span class="item-picto">
  174. <img src="{{item.icon}}" alt="{{item.sous_titre|default('')}}" width="80" height="80" loading="lazy">
  175. </span>
  176. {% endif %}
  177. {% if item.title is not empty or item.sous_titre is not empty %}
  178. <div class="bloc-titre d-flex flex-column" {% if item.text_color %} style="color: {{item.text_color}};" {% endif %}>
  179. {% if item.title is not empty %}
  180. <h3 class="title" {% if item.text_color %} style="color: {{item.text_color}};" {% endif %}>
  181. {{item.title}}</h3>
  182. {% endif %}
  185. </div>
  186. {% if item.sous_titre is not empty %}
  187. <span class="sous-titre" {% if item.text_color %} style="color: {{item.text_color}};" {% endif %}>{{item.sous_titre|raw}}</span>
  188. {% endif %}
  189. {% endif %}
  190. {% if item.description is not empty or item.description2 is not empty or item.type_lien != '1' %}
  191. <div class="bloc-description-item">
  192. {% if item.description %}
  193. <div class="description-item" {% if item.text_color %} style="color: {{item.text_color}};" {% endif %}>{{item.description|raw}}</div>
  194. {% endif %}
  195. {% if item.description2 %}
  196. <div class="description-option-item" {% if item.bg_color2 or item.text_color2 %} style="background-color: {{item.bg_color2}}; color: {{item.text_color2}};" {% endif %}>{{item.description2|raw}}</div>
  197. {% endif %}
  198. {% if item.type_lien is defined and item.type_lien != '1' and item.title_lien is not empty %}
  199. <div class="bloc-button-item">
  200. {% if item.type_lien == '2' %}
  201. <a href="{{ resolveInternalSlugLink(item.lien_interne) }}" class="btn-theme">{{ item.title_lien|raw }}</a>
  202. {% elseif item.type_lien == '3' %}
  203. <a href="{{ item.lien_externe }}" target="_blank" class="btn-theme">{{ item.title_lien|raw }}</a>
  204. {% elseif item.type_lien == '4' %}
  205. <a href="tel:{{ item.phone_number }}" class="btn-theme">{{ item.title_lien|raw }}</a>
  206. {% endif %}
  207. </div>
  208. {% endif %}
  209. </div>
  210. {% endif %}
  211. </div>
  212. </div>
  213. {% set duree = duree + '100' %}
  214. {% endfor %}
  215. </div>
  216. {% endif %}
  217. </div>
  218. </div>
  219. {% elseif bloc.template == "3" %}
  220. <div id="box-etaps-{{bloc.id}}" class="box-etaps {{data_etaps.style_option|default('')}} {{'model-' ~ bloc.template }} {{bloc.className ?? ''}}">
  221. <div class="container-fluid content-wrapper">
  222. {% if data_etaps.globalTitleOption is not empty or data_etaps.globalTitle is not empty or data_etaps.globalDesc is not empty %}
  223. <div class="row header row-etape" id="etape-header">
  224. <div class="col-sm-12 col-lg-6">
  225. <div class="bloc-content" data-aos="fade-down" data-aos-easing="linear" data-aos-delay="50">
  226. {% if data_etaps.globalTitleOption is defined and data_etaps.globalTitleOption is not empty or data_etaps.typeLien != '' %}
  227. <span class="site_title">{{data_etaps.globalTitleOption|raw}}</span>
  228. {% endif %}
  229. {% if data_etaps.globalTitle is defined and data_etaps.globalTitle is not empty %}
  230. <h2 class="main-title">
  231. {{data_etaps.globalTitle|raw}}
  232. </h2>
  233. {% endif %}
  234. {% if data_etaps.globalDesc is defined and data_etaps.globalDesc is not empty %}
  235. <div class="step-description text-end">
  236. {{data_etaps.globalDesc|raw}}</div>
  237. {% endif %}
  239. {% if data_etaps.typeLien != 1 and data_etaps.typeLien != '' %}
  240. {% if data_etaps.typeLien == '4' %}
  241. <a onclick="window.location.href = 'tel:{{data_etaps.telephone}}';" class="btn-theme">{{data_etaps.globalLien}}</a>
  242. {% elseif data_etaps.typeLien == '2' %}
  243. <a href="{{resolveInternalSlugLink(data_etaps.lieninterne)}}" class="btn-theme">{{data_etaps.globalLien}}</a>
  244. {% elseif data_etaps.typeLien == '3' %}
  245. <a href="{{data_etaps.lienExterne}}" class="btn-theme" target="_blank">{{itdata_etapsem.globalLien}}</a>
  246. {% endif %}
  247. {% endif %}
  248. </div>
  249. </div>
  250. </div>
  251. {% endif %}
  252. {% if data_etaps.etaps is defined and data_etaps is not empty %}
  254. {% set duree = '100' %}
  255. {% if data_etaps.etaps is defined and data_etaps.etaps is not empty %}
  257. {% set colClass = data_etaps.globalGridItems is not empty ? 'col-md-' ~ data_etaps.globalGridItems: "col-md-3" %}
  258. {% for item in data_etaps.etaps %}
  259. <div class="row content-body row-etape sticky justify-content-between" id="etape-{{ loop.index }}" {% if item.bg_color %} style="background-color: {{item.bg_color}};" {% endif %}>
  260. <div class="col-sm-12 col-lg-7 text-start" data-aos="fade-up" data-aos-easing="linear" data-aos-delay="{{duree}}">
  261. <div class="bloc-content">
  262. <div>
  263. {% if item.sous_titre is not empty %}
  264. <div class="sub-title">
  265. {{item.sous_titre}}</div>
  266. {% endif %}
  268. {% if item.title is not empty %}
  269. <h3 class="title">{{item.title}}</h3>
  270. {% endif %}
  271. </div>
  273. {% if item.description %}
  274. <div class="description">{{item.description|raw}}</div>
  275. {% endif %}
  277. {% if item.type_lien is defined and item.type_lien != '1' and item.title_lien is not empty %}
  278. <div class="bloc-button-item">
  279. {% if item.type_lien == '2' %}
  280. <a href="{{ resolveInternalSlugLink(item.lien_interne) }}" class="btn-theme">{{ item.title_lien|raw }}</a>
  281. {% elseif item.type_lien == '3' %}
  282. <a href="{{ item.lien_externe }}" target="_blank" class="btn-theme">{{ item.title_lien|raw }}</a>
  283. {% elseif item.type_lien == '4' %}
  284. <a href="tel:{{ item.phone_number }}" class="btn-theme">{{ item.title_lien|raw }}</a>
  285. {% endif %}
  286. </div>
  287. {% endif %}
  290. </div>
  291. </div>
  292. <div class="col-sm-12 col-lg-5" data-aos="fade-up" data-aos-easing="linear" data-aos-delay="{{duree}}">
  293. <div class="bloc-image">
  294. {% if item.icon %}
  295. <span class="item-picto">
  296. <img src="{{item.icon}}" alt="{{item.sous_titre|default('')}}" width="" height="" loading="lazy">
  297. </span>
  298. {% endif %}
  299. </div>
  300. </div>
  301. {% set duree = duree + '100' %}
  302. </div>
  303. {% endfor %}
  305. {% endif %}
  308. {% if data_etaps.globalDescOption is defined and data_etaps.globalDescOption is not empty %}
  309. <div class="row content-footer">
  310. <div class="col-sm-12" data-aos="fade-up" data-aos-easing="linear" data-aos-delay="{{duree}}">
  311. {{data_etaps.globalDescOption|raw}}
  312. </div>
  313. </div>
  314. {% endif %}
  315. {% endif %}
  316. </div>
  317. </div>
  320. {% elseif bloc.template == "4" %}
  321. <div id="box-etaps-{{bloc.id}}" style="{{ data_etaps.bg_color ? 'background-color:' ~ data_etaps.bg_color ~ ';' : '' }}" class="box-etaps {{data_etaps.style_option|default('')}} {{'model-' ~ bloc.template|default('1') }} {{bloc.className ?? ''}}">
  322. <div class="container-fluid content-wrapper">
  323. {% if data_etaps is defined and data_etaps is not empty %}
  324. <div class="row align-items-center">
  325. {% if data_etaps.globalDesc is not empty or data_etaps.typeLien != 1 or data_etaps.globalDescOption is not empty or data_etaps.globalTitle is not empty or data_etaps.globalTitleOption is not empty %}
  326. <div class="col-sm-12 col-xl-6" data-aos="fade-up" data-aos-easing="linear" data-aos-delay="50">
  327. {% if data_etaps.globalTitleOption is defined and data_etaps.globalTitleOption is not empty %}
  328. <span class="site_title" style="{{ data_etaps.text_color ? 'color:' ~ data_etaps.text_color ~ ';' : '' }}">{{data_etaps.globalTitleOption|raw}}</span>
  329. {% endif %}
  330. {% if data_etaps.globalTitle is not empty %}
  331. <h2 class="main-title" style="{{ data_etaps.text_color ? 'color:' ~ data_etaps.text_color ~ ';' : '' }}">
  332. {{data_etaps.globalTitle|raw}}
  333. </h2>
  334. {% endif %}
  335. {% if data_etaps.globalDesc is not empty or data_etaps.typeLien != 1 or data_etaps.globalDescOption is not empty %}
  336. <div class="bloc-description" style="{{ data_etaps.text_color ? 'color:' ~ data_etaps.text_color ~ ';' : '' }}">
  337. {% if data_etaps.globalDesc is defined and data_etaps.globalDesc is not empty %}
  338. <div class="description">
  339. {{data_etaps.globalDesc|raw}}</div>
  340. {% endif %}
  342. {% if data_etaps.typeLien != 1 and data_etaps.typeLien != '' %}
  343. {% if data_etaps.typeLien == '4' %}
  344. <a onclick="window.location.href = 'tel:{{data_etaps.telephone}}';" class="btn-theme">{{data_etaps.globalLien}}</a>
  345. {% elseif data_etaps.typeLien == '2' %}
  346. <p>
  347. <a href="{{resolveInternalSlugLink(data_etaps.lieninterne)}}" class="btn-theme">
  348. <span>{{data_etaps.globalLien}}</span>
  349. </a>
  350. </p>
  351. {% elseif data_etaps.typeLien == '3' %}
  352. <a href="{{data_etaps.lienExterne}}" class="btn-theme" target="_blank">{{itdata_etapsem.globalLien}}</a>
  353. {% endif %}
  354. {% endif %}
  356. {% if data_etaps.globalDescOption is defined and data_etaps.globalDescOption is not empty %}
  357. <div class="description-option" style="{{ data_etaps.text_color2 ? 'color:' ~ data_etaps.text_color2 ~ ';' : '' }} {{ data_etaps.bg_color2 ? 'background-color:' ~ data_etaps.bg_color2 ~ ';' : '' }}">
  358. {{data_etaps.globalDescOption|raw}}</div>
  359. {% endif %}
  360. </div>
  361. {% endif %}
  362. </div>
  363. {% endif %}
  364. {% if data_etaps.etaps is defined and data_etaps.etaps is not empty %}
  365. <div class="col-sm-12 col-xl-6" data-aos="fade-up" data-aos-easing="linear" data-aos-delay="50">
  366. {% set duree = '100' %}
  367. {% set colClass = data_etaps.globalGridItems is not empty ? 'col-lg-' ~ data_etaps.globalGridItems: "col-md-3" %}
  368. <div class="row">
  369. {% for item in data_etaps.etaps %}
  370. <div class="{{colClass}}">
  371. <div class="bloc-content" data-aos="fade-up" data-aos-easing="linear" data-aos-delay="{{duree}}" {% if item.bg_color %} style="background-color: {{item.bg_color}};" {% endif %}>
  372. {% if item.icon is not empty %}
  373. <span class="item-picto">
  374. <img src="{{item.icon}}" alt="{{item.sous_titre|default('')}}" width="55" height="55" loading="lazy">
  375. </span>
  376. {% endif %}
  377. {% if item.title is not empty %}
  378. <h3 class="title" {% if item.text_color %} style="color: {{item.text_color}};" {% endif %}>
  379. {{item.title}}</h3>
  380. {% endif %}
  381. {% if item.sous_titre is not empty %}
  382. <span class="sous-titre" {% if item.text_color %} style="color: {{item.text_color}};" {% endif %}>{{item.sous_titre}}</span>
  383. {% endif %}
  384. {% if item.description is not empty %}
  385. <div class="description-item" {% if item.text_color %} style="color: {{item.text_color}};" {% endif %}>{{item.description|raw}}</div>
  386. {% endif %}
  387. {% if item.description2 is not empty %}
  388. <div class="description-option-item" {% if item.bg_color2 or item.text_color2 %} style="background-color: {{item.bg_color2}}; color: {{item.text_color2}};" {% endif %}>{{item.description2|raw}}</div>
  389. {% endif %}
  390. {% if item.type_lien is defined and item.type_lien != '1' and item.title_lien is not empty %}
  391. <div class="bloc-button-item">
  392. {% if item.type_lien == '2' %}
  393. <a href="{{ resolveInternalSlugLink(item.lien_interne) }}" class="btn-theme">{{ item.title_lien|raw }}</a>
  394. {% elseif item.type_lien == '3' %}
  395. <a href="{{ item.lien_externe }}" target="_blank" class="btn-theme">{{ item.title_lien|raw }}</a>
  396. {% elseif item.type_lien == '4' %}
  397. <a href="tel:{{ item.phone_number }}" class="btn-theme">{{ item.title_lien|raw }}</a>
  398. {% endif %}
  399. </div>
  400. {% endif %}
  401. </div>
  402. </div>
  403. {% set duree = duree + '100' %}
  404. {% endfor %}
  405. </div>
  406. </div>
  407. {% endif %}
  408. </div>
  409. {% endif %}
  410. </div>
  411. </div>
  412. {% elseif bloc.template == "5" %}
  413. <div id="box-etaps-{{bloc.id}}" class="box-etaps {{data_etaps.style_option|default('')}} {{'model-' ~ bloc.template|default('1') }} {{bloc.className ?? ''}}" style="{{ data_etaps.bg_color ? 'background-color:' ~ data_etaps.bg_color ~ ';' : '' }}">
  414. <div class="container-fluid content-wrapper">
  415. {% if data_etaps is defined and data_etaps is not empty %}
  416. {% if data_etaps.globalTitleOption is not empty or data_etaps.globalTitle is not empty or data_etaps.globalDesc is not empty or data_etaps.typeLien != 1 %}
  417. <div class="row row-header align-items-center justify-content-center">
  418. <div class="col-sm-12" data-aos="fade-up" data-aos-easing="linear" data-aos-delay="50">
  420. {% if data_etaps.globalTitleOption is defined and data_etaps.globalTitleOption is not empty %}
  421. <span class="site_title" style="{{ data_etaps.text_color ? 'color:' ~ data_etaps.text_color ~ ';' : '' }}">{{data_etaps.globalTitleOption|raw}}</span>
  422. {% endif %}
  425. {% if data_etaps.globalTitle is not empty %}
  426. <h2 class="main-title" style="{{ data_etaps.text_color ? 'color:' ~ data_etaps.text_color ~ ';' : '' }}">
  427. {{data_etaps.globalTitle|raw}}
  428. </h2>
  429. {% endif %}
  431. {% if data_etaps.globalDesc is not empty or data_etaps.typeLien != 1 or data_etaps.globalDescOption is not empty %}
  432. <div class="bloc-description" style="{{ data_etaps.text_color ? 'color:' ~ data_etaps.text_color ~ ';' : '' }}">
  433. {% if data_etaps.globalDesc is defined and data_etaps.globalDesc is not empty %}
  434. <div class="description">
  435. {{data_etaps.globalDesc|raw}}</div>
  436. {% endif %}
  438. {% if data_etaps.typeLien != 1 and data_etaps.typeLien != '' %}
  439. {% if data_etaps.typeLien == '4' %}
  440. <a onclick="window.location.href = 'tel:{{data_etaps.telephone}}';" class="btn-theme">{{data_etaps.globalLien}}</a>
  441. {% elseif data_etaps.typeLien == '2' %}
  442. <a href="{{resolveInternalSlugLink(data_etaps.lieninterne)}}" class="btn-theme">{{data_etaps.globalLien}}</a>
  443. {% elseif data_etaps.typeLien == '3' %}
  444. <a href="{{data_etaps.lienExterne}}" class="btn-theme" target="_blank">{{itdata_etapsem.globalLien}}</a>
  445. {% endif %}
  446. {% endif %}
  448. {% if data_etaps.globalDescOption is defined and data_etaps.globalDescOption is not empty %}
  449. {% set duree = '100' %}
  450. <div class="description-option" style="{{ data_etaps.text_color2 ? 'color:' ~ data_etaps.text_color2 ~ ';' : '' }} {{ data_etaps.bg_color2 ? 'background-color:' ~ data_etaps.bg_color2 ~ ';' : '' }}">
  451. {{data_etaps.globalDescOption|raw}}
  452. </div>
  453. {% endif %}
  454. </div>
  455. {% endif %}
  457. </div>
  458. </div>
  459. {% endif %}
  461. {% if data_etaps.etaps is defined and data_etaps.etaps is not empty %}
  462. <div class="row justify-content-center">
  463. {% set duree = '100' %}
  464. {% if data_etaps.etaps is defined and data_etaps.etaps is not empty %}
  466. {% set colClass = data_etaps.globalGridItems is not empty ? 'col-lg-' ~ data_etaps.globalGridItems: "col-md-3" %}
  468. {% for item in data_etaps.etaps %}
  469. <div class="col-12 col-md-6 {{colClass}} content-item" data-aos="fade-up" data-aos-easing="linear" data-aos-delay="{{duree}}">
  470. <div class="bloc-content" {% if item.bg_color %} style="background-color: {{item.bg_color}};" {% endif %}>
  471. {% if item.icon or item.title is not empty or item.sous_titre is not empty %}
  472. <div class="bloc-header">
  473. {% if item.icon %}
  474. <div class="item-picto">
  475. <img src="{{item.icon}}" alt="{{item.sous_titre|raw|default('')}}" width="50" height="50" loading="lazy">
  476. </div>
  477. {% endif %}
  479. {% if item.title is not empty %}
  480. <h3 class="title" {% if item.text_color %} style="color: {{item.text_color}};" {% endif %}>
  481. {{item.title}}</h3>
  482. {% endif %}
  484. {% if item.sous_titre is not empty %}
  485. <span class="sous-titre" {% if item.text_color %} style="color: {{item.text_color}};" {% endif %}>{{item.sous_titre|raw}}</span>
  486. {% endif %}
  487. </div>
  488. {% endif %}
  489. {% if item.description %}
  490. <div class="description-item" {% if item.text_color %} style="color: {{item.text_color}};" {% endif %}>{{item.description|raw}}</div>
  491. {% endif %}
  492. {% if item.description2 %}
  493. <div class="description-option-item" {% if item.bg_color2 or item.text_color2 %} style="background-color: {{item.bg_color2}}; color: {{item.text_color2}};" {% endif %}>
  494. {{item.description2|raw}}
  495. </div>
  496. {% endif %}
  497. {% if item.type_lien is defined and item.type_lien != '1' and item.title_lien is not empty %}
  498. <div class="bloc-button-item">
  499. {% if item.type_lien == '2' %}
  500. <a href="{{ resolveInternalSlugLink(item.lien_interne) }}" class="btn-theme">{{ item.title_lien|raw }}</a>
  501. {% elseif item.type_lien == '3' %}
  502. <a href="{{ item.lien_externe }}" target="_blank" class="btn-theme">{{ item.title_lien|raw }}</a>
  503. {% elseif item.type_lien == '4' %}
  504. <a href="tel:{{ item.phone_number }}" class="btn-theme">{{ item.title_lien|raw }}</a>
  505. {% endif %}
  506. </div>
  507. {% endif %}
  508. </div>
  509. </div>
  510. {% set duree = duree + '100' %}
  511. {% endfor %}
  512. {% endif %}
  513. </div>
  514. {% endif %}
  515. {% endif %}
  516. </div>
  517. </div>
  518. {% endif %}{% endif %}
  521. {% block javascripts %}
  522. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
  523. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
  525. {% endblock %}