templates/page/about.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block body %}
  4. <div class="breadcumb-wrapper" data-bg-src="{{ asset('assets/img/bg/breadcrumb-bg.jpg') }}" data-overlay="title" data-opacity="8">
  5. <div class="container">
  6. <div class="breadcumb-content">
  7. <h1 class="breadcumb-title">Notre Cabinet</h1>
  8. <ul class="breadcumb-menu">
  9. <li>
  10. <a href="{{ path('home') }}">Accueil</a>
  11. </li>
  12. <li>Le Cabinet</li>
  13. </ul>
  14. </div>
  15. </div>
  16. </div>
  17. <div class="about-1-wrapper space bg-smoke2 overflow-hidden shape-mockup-wrap" id="about-sec">
  18. <div class="shape-mockup jump d-none d-xl-block" style="bottom: 0%; left: 0%;"><img src="assets/img/shape/about-2-bottom.png" alt="image"></div>
  19. <div class="shape-mockup jump-reverse" style="right: 0%; bottom: 0%;"><img src="assets/img/shape/about2-right-bottom.png" alt="image"></div>
  20. <div class="container">
  21. <div class="row gy-40 gx-60 align-items-center">
  22. <div class="col-xl-6 col-lg-6">
  23. <div class="title-area mb-25">
  24. <span class="sub-title before-none">Me. SÉRAPHIN NOUDJÉNOUMÉ</span>
  25. <h4 class="sec-title">Une double expertise au service de la défense de vos droits</h4>
  26. <p class="sec-text">
  27. Ancien Greffier, Greffier en chef et Directeur des services de greffe, Maître Séraphin Noudjénoumé met aujourd’hui son expérience approfondie de l’institution judiciaire au service de ses clients, avec une maîtrise reconnue des procédures et des enjeux juridiques.
  28. </p>
  29. <p class="sec-text">
  30. Inscrit au Barreau de Paris, il accompagne particuliers et professionnels en droit du travail, droit de la famille, droit pénal et droit des étrangers. Son approche repose sur l’écoute, la rigueur et un accompagnement personnalisé pour défendre efficacement les intérêts de ses clients.
  31. </p>
  32. </div>
  33. <div class="about-2-bottom">
  34. <div class="info-box">
  35. <div class="info-box_icon"><img src="assets/img/icon/about-2-icon-1.svg" alt="img"></div>
  36. <div class="info-contnt">
  37. <h6 class="box-title" style="font-size: 22px !important;">Une expérience judiciaire reconnue</h6>
  38. <p>Une expertise acquise au cœur de l'institution judiciaire et des procédures.</p>
  39. </div>
  40. </div>
  41. <div class="info-box">
  42. <div class="info-box_icon"><img src="assets/img/icon/about-2-icon-2.svg" alt="img"></div>
  43. <div class="info-contnt">
  44. <h6 class="box-title" style="font-size: 22px !important;">Un accompagnement personnalisé</h6>
  45. <p>Des conseils et une stratégie adaptés aux besoins de chaque client.</p>
  46. </div>
  47. </div>
  48. </div>
  49. <div>
  50. <a href="{{ path('seraphin_noudjenoume') }}" class="th-btn style2">En savoir plus
  51. <i class="fa-regular fa-arrow-right-long"></i>
  52. </a>
  53. </div>
  54. </div>
  55. <div class="col-xl-6 col-lg-6 mb-xl-0">
  56. <div class="img-box2 shape-mockup-wrap">
  57. <div class="img2"><img class="tilt-active" src="{{ asset('assets/img/about/about-2-main.jpg') }}" alt="Image" style="will-change: transform; transform: perspective(1000px) rotateX(0deg) rotateY(0deg);"></div>
  58. </div>
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. <div style="position: relative; z-index: 10;">
  64. <div class="counter-sec1" style="margin-top: -70px; margin-bottom: -70px;">
  65. <div class="container">
  66. <div class="counter-card-wrap">
  67. <div class="counter-card">
  68. <div class="box-icon">
  69. <img src="{{ asset('assets/img/icon/counter_1_1.svg') }}" alt="Icon"/>
  70. </div>
  71. <div class="media-body">
  72. <h4 class="box-number">
  73. <span class="counter-number">10
  74. </span>k
  75. <span class="plus-simple">+</span>
  76. </h4>
  77. <p class="box-text">Dossiers traités</p>
  78. </div>
  79. </div>
  80. <div class="divider"></div>
  81. <div class="counter-card">
  82. <div class="box-icon">
  83. <img src="{{ asset('assets/img/icon/counter_1_2.svg') }}" alt="Icon"/>
  84. </div>
  85. <div class="media-body">
  86. <h4 class="box-number">
  87. <span class="counter-number">12
  88. </span>
  89. <span class="plus-simple">+</span>
  90. </h4>
  91. <p class="box-text">Avocats Experts</p>
  92. </div>
  93. </div>
  94. <div class="divider"></div>
  95. <div class="counter-card">
  96. <div class="box-icon">
  97. <img src="{{ asset('assets/img/icon/counter_1_3.svg') }}" alt="Icon"/>
  98. </div>
  99. <div class="media-body">
  100. <h4 class="box-number">
  101. <span class="counter-number">15
  102. </span>k
  103. <span class="plus-simple">+</span>
  104. </h4>
  105. <p class="box-text">Clients Satisfaits</p>
  106. </div>
  107. </div>
  108. <div class="divider"></div>
  109. <div class="counter-card">
  110. <div class="box-icon">
  111. <img src="{{ asset('assets/img/icon/counter_1_4.svg') }}" alt="Icon"/>
  112. </div>
  113. <div class="media-body">
  114. <h4 class="box-number">
  115. <span class="counter-number">20
  116. </span>
  117. <span class="plus-simple">+</span>
  118. </h4>
  119. <p class="box-text">Années d'expérience</p>
  120. </div>
  121. </div>
  122. <div class="divider"></div>
  123. </div>
  124. </div>
  125. </div>
  126. </div>
  127. <div class="about-1-wrapper space bg-smoke2" id="about-sec2">
  128. <div class="shape-mockup jump" data-left="0%" data-bottom="0%">
  129. <img src="{{ asset('assets/img/shape/about1-left-shape.png') }}" alt="image"/>
  130. </div>
  131. <div class="shape-mockup jump" data-top="11%" data-right="4%">
  132. <img src="{{ asset('assets/img/shape/about1-right-top.png') }}" alt="image"/>
  133. </div>
  134. <div class="shape-mockup jump-reverse d-none d-md-block" data-right="0" data-bottom="4%">
  135. <img src="{{ asset('assets/img/shape/about1-right-bottom.png') }}" alt="image"/>
  136. </div>
  137. <div class="container">
  138. <div class="row gy-40 gx-60 align-items-center">
  139. <div class="col-xl-7 mb-xl-0">
  140. <div class="img-box1 about-1">
  141. <div class="shape-mockup logo-shape">
  142. <div class="logo-icon-wrap">
  143. <h4 class="logo-icon">
  144. <img src="{{ asset('assets/img/icon/logo-icon-white.png') }}" alt="img"/>
  145. </h4>
  146. <div class="logo-icon-wrap__text bg-theme2">
  147. <span class="logo-animation">Le Cabinet à votre écoute</span>
  148. </div>
  149. </div>
  150. </div>
  151. <div class="img1">
  152. <img class="tilt-active" src="{{ asset('assets/img/about/about-1-left.jpg') }}" alt="Image"/>
  153. </div>
  154. <div class="img2 d-none d-lg-block">
  155. <div class="img2-top">
  156. <img class="tilt-active" src="{{ asset('assets/img/about/about-1-right.jpg') }}" alt="Image"/>
  157. </div>
  158. <div class="img2-bottom">
  159. <img class="tilt-active" src="{{ asset('assets/img/about/about-1-right-2.jpg') }}" alt="Image"/>
  160. </div>
  161. </div>
  162. </div>
  163. </div>
  164. <div class="col-xl-5">
  165. <div class="title-area mb-25">
  166. <span class="sub-title before-none">Le Cabinet</span>
  167. <h2 class="sec-title">Un engagement de chaque instant pour vos droits</h2>
  168. <p class="sec-text">
  169. Notre équipe d'avocats expérimentés possède une expertise diversifiée, couvrant un large éventail de domaines juridiques. Nous intervenons en droit de la famille, droit pénal (y compris pénal du travail), droit du travail, droit des étrangers et bien plus encore pour vous garantir la meilleure défense.
  170. </p>
  171. </div>
  172. <div class="checklist style2 mb-40">
  173. <ul>
  174. <li>
  175. <i class="fa-solid fa-circle-check"></i>
  176. Engagés pour l'excellence et la rigueur juridique.
  177. </li>
  178. <li>
  179. <i class="fa-solid fa-circle-check"></i>
  180. Transparence, honnêteté et respect de la déontologie.
  181. </li>
  182. <li>
  183. <i class="fa-solid fa-circle-check"></i>
  184. Une stratégie sur-mesure pour votre dossier.
  185. </li>
  186. <li>
  187. <i class="fa-solid fa-circle-check"></i>
  188. La satisfaction de nos clients est notre priorité.
  189. </li>
  190. </ul>
  191. </div>
  192. <div>
  193. <a href="{{ path('about') }}" class="th-btn style4">En savoir plus
  194. <i class="fa-solid fa-arrow-right-long"></i>
  195. </a>
  196. </div>
  197. </div>
  198. </div>
  199. </div>
  200. </div>
  202. <section class="th-service-2 bg-smoke overflow-hidden space bg-smoke2" id="service-sec">
  203. <div class="shape-mockup jump d-none d-xl-block" data-left="0" data-bottom="0">
  204. <img src="{{ asset('assets/img/shape/service-inner-left.png') }}" alt="shape img"/>
  205. </div>
  206. <div class="shape-mockup jump-reverse d-none d-xl-block" data-right="0" data-bottom="0">
  207. <img src="{{ asset('assets/img/shape/service-inner-right.png') }}" alt="shape img"/>
  208. </div>
  209. <div class="container">
  210. <div class="row justify-content-lg-between justify-content-center align-items-end">
  211. <div class="col-lg-7 col-md-8">
  212. <div class="title-area text-center text-lg-start">
  213. <span class="sub-title">Nos Expertises</span>
  214. <h2 class="sec-title">Vos solutions juridiques</h2>
  215. </div>
  216. </div>
  217. <div class="col-lg-auto d-none d-lg-block">
  218. <div class="sec-btn">
  219. <div class="icon-box">
  220. <button data-slider-prev="#serviceSlider2" class="slider-arrow default show-all">
  221. <i class="fa-solid fa-arrow-left"></i>
  222. </button>
  223. <button data-slider-next="#serviceSlider2" class="slider-arrow default show-all">
  224. <i class="fa-solid fa-arrow-right"></i>
  225. </button>
  226. </div>
  227. </div>
  228. </div>
  229. </div>
  230. <div class="row gy-30 justify-content-center">
  231. <div class="slider-area">
  232. <div class="swiper th-slider has-shadow" id="serviceSlider2" data-slider-options='{"breakpoints":{"0":{"slidesPerView":1},"576":{"slidesPerView":"1"},"768":{"slidesPerView":"2"},"992":{"slidesPerView":"3"},"1200":{"slidesPerView":"4"}}, "autoHeight": "true"}'>
  233. <div class="swiper-wrapper">
  234. {% for exp in expertises %}
  235. <div class="swiper-slide">
  236. <div class="service-card style-2 bg-white">
  237. <div class="box-icon">
  238. {% set icon_index = loop.index > 6 ? (loop.index % 6) + 1 : loop.index %}
  239. <img src="{{ asset('assets/img/icon/service_card_1_' ~ icon_index ~ '.svg') }}" alt="Icon"/>
  240. </div>
  241. <div class="box-content">
  242. <h3 class="box-title">
  243. <a href="{{ path('expertise_detail', {'slug': exp.slug}) }}">{{ exp.title }}</a>
  244. </h3>
  245. <p class="box-text">
  246. {{ exp.shortDescription }}
  247. </p>
  248. </div>
  249. <a href="{{ path('expertise_detail', {'slug': exp.slug}) }}" class="link-btn">Lire la suite
  250. <i class="fa-solid fa-arrow-right-long"></i>
  251. </a>
  252. </div>
  253. </div>
  254. {% endfor %}
  255. </div>
  256. </div>
  257. </div>
  258. </div>
  259. </div>
  260. </section>
  261. <section class="space" id="process-sec">
  262. <div class="container">
  263. <div class="row justify-content-center">
  264. <div class="col-xl-8 about-bottom-box-wrapcol-lg-10 text-center">
  265. <div class="title-area process-3-title-box">
  266. <span class="sub-title justify-content-center justify-content-xl-start">Consultation</span>
  267. <h2 class="sec-title mb-2">Prendre Rendez-vous</h2>
  268. <p class="box-text">
  269. Notre équipe d'avocats est à votre disposition pour écouter attentivement vos préoccupations et comprendre les enjeux de votre situation.
  270. </p>
  271. </div>
  272. </div>
  273. </div>
  274. <div class="row gy-40 justify-content-center">
  275. <div class="col-xl-4 col-lg-4 col-md-6">
  276. <div class="process-box style-2">
  277. <div class="box-icon">
  278. <span class="number">01</span>
  279. <img src="{{ asset('assets/img/icon/process-2-icon-1.svg') }}" alt="image"/>
  280. </div>
  281. <h3 class="box-title">Planifiez une date</h3>
  282. <p class="box-text">
  283. Choisissez une date et une heure qui vous conviennent. Nos avocats sont disponibles pour échanger.
  284. </p>
  285. </div>
  286. </div>
  287. <div class="col-xl-4 col-lg-4 col-md-6">
  288. <div class="process-box style-2">
  289. <div class="box-icon">
  290. <span class="number">02</span>
  291. <img src="{{ asset('assets/img/icon/process-2-icon-2.svg') }}" alt="image"/>
  292. </div>
  293. <h3 class="box-title">Consultation</h3>
  294. <p class="box-text">
  295. Lors de votre consultation, vous aurez l'occasion d'exposer votre situation à un avocat qualifié en toute confidentialité.
  296. </p>
  297. </div>
  298. </div>
  299. <div class="col-xl-4 col-lg-4 col-md-6">
  300. <div class="process-box style-2">
  301. <div class="box-icon">
  302. <span class="number">03</span>
  303. <img src="{{ asset('assets/img/icon/process-2-icon-3.svg') }}" alt="image"/>
  304. </div>
  305. <h3 class="box-title">Stratégie</h3>
  306. <p class="box-text">
  307. Sur la base des informations recueillies, nous élaborerons une stratégie juridique sur-mesure pour vous défendre.
  308. </p>
  309. </div>
  310. </div>
  311. </div>
  312. </div>
  313. </section>
  315. <section class="testi-card-area-1 overflow-hidden space" id="testi-sec" data-bg-src="{{ asset('assets/img/bg/testi-bg-1.png') }}">
  316. <div class="container">
  317. <div class="row justify-content-lg-between justify-content-center align-items-end">
  318. <div class="col-lg">
  319. <div class="title-area text-center text-lg-start">
  320. <span class="sub-title before-none">Témoignages</span>
  321. <h2 class="sec-title">Ce que disent nos clients</h2>
  322. </div>
  323. </div>
  324. <div class="col-lg-auto">
  325. <div class="sec-btn">
  326. <div class="icon-box">
  327. <button data-slider-prev="#testiSlide11" class="slider-arrow default">
  328. <i class="fa-solid fa-arrow-left"></i>
  329. </button>
  330. <button data-slider-next="#testiSlide11" class="slider-arrow default">
  331. <i class="fa-solid fa-arrow-right"></i>
  332. </button>
  333. </div>
  334. </div>
  335. </div>
  336. </div>
  337. <div class="testi-card-slide">
  338. <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"}}}'>
  339. <div class="swiper-wrapper">
  340. <div class="swiper-slide">
  341. <div class="testi-block" dir="ltr">
  342. <div class="testi-icon-1-top">
  343. <img src="{{ asset('assets/img/icon/testi-icon-1-top.svg') }}" alt="image"/>
  344. </div>
  345. <div class="testi-block-top">
  346. <div class="content">
  347. <h3 class="box-title">Monique D.</h3>
  348. <p class="box-desig">Chef d'entreprise</p>
  349. <div class="box-review">
  350. <i class="fa-solid fa-star"></i>
  351. <i class="fa-solid fa-star"></i>
  352. <i class="fa-solid fa-star"></i>
  353. <i class="fa-solid fa-star"></i>
  354. <i class="fa-solid fa-star"></i>
  355. </div>
  356. </div>
  357. </div>
  358. <p class="box-text">
  359. "J'étais confrontée à des problèmes complexes de droit des affaires. Le cabinet m'a non seulement apporté la solution dont j'avais besoin, mais m'a également conseillé pour éviter que le problème ne se reproduise. Leur équipe est incroyablement compétente. Je suis très reconnaissante pour leur aide et je les recommanderais à quiconque."
  360. </p>
  361. </div>
  362. </div>
  363. <div class="swiper-slide">
  364. <div class="testi-block" dir="ltr">
  365. <div class="testi-icon-1-top">
  366. <img src="{{ asset('assets/img/icon/testi-icon-1-top.svg') }}" alt="image"/>
  367. </div>
  368. <div class="testi-block-top">
  369. <div class="content">
  370. <h3 class="box-title">Thomas H.</h3>
  371. <p class="box-desig">Particulier</p>
  372. <div class="box-review">
  373. <i class="fa-solid fa-star"></i>
  374. <i class="fa-solid fa-star"></i>
  375. <i class="fa-solid fa-star"></i>
  376. <i class="fa-solid fa-star"></i>
  377. <i class="fa-solid fa-star"></i>
  378. </div>
  379. </div>
  380. </div>
  381. <p class="box-text">
  382. "J'ai fait face à des défis importants en droit de la famille. Le cabinet a résolu mes problèmes avec efficacité et humanité. L'équipe est très à l'écoute, patiente, et priorise toujours l'intérêt du client. J'apprécie sincèrement leur soutien et je les recommande vivement pour leur grand professionnalisme."
  383. </p>
  384. </div>
  385. </div>
  386. </div>
  387. </div>
  388. </div>
  389. </div>
  390. </section>
  391. <section class="space" id="blog-sec">
  392. <div class="container">
  393. <div class="row justify-content-lg-between justify-content-center align-items-end">
  394. <div class="col-lg">
  395. <div class="title-area text-center text-lg-start">
  396. <span class="sub-title">Actualités</span>
  397. <h2 class="sec-title">Nos dernières publications</h2>
  398. </div>
  399. </div>
  400. <div class="col-lg-auto d-none d-lg-block">
  401. <div class="sec-btn">
  402. <div class="icon-box">
  403. <button data-slider-prev="#blogSlider1" class="slider-arrow default">
  404. <i class="fa-solid fa-arrow-left"></i>
  405. </button>
  406. <button data-slider-next="#blogSlider1" class="slider-arrow default">
  407. <i class="fa-solid fa-arrow-right"></i>
  408. </button>
  409. </div>
  410. </div>
  411. </div>
  412. </div>
  413. <div class="slider-area">
  414. <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"}'>
  415. <div class="swiper-wrapper">
  416. {% for article in articles %}
  417. <div class="swiper-slide">
  418. <div class="blog-card style-2">
  419. <div class="blog-img">
  420. <a href="{{ path('blog_detail', {'slug': article.slug}) }}">
  421. {% set blog_index = loop.index > 5 ? (loop.index % 5) + 1 : loop.index %}
  422. <img src="{{ asset('assets/img/blog/blog_2_' ~ blog_index ~ '.jpg') }}" alt="blog image"/>
  423. </a>
  424. </div>
  425. <div class="blog-content">
  426. <div class="blog-meta">
  427. <a href="{{ path('blog_index') }}">
  428. <i class="fa-solid fa-calendar"></i>
  429. {{ article.createdAt|date('d M, Y') }}</a>
  430. <a href="{{ path('blog_index') }}">
  431. <i class="fa-solid fa-folder"></i>Actualités</a>
  432. </div>
  433. <h3 class="box-title">
  434. <a href="{{ path('blog_detail', {'slug': article.slug}) }}">{{ article.title }}</a>
  435. </h3>
  436. </div>
  437. </div>
  438. </div>
  439. {% endfor %}
  440. </div>
  441. </div>
  442. </div>
  443. </div>
  444. </section>
  446. {% endblock %}