templates/index/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Amani Software{% endblock %}
  5. {% block body %}
  10. <main id="main" style="margin-top : 6%;">
  20. <div style="margin-top : 10%;" id="intro">
  22. <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  24. <div class="carousel-indicators">
  25. <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
  26. <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
  27. <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  28. </div>
  30. <div class="carousel-inner carousel-opaque">
  32. <div class="carousel-item active">
  33. <img style="width : 100%; height : 600px;" src="{{asset('assets/img/slider/sliderise.jpg')}}" class="d-block w-100 img-carousel" alt="...">
  35. <div class="carousel-container">
  36. <div class="" style="text-align : left; margin-left : 2%;">
  37. <h2 style="width : 40%; font-size : 230%; color : #4682B4;">Rise : Logiciel de gestion académique </h2>
  38. <p style="width : 50%; color : black; margin-left : 0%;">Conçu pour optimiser votre gestion académique grâce à des services et
  39. fonctionnalités innovantes ainsi qu'une fiabilité de pointe</p>
  40. <a href="{{path('app_produit')}}" class="btn btn-primary">Voir l'application</a>
  41. </div>
  42. </div>
  44. </div>
  46. <div class="carousel-item">
  47. <img style="width : 95%; height : 600px;" src="{{asset('assets/img/slider/slideriseschool.jpg')}}" class="d-block w-100 img-carousel" alt="...">
  49. <div class="carousel-container">
  50. <div class="" style="text-align : left; margin-left : 2%;">
  51. <h2 style="width : 40%; font-size : 230%; color : #4682B4;">Une gestion scolaire innovante avec <span style="color : #004a7f">RISE SCHOOL </h2>
  52. <p style="width : 50%; color : black; margin-left : 0%;">Pour une implication étroite des parents dans l'éducation de leurs enfants</p>
  53. <a href="{{path('app_produit')}}" class="btn btn-primary">Voir l'application</a>
  54. </div>
  55. </div>
  57. </div>
  60. </div>
  62. </div>
  63. </div>
  66. <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
  67. <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  68. <span class="visually-hidden">Previous</span>
  69. </button>
  70. <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
  71. <span class="carousel-control-next-icon" aria-hidden="true"></span>
  72. <span class="visually-hidden">Next</span>
  73. </button>
  76. </div>
  80. </div>
  83. <!-- ======= About Section ======= -->
  84. <section id="about">
  85. <div class="container" data-aos="fade-up">
  87. <header class="section-header">
  88. <h1 style="font-weight: bold; text-align : center;">Services</h1>
  91. <p style="font-weight: normal; font-size : 150%;">Nous transformons vos projets en réalité</p>
  95. </header>
  97. <div class="about-container">
  101. <div class="col-md-4 icon-box" style="padding: 1%;" data-aos="fade-up" data-aos-delay="100">
  102. <div class="icon" ><i class="bi bi-window"></i></div>
  103. <h4 class="title">Applications ERP pour votre gestion d'entreprise</h4>
  104. <p class="description"><a href="{{path('service_saas')}}">Nous concevons des logiciels adaptés
  105. aux besoins et aux difficultés de votre entreprise;
  106. nous vous garantissons un système sûr, conçu spécialement pour votre activité.</a></p>
  107. </div>
  109. <div class="col-md-4 icon-box" data-aos="fade-up" data-aos-delay="200" style="padding: 1%;">
  110. <div class="icon"><i class="bi bi-phone"></i></div>
  111. <h4 class="title">Conception d'application mobile</h4>
  112. <p class="description"><a href="{{path('service_app')}}">Dans un monde de plus en plus connecté et mobile,
  113. apportez vos services directement dans les poches de vos utilisateurs au travers d'applications mobiles.</a></p>
  114. </div>
  116. <div class="col-md-4 icon-box" data-aos="fade-up" data-aos-delay="200" style="padding: 1%;">
  117. <div class="icon"><i class="bi bi-globe"></i></div>
  118. <h4 class="title">Création et hébergement site internet</h4>
  119. <p class="description"><a href="{{path('service_web')}}">Dans un monde de plus en plus connecté et mobile,
  120. Des sites internet vous permettant d'interagir efficacement
  121. avec votre clientèle, accentuant ainsi l'engagement envers vos produits.</a></p>
  122. </div>
  125. <a href="{{path('service_web')}}"><div class="col-md-4 icon-box" data-aos="fade-up" data-aos-delay="300" style="padding: 1%;">
  126. <div class="icon"><i class="bi bi-globe"></i></div>
  127. <h4 class="title">Création et hébergement site internet</h4>
  128. <p class="description">Des sites internet vous permettant d'interagir efficacement
  129. avec votre clientèle, accentuant ainsi l'engagement envers vos produits</p>
  132. </div></a>
  136. <div class="row about-extra">
  137. <div class="col-lg-8" data-aos="fade-right">
  138. <img style="margin-top : -25%;" src="{{asset('img/pc2.png')}}" class="img-fluid" alt="Rise logiciel de gestion universitaire">
  139. </div>
  140. <div class="col-lg-4 pt-5 pt-lg-0" data-aos="fade-left">
  141. <h4>Rise : Logiciel de gestion académique </h4>
  142. <p style="" >
  143. Rise est une plateforme numérique permettant de coordonner l'ensemble du processus de gestion académique axé sur l'organisation
  144. du cursus de l'étudiant au travers d'un système organisé, accessible et sécurisé.
  145. </p>
  146. <p>
  147. Une plateforme Conçu pour optimiser votre gestion
  148. grâce à des services et fonctionnalités innovantes ainsi qu'une fiabilité de pointe.
  150. </p>
  152. <a class="btn btn-rounded btn-gradient-warning" style="padding : 4%;" href="{{path('app_produit')}}">Découvrir</a>
  154. </div>
  155. </div>
  157. </div>
  158. </section><!-- End About Section -->
  160. <!-- ======= Why Us Section ======= -->
  161. <section id="why-us" style="background-color: #F5F5F5;">
  162. <div class="container" data-aos="fade-up">
  163. <header class="section-header">
  164. <h3 style="color : #004a7f; font-weight : bold;">Découvrez Nos Produits</h3>
  165. <p style="color : #4682B4; font-size : 120%; font-weight : bold;">Une gamme variée d'applications prête à l'emploi</p>
  167. </header>
  169. <div class="row">
  171. <div class="col-lg-3 mb-3" ><a href="{{path('app_produit')}}">
  172. <img alt="RISE" style="width : 100%;"title="RISE Application de gestion Académique" src="{{asset('assets/img/service/rise/illustration.jpg')}}" >
  174. <h3 class="card-title" style="text-align : center; font-weight : bold; color : #4682B4">RISE</h3>
  175. <p class="produit-text">Conçu pour optimiser votre gestion académique grâce à des services et
  176. fonctionnalités innovantes ainsi qu'une fiabilité de pointe
  177. </p></a>
  180. </div>
  182. <div class="col-lg-3 mb-3" ><a href="{{path('produit_riseschool')}}">
  183. <img alt="RISE" style="width : 100%;"title="RISE Application de gestion Académique" src="{{asset('assets/img/service/riseschool/illustration.jpg')}}" >
  185. <h3 class="card-title" style="text-align : center; font-weight : bold; color : #4682B4">RISE SCHOOL</h3>
  186. <p class="produit-text">Pour une gestion scolaire innovante et une implication étroite des parents dans l'éducation de leurs enfants
  187. </p></a>
  190. </div>
  192. <div class="col-lg-3 mb-3" ><a href="#">
  193. <img alt="RISE" style="width : 100%;"title="RISE Application de gestion Académique" src="{{asset('assets/img/cosmos.png')}}" >
  195. <h3 class="card-title" style="text-align : center; font-weight : bold; color : #4682B4">COSMOS</h3>
  196. <p class="produit-text">Simplifier la gestion de vos événement avec des invitations numériques
  197. </p></a>
  200. </div>
  202. <div class="col-lg-3 mb-3" ><a href="{{path('produit_oula')}}">
  203. <img alt="RISE" style="width : 100%;"title="RISE Application de gestion Académique" src="{{asset('assets/img/ark.png')}}" >
  205. <h3 class="card-title" style="text-align : center; font-weight : bold; color : #4682B4">ARK</h3>
  206. <p class="produit-text">Gérer de manière efficace les membres de votre organisation avec notre plateforme.
  207. </p></a>
  210. </div>
  212. </div>
  216. </div>
  218. <!--
  222. <div class="row counters" data-aos="fade-up" data-aos-delay="100">
  224. <div class="col-lg-3 col-6 text-center">
  225. <span data-purecounter-start="0" data-purecounter-end="232" data-purecounter-duration="1" class="purecounter"></span>
  226. <p>Clients</p>
  227. </div>
  229. <div class="col-lg-3 col-6 text-center">
  230. <span data-purecounter-start="0" data-purecounter-end="421" data-purecounter-duration="1" class="purecounter"></span>
  231. <p>Projects</p>
  232. </div>
  234. <div class="col-lg-3 col-6 text-center">
  235. <span data-purecounter-start="0" data-purecounter-end="1364" data-purecounter-duration="1" class="purecounter"></span>
  236. <p>Hours Of Support</p>
  237. </div>
  239. <div class="col-lg-3 col-6 text-center">
  240. <span data-purecounter-start="0" data-purecounter-end="42" data-purecounter-duration="1" class="purecounter"></span>
  241. <p>Hard Workers</p>
  242. </div>
  244. </div>
  246. </div>
  248. -->
  250. </section><!-- End Why Us Section -->
  253. <!-- ======= Why Us Section ======= -->
  254. <section id="why-us" style="background-color: #283d50;">
  255. <div class="container" data-aos="fade-up">
  256. <header class="section-header">
  257. <h3>Pourquoi Amani ?</h3>
  258. <p>Nous plaçons le client au centre de tout projet</p>
  260. </header>
  262. <div class="row row-eq-height justify-content-center">
  264. <div class="col-lg-4 mb-4" >
  265. <div class="card" data-aos="zoom-in" data-aos-delay="100" style="background-color: #2e4254;" >
  266. <i class="bi bi-ui-checks-grid"></i>
  267. <div class="card-body" style="background-color: #2e4254;">
  268. <h5 class="card-title" style="">Développement AGILE</h5>
  269. <p class="card-text">Amani axe ses développements sur les méthodes agiles
  270. pour que le client soit aussi acteur de sa propre numérisation.
  271. </p>
  273. </div>
  274. </div>
  275. </div>
  277. <div class="col-lg-4 mb-4">
  278. <div class="card" data-aos="zoom-in" data-aos-delay="200" style="background-color: #2e4254;">
  279. <i class="bi bi-cpu"></i>
  280. <div class="card-body" style="background-color: #2e4254;">
  281. <h5 class="card-title" style="">Technologie SMART</h5>
  282. <p class="card-text">Nous apportons des solutions <span class="smart">S</span>pécifique à votre activité,
  283. <span class="smart">M</span>esurable pour en évaluer l'impact, avec des objectifs reflétant votre
  285. <span class="smart">A</span>mbition, des fonctionnalités <span class="smart">R</span>éaliste et dévéloppé dans une durée <span class="smart">T</span>emporellement défini.</p>
  287. </div>
  288. </div>
  289. </div>
  291. <div class="col-lg-4 mb-4">
  292. <div class="card" data-aos="zoom-in" data-aos-delay="300" style="background-color: #2e4254;">
  293. <i class="bi bi-headset"></i>
  294. <div class="card-body" style="background-color: #2e4254;">
  295. <h5 class="card-title" style="">Support Actif</h5>
  296. <p class="card-text">Conscient de l'importance du service après vente, notre support vous accompagne
  297. dans l'utilisation quotidienne des nos services et porte une oreille attentive à vos besoins. </p>
  299. </div>
  300. </div>
  301. </div>
  303. </div>
  305. <!--
  309. <div class="row counters" data-aos="fade-up" data-aos-delay="100">
  311. <div class="col-lg-3 col-6 text-center">
  312. <span data-purecounter-start="0" data-purecounter-end="232" data-purecounter-duration="1" class="purecounter"></span>
  313. <p>Clients</p>
  314. </div>
  316. <div class="col-lg-3 col-6 text-center">
  317. <span data-purecounter-start="0" data-purecounter-end="421" data-purecounter-duration="1" class="purecounter"></span>
  318. <p>Projects</p>
  319. </div>
  321. <div class="col-lg-3 col-6 text-center">
  322. <span data-purecounter-start="0" data-purecounter-end="1364" data-purecounter-duration="1" class="purecounter"></span>
  323. <p>Hours Of Support</p>
  324. </div>
  326. <div class="col-lg-3 col-6 text-center">
  327. <span data-purecounter-start="0" data-purecounter-end="42" data-purecounter-duration="1" class="purecounter"></span>
  328. <p>Hard Workers</p>
  329. </div>
  331. </div>
  333. </div>
  335. -->
  337. </section><!-- End Why Us Section -->
  339. <!-- ======= Portfolio Section ======= -->
  341. <!-- ======= Testimonials Section =======
  342. <section id="testimonials" class="" style="background-color : #f9f9f9;">
  343. <div class="container" data-aso="zoom-in">
  345. <header class="section-header">
  346. <h3>Testimonials</h3>
  347. </header>
  349. <div class="row justify-content-center">
  350. <div class="col-lg-8">
  352. <div class="testimonials-slider swiper" data-aos="fade-up" data-aos-delay="100">
  353. <div class="swiper-wrapper">
  355. <div class="swiper-slide">
  356. <div class="testimonial-item">
  357. <img src="assets/img/testimonial-1.jpg" class="testimonial-img" alt="">
  358. <h3>Saul Goodman</h3>
  359. <h4>Ceo &amp; Founder</h4>
  360. <p>
  361. Proin iaculis purus consequat sem cure digni ssim donec porttitora entum suscipit rhoncus. Accusantium quam, ultricies eget id, aliquam eget nibh et. Maecen aliquam, risus at semper.
  362. </p>
  363. </div>
  364. </div>
  366. <div class="swiper-slide">
  367. <div class="testimonial-item">
  368. <img src="assets/img/testimonial-2.jpg" class="testimonial-img" alt="">
  369. <h3>Sara Wilsson</h3>
  370. <h4>Designer</h4>
  371. <p>
  372. Export tempor illum tamen malis malis eram quae irure esse labore quem cillum quid cillum eram malis quorum velit fore eram velit sunt aliqua noster fugiat irure amet legam anim culpa.
  373. </p>
  374. </div>
  375. </div>
  377. <div class="swiper-slide">
  378. <div class="testimonial-item">
  379. <img src="assets/img/testimonial-3.jpg" class="testimonial-img" alt="">
  380. <h3>Jena Karlis</h3>
  381. <h4>Store Owner</h4>
  382. <p>
  383. Enim nisi quem export duis labore cillum quae magna enim sint quorum nulla quem veniam duis minim tempor labore quem eram duis noster aute amet eram fore quis sint minim.
  384. </p>
  385. </div>
  386. </div><!-- End testimonial
  388. <div class="swiper-slide">
  389. <div class="testimonial-item">
  390. <img src="assets/img/testimonial-4.jpg" class="testimonial-img" alt="">
  391. <h3>Matt Brandon</h3>
  392. <h4>Freelancer</h4>
  393. <p>
  394. Fugiat enim eram quae cillum dolore dolor amet nulla culpa multos export minim fugiat minim velit minim dolor enim duis veniam ipsum anim magna sunt elit fore quem dolore labore illum veniam.
  395. </p>
  396. </div>
  397. </div><!-- End testimonial i
  399. <div class="swiper-slide">
  400. <div class="testimonial-item">
  401. <img src="assets/img/testimonial-5.jpg" class="testimonial-img" alt="">
  402. <h3>John Larson</h3>
  403. <h4>Entrepreneur</h4>
  404. <p>
  405. Quis quorum aliqua sint quem legam fore sunt eram irure aliqua veniam tempor noster veniam enim culpa labore duis sunt culpa nulla illum cillum fugiat legam esse veniam culpa fore nisi cillum quid.
  406. </p>
  407. </div>
  408. </div><!-- End testimonial item
  410. </div>
  411. <div class="swiper-pagination"></div>
  412. </div>
  414. </div>
  415. </div>
  417. </div>
  418. </section> End Testimonials Section -->
  421. <!-- ======= Contact Section ======= -->
  422. <section id="contact">
  423. <div class="container-fluid" data-aos="fade-up">
  425. <div class="section-header">
  426. <h3>Contact Us</h3>
  427. </div>
  429. <div class="row">
  431. <div class="col-lg-6">
  432. <div class="map mb-4 mb-lg-0">
  433. </div>
  434. </div>
  436. <div class="col-lg-6">
  437. <div class="row">
  438. <div class="col-md-5 info">
  439. <i class="bi bi-geo-alt"></i>
  440. <p>Kinshasa, Limete</p>
  441. </div>
  442. <div class="col-md-4 info">
  443. <i class="bi bi-envelope"></i>
  444. <p>contact@amanisoftware.com</p>
  445. </div>
  446. <div class="col-md-3 info">
  447. <i class="bi bi-phone"></i>
  448. <p>+243 970585155</p>
  449. </div>
  450. </div>
  452. <div class="form">
  453. <form action="forms/contact.php" method="post" role="form" class="php-email-form">
  454. <div class="row">
  455. <div class="form-group col-lg-6">
  456. <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" required>
  457. </div>
  458. <div class="form-group col-lg-6 mt-3 mt-lg-0">
  459. <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required>
  460. </div>
  461. </div>
  462. <div class="form-group mt-3">
  463. <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" required>
  464. </div>
  465. <div class="form-group mt-3">
  466. <textarea class="form-control" name="message" rows="5" placeholder="Message" required></textarea>
  467. </div>
  468. <div class="my-3">
  469. <div class="loading">Loading</div>
  470. <div class="error-message"></div>
  471. <div class="sent-message">Your message has been sent. Thank you!</div>
  472. </div>
  473. <div class="text-center"><button type="submit" title="Send Message">Send Message</button></div>
  474. </form>
  475. </div>
  476. </div>
  478. </div>
  480. </div>
  481. </section><!-- End Contact Section -->
  483. </main><!-- End #main -->
  488. {% endblock %}