templates/page/home.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block body %}
  4. <div class="th-hero-wrapper hero-1" id="hero">
  5. <div class="shape-mockup hero-img-shape-1">
  6. <div class="logo-icon-wrap">
  7. <div class="logo-icon">
  8. <img src="{{ asset('assets/img/icon/logo-icon.png') }}" alt="img"/>
  9. </div>
  10. <div class="logo-icon-wrap__text">
  11. <span class="logo-animation">
  12. Avocats d'Excellence
  13. </span>
  14. </div>
  15. </div>
  16. </div>
  17. <div class="th-hero-bg" data-bg-src="{{ asset('assets/img/bg/hero_bg_1_1.jpg') }}">
  18. <img src="{{ asset('assets/img/bg/hero1-overlay.png') }}" alt="Hero overlay"/>
  19. </div>
  20. <div class="hero-1-scroll-icon-bg-shape scroll-down">
  21. <div class="hero-1-scroll-icon-wrap">
  22. <a href="index.html#about-sec">
  23. <div class="shape-thumb">
  24. <div class="icon-btn">
  25. <i class="fa-sharp fa-solid fa-arrow-down"></i>
  26. </div>
  27. <img src="{{ asset('assets/img/shape/hero-1-scroll-icon.png') }}" alt="Image"/></div>
  28. </a>
  29. </div>
  30. </div>
  31. <div class="swiper th-slider" id="heroSlidee1" data-slider-options='{"effect":"fade", "autoHeight": "true"}'>
  32. <div class="swiper-wrapper">
  33. <div class="swiper-slide">
  34. <div class="hero-inner hero-style1">
  35. <div class="container">
  36. <div class="row gy-4 align-items-center">
  37. <div class="col-xl-7 col-lg-7">
  38. <span class="sub-title" data-ani="slideinup" data-ani-delay="0.2s">Une Expertise Juridique, Fondée sur la Confiance</span>
  39. <div data-ani="slideinup" data-ani-delay="0.4s">
  40. <h1 class="hero-title">Votre avocat à vos côtés pour défendre vos droits</h1>
  41. <p class="hero-text text-white mb-4">
  42. Le Cabinet accompagne particuliers et professionnels dans leurs démarches juridiques avec rigueur, écoute et engagement. Chaque situation est étudiée avec attention afin de vous apporter des solutions adaptées à vos besoins.
  43. </p>
  44. </div>
  45. <div class="btn-group justify-content-center" data-ani="slideinup" data-ani-delay="0.6s">
  46. <a href="{{ path('contact') }}" class="th-btn">Prendre rendez-vous
  47. <i class="fa-solid fa-arrow-right-long"></i>
  48. </a>
  49. </div>
  50. </div>
  51. <div class="col-xl-5 col-lg-5">
  52. <div class="hero-img">
  53. <div class="img-main" data-ani="slideinrighthero" data-ani-delay="0.8s">
  54. <img src="{{ asset('assets/img/hero/hero_1_1.png') }}" alt="Image"/>
  55. </div>
  56. </div>
  57. </div>
  58. </div>
  59. </div>
  60. </div>
  61. </div>
  62. <div class="swiper-slide">
  63. <div class="hero-inner hero-style1">
  64. <div class="container">
  65. <div class="row gy-4 align-items-center">
  66. <div class="col-xl-7 col-lg-7">
  67. <span class="sub-title" data-ani="slideinup" data-ani-delay="0.2s">Droit de la famille</span>
  68. <div data-ani="slideinup" data-ani-delay="0.4s">
  69. <h1 class="hero-title">Protéger Vos Intérêts, Et Ceux De Votre Famille</h1>
  70. <p class="hero-text text-white mb-4">
  71. Lors des moments difficiles, avoir un guide expérimenté est essentiel. Le Cabinet vous accompagne avec écoute et professionnalisme dans les affaires familiales (divorce, garde d’enfants, succession, etc.) afin de préserver vos droits et ceux de vos proches.
  72. </p>
  73. </div>
  74. <div class="btn-group justify-content-center" data-ani="slideinup" data-ani-delay="0.6s">
  75. <a href="{{ path('contact') }}" class="th-btn">Découvrir nos services
  76. <i class="fa-solid fa-arrow-right-long"></i>
  77. </a>
  78. </div>
  79. </div>
  80. <div class="col-xl-5 col-lg-5">
  81. <div class="hero-img">
  82. <div class="img-main" data-ani="slideinrighthero" data-ani-delay="0.8s">
  83. <img src="{{ asset('assets/img/hero/hero_1_2.png') }}" alt="Image"/>
  84. </div>
  85. </div>
  86. </div>
  87. </div>
  88. </div>
  89. </div>
  90. </div>
  91. <div class="swiper-slide">
  92. <div class="hero-inner hero-style1">
  93. <div class="container">
  94. <div class="row gy-4 align-items-center">
  95. <div class="col-xl-7 col-lg-7">
  96. <span class="sub-title" data-ani="slideinup" data-ani-delay="0.2s">Droit du travail</span>
  97. <div data-ani="slideinup" data-ani-delay="0.4s">
  98. <h1 class="hero-title">Défendre Vos Droits, Dans Le Monde Professionnel</h1>
  99. <p class="hero-text text-white mb-4">
  100. Le droit du travail régit les relations entre employeurs et salariés. Que vous soyez à l’initiative d’un licenciement, confronté à une contestation ou désireux de sécuriser vos contrats, le Cabinet est à vos côtés pour vous conseiller et vous défendre.
  101. </p>
  102. </div>
  103. <div class="btn-group justify-content-center" data-ani="slideinup" data-ani-delay="0.6s">
  104. <a href="{{ path('contact') }}" class="th-btn">Nous contacter
  105. <i class="fa-solid fa-arrow-right-long"></i>
  106. </a>
  107. </div>
  108. </div>
  109. <div class="col-xl-5 col-lg-5">
  110. <div class="hero-img">
  111. <div class="img-main" data-ani="slideinrighthero" data-ani-delay="0.8s">
  112. <img src="{{ asset('assets/img/hero/hero_1_3.png') }}" alt="Image"/>
  113. </div>
  114. </div>
  115. </div>
  116. </div>
  117. </div>
  118. </div>
  119. </div>
  120. </div>
  121. <div class="slider-pagination"></div>
  122. </div>
  123. </div>
  124. <div class="about-1-wrapper space bg-smoke2" id="about-sec">
  125. <div class="shape-mockup jump" data-left="0%" data-bottom="0%">
  126. <img src="{{ asset('assets/img/shape/about1-left-shape.png') }}" alt="image"/>
  127. </div>
  128. <div class="shape-mockup jump" data-top="11%" data-right="4%">
  129. <img src="{{ asset('assets/img/shape/about1-right-top.png') }}" alt="image"/>
  130. </div>
  131. <div class="shape-mockup jump-reverse d-none d-md-block" data-right="0" data-bottom="4%">
  132. <img src="{{ asset('assets/img/shape/about1-right-bottom.png') }}" alt="image"/>
  133. </div>
  134. <div class="container">
  135. <div class="row gy-40 gx-60 align-items-center">
  136. <div class="col-xl-7 mb-xl-0">
  137. <div class="img-box1 about-1">
  138. <div class="shape-mockup logo-shape">
  139. <div class="logo-icon-wrap">
  140. <h4 class="logo-icon">
  141. <img src="{{ asset('assets/img/icon/logo-icon-white.png') }}" alt="HYSOPE - Cabinet d'Avocat"/>
  142. </h4>
  143. <div class="logo-icon-wrap__text bg-theme2">
  144. <span class="logo-animation">
  145. Un avocat qui écoute
  146. </span>
  147. </div>
  148. </div>
  149. </div>
  150. <div class="img1 d-none d-md-block">
  151. <img class="tilt-active" src="{{ asset('assets/img/about/about-1-left.jpg') }}" alt="HYSOPE - Cabinet d'Avocat"/>
  152. </div>
  153. <div class="img2">
  154. <div class="img2-bottom d-none d-md-block">
  155. <img class="tilt-active" src="{{ asset('assets/img/about/about-1-right-2.jpg') }}" alt="HYSOPE - Cabinet d'Avocat"/>
  156. </div>
  157. <div class="img2-top">
  158. <img class="tilt-active" src="{{ asset('assets/img/about/about-1-right.jpg') }}" alt="HYSOPE - Cabinet d'Avocat"/>
  159. </div>
  160. </div>
  161. </div>
  162. </div>
  163. <div class="col-xl-5">
  164. <div class="title-area mb-25">
  165. <span class="sub-title before-none">Le Cabinet</span>
  166. <h2 class="sec-title">Un accompagnement sur-mesure et rigoureux</h2>
  167. <p class="sec-text">
  168. Le cabinet vous propose un accompagnement personnalisé en droit de la famille, droit du travail, droit pénal, droit des étrangers et bien d'autres domaines. Notre engagement : être à vos côtés à chaque étape de la procédure, avec sérieux, écoute et transparence.
  169. </p>
  170. <p class="sec-text">
  171. L'objectif est simple : vous apporter des solutions concrètes, défendre vos droits et vous accompagner à chaque étape de vos démarches.
  172. </p>
  173. </div>
  174. <div class="checklist style2 mb-40">
  175. <ul>
  176. <li>
  177. <i class="fa-sharp fa-solid fa-circle-check"></i>
  178. Un suivi attentif et humain de chaque dossier.
  179. </li>
  180. <li>
  181. <i class="fa-sharp fa-solid fa-circle-check"></i>
  182. Transparence totale dès le premier rendez-vous.
  183. </li>
  184. <li>
  185. <i class="fa-sharp fa-solid fa-circle-check"></i>
  186. Stratégie juridique adaptée à vos objectifs.
  187. </li>
  188. <li>
  189. <i class="fa-sharp fa-solid fa-circle-check"></i>
  190. Disponibilité et réactivité pour répondre à vos questions.
  191. </li>
  192. </ul>
  193. </div>
  194. <div>
  195. <a href="{{ path('about') }}" class="th-btn style4">Découvrir le cabinet
  196. <i class="fa-solid fa-arrow-right-long"></i>
  197. </a>
  198. </div>
  199. </div>
  200. </div>
  201. </div>
  202. </div>
  203. <div class="counter-sec1" data-pos-for=".about-1-wrapper" data-sec-pos="top-half">
  204. <div class="container">
  205. <div class="counter-card-wrap">
  206. <div class="counter-card">
  207. <div class="box-icon">
  208. <img src="{{ asset('assets/img/icon/counter_1_1.svg') }}" alt="Icon"/>
  209. </div>
  210. <div class="media-body">
  211. <p class="box-text">Écoute et disponibilité</p>
  212. </div>
  213. </div>
  214. <div class="divider"></div>
  215. <div class="counter-card">
  216. <div class="box-icon">
  217. <img src="{{ asset('assets/img/icon/counter_1_2.svg') }}" alt="Icon"/>
  218. </div>
  219. <div class="media-body">
  220. <p class="box-text">Expérience et expertise</p>
  221. </div>
  222. </div>
  223. <div class="divider"></div>
  224. <div class="counter-card">
  225. <div class="box-icon">
  226. <img src="{{ asset('assets/img/icon/counter_1_4.svg') }}" alt="Icon"/>
  227. </div>
  229. <div class="media-body">
  230. <p class="box-text">Confidentialité</p>
  231. </div>
  232. </div>
  233. <div class="divider"></div>
  234. <div class="counter-card">
  235. <div class="box-icon">
  236. <img src="{{ asset('assets/img/icon/counter_1_3.svg') }}" alt="Icon"/>
  237. </div>
  238. <div class="media-body">
  239. <p class="box-text">Accompagnement personnalisé</p>
  240. </div>
  241. </div>
  242. <div class="divider"></div>
  243. </div>
  244. </div>
  245. </div>
  246. <section class="team-area-1 space overflow-hidden" data-overlay="title" data-opacity="8" data-bg-src="{{ asset('assets/img/bg/team-1-bg.jpg') }}" id="team-sec">
  247. <div class="container">
  248. <div class="row justify-content-center">
  249. <div class="col-xxl-6 col-xl-7 col-lg-7 col-md-8">
  250. <div class="title-area text-center">
  251. <span class="sub-title justify-content-center">Domaines d'intervention</span>
  252. <h2 class="sec-title text-white">L'expertise à votre service</h2>
  253. </div>
  254. </div>
  255. </div>
  256. <div class="row gy-30 justify-content-center">
  257. {% for expertise in expertises %}
  258. <div class="col-xl-4 col-md-6">
  259. <div class="service-card">
  260. <div class="shape-mockup service_card-bg-1">
  261. <img src="{{ asset('assets/img/bg/service_card-bg-1_' ~ loop.index ~ '.png') }}" alt="shape img" onerror="this.src='{{ asset('assets/img/bg/service_card-bg-1_1.png') }}';"/>
  262. </div>
  263. <div class="box-icon">
  264. {% set icon_index = loop.index > 6 ? (loop.index % 6) + 1 : loop.index %}
  265. <img src="{{ asset('assets/img/icon/service_card_1_' ~ icon_index ~ '.svg') }}" alt="Icon"/>
  266. </div>
  267. <div class="box-content">
  268. <h3 class="box-title">
  269. <a href="{{ path('expertise_detail', {'slug': expertise.slug}) }}">{{ expertise.title }}</a>
  270. </h3>
  271. <p class="box-text">
  272. {{ expertise.shortDescription }}
  273. </p>
  274. </div>
  275. <a href="{{ path('expertise_detail', {'slug': expertise.slug}) }}" class="link-btn">En savoir plus
  276. <i class="fa-solid fa-arrow-right-long"></i>
  277. </a>
  278. </div>
  279. </div>
  280. {% endfor %}
  281. </div>
  282. </div>
  283. </section>
  285. <section class="space" id="process-sec">
  286. <div class="shape-mockup jump" data-right="0" data-bottom="0">
  287. <img src="{{ asset('assets/img/shape/process-1-shape.png') }}" alt="image"/>
  288. </div>
  289. <div class="container">
  290. <div class="row gy-40 gx-50 align-items-center">
  291. <div class="col-xl-6 mb-xl-0">
  292. <div class="process-thumb">
  293. <div class="img-box1">
  294. <img src="{{ asset('assets/img/process/process-1.jpg') }}" alt="image"/>
  295. </div>
  296. </div>
  297. </div>
  298. <div class="col-xl-6">
  299. <div class="title-area">
  300. <span class="sub-title before-none">Notre accompagnement</span>
  301. <h2 class="sec-title">
  302. Une approche claire, rigoureuse et centrée sur vos intérêts
  303. </h2>
  304. </div>
  305. <div class="process-bottom">
  306. <div class="process-bottom-item">
  307. <div class="process-bottom-item__icon">
  308. <img src="{{ asset('assets/img/icon/process-1-icon-1.svg') }}" alt="img"/>
  309. </div>
  310. <div class="process-bottom-item__content">
  311. <h5 class="box-title">Premier échange et analyse de votre situation</h5>
  312. <p>
  313. Lors d'un premier rendez-vous, nous prenons le temps d'écouter votre situation, d'identifier vos besoins et de répondre à vos premières interrogations. case. They then apply the relevant laws to provide clear.
  314. </p>
  315. </div>
  316. </div>
  317. <div class="process-bottom-item">
  318. <div class="process-bottom-item__icon">
  319. <img src="{{ asset('assets/img/icon/process-1-icon-2.svg') }}" alt="img"/>
  320. </div>
  321. <div class="process-bottom-item__content">
  322. <h5 class="box-title">Étude approfondie du dossier</h5>
  323. <p>
  324. Le Cabinet analyse les éléments de votre dossier, évalue les enjeux juridiques et identifie les solutions les plus adaptées à votre situation afin de défendre efficacement vos intérêts. your goals. Your satisfaction is our top priority.
  325. </p>
  326. </div>
  327. </div>
  328. <div class="process-bottom-item">
  329. <div class="process-bottom-item__icon">
  330. <img src="{{ asset('assets/img/icon/process-1-icon-3.svg') }}" alt="img"/>
  331. </div>
  332. <div class="process-bottom-item__content">
  333. <h5 class="box-title">Mise en œuvre de la stratégie juridique</h5>
  334. <p>
  335. Après validation de la stratégie retenue, le Cabinet vous accompagne dans toutes les démarches nécessaires, qu'il s'agisse d'une négociation amiable, d'une procédure judiciaire ou d'un suivi juridique continu. achieve the best possible outcome.
  336. </p>
  337. </div>
  338. </div>
  339. </div>
  340. </div>
  341. </div>
  342. </div>
  343. </section>
  345. <section class="testi-card-area-1 overflow-hidden space" id="testi-sec" data-bg-src="{{ asset('assets/img/bg/testi-bg-1.png') }}">
  346. <div class="container">
  347. <div class="row justify-content-lg-between justify-content-center align-items-end">
  348. <div class="col-lg">
  349. <div class="title-area text-center text-lg-start">
  350. <span class="sub-title before-none">Ils nous ont fait confiance</span>
  351. <h2 class="sec-title">L'avis de nos clients</h2>
  352. </div>
  353. </div>
  354. <div class="col-lg-auto">
  355. <div class="sec-btn">
  356. <div class="icon-box">
  357. <button data-slider-prev="#testiSlide11" class="slider-arrow default">
  358. <i class="fa-solid fa-arrow-left"></i>
  359. </button>
  360. <button data-slider-next="#testiSlide11" class="slider-arrow default">
  361. <i class="fa-solid fa-arrow-right"></i>
  362. </button>
  363. </div>
  364. </div>
  365. </div>
  366. </div>
  367. <div class="testi-card-slide">
  368. <div class="swiper has-shadow th-slider" id="testiSlide11" data-slider-options='{"breakpoints":{"0":{"slidesPerView":1},"576":{"slidesPerView":"1"},"768":{"slidesPerView":"1"},"992":{"slidesPerView":"2"},"1200":{"slidesPerView":"2"}}}'>
  369. <div class="swiper-wrapper">
  370. <div class="swiper-slide">
  371. <div class="testi-block" dir="ltr">
  372. <div class="testi-icon-1-top">
  373. <img src="{{ asset('assets/img/icon/testi-icon-1-top.svg') }}" alt="image"/>
  374. </div>
  375. <div class="testi-block-top">
  376. <div class="box-img">
  377. <img src="{{ asset('assets/img/testimonial/testi_1_1.jpg') }}" alt="Avater"/>
  378. </div>
  379. <div class="content">
  380. <h3 class="box-title">Sophie M.</h3>
  381. <p class="box-desig">Particulier</p>
  382. <div class="box-review">
  383. <i class="fa-sharp fa-solid fa-star"></i>
  384. <i class="fa-sharp fa-solid fa-star"></i>
  385. <i class="fa-sharp fa-solid fa-star"></i>
  386. <i class="fa-sharp fa-solid fa-star"></i>
  387. <i class="fa-sharp fa-solid fa-star"></i>
  388. </div>
  389. </div>
  390. </div>
  391. <p class="box-text">
  392. "J'ai été accompagnée dans le cadre d'une procédure de divorce particulièrement complexe. J'ai apprécié la disponibilité, l'écoute et la clarté des conseils reçus tout au long de mon dossier. Un accompagnement sérieux et rassurant."
  393. </p>
  394. </div>
  395. </div>
  396. <div class="swiper-slide">
  397. <div class="testi-block" dir="ltr">
  398. <div class="testi-icon-1-top">
  399. <img src="{{ asset('assets/img/icon/testi-icon-1-top.svg') }}" alt="image"/>
  400. </div>
  401. <div class="testi-block-top">
  402. <div class="box-img">
  403. <img src="{{ asset('assets/img/testimonial/testi_1_2.jpg') }}" alt="Avater"/>
  404. </div>
  405. <div class="content">
  406. <h3 class="box-title">Julien R.</h3>
  407. <p class="box-desig">Salarié</p>
  408. <div class="box-review">
  409. <i class="fa-sharp fa-solid fa-star"></i>
  410. <i class="fa-sharp fa-solid fa-star"></i>
  411. <i class="fa-sharp fa-solid fa-star"></i>
  412. <i class="fa-sharp fa-solid fa-star"></i>
  413. </div>
  414. </div>
  415. </div>
  416. <p class="box-text">
  417. "Suite à un litige avec mon employeur, j'ai bénéficié d'un accompagnement efficace et personnalisé. Les explications étaient claires et la stratégie mise en place a permis de défendre mes intérêts avec succès."
  418. </p>
  419. </div>
  420. </div>
  421. <div class="swiper-slide">
  422. <div class="testi-block" dir="ltr">
  423. <div class="testi-icon-1-top">
  424. <img src="{{ asset('assets/img/icon/testi-icon-1-top.svg') }}" alt="image"/>
  425. </div>
  426. <div class="testi-block-top">
  427. <div class="box-img">
  428. <img src="{{ asset('assets/img/testimonial/testi_1_3.jpg') }}" alt="Avater"/>
  429. </div>
  430. <div class="content">
  431. <h3 class="box-title">Marie T.</h3>
  432. <p class="box-desig">Particulier</p>
  433. <div class="box-review">
  434. <i class="fa-sharp fa-solid fa-star"></i>
  435. <i class="fa-sharp fa-solid fa-star"></i>
  436. <i class="fa-sharp fa-solid fa-star"></i>
  437. <i class="fa-sharp fa-solid fa-star"></i>
  438. <i class="fa-sharp fa-solid fa-star"></i>
  439. </div>
  440. </div>
  441. </div>
  442. <p class="box-text">
  443. "Très professionnelle, à l'écoute et réactive. J'ai obtenu des réponses précises à mes questions juridiques et me suis sentie accompagnée à chaque étape de mes démarches."
  444. </p>
  445. </div>
  446. </div>
  447. <div class="swiper-slide">
  448. <div class="testi-block" dir="ltr">
  449. <div class="testi-icon-1-top">
  450. <img src="{{ asset('assets/img/icon/testi-icon-1-top.svg') }}" alt="image"/>
  451. </div>
  452. <div class="testi-block-top">
  453. <div class="box-img">
  454. <img src="{{ asset('assets/img/testimonial/testi_1_4.jpg') }}" alt="Avater"/>
  455. </div>
  456. <div class="content">
  457. <h3 class="box-title">Thomas B.</h3>
  458. <p class="box-desig">Chef d'entreprise</p>
  459. <div class="box-review">
  460. <i class="fa-sharp fa-solid fa-star"></i>
  461. <i class="fa-sharp fa-solid fa-star"></i>
  462. <i class="fa-sharp fa-solid fa-star"></i>
  463. <i class="fa-sharp fa-solid fa-star"></i>
  464. <i class="fa-sharp fa-solid fa-star"></i>
  465. </div>
  466. </div>
  467. </div>
  468. <p class="box-text">
  469. "J'ai sollicité le Cabinet pour des questions juridiques liées à mon activité professionnelle. Les conseils fournis étaient pertinents, pragmatiques et parfaitement adaptés à ma situation."
  470. </p>
  471. </div>
  472. </div>
  473. </div>
  474. </div>
  475. </div>
  476. </div>
  477. </section>
  479. <section class="price-sec-1 space overflow-hidden" data-bg-src="{{ asset('assets/img/bg/pricing-plan-1-bg.png') }}">
  480. <div class="container">
  481. <div class="row justify-content-center">
  482. <div class="col-xxl-9 col-xl-10">
  483. <div class="title-area text-center">
  484. <span class="sub-title justify-content-center style-theme">Honoraires</span>
  485. <h2 class="sec-title text-white">
  486. Des prestations claires et des tarifs transparents
  487. </h2>
  488. </div>
  489. </div>
  490. </div>
  491. <div class="row gy-4 justify-content-center">
  492. <div class="col-xl-4 col-md-6">
  493. <div class="price-card">
  494. <div class="price-card_top">
  495. <h3 class="price-card_title">Question juridique simple</h3>
  496. <p class="box-text">
  497. Obtenez une réponse claire et précise à une question juridique ponctuelle.
  498. </p>
  499. <h4 class="price-card_price">
  500. 40
  501. <sup>€</sup>
  502. <span class="duration">Réponse à 1000 caractères</span>
  503. </h4>
  504. </div>
  505. <a href="{{ path('contact') }}" class="th-btn w-100">Poser ma question
  506. <i class="fa-solid fa-arrow-right ms-2"></i>
  507. </a>
  508. <div class="price-card_content">
  509. <div class="checklist style7">
  510. <ul>
  511. <li>
  512. <i class="fas fa-circle-check"></i>Réponse rapide
  513. </li>
  514. <li>
  515. <i class="fas fa-circle-check"></i>Question unique
  516. </li>
  517. <li>
  518. <i class="fas fa-circle-check"></i>Analyse juridique synthétique
  519. </li>
  520. <li>
  521. <i class="fas fa-circle-check"></i>Par email
  522. </li>
  523. </ul>
  524. </div>
  525. </div>
  526. </div>
  527. </div>
  528. <div class="col-xl-4 col-md-6">
  529. <div class="price-card active">
  530. <div class="price-card_top">
  531. <h3 class="price-card_title">Consultation vidéo</h3>
  532. <p class="box-text">
  533. Échange approfondi avec votre avocat afin d'analyser votre situation et d'envisager les solutions adaptées.
  534. </p>
  535. <h4 class="price-card_price">
  536. 130
  537. <sup>
  538. €</sup>
  539. <span class="duration">60 minutes</span>
  540. </h4>
  541. </div>
  542. <a href="{{ path('contact') }}" class="th-btn w-100">Prendre rendez-vous
  543. <i class="fa-solid fa-arrow-right ms-2"></i>
  544. </a>
  545. <div class="price-card_content">
  546. <div class="checklist style7">
  547. <ul>
  548. <li>
  549. <i class="fas fa-circle-check"></i>
  550. Analyse personnalisée
  551. </li>
  552. <li>
  553. <i class="fas fa-circle-check"></i>
  554. Conseils juridiques détaillés
  555. </li>
  556. <li>
  557. <i class="fas fa-circle-check"></i>
  558. Échange confidentiel
  559. </li>
  560. <li>
  561. <i class="fas fa-circle-check"></i>
  562. Accompagnement sur mesure
  563. </li>
  564. </ul>
  565. </div>
  566. </div>
  567. </div>
  568. </div>
  569. <div class="col-xl-4 col-md-6">
  570. <div class="price-card">
  571. <div class="price-card_top">
  572. <h3 class="price-card_title">Consultation au cabinet</h3>
  573. <p class="box-text">
  574. Rencontrez votre avocat au cabinet pour une étude complète de votre dossier.
  575. </p>
  576. <h4 class="price-card_price">
  577. 200
  578. <sup>
  579. €
  580. </sup>
  581. <span class="duration">Sur rendez-vous</span>
  582. </h4>
  583. </div>
  584. <a href="{{ path('contact') }}" class="th-btn w-100">Réserver une consultation
  585. <i class="fa-solid fa-arrow-right ms-2"></i>
  586. </a>
  587. <div class="price-card_content">
  588. <div class="checklist style7">
  589. <ul>
  590. <li>
  591. <i class="fas fa-circle-check"></i>
  592. Étude approfondie du dossier
  593. </li>
  594. <li>
  595. <i class="fas fa-circle-check"></i>
  596. Conseils personnalisés
  597. </li>
  598. <li>
  599. <i class="fas fa-circle-check"></i>
  600. Analyse des documents
  601. </li>
  602. <li>
  603. <i class="fas fa-circle-check"></i>
  604. Définition de la stratégie juridique
  605. </li>
  606. </ul>
  607. </div>
  608. </div>
  609. </div>
  610. </div>
  611. </div>
  612. </div>
  613. </section>
  615. <section class="space overflow-hidden" id="contact-sec">
  616. <div class="shape-mockup jump d-none d-xl-block" data-top="15%" data-right="3%">
  617. <img src="{{ asset('assets/img/shape/contact-1-top.png') }}" alt="shape img"/>
  618. </div>
  619. <div class="shape-mockup jump-reverse d-none d-xl-block" data-bottom="17%" data-left="3%">
  620. <img src="{{ asset('assets/img/shape/about1-right-top.png') }}" alt="shape img"/>
  621. </div>
  622. <div class="container">
  623. <div class="contact-from-1-wrap">
  624. <div class="row gx-60 gy-40">
  625. <div class="col-xl-6">
  626. <div class="contact-form">
  627. <div class="title-area mb-35">
  628. <span class="sub-title justify-content-center text-white">Vous avez des questions ?</span>
  629. <h4 class="sec-title text-white">Contactez-nous</h4>
  630. </div>
  631. <form action="" method="POST" class="quote-form ajax-contact">
  632. <div class="row">
  633. <div class="form-group col-md-12">
  634. <input type="text" class="form-control" name="name" id="name" placeholder="Name"/>
  635. <i class="fas fa-user"></i>
  636. </div>
  637. <div class="form-group col-md-6">
  638. <input type="email" class="form-control" name="email" id="email" placeholder="Email"/>
  639. <i class="fas fa-envelope"></i>
  640. </div>
  641. <div class="form-group col-md-6">
  642. <input type="tel" class="form-control" name="number" id="number" placeholder="Number"/>
  643. <i class="fas fa-phone"></i>
  644. </div>
  645. <div class="form-group col-12">
  646. <textarea name="message" id="message" cols="30" rows="3" class="form-control" placeholder="Your Message"></textarea>
  647. <i class="fas fa-pencil"></i>
  648. </div>
  649. <div class="form-btn col-12 mt-2">
  650. <button class="th-btn bg-theme w-100">
  651. Send Now
  652. <i class="fa-solid fa-arrow-right-long"></i>
  653. </button>
  654. </div>
  655. </div>
  656. <p class="form-messages mb-0 mt-3"></p>
  657. </form>
  658. </div>
  659. </div>
  660. <div class="col-xl-6">
  661. <div class="contact-icon-box-wrap">
  662. <div class="info-box">
  663. <div class="info-box_icon">
  664. <i class="fa-solid fa-phone"></i>
  665. </div>
  666. <div class="info-contnt">
  667. <h4 class="footer-info-title">Tel</h4>
  668. <p class="info-box_text">
  669. <a href="tel:+33 6 18 10 45 96" class="info-box_link">+33 6 18 10 45 96</a>
  670. </p>
  671. </div>
  672. </div>
  673. <div class="info-box">
  674. <div class="info-box_icon">
  675. <i class="fa-regular fa-envelope"></i>
  676. </div>
  677. <div class="info-contnt">
  678. <h4 class="footer-info-title">E-mail</h4>
  679. <p class="info-box_text">
  680. <a href="mailto:contact@hysope-avocat.com" class="info-box_link">contact@hysope-avocat.com</a>
  681. </p>
  682. </div>
  683. </div>
  684. </div>
  685. <div class="contact-img">
  686. <img src="{{ asset('assets/img/contact/contact_1.jpg') }}" alt="vector"/>
  687. </div>
  688. <div class="shape-mockup contact_1-man">
  689. <img src="{{ asset('assets/img/contact/contact_1-man.png') }}" alt="vector"/>
  690. </div>
  691. </div>
  692. </div>
  693. </div>
  694. </div>
  695. </section>
  697. <section class="space bg-smoke2" id="blog-sec">
  698. <div class="shape-mockup jump-reverse d-none d-xxl-block" data-left="0" data-bottom="0">
  699. <img src="{{ asset('assets/img/shape/blog-1-shape-left.png') }}" alt="shape-img"/>
  700. </div>
  701. <div class="shape-mockup jump d-none d-xxl-block" data-right="0" data-bottom="0">
  702. <img src="{{ asset('assets/img/shape/blog-1-shape-right.png') }}" alt="shape-img"/>
  703. </div>
  704. <div class="container">
  705. <div class="row justify-content-lg-between justify-content-center align-items-end">
  706. <div class="col-lg">
  707. <div class="title-area text-center text-lg-start">
  708. <span class="sub-title">Actualités</span>
  709. <h2 class="sec-title">Nos Actualités</h2>
  710. </div>
  711. </div>
  712. <div class="col-lg-auto d-none d-lg-block">
  713. <div class="sec-btn">
  714. <div class="icon-box">
  715. <button data-slider-prev="#blogSlider1" class="slider-arrow default show-all">
  716. <i class="fa-solid fa-arrow-left"></i>
  717. </button>
  718. <button data-slider-next="#blogSlider1" class="slider-arrow default show-all">
  719. <i class="fa-solid fa-arrow-right"></i>
  720. </button>
  721. </div>
  722. </div>
  723. </div>
  724. </div>
  725. <div class="slider-area">
  726. <div class="swiper th-slider has-shadow" id="blogSlider1" data-slider-options='{"breakpoints":{"0":{"slidesPerView":1},"576":{"slidesPerView":"1"},"768":{"slidesPerView":"2"},"992":{"slidesPerView":"2"},"1200":{"slidesPerView":"3"}}, "autoHeight": "true"}'>
  727. <div class="swiper-wrapper">
  728. {% for article in articles %}
  729. <div class="swiper-slide">
  730. <div class="blog-card">
  731. <div class="blog-img">
  732. <a href="{{ path('blog_detail', {'slug': article.slug}) }}"><img src="{{ asset(article.image) }}" alt="blog image"/></a>
  733. </div>
  734. <div class="blog-content">
  735. <div class="blog-meta">
  736. <a href="{{ path('blog_index') }}">
  737. <i class="fa-regular fa-user"></i>Par le Cabinet</a>
  738. <a href="{{ path('blog_index') }}">
  739. <i class="fa-regular fa-calendar"></i>
  740. {{ article.createdAt|date('d M, Y') }}</a>
  741. <a href="{{ path('blog_detail', {'slug': article.slug}) }}">
  742. <i class="fa-regular fa-comment"></i>0 Commentaires</a>
  743. </div>
  744. <h3 class="box-title">
  745. <a href="{{ path('blog_detail', {'slug': article.slug}) }}">{{ article.title }}</a>
  746. </h3>
  747. </div>
  748. </div>
  749. </div>
  750. {% endfor %}
  751. </div>
  752. </div>
  753. </div>
  754. </div>
  755. </section>
  756. {% endblock %}