templates/site/homepage.html.twig line 1

Open in your IDE?
  1. {% extends 'site/base.html.twig' %}
  2. {% block homepage_menu_active 'active' %}
  3.     {% block meta %}
  4.         <title>ACTech | {% trans from "FrontBundle" %}Access Control Technologies{% endtrans %}</title>
  5.         <meta name="description" content="{% trans from "FrontBundle" %}The complete and intuitive control access system{% endtrans %}"> 
  6.         <meta property="og:type" content="website"/>
  7.         <meta property="og:image" content="{{asset('images/site/18671699_118631158715437_3339858098199541956_o.jpg')}}">
  8.         <link rel="canonical" href="https://actech.ma/{% if app.request.locale == "en" %}{% elseif app.request.locale == "fr" %}fr{% endif %}">
  9.         <link rel="alternate" hreflang="en" href="https://actech.ma/en">
  10.         <link rel="alternate" hreflang="fr" href="https://actech.ma/fr"/> 
  11.     {% endblock %}
  12.     {% block stylesheets %}
  13.         <link rel="stylesheet" href="{{ asset('site/css/bootstrap.min.css') }}">
  14.         <link rel="stylesheet" href="{{ asset('site/css/animate.min.css') }}">
  15.         <link rel="stylesheet" href="{{ asset('site/css/magnific-popup.css') }}">
  16.         <link rel="stylesheet" href="{{ asset('site/css/fontawesome-all.min.css') }}">
  17.         <link rel="stylesheet" href="{{ asset('site/css/owl.carousel.min.css') }}">
  18.         <link rel="stylesheet" href="{{ asset('site/css/nice-select.css') }}">
  19.         <link rel="stylesheet" href="{{ asset('site/css/meanmenu.css') }}">
  20.         <link rel="stylesheet" href="{{ asset('site/css/slick.css') }}">
  21.         <link rel="stylesheet" href="{{ asset('site/css/default.css') }}">
  22.         <link rel="stylesheet" href="{{ asset('site/css/style.css') }}">
  23.         <link rel="stylesheet" href="{{ asset('site/css/responsive.css') }}">
  24.     {% endblock %}
  25.     {% block content %}
  27.         <!-- START: Content-->
  28.         {% for type, messages in app.session.flashBag.all %}
  29.             {% for message in messages %}
  30.                 <div class="alert alert-{{ type }} alert-dismissible fade show" role="alert">
  31.                     <p class="mb-0"><i class="feather icon-alert-circle mr-1 align-middle"></i> {{ message|trans({}, 'FOSUserBundle') }}</p>
  32.                     <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  33.                         <span aria-hidden="true"><i class="feather icon-x-circle"></i></span>
  34.                     </button>
  35.                 </div>
  36.             {% endfor %}
  37.         {% endfor %}
  38.         <!-- slider-area -->
  39.         <section class="slider-area fix slider-bg" data-background="{{asset('site/img/slider/slider_bg.png')}}">
  40.             <div class="container">
  41.                 <div class="row align-items-center">
  42.                     <div class="col-lg-6">
  43.                         <div class="slider-content">
  44.                             <h2>{% trans from "FrontBundle" %}Access Control Technologies{% endtrans %}</h2>
  45.                             <p>{% trans from "FrontBundle" %}With a high security level of multi-verification methods and devices.{% endtrans %}</p>
  46.                             <div class="slider-btn">
  47.                                 <a href="{{path('contact')}}" class="btn">{% trans from "FrontBundle" %}Get Started Now{% endtrans %}</a>
  48.                                 <a href="{{path('about')}}" class="btn transparent-btn">{% trans from "FrontBundle" %}Read more{% endtrans %}</a>
  49.                             </div>
  50.                         </div>
  51.                     </div>
  52.                     <div class="col-lg-6 d-none d-lg-block">
  53.                         <div class="slider-img pt-155">
  54.                             <img src="{{asset('site/img/slider/slider_img.png')}}" class="alltuchtopdown" alt="img">
  55.                         </div>
  56.                     </div>
  57.                 </div>
  58.             </div>
  59.         </section>
  60.         <!-- slider-area-end -->
  61.         <!-- features-area -->
  62.         <section class="features-area overlay-features">
  63.             <div class="container">
  64.                 <div class="row">
  65.                     <div class="col-lg-4 col-md-6">
  66.                         <div class="single-features mb-30">
  67.                             <div class="features-icon">
  68.                                 <img src="{{asset('site/img/icon/uf_icon02.png')}}" alt="icon">
  69.                             </div>
  70.                             <div class="features-content fix">
  71.                                 <h5>{% trans from "FrontBundle" %}High security performance{% endtrans %}</h5>
  72.                                 <p>{% trans from "FrontBundle" %}A faster technology and access control smarter system with a high security level.{% endtrans %}</p>
  73.                             </div>
  74.                         </div>
  75.                     </div>
  76.                     <div class="col-lg-4 col-md-6">
  77.                         <div class="single-features mb-30">
  78.                             <div class="features-icon">
  79.                                 <img src="{{asset('site/img/icon/uf_icon04.png')}}" alt="icon">
  80.                             </div>
  81.                             <div class="features-content fix">
  82.                                 <h5>{% trans from "FrontBundle" %}Several time clock methods{% endtrans %}</h5>
  83.                                 <p>{% trans from "FrontBundle" %}Time attendances by Biometric Fingerprint, Card and by many other devices{% endtrans %}</p>
  84.                             </div>
  85.                         </div>
  86.                     </div>
  87.                     <div class="col-lg-4 col-md-6">
  88.                         <div class="single-features mb-30">
  89.                             <div class="features-icon">
  90.                                 <img src="{{asset('site/img/icon/uf_icon01.png')}}" alt="icon">
  91.                             </div>
  92.                             <div class="features-content fix">
  93.                                 <h5>{% trans from "FrontBundle" %}Online tracking monitors{% endtrans %}</h5>
  94.                                 <p>{% trans from "FrontBundle" %}The new way to track employees attendance with an online time clock technology{% endtrans %}</p>
  95.                             </div>
  96.                         </div>
  97.                     </div>
  98.                 </div>
  99.             </div>
  100.         </section>
  101.         <!-- features-area-end -->
  102.         <!-- cover-hosting-area -->
  103.         <section class="cover-hosting pt-115 pb-120">
  104.             <div class="container">
  105.                 <div class="row justify-content-center">
  106.                     <div class="col-xl-6 col-lg-8">
  107.                         <div class="section-title text-center mb-75">
  108.                             <h2>{% trans from "FrontBundle" %}Smart Access Control Terminals{% endtrans %}</h2>
  109.                             <p>{% trans from "FrontBundle" %}Discover our different clocking systems with a range of time clock hardware terminals to suit your business needs and employees count{% endtrans %}</p>
  110.                         </div>
  111.                     </div>
  112.                 </div>
  113.                 <div class="row">
  114.                     <div class="col-12">
  115.                         <div class="cover-tabs-wrap">
  116.                             <ul class="nav nav-tabs" id="myTab" role="tablist">
  117.                                 <li class="nav-item">
  118.                                     <a class="nav-link active" id="c-hosting-tab" data-toggle="tab" href="#c-hosting" role="tab" aria-controls="c-hosting"
  119.                                        aria-selected="true"><img src="{{asset('site/identification.png')}}" alt="icon"> {% trans from "FrontBundle" %}Fingerprint{% endtrans %}</a>
  120.                                 </li>
  121.                                 <li class="nav-item">
  122.                                     <a class="nav-link" id="s-hosting-tab" data-toggle="tab" href="#s-hosting" role="tab" aria-controls="s-hosting"
  123.                                        aria-selected="false"><img src="{{asset('site/cloud-card.png')}}" alt="icon"> {% trans from "FrontBundle" %}Card and Badge{% endtrans %}</a>
  124.                                 </li>
  125.                                 <li class="nav-item">
  126.                                     <a class="nav-link" id="v-hosting-tab" data-toggle="tab" href="#v-hosting" role="tab" aria-controls="v-hosting"
  127.                                        aria-selected="false"><img src="{{asset('site/internet-des-objets.png')}}" alt="icon"> {% trans from "FrontBundle" %}Smartphones{% endtrans %}</a>
  128.                                 </li>
  129.                                 <li class="nav-item">
  130.                                     <a class="nav-link" id="w-hosting-tab" data-toggle="tab" href="#w-hosting" role="tab" aria-controls="w-hosting"
  131.                                        aria-selected="false"><img src="{{asset('site/reseau-local.png')}}" alt="icon"> {% trans from "FrontBundle" %}Computer and PC{% endtrans %}</a>
  132.                                 </li>
  133.                             </ul>
  134.                             <div class="tab-content" id="myTabContent">
  135.                                 <div class="tab-pane fade show active" id="c-hosting" role="tabpanel" aria-labelledby="c-hosting-tab">
  136.                                     <div class="row align-items-center">
  137.                                         <div class="col-lg-4 col-md-6">
  138.                                             <div class="chosting-content mt-30 mb-30">
  139.                                                 <h4>{% trans from "FrontBundle" %}Biometric clocking with fingerprint{% endtrans %}</h4>
  140.                                                 <p>{% trans from "FrontBundle" %}Biometric technology is a reliable solution that is easy to use, uses digital fingerprint recognition, consists of all the latest fingerprints technology. This Digital fingerprints tehnology is synchronized with our system of attendance management solution.{% endtrans %}</p>
  141.                                             </div>
  142.                                         </div>
  143.                                         <div class="col-lg-4 col-md-6">
  144.                                             <div class="chosting-list mb-30">
  145.                                                 <ul>
  146.                                                     <li><i class="fas fa-check"></i> {% trans from "FrontBundle" %}Fast, reliable fingerprint recognition{% endtrans %}</li>
  147.                                                     <li><i class="fas fa-check"></i> {% trans from "FrontBundle" %}Reduced risk of identity fraud.{% endtrans %}</li>
  148.                                                     <li><i class="fas fa-check"></i> {% trans from "FrontBundle" %}Data synchronized with our access control system.{% endtrans %}</li>
  149.                                                     <li><i class="fas fa-check"></i> {% trans from "FrontBundle" %}Automate the calculation of attendance times.{% endtrans %}</li>
  150.                                                 </ul>
  151.                                             </div>
  152.                                         </div>
  153.                                         <div class="col-lg-4 col-md-6">
  154.                                             <div class="chosting-img mt-60 mb-30">
  155.                                                 <img src="{{asset('site/identifications.png')}}" alt="img">
  156.                                             </div>
  157.                                         </div>
  158.                                     </div>            
  159.                                 </div>
  160.                                 <div class="tab-pane fade" id="s-hosting" role="tabpanel" aria-labelledby="s-hosting-tab">
  161.                                     <div class="row align-items-center">
  162.                                         <div class="col-lg-4 col-md-6">
  163.                                             <div class="chosting-content mb-30">
  164.                                                 <h4>{% trans from "FrontBundle" %}High tech clock-in by card and badge{% endtrans %}</h4>
  165.                                                 <p>{% trans from "FrontBundle" %}Clocking in with a card or a badge is an essential too for your organization Thanks to its design and and user friendliness the card reader is particularly liked. Clocking in with a card or badge is very simple to use.{% endtrans %}</p>
  166.                                             </div>
  167.                                         </div>
  168.                                         <div class="col-lg-4 col-md-6">
  169.                                             <div class="chosting-list mb-30">
  170.                                                 <ul>
  171.                                                     <li><i class="fas fa-check"></i>{% trans from "FrontBundle" %}Clock in by-card and badge{% endtrans %}</li>
  172.                                                     <li><i class="fas fa-check"></i>{% trans from "FrontBundle" %}Clocking synchronized with our System.{% endtrans %}</li>
  173.                                                     <li><i class="fas fa-check"></i>{% trans from "FrontBundle" %}Easily and faster Clock in/out to save considerable time.{% endtrans %}</li>
  174.                                                     <li><i class="fas fa-check"></i>{% trans from "FrontBundle" %}Automate the calculation of attendance times.{% endtrans %}</li>
  175.                                                 </ul>
  176.                                             </div>
  177.                                         </div>
  178.                                         <div class="col-lg-4 col-md-6">
  179.                                             <div class="chosting-img mt-60 mb-30">
  180.                                                 <img src="{{asset('site/card-b.png')}}" alt="img">
  181.                                             </div>
  182.                                         </div>
  183.                                     </div>
  184.                                 </div>
  185.                                 <div class="tab-pane fade" id="v-hosting" role="tabpanel" aria-labelledby="v-hosting-tab">
  186.                                     <div class="row align-items-center">
  187.                                         <div class="col-lg-4 col-md-6">
  188.                                             <div class="chosting-img mt-60 mb-30">
  189.                                                 <img src="{{asset('site/internet-des-objetx.png')}}" alt="img">
  190.                                             </div>
  191.                                         </div>
  192.                                         <div class="col-lg-4 col-md-6">
  193.                                             <div class="chosting-content mt-30 mb-30">
  194.                                                 <h4>{% trans from "FrontBundle" %}Smartphone and tablet clock in{% endtrans %}</h4>
  195.                                                 <p>{% trans from "FrontBundle" %}Using the real-time virtual clocking terminal, your staff can clock in and out directly from their personal area, making it easier for mobile staff to clock in using their smartphone or tablet. With the virtual clocking terminal online, your staff can declare their time attendances, from their tablet or smartphone.{% endtrans %}</p>
  196.                                             </div>
  197.                                         </div>
  198.                                         <div class="col-lg-4 col-md-6">
  199.                                             <div class="chosting-list mb-30">
  200.                                                 <ul>
  201.                                                     <li><i class="fas fa-check"></i> {% trans from "FrontBundle" %}No software is necessary on the Smartphone.{% endtrans %}</li>
  202.                                                     <li><i class="fas fa-check"></i> {% trans from "FrontBundle" %}Real time clocking attendances.{% endtrans %}</li>
  203.                                                     <li><i class="fas fa-check"></i> {% trans from "FrontBundle" %}GPS location tracking and accessibility from wherever you are.{% endtrans %}</li>
  204.                                                     <li><i class="fas fa-check"></i> {% trans from "FrontBundle" %}Clock online after identification with Login and password.{% endtrans %}</li>
  205.                                                 </ul>
  206.                                             </div>
  207.                                         </div>
  208.                                     </div>
  209.                                 </div>
  210.                                 <div class="tab-pane fade" id="w-hosting" role="tabpanel" aria-labelledby="w-hosting-tab">
  211.                                     <div class="row align-items-center">
  212.                                         <div class="col-lg-4 col-md-6">
  213.                                             <div class="chosting-content mt-30 mb-30">
  214.                                                 <h4>{% trans from "FrontBundle" %}PC and Web Based Time clocking{% endtrans %}</h4>
  215.                                                 <p>{% trans from "FrontBundle" %}Our clock in system online straight from your computer gives your workforce the option to login to the employee self-service, in order to have an easy clock in system online, which enables users to clock in or out and manage their time via the web, either in addition to or instead of any physical clocking terminals. Accessing the system is done via securized https.{% endtrans %}</p>
  216.                                             </div>
  217.                                         </div>
  218.                                         <div class="col-lg-4 col-md-6">
  219.                                             <div class="chosting-list mb-30">
  220.                                                 <ul>
  221.                                                     <li><i class="fas fa-check"></i> {% trans from "FrontBundle" %}No software is necessary on the PC.{% endtrans %}</li>
  222.                                                     <li><i class="fas fa-check"></i> {% trans from "FrontBundle" %}The user will have his own login making the usage very simple.{% endtrans %}</li>
  223.                                                     <li><i class="fas fa-check"></i> {% trans from "FrontBundle" %}No badge management.{% endtrans %}</li>
  224.                                                     <li><i class="fas fa-check"></i> {% trans from "FrontBundle" %}Clock online after identification with Login and password.{% endtrans %}</li>
  225.                                                 </ul>
  226.                                             </div>
  227.                                         </div>
  228.                                         <div class="col-lg-4 col-md-6">
  229.                                             <div class="chosting-img mt-60 mb-30">
  230.                                                 <img src="{{asset('site/reseaux.png')}}" alt="img">
  231.                                             </div>
  232.                                         </div>
  233.                                     </div>
  234.                                 </div>
  235.                             </div>
  236.                         </div>
  237.                     </div>
  238.                 </div>
  239.             </div>
  240.         </section>
  241.         <!-- cover-hosting-area-end -->
  242.         <!-- unlimited-features -->
  243.         <!-- unlimited-features-start -->
  244.         <section class="unlimited-features pt-115 pb-90">
  245.             <div class="container">
  246.                 <div class="row justify-content-center">
  247.                     <div class="col-xl-6 col-lg-8">
  248.                         <div class="section-title text-center mb-75">
  249.                             <h2>{% trans from "FrontBundle" %}Access Control System{% endtrans %}</h2>
  250.                             <p>{% trans from "FrontBundle" %}The Simple way to control and secure access to your company and take the stress out of your employee time and attendance tracking with our easy to use suite of platforms.{% endtrans %}</p>
  251.                         </div>
  252.                     </div>
  253.                 </div>
  254.                 <div class="row">
  255.                     <div class="col-lg-4 col-md-6">
  256.                         <div class="single-ufeatures mb-55">
  257.                             <div class="ufeatures-icon">
  258.                                 <img width="64" src="{{asset('images/site/homepage/liste-de-controle.png')}}"  alt="icon">
  259.                             </div>
  260.                             <div class="ufeatures-content fix">
  261.                                 <h5>{% trans from "FrontBundle" %}Time and Attendance{% endtrans %}</h5>
  262.                                 <p>{% trans from "FrontBundle" %}Our sophisticated system makes to clock in, provides a simple way to calculate and manage your staff working times and attendances.{% endtrans %}</p>
  263.                             </div>
  264.                         </div>
  265.                     </div>
  266.                     <div class="col-lg-4 col-md-6">
  267.                         <div class="single-ufeatures mb-55">
  268.                             <div class="ufeatures-icon">
  269.                                 <img  width="64"  src="{{asset('images/site/homepage/temps-de-travail.png')}}"  alt="icon">
  270.                             </div>
  271.                             <div class="ufeatures-content fix">
  272.                                 <h5>{% trans from "FrontBundle" %}Leave and absences{% endtrans %}</h5>
  273.                                 <p>{% trans from "FrontBundle" %}Manage and organize the arrival and exit times of your employees with an easy  and intuitive system managing absences and leaves.{% endtrans %}</p>
  274.                             </div>
  275.                         </div>
  276.                     </div>
  277.                     <div class="col-lg-4 col-md-6">
  278.                         <div class="single-ufeatures mb-55">
  279.                             <div class="ufeatures-icon">
  280.                                 <img  width="64" src="{{asset('images/site/homepage/planification-du-temps.png')}}" alt="icon">
  281.                             </div>
  282.                             <div class="ufeatures-content fix">
  283.                                 <h5>{% trans from "FrontBundle" %}Track, Monitor and Manage{% endtrans %}</h5>
  284.                                 <p>{% trans from "FrontBundle" %}Our time tracking system provides your business with real time dashboard reporting and full analytics of all employee hours.{% endtrans %}</p>
  285.                             </div>
  286.                         </div>
  287.                     </div>
  288.                     <div class="col-lg-4 col-md-6">
  289.                         <div class="single-ufeatures mb-55">
  290.                             <div class="ufeatures-icon">
  291.                                 <img width="64" src="{{asset('images/site/homepage/offrir.png')}}" alt="icon">
  292.                             </div>
  293.                             <div class="ufeatures-content fix">
  294.                                 <h5>{% trans from "FrontBundle" %}Maximum Security{% endtrans %}</h5>
  295.                                 <p>{% trans from "FrontBundle" %}Data is stored in a secure data center, with a reliable and secure management as a secure portal, actech.ma.{% endtrans %}</p>
  296.                             </div>
  297.                         </div>
  298.                     </div>
  299.                     <div class="col-lg-4 col-md-6">
  300.                         <div class="single-ufeatures mb-55">
  301.                             <div class="ufeatures-icon">
  302.                                 <img width="64" src="{{asset('images/site/homepage/gestion-du-temps.png')}}" alt="icon">
  303.                             </div>
  304.                             <div class="ufeatures-content fix">
  305.                                 <h5>{% trans from "FrontBundle" %}Zero IT Investment{% endtrans %}</h5>
  306.                                 <p>{% trans from "FrontBundle" %}With an intuitive approach centred on usage and users, zero IT investment is required from your side.{% endtrans %}</p>
  307.                             </div>
  308.                         </div>
  309.                     </div>
  310.                     <div class="col-lg-4 col-md-6">
  311.                         <div class="single-ufeatures mb-55">
  312.                             <div class="ufeatures-icon">
  313.                                 <img  width="64" src="{{asset('images/site/homepage/online-timesheet.png')}}" alt="icon">
  314.                             </div>
  315.                             <div class="ufeatures-content fix">
  316.                                 <h5>{% trans from "FrontBundle" %}Online Timesheets{% endtrans %}</h5>
  317.                                 <p>{% trans from "FrontBundle" %}ACTech.ma as a secure portal online, never rely on physical paper or manual time clocks again.{% endtrans %}</p>
  318.                             </div>
  319.                         </div>
  320.                     </div>
  321.                 </div>
  322.             </div>
  323.         </section>
  324.         <!-- unlimited-features-end -->
  326.         <!-- hosting-plan -->
  327.         <section class="hosting-plan-area hplan-bg p-relative pt-145">
  328.             <div class="container">
  329.                 <div class="row justify-content-center">
  330.                     <div class="col-xl-6 col-lg-8">
  331.                         <div class="section-title white-title text-center mb-75">
  332.                             <h2>{% trans from "FrontBundle" %}Access control packs{% endtrans %}</h2>
  333.                             <p>{% trans from "FrontBundle" %}Pricing packs adapted with the project of your company{% endtrans %}</p>
  334.                         </div>
  335.                     </div>
  336.                 </div>
  337.                 <div class="row">
  338.                     <div class="col-lg-4 col-md-6">
  339.                         <div class="single-hplan text-center mb-30">
  340.                             <div class="hplan-head">
  341.                                 <span>{% trans from "FrontBundle" %}Small business Plan{% endtrans %}</span>
  342.                                 <h3>10 - 50 <small> {% trans from "FrontBundle" %}Person{% endtrans %}</small></h3>
  343.                             </div>
  344.                             <div class="hplan-body mb-40">
  345.                                 <p>{% trans from "FrontBundle" %}Get pricing online of our solution adapt to your business needs.{% endtrans %}</p>
  346.                                 <span>{% trans from "FrontBundle" %}Manage your budget{% endtrans %}s</span>
  347.                                 <div class="hplan-icon">
  348.                                     <img width="70"  src="{{asset('images/site/homepage/a-lheure.png')}}" alt="icon">
  349.                                 </div>
  350.                             </div>
  351.                             <div class="hplan-btn">
  352.                                 <a href="#" class="btn">{% trans from "FrontBundle" %}Book the Plan{% endtrans %}</a>
  353.                             </div>
  354.                         </div>
  355.                     </div>
  356.                     <div class="col-lg-4 col-md-6">
  357.                         <div class="single-hplan text-center mb-30">
  358.                             <div class="hplan-head">
  359.                                 <span>{% trans from "FrontBundle" %}Big business Plan{% endtrans %}</span>
  360.                                 <h3>50 - 300 <small> {% trans from "FrontBundle" %}Person{% endtrans %}s</small></h3>
  361.                             </div>
  362.                             <div class="hplan-body mb-40">
  363.                                 <p>{% trans from "FrontBundle" %}Get pricing online of our solution adapt to your business needs.{% endtrans %}</p>
  364.                                 <span>{% trans from "FrontBundle" %}Manage your budget{% endtrans %}</span>
  365.                                 <div class="hplan-icon">
  366.                                     <img  width="70" src="{{asset('images/site/homepage/a-lheure.png')}}" alt="icon">
  367.                                 </div>
  368.                             </div>
  369.                             <div class="hplan-btn">
  370.                                 <a href="#" class="btn">{% trans from "FrontBundle" %}Book the Plan{% endtrans %}</a>
  371.                             </div>
  372.                         </div>
  373.                     </div>
  374.                     <div class="col-lg-4 col-md-6">
  375.                         <div class="single-hplan text-center mb-30">
  376.                             <div class="hplan-head">
  377.                                 <span>{% trans from "FrontBundle" %}Medium business Plan{% endtrans %}</span>
  378.                                 <h3>+ 300 <small>/ {% trans from "FrontBundle" %}Person{% endtrans %}s</small></h3>
  379.                             </div>
  380.                             <div class="hplan-body mb-40">
  381.                                 <p>{% trans from "FrontBundle" %}Get pricing online of our solution adapt to your business needs.{% endtrans %}</p>
  382.                                 <span>{% trans from "FrontBundle" %}Manage your budget{% endtrans %}</span>
  383.                                 <div class="hplan-icon">
  384.                                     <img width="70" src="{{asset('images/site/homepage/a-lheure.png')}}" alt="icon">
  385.                                 </div>
  386.                             </div>
  387.                             <div class="hplan-btn">
  388.                                 <a href="#" class="btn">{% trans from "FrontBundle" %}Book the Plan{% endtrans %}</a>
  389.                             </div>
  390.                         </div>
  391.                     </div>
  392.                 </div>
  393.             </div>
  394.         </section>
  395.         <!-- hosting-plan-end -->
  396.         <!-- search-area -->
  397.         <section class="search-area gray-bg pt-145 pb-140">
  398.             <div class="container">
  399.                 <div class="row justify-content-center">
  400.                     <div class="col-xl-6 col-lg-8">
  401.                         <div class="section-title search-title text-center mb-40">
  402.                             <h2> {% trans from "FrontBundle" %}Estimate pricing{% endtrans %}</h2>
  403.                             <p>{% trans from "FrontBundle" %}Tape the number of employees in your company and get the price of our solution.{% endtrans %}</p>
  404.                         </div>
  405.                     </div>
  406.                 </div>
  407.                 <div class="row justify-content-center">
  408.                     <div class="col-xl-8 col-lg-10">
  409.                         <form method="POST" action="{{path('more_info')}}" class="p-relative">
  410.                             <div class="col-12">
  411.                                 <div class="domain-search">
  412.                                     <input required="" name="employees" type="number" min="5" placeholder="{% trans from "FrontBundle" %}Enter the numbers of employees in your company{% endtrans %}">
  413.                                     <input hidden="" id="prices" name="prices" type="text" placeholder="{% trans from "FrontBundle" %}per month,per year{% endtrans %}">
  414.                                     <button  class="getprice-1 btn ds-btn">{% trans from "FrontBundle" %}Get Price{% endtrans %} <i class="fas fa-search"></i></button>
  415.                                     <button style="background: aliceblue;color: #b3b3b3;" class="getprice-2 btn ds-btn hide">{% trans from "FrontBundle" %}Get Price{% endtrans %} <i class="fas fa-check"></i></button>
  416.                                 </div>
  417.                             </div>
  418.                             <div class="col-12">
  419.                                 <div class="domain-list price-list hide mb-30 text-center">
  420.                                     <ul>
  421.                                         <li><i class="far fa-check-circle"></i> <span></span>Mad/{% trans from "FrontBundle" %}Person Per month(Monthly){% endtrans %} </li>
  422.                                         <li><i class="far fa-check-circle"></i> <span></span>Mad/{% trans from "FrontBundle" %}Person Per month(Yearly){% endtrans %}</li>
  423.                                     </ul>
  424.                                 </div>
  425.                             </div>
  426.                             <div class="mt-50 col-12">
  427.                                 <div class="domain-search moreinfo hide">
  428.                                     <input required="" name="email" type="email" placeholder="{% trans from "FrontBundle" %}Your email to send you more details about pricing{% endtrans %}">
  429.                                     <button type="submit" class=" btn ds-btn">{% trans from "FrontBundle" %}More info{% endtrans %} <i class="fas fa-info"></i></button>
  431.                                 </div>
  432.                             </div>
  433.                             <div class="col-12">
  434.                                 <div class="domain-list mb-30 text-center">
  435.                                     {#<ul>
  436.                                         <li><i class="far fa-check-circle"></i> 70MAD / {% trans from "FrontBundle" %}Person{% endtrans %}</li>
  437.                                         <li><i class="far fa-check-circle"></i> 60MAD / {% trans from "FrontBundle" %}Person{% endtrans %}</li>
  438.                                         <li><i class="far fa-check-circle"></i> 50MAD / {% trans from "FrontBundle" %}Person{% endtrans %}</li>
  439.                                     </ul>#}
  440.                                 </div>
  441.                                 <p class=" text-center ">{% trans from "FrontBundle" %}Plus the cost of putting the service online.{% endtrans %}</p>
  442.                             </div>
  443.                         </form>
  444.                     </div>
  445.                 </div>
  446.             </div>
  447.         </section>
  448.         <!-- search-area-end -->
  449.         <!-- get-started-area -->
  450.         <section class="getstarted-area gstarted-bg pt-145" data-background="{{asset('site/img/bg/world_wide_bg.jpg')}}">
  451.             <div class="container">
  452.                 <div class="row justify-content-center">
  453.                     <div class="col-xl-6 col-lg-8">
  454.                         <div class="section-title white-title text-center mb-35">
  455.                             <h2>{% trans from "FrontBundle" %}Connected System{% endtrans %}</h2>
  456.                             <p>{% trans from "FrontBundle" %}The complete and intuitive control access system and HR management tools, online{% endtrans %}</p>
  457.                         </div>
  458.                         <div class="getstarted-btn text-center">
  459.                             <a href="#" class="btn">{% trans from "FrontBundle" %}Get Started Now{% endtrans %}</a>
  460.                         </div>
  461.                     </div>
  462.                 </div>
  463.             </div>
  464.         </section>
  465.         <!-- get-started-area-end -->
  466.         <!-- offer-area -->
  467.         <section class="offer-area">
  468.             <div class="container">
  469.                 <div class="row justify-content-center">
  470.                     <div class="col-xl-5 col-md-6">
  471.                         <div class="offer-box text-center mb-30">
  472.                             <div class="offer-head mb-20">
  473.                                 <h3>{% trans from "FrontBundle" %}Request quote{% endtrans %}</h3>
  474.                                 <p>{% trans from "FrontBundle" %}We will help you evaluate your needs and discuss best pricing.{% endtrans %}</p>
  475.                             </div>
  476.                             <div class="offer-domain mb-25">
  477.                                 <img style="width: 90px;" src="{{asset('site/quote-request.png')}}" alt="img">
  478.                             </div>
  479.                             {#                            <span class="offer-price">Request quote </span>#}
  480.                             <div class="offer-btn">
  481.                                 <a href="{{path('contact',{'quote':'Request-quote'})}}" class="btn">{% trans from "FrontBundle" %}Send request{% endtrans %}</a>
  482.                             </div>
  483.                         </div>
  484.                     </div>
  485.                     <div class="col-xl-5 col-md-6">
  486.                         <div class="question-box text-center mb-30">
  487.                             <div class="offer-head mb-15">
  488.                                 <h3>{% trans from "FrontBundle" %}Have questions?{% endtrans %}</h3>
  489.                                 <p>{% trans from "FrontBundle" %}More informations, or you have any questions, feel free to contact us{% endtrans %}</p>
  490.                             </div>
  491.                             <div class="qbox-icon mb-30">
  492.                                 <img style="padding-bottom: 8px;padding-top: 9px;" src="{{asset('site/img/icon/q_icon.png')}}" alt="icon">
  493.                             </div>
  494.                             <div class="offer-btn">
  495.                                 <a href="#" class="btn">+212.6.60.38.15.35</a>
  496.                             </div>
  497.                         </div>
  498.                     </div>
  499.                 </div>
  500.             </div>
  501.         </section>
  502.         <!-- offer-area-end -->
  503.         <!-- cta-area -->
  504.         <section class="cta-area cta-bg pt-95 pb-95" data-background="{{asset('site/img/bg/cta_bg.jpg')}}">
  505.             <div class="container">
  506.                 <div class="row align-items-center">
  507.                     <div class="col-lg-8">
  508.                         <div class="cta-content">
  509.                             <h2>{% trans from "FrontBundle" %}Can't find what you're looking for ?{% endtrans %}</h2>
  510.                             <p>{% trans from "FrontBundle" %}We are here to help you, contact our support team. Your account manager will contact you in order to settle the collaboration.{% endtrans %}</p>
  511.                         </div>
  512.                     </div>
  513.                     <div class="col-lg-4">
  514.                         <div class="cta-btn text-right">
  515.                             <a href="{{path('contact')}}" class="btn">{% trans from "FrontBundle" %}Contact us{% endtrans %}</a>
  516.                         </div>
  517.                     </div>
  518.                 </div>
  519.             </div>
  520.         </section>
  521.         <!-- cta-area-end -->
  522.         <!-- END: Content-->
  523.     {% endblock %}
  524.     {% block javascripts %}
  525.         <!-- BEGIN Vendor JS-->
  527.         <script src="{{asset('site/js/vendor/jquery-1.12.4.min.js') }}"></script>
  528.         <script src="{{asset('site/js/popper.min.js') }}"></script>
  529.         <script src="{{asset('site/js/bootstrap.min.js') }}"></script>
  530.         <script src="{{asset('site/js/isotope.pkgd.min.js') }}"></script>
  531.         <script src="{{asset('site/js/slick.min.js') }}"></script>
  532.         <script src="{{asset('site/js/jquery.meanmenu.min.js') }}"></script>
  533.         <script src="{{asset('site/js/ajax-form.js') }}"></script>
  534.         <script src="{{asset('site/js/wow.min.js') }}"></script>
  535.         <script src="{{asset('site/js/jquery.nice-select.min.js') }}"></script>
  536.         <script src="{{asset('site/js/owl.carousel.min.js') }}"></script>
  537.         <script src="{{asset('site/js/jquery.scrollUp.min.js') }}"></script>
  538.         <script src="{{asset('site/js/imagesloaded.pkgd.min.js') }}"></script>
  539.         <script src="{{asset('site/js/jquery.magnific-popup.min.js') }}"></script>
  540.         <script src="{{asset('site/js/plugins.js') }}"></script>
  541.         <script src="{{asset('site/js/main.js') }}"></script> 
  542.         <script>
  543.             $(document).ready(function () {
  544.                 $(".getprice-1, .getprice-2").click(function () {
  545.                     var persons = parseInt($(this).closest(".domain-search").find('input').val());
  546.                     var prix_annee;
  547.                     var prix_mois;
  549.                     if (persons >= 5 && persons <= 20) {
  550.                         var prix_mois = 70;
  551.                         var prix_annee = 59;
  552.                     }
  553.                     if (persons >= 21 && persons <= 50) {
  554.                         var prix_mois = 60;
  555.                         var prix_annee = 50;
  556.                     }
  557.                     if (persons >= 50) {
  558.                         var prix_mois = 50;
  559.                         var prix_annee = 42;
  560.                     }
  561.                     if (persons >= 5) {
  562.                         $(this).hide();
  563.                         $("#prices").val(prix_mois + "," + prix_annee);
  564.                         $(".getprice-2").show("slow");
  565.                         $(".price-list").show("slow");
  566.                         $(".moreinfo").show("slow");
  567.                         $(".price-list span:eq(0)").append(prix_mois)
  568.                         $(".price-list span:eq(1)").append(prix_annee)
  570.             {#                  calcul ajout      #}
  572.                             $(".price-list span:eq(0)").html('')
  573.                             $(".price-list span:eq(1)").html('')
  574.                             $(".price-list span:eq(0)").append(prix_mois)
  575.                             $(".price-list span:eq(1)").append(prix_annee)
  576.                             return false;
  577.                         }
  578.                     });
  579.                 });
  580.         </script> 
  581.         <!-- use for map style --> 
  582.         <!-- END: Page JS-->
  583.     {% endblock %}