templates/accueil/accueil.html.twig line 1

Open in your IDE?
  2. {% extends 'baseAccueil.html.twig' %}
  4. {% block body %}
  6. <!-- ═══════════════════════════════════════════════ NAVBAR -->
  7. <nav class="navbar" id="navbar">
  8. <div class="nav-inner">
  9. <a href="#" class="nav-logo">
  10. <img src="{{ asset('tools/accueil/assets/SHISSAB_LogoLarge.png') }}" alt="SHISSAB" />
  11. </a>
  12. <button class="nav-toggle" id="navToggle" aria-label="Menu">
  13. <span></span><span></span><span></span>
  14. </button>
  15. <div class="nav-menu" id="navMenu">
  16. <a href="#sh-privileges" class="nav-link">Privilèges</a>
  17. <a href="#sh-packages" class="nav-link">Packages</a>
  18. <a href="#sh-modules" class="nav-link">Modules</a>
  19. <a href="{{ path('app_login') }}" class="btn-login">
  20. <span>Se connecter</span>
  21. <i class="fa-solid fa-arrow-right-long"></i>
  22. </a>
  23. </div>
  24. </div>
  25. </nav>
  27. <!-- ═══════════════════════════════════════════════ HERO -->
  28. <section class="hero" id="hero">
  29. <div class="hero-inner">
  30. <div class="hero-content" data-reveal>
  31. <div class="eyebrow-pill">
  32. <i class="fa-solid fa-circle-dot pulse-dot"></i>
  33. Logiciel de Gestion Connecté
  34. </div>
  36. <h1 class="hero-title">
  37. <span class="hero-title-main">SHISSAB</span>
  38. <span class="hero-title-sub">SYSTEME</span>
  39. </h1>
  41. <p class="hero-desc">
  42. SHISSAB-SYSTEME est un logiciel connecté offrant plusieurs modules. Il est conçu pour être utilisé dans un cadre de sur-mesure et maîtrisé afin d'offrir une large visibilité au client pour mieux organiser la gestion des activités de son entreprise. L'expérience des clients est exploitée pour en faire un challenge et améliorer le service pour un meilleur rendement.
  43. </p>
  45. <div class="hero-actions">
  46. <a href="#sh-modules" class="btn-primary">
  47. Découvrir les modules
  48. <i class="fa-solid fa-arrow-right-long"></i>
  49. </a>
  50. </div>
  52. </div>
  54. <div class="hero-visual" data-reveal-right>
  55. <div class="hero-screens-wrap">
  56. <div class="hero-img-glow"></div>
  58. <div class="browser-frame browser-frame-main">
  59. <div class="browser-chrome">
  60. <div class="browser-dots">
  61. <span class="bd bd-red"></span>
  62. <span class="bd bd-yellow"></span>
  63. <span class="bd bd-green"></span>
  64. </div>
  65. <div class="browser-bar">
  66. <i class="fa-solid fa-lock"></i>
  67. shissabsysteme.com/boulangerie
  68. </div>
  69. </div>
  70. <div class="browser-screen">
  71. <img src="{{ asset('tools/accueil/assets/app-screenshot-1.png') }}" alt="Module Boulangerie — SHISSAB" />
  72. </div>
  73. </div>
  75. <div class="browser-frame browser-frame-secondary">
  76. <div class="browser-chrome">
  77. <div class="browser-dots">
  78. <span class="bd bd-red"></span>
  79. <span class="bd bd-yellow"></span>
  80. <span class="bd bd-green"></span>
  81. </div>
  82. <div class="browser-bar">
  83. <i class="fa-solid fa-lock"></i>
  84. shissabsysteme.com/produit/nouveau
  85. </div>
  86. </div>
  87. <div class="browser-screen">
  88. <img src="{{ asset('tools/accueil/assets/app-screenshot-2.png') }}" alt="Création Produit — SHISSAB" />
  89. </div>
  90. </div>
  92. </div>
  93. </div>
  94. </div>
  96. <a href="#sh-stats" class="scroll-indicator">
  97. <span class="scroll-label">Défiler</span>
  98. <div class="scroll-arrow">
  99. <i class="fa-solid fa-chevron-down"></i>
  100. </div>
  101. </a>
  102. </section>
  104. <!-- ═══════════════════════════════════════════════ STATS BAR -->
  105. <section class="stats-bar" id="sh-stats">
  106. <div class="stats-inner">
  107. <div class="stat-item" data-reveal>
  108. <div class="stat-icon">
  109. <i class="fa-solid fa-chart-pie"></i>
  110. </div>
  111. <div class="stat-text">
  112. <span class="stat-label">Dashboard</span>
  113. <strong class="stat-value">Visibilité 360°</strong>
  114. </div>
  115. </div>
  116. <div class="stat-divider"></div>
  117. <div class="stat-item" data-reveal data-delay="100">
  118. <div class="stat-icon">
  119. <i class="fa-solid fa-mobile-screen-button"></i>
  120. </div>
  121. <div class="stat-text">
  122. <span class="stat-label">Accès</span>
  123. <strong class="stat-value">Multi-appareils</strong>
  124. </div>
  125. </div>
  126. <div class="stat-divider"></div>
  127. <div class="stat-item" data-reveal data-delay="200">
  128. <div class="stat-icon">
  129. <i class="fa-solid fa-sliders"></i>
  130. </div>
  131. <div class="stat-text">
  132. <span class="stat-label">Système</span>
  133. <strong class="stat-value">Sur-mesure</strong>
  134. </div>
  135. </div>
  136. <div class="stat-divider"></div>
  137. <div class="stat-item" data-reveal data-delay="300">
  138. <div class="stat-icon">
  139. <i class="fa-solid fa-arrows-rotate"></i>
  140. </div>
  141. <div class="stat-text">
  142. <span class="stat-label">Mises à jour</span>
  143. <strong class="stat-value">Modules évolutifs</strong>
  144. </div>
  145. </div>
  146. </div>
  147. </section>
  149. <!-- ═══════════════════════════════════════════════ PRIVILÈGES -->
  150. <section class="privileges" id="sh-privileges">
  151. <div class="privileges-inner">
  153. <div class="priv-header">
  154. <div class="priv-header-left" data-reveal>
  155. <div class="section-tag">
  156. <i class="fa-solid fa-sparkles"></i>
  157. Pourquoi SHISSAB
  158. </div>
  159. <h2 class="section-title">
  160. Les privilèges <em>SHISSAB-SYSTEME</em>
  161. </h2>
  162. </div>
  163. <div class="priv-header-right" data-reveal-right>
  164. <img src="{{ asset('tools/accueil/assets/SHISSAB_Logo3D.png') }}" alt="SHISSAB 3D" class="priv-logo3d float-anim-slow" />
  165. </div>
  166. </div>
  168. <div class="priv-grid">
  170. <div class="priv-card" data-reveal data-delay="0">
  171. <div class="priv-card-num">01</div>
  172. <div class="priv-card-icon"><i class="fa-solid fa-gauge-high"></i></div>
  173. <p>Il offre un Dashboard permettant en un clic d'avoir une visibilité à 360° sur le fonctionnement et la rentabilité de votre activité.</p>
  174. </div>
  176. <div class="priv-card" data-reveal data-delay="100">
  177. <div class="priv-card-num">02</div>
  178. <div class="priv-card-icon"><i class="fa-solid fa-sliders"></i></div>
  179. <p>Unique en son genre, le logiciel s'adapte aux particularités du client permettant d'associer gestion standard et spécification afin de respecter l'organisation particulière de votre activité.</p>
  180. </div>
  182. <div class="priv-card" data-reveal data-delay="200">
  183. <div class="priv-card-num">03</div>
  184. <div class="priv-card-icon"><i class="fa-solid fa-globe"></i></div>
  185. <p>Il vous permet de suivre et mettre à jour vos activités avec un simple appareil partout dans le monde mais aussi mieux adapter vos prises de décisions.</p>
  186. </div>
  188. <div class="priv-card" data-reveal data-delay="100">
  189. <div class="priv-card-num">04</div>
  190. <div class="priv-card-icon"><i class="fa-solid fa-database"></i></div>
  191. <p>Il dispose d'un mode particulier pour organiser et suivre vos activités tout en simplifiant la connectivité et la transparence des données.</p>
  192. </div>
  194. <div class="priv-card" data-reveal data-delay="200">
  195. <div class="priv-card-num">05</div>
  196. <div class="priv-card-icon"><i class="fa-solid fa-display"></i></div>
  197. <p>Un logiciel connecté, simple qui vous permet de travailler et d'accéder aux données partout où vous êtes avec n'importe quel appareil. Adapté à Windows, iOS, Linux et Android.</p>
  198. </div>
  200. <div class="priv-card" data-reveal data-delay="300">
  201. <div class="priv-card-num">06</div>
  202. <div class="priv-card-icon"><i class="fa-solid fa-rocket"></i></div>
  203. <p>Il est évolutif offrant régulièrement des mises à jour permettant des rajouts de modules supplémentaires.</p>
  204. </div>
  206. </div>
  207. </div>
  208. </section>
  210. <!-- ═══════════════════════════════════════════════ PACKAGES -->
  211. <section class="packages" id="sh-packages">
  212. <div class="packages-inner">
  213. <div class="packages-head" data-reveal>
  214. <div class="section-tag">
  215. <i class="fa-solid fa-box-open"></i>
  216. Nos Offres
  217. </div>
  218. <h2 class="section-title">SHISSAB-SYSTEME <span class="gold-text">2.1</span></h2>
  219. <p class="section-sub">est la nouvelle version de notre système offrant deux packages :</p>
  220. <p class="packages-intro">
  221. Ce sont deux packages permettant à nos différents clients de s'adapter selon leurs activités et leurs diversités ; le système permet de gérer une multitude de domaines dont la gestion commerciale, administrative, technique, immobilière etc.
  222. </p>
  223. </div>
  225. <div class="pkg-grid">
  227. <div class="pkg-card pkg-card-1" data-reveal data-delay="0">
  228. <div class="pkg-card-header">
  229. <div class="pkg-icon"><i class="fa-solid fa-briefcase"></i></div>
  230. <div>
  231. <span class="pkg-label">Pack 1</span>
  232. <h3 class="pkg-title">Services &amp; Prestation</h3>
  233. </div>
  234. </div>
  235. <ul class="pkg-list">
  236. <li><i class="fa-solid fa-check"></i>Gestion client</li>
  237. <li><i class="fa-solid fa-check"></i>Facturation</li>
  238. <li><i class="fa-solid fa-check"></i>Gestion de la prestation standard <em>(Un module au choix)</em></li>
  239. <li><i class="fa-solid fa-check"></i>SAV (Services après ventes)</li>
  240. </ul>
  241. </div>
  243. <div class="pkg-card pkg-card-2" data-reveal data-delay="150">
  244. <div class="pkg-card-header">
  245. <div class="pkg-icon"><i class="fa-solid fa-store"></i></div>
  246. <div>
  247. <span class="pkg-label">Pack 2</span>
  248. <h3 class="pkg-title">Commerce &amp; Stock</h3>
  249. </div>
  250. </div>
  251. <ul class="pkg-list">
  252. <li><i class="fa-solid fa-check"></i>Gestion client</li>
  253. <li><i class="fa-solid fa-check"></i>Gestion de stock</li>
  254. <li><i class="fa-solid fa-check"></i>Caisse</li>
  255. <li><i class="fa-solid fa-check"></i>SAV (Services après ventes)</li>
  256. </ul>
  257. </div>
  259. </div>
  261. <div class="pkg-cta" data-reveal>
  262. <a href="#sh-footer" class="btn-primary">
  263. Contactez-nous
  264. <i class="fa-solid fa-paper-plane"></i>
  265. </a>
  266. </div>
  267. </div>
  268. </section>
  270. <!-- ═══════════════════════════════════════════════ MODULES -->
  271. <section class="modules" id="sh-modules">
  272. <div class="modules-inner">
  274. <div class="modules-head" data-reveal>
  275. <div class="pkg-coin-wrap">
  276. <img src="{{ asset('tools/accueil/assets/Coin.png') }}" alt="" class="pkg-coin coin-float" aria-hidden="true" />
  277. </div>
  278. <div class="section-tag">
  279. <i class="fa-solid fa-cubes"></i>
  280. Fonctionnalités
  281. </div>
  282. <h2 class="section-title">Descriptifs des modules</h2>
  283. <p class="section-desc">
  284. A travers un des packages, vous avez en tant que client la possibilité de rajouter des modules supplémentaires afin d'avoir un outil de gestion complète et harmonisée de vos activités.
  285. </p>
  286. </div>
  288. <div class="mslider" id="moduleSlider" data-reveal>
  290. <div class="mslider-rail-wrap">
  291. <button class="mslider-arrow mslider-arrow--prev" id="msliderPrev" aria-label="Précédent">
  292. <i class="fa-solid fa-chevron-left"></i>
  293. </button>
  294. <div class="mslider-rail" id="msliderRail">
  295. <button class="mslider-thumb active" data-index="0">
  296. <span class="mslider-thumb-icon"><i class="fa-solid fa-users"></i></span>
  297. <span class="mslider-thumb-label">Gestion client</span>
  298. </button>
  299. <button class="mslider-thumb" data-index="1">
  300. <span class="mslider-thumb-icon"><i class="fa-solid fa-file-invoice"></i></span>
  301. <span class="mslider-thumb-label">Facturation</span>
  302. </button>
  303. <button class="mslider-thumb" data-index="2">
  304. <span class="mslider-thumb-icon"><i class="fa-solid fa-toolbox"></i></span>
  305. <span class="mslider-thumb-label">Prestation</span>
  306. </button>
  307. <button class="mslider-thumb" data-index="3">
  308. <span class="mslider-thumb-icon"><i class="fa-solid fa-cash-register"></i></span>
  309. <span class="mslider-thumb-label">Caisse</span>
  310. </button>
  311. <button class="mslider-thumb" data-index="4">
  312. <span class="mslider-thumb-icon"><i class="fa-solid fa-boxes-stacked"></i></span>
  313. <span class="mslider-thumb-label">Stock</span>
  314. </button>
  315. <button class="mslider-thumb" data-index="5">
  316. <span class="mslider-thumb-icon"><i class="fa-solid fa-file-circle-plus"></i></span>
  317. <span class="mslider-thumb-label">Bon de Commande</span>
  318. </button>
  319. <button class="mslider-thumb" data-index="6">
  320. <span class="mslider-thumb-icon"><i class="fa-solid fa-truck"></i></span>
  321. <span class="mslider-thumb-label">Bon de Livraison</span>
  322. </button>
  323. <button class="mslider-thumb" data-index="7">
  324. <span class="mslider-thumb-icon"><i class="fa-solid fa-cart-shopping"></i></span>
  325. <span class="mslider-thumb-label">Achat</span>
  326. </button>
  327. <button class="mslider-thumb" data-index="8">
  328. <span class="mslider-thumb-icon"><i class="fa-solid fa-credit-card"></i></span>
  329. <span class="mslider-thumb-label">Crédit &amp; Acompte</span>
  330. </button>
  331. <button class="mslider-thumb" data-index="9">
  332. <span class="mslider-thumb-icon"><i class="fa-solid fa-calendar-days"></i></span>
  333. <span class="mslider-thumb-label">Agenda</span>
  334. </button>
  335. <button class="mslider-thumb" data-index="10">
  336. <span class="mslider-thumb-icon"><i class="fa-solid fa-list-check"></i></span>
  337. <span class="mslider-thumb-label">Pilotage</span>
  338. </button>
  339. <button class="mslider-thumb" data-index="11">
  340. <span class="mslider-thumb-icon"><i class="fa-solid fa-headset"></i></span>
  341. <span class="mslider-thumb-label">SAV</span>
  342. </button>
  343. <button class="mslider-thumb" data-index="12">
  344. <span class="mslider-thumb-icon"><i class="fa-solid fa-landmark"></i></span>
  345. <span class="mslider-thumb-label">Comptabilité</span>
  346. </button>
  347. </div>
  348. <button class="mslider-arrow mslider-arrow--next" id="msliderNext" aria-label="Suivant">
  349. <i class="fa-solid fa-chevron-right"></i>
  350. </button>
  351. </div>
  353. <div class="mslider-stage">
  354. <div class="mslider-progress">
  355. <div class="mslider-progress-bar" id="msliderProgressBar"></div>
  356. <div class="mslider-autoplay-bar" id="msliderAutoBar"></div>
  357. </div>
  359. <div class="mslider-detail" id="msliderDetail">
  360. <div class="mslider-slide" id="msliderSlide"></div>
  361. </div>
  363. <div class="mslider-nav">
  364. <button class="mslider-nav-btn" id="msliderNavPrev" aria-label="Module précédent">
  365. <i class="fa-solid fa-chevron-left"></i>
  366. <span>Précédent</span>
  367. </button>
  368. <div class="mslider-dots" id="msliderDots"></div>
  369. <button class="mslider-nav-btn mslider-nav-btn--fwd" id="msliderNavNext" aria-label="Module suivant">
  370. <span>Suivant</span>
  371. <i class="fa-solid fa-chevron-right"></i>
  372. </button>
  373. </div>
  374. </div>
  376. </div>
  378. </div>
  379. </section>
  381. <!-- ═══════════════════════════════════════════════ FOOTER -->
  382. <footer class="footer" id="sh-footer">
  383. <div class="footer-top">
  384. <div class="footer-inner">
  386. <div class="footer-col footer-col-offres" data-reveal>
  387. <h3 class="footer-col-title">Offres</h3>
  388. <p class="footer-col-desc">Notre prestation vous offre un très bon rapport qualité/prix pour le meilleur outil de gestion de votre entreprise.</p>
  389. <ul class="footer-offres-list">
  390. <li><i class="fa-solid fa-check-circle"></i>Offre incluant le package 1 &amp; 2</li>
  391. <li><i class="fa-solid fa-check-circle"></i>Formation</li>
  392. <li><i class="fa-solid fa-check-circle"></i>3 comptes utilisateurs</li>
  393. <li><i class="fa-solid fa-check-circle"></i>Prix / compte utilisateur supplémentaire</li>
  394. <li><i class="fa-solid fa-check-circle"></i>Assistance &amp; maintenance annuelles inclues</li>
  395. </ul>
  396. </div>
  398. <div class="footer-col footer-col-contact" data-reveal data-delay="150">
  399. <h3 class="footer-col-title">Contact</h3>
  401. <div class="contact-tabs">
  402. <span class="contact-tab active">MORONI</span>
  403. <span class="contact-tab">MADAGASCAR</span>
  404. <span class="contact-tab">RWANDA</span>
  405. </div>
  407. <div class="contact-panel active">
  408. <p class="contact-city-label">Entreprise à Moroni</p>
  409. <ul class="contact-list">
  410. <li>
  411. <i class="fa-solid fa-location-dot"></i>
  412. <span>Moroni Hamramba</span>
  413. </li>
  414. <li>
  415. <i class="fa-solid fa-phone"></i>
  416. <a href="tel:+2693874071">+(269) 387 4071 / 359 2414</a>
  417. </li>
  418. <li>
  419. <i class="fa-brands fa-whatsapp"></i>
  420. <a href="https://wa.me/2693592414" target="_blank" rel="noopener">+(269) 359 2414</a>
  421. </li>
  422. <li>
  423. <i class="fa-solid fa-envelope"></i>
  424. <a href="mailto:contactmoroni@hikamsm.com">contactmoroni@hikamsm.com</a>
  425. </li>
  426. <li>
  427. <i class="fa-solid fa-globe"></i>
  428. <a href="https://shissabsysteme.com" target="_blank" rel="noopener">shissabsysteme.com</a>
  429. </li>
  430. </ul>
  431. </div>
  433. </div>
  435. </div>
  436. </div>
  438. <div class="footer-bottom">
  439. <div class="footer-bottom-inner">
  440. <div class="footer-brand">
  441. <img src="{{ asset('tools/accueil/assets/SHISSAB_LogoLarge.png') }}" alt="SHISSAB" class="footer-logo" />
  442. </div>
  443. <p class="footer-copy">© {{ "now"|date('Y') }} Hikam Société Multiple. Tous droits réservés.</p>
  444. <p class="footer-tagline"><em>L'excellence au service de votre activité</em></p>
  445. </div>
  446. </div>
  447. </footer>
  449. {% endblock %}