templates/site/pricing.html.twig line 1

Open in your IDE?
  1. {% extends 'site/base.html.twig' %}
  2. {% block pricing_menu_active 'active' %}
  3.     {% block meta %}
  4.         <title>{% trans from "FrontBundle" %}Access Control technologies{% endtrans %}</title>
  5.         <meta name="description" content="{% trans from "FrontBundle" %}Platform Management system of access control technologies{% 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" %}en/pricing{% elseif app.request.locale == "fr" %}fr/pricing{% endif %}">
  9.         <link rel="alternate" hreflang="en" href="https://actech.ma/en/pricing">
  10.         <link rel="alternate" hreflang="fr" href="https://actech.ma/fr/pricing"/> 
  11.     {% endblock %}
  12.     {% block stylesheets %}
  13.         <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/vendors/css/vendors.min.css') }}">
  14.         <link rel="stylesheet" href="{{ asset('site/css/bootstrap.min.css') }}">
  15.         <link rel="stylesheet" href="{{ asset('site/css/animate.min.css') }}">
  16.         <link rel="stylesheet" href="{{ asset('site/css/magnific-popup.css') }}">
  17.         <link rel="stylesheet" href="{{ asset('site/css/fontawesome-all.min.css') }}">
  18.         <link rel="stylesheet" href="{{ asset('site/css/owl.carousel.min.css') }}">
  19.         <link rel="stylesheet" href="{{ asset('site/css/nice-select.css') }}">
  20.         <link rel="stylesheet" href="{{ asset('site/css/meanmenu.css') }}">
  21.         <link rel="stylesheet" href="{{ asset('site/css/slick.css') }}">
  22.         <link rel="stylesheet" href="{{ asset('site/css/default.css') }}">
  23.         <link rel="stylesheet" href="{{ asset('site/css/style.css') }}">
  24.         <link rel="stylesheet" href="{{ asset('site/css/responsive.css') }}">
  25.     {% endblock %}
  26.     {% block content %}
  28.         <!-- START: Content-->
  29.         <!-- breadcrumb-area -->
  30.         <section class="breadcrumb-area d-flex align-items-center breadcrumb-bg" data-background="{{asset('site/img/bg/breadcrumb_bg.png')}}">
  31.             <div class="container">
  32.                 <div class="row">
  33.                     <div class="col-lg-10">
  34.                         <div class="breadcrumb-wrap">
  35.                             <h2>{% trans from "FrontBundle" %}Actech Pricing{% endtrans %}</h2>
  36.                             <p>{% trans from "FrontBundle" %}Explore the plans of our complete and intuitive control access solution with the best prices.{% endtrans %}</p>
  37.                         </div>
  38.                     </div>
  39.                 </div>
  40.             </div>
  41.         </section>
  42.         <!-- breadcrumb-area-end -->
  43.         <!-- s-hosting-plan -->
  44.         <section class="pricing-columns pricing-section pt-145 pb-120">
  45.             <div class="container">
  46.                 <div class="row justify-content-center">
  47.                     <div class="col-xl-6 col-lg-8">
  48.                         <div class="section-title text-center mb-65">
  49.                             <h2>{% trans from "FrontBundle" %}Access control packs{% endtrans %}</h2>
  50.                             <p>{% trans from "FrontBundle" %}Pricing packs adapted with the project of your company{% endtrans %}</p>
  51.                         </div>
  52.                     </div>
  53.                 </div>
  54.                 <div class="row justify-content-center">
  55.                     <div class="col-lg-6">
  56.                         <div class="shosting-plan-toggle mb-30 text-center">
  57.                             <label class="toggler toggler--is-active" id="filt-monthly">{% trans from "FrontBundle" %}Monthly Plans{% endtrans %}</label>
  58.                             <div class="toggle">
  59.                                 <input type="checkbox" id="switcher" class="check">
  60.                                 <b class="b switch"></b>
  61.                             </div>
  62.                             <label class="toggler" id="filt-yearly">{% trans from "FrontBundle" %}Yearly Plans{% endtrans %}</label>
  63.                         </div>
  64.                     </div>
  65.                 </div>
  66.                 <div id="monthly" class="wrapper-full hide">
  67.                     <div class="row">
  69.                         <div class="col-lg-4 col-md-6">
  70.                             <div class="single-hplan text-center mb-30">
  71.                                 <div class="hplan-head">
  72.                                     <span>{% trans from "FrontBundle" %}Small business Plan{% endtrans %}</span>
  73.                                     <h3>59MAD <small>/ {% trans from "FrontBundle" %}Person{% endtrans %}</small></h3>
  74.                                 </div>
  75.                                 <div class="hplan-body mb-40">
  76.                                     <p>{% trans from "FrontBundle" %}Get pricing online of our solution adapt to your business needs.{% endtrans %}</p>
  77.                                     <span>{% trans from "FrontBundle" %}From{% endtrans %} 5 {% trans from "FrontBundle" %}to{% endtrans %} 20 {% trans from "FrontBundle" %}Persons{% endtrans %}</span>
  78.                                     <div class="hplan-icon">
  79.                                     <img width="70" src="{{asset('images/site/homepage/a-lheure.png')}}" alt="icon">
  80.                                     </div>
  81.                                 </div>
  82.                                 <div class="hplan-btn">
  83.                                     <a href="#" class="btn">{% trans from "FrontBundle" %}Book Yearly Plan{% endtrans %}</a>
  84.                                 </div>
  85.                             </div>
  86.                         </div>
  87.                         <div class="col-lg-4 col-md-6">
  88.                             <div class="single-hplan active text-center mb-30">
  89.                                 <div class="hplan-head">
  90.                                     <span>{% trans from "FrontBundle" %}Big business Plan{% endtrans %}</span>
  91.                                     <h3>42MAD <small>/ {% trans from "FrontBundle" %}Person{% endtrans %}</small></h3>
  92.                                 </div>
  93.                                 <div class="hplan-body mb-40">
  94.                                     <p>{% trans from "FrontBundle" %}Get pricing online of our solution adapt to your business needs.{% endtrans %}</p>
  95.                                     <span>{% trans from "FrontBundle" %}Start from{% endtrans %} 50 {% trans from "FrontBundle" %}Persons{% endtrans %}</span>
  96.                                     <div class="hplan-icon">
  97.                                     <img width="70" src="{{asset('images/site/homepage/a-lheure.png')}}" alt="icon">
  98.                                     </div>
  99.                                 </div>
  100.                                 <div class="hplan-btn">
  101.                                     <a href="#" class="btn">{% trans from "FrontBundle" %}Book Yearly Plan{% endtrans %}</a>
  102.                                 </div>
  103.                             </div>
  104.                         </div>
  105.                         <div class="col-lg-4 col-md-6">
  106.                             <div class="single-hplan text-center mb-30">
  107.                                 <div class="hplan-head">
  108.                                     <span>{% trans from "FrontBundle" %}Medium business Plan{% endtrans %}</span>
  109.                                     <h3>50MAD <small>/ {% trans from "FrontBundle" %}Person{% endtrans %}</small></h3>
  110.                                 </div>
  111.                                 <div class="hplan-body mb-40">
  112.                                     <p>{% trans from "FrontBundle" %}Get pricing online of our solution adapt to your business needs.{% endtrans %}</p>
  113.                                     <span>{% trans from "FrontBundle" %}From{% endtrans %} 21 {% trans from "FrontBundle" %}to{% endtrans %} 50 {% trans from "FrontBundle" %}Persons{% endtrans %}</span>
  114.                                     <div class="hplan-icon">
  115.                                     <img width="70" src="{{asset('images/site/homepage/a-lheure.png')}}" alt="icon">
  116.                                     </div>
  117.                                 </div>
  118.                                 <div class="hplan-btn">
  119.                                     <a href="#" class="btn">{% trans from "FrontBundle" %}Book Yearly Plan{% endtrans %}</a>
  120.                                 </div>
  121.                             </div>
  122.                         </div>
  123.                     </div>
  124.                 </div>
  125.                 <div id="yearly" class="wrapper-full">
  126.                     <div class="row">
  127.                         <div class="col-lg-4 col-md-6">
  128.                             <div class="single-hplan text-center mb-30">
  129.                                 <div class="hplan-head">
  130.                                     <span>{% trans from "FrontBundle" %}Small business Plan{% endtrans %}</span>
  131.                                     <h3>70MAD <small>/ {% trans from "FrontBundle" %}Person{% endtrans %}</small></h3>
  132.                                 </div>
  133.                                 <div class="hplan-body mb-40">
  134.                                     <p>{% trans from "FrontBundle" %}Get pricing online of our solution adapt to your business needs.{% endtrans %}</p>
  135.                                     <span>{% trans from "FrontBundle" %}From{% endtrans %} 5 {% trans from "FrontBundle" %}to{% endtrans %} 20 {% trans from "FrontBundle" %}Persons{% endtrans %}</span>
  136.                                     <div class="hplan-icon">
  137.                                     <img width="70" src="{{asset('images/site/homepage/a-lheure.png')}}" alt="icon">
  138.                                     </div>
  139.                                 </div>
  140.                                 <div class="hplan-btn">
  141.                                     <a href="#" class="btn">{% trans from "FrontBundle" %}Book Monthly Plan{% endtrans %}</a>
  142.                                 </div>
  143.                             </div>
  144.                         </div>
  145.                         <div class="col-lg-4 col-md-6">
  146.                             <div class="single-hplan active text-center mb-30">
  147.                                 <div class="hplan-head">
  148.                                     <span>{% trans from "FrontBundle" %}Big business Plan{% endtrans %}</span>
  149.                                     <h3>50MAD <small>/ {% trans from "FrontBundle" %}Person{% endtrans %}</small></h3>
  150.                                 </div>
  151.                                 <div class="hplan-body mb-40">
  152.                                     <p>{% trans from "FrontBundle" %}Get pricing online of our solution adapt to your business needs.{% endtrans %}</p>
  153.                                     <span>{% trans from "FrontBundle" %}Start from{% endtrans %} 50 {% trans from "FrontBundle" %}Persons{% endtrans %}</span>
  154.                                     <div class="hplan-icon">
  155.                                     <img width="70" src="{{asset('images/site/homepage/a-lheure.png')}}" alt="icon">
  156.                                     </div>
  157.                                 </div>
  158.                                 <div class="hplan-btn">
  159.                                     <a href="#" class="btn">{% trans from "FrontBundle" %}Book Monthly Plan{% endtrans %}</a>
  160.                                 </div>
  161.                             </div>
  162.                         </div>
  163.                         <div class="col-lg-4 col-md-6">
  164.                             <div class="single-hplan text-center mb-30">
  165.                                 <div class="hplan-head">
  166.                                     <span>{% trans from "FrontBundle" %}Medium business Plan{% endtrans %}</span>
  167.                                     <h3>60MAD <small>/ {% trans from "FrontBundle" %}Person{% endtrans %}</small></h3>
  168.                                 </div>
  169.                                 <div class="hplan-body mb-40">
  170.                                     <p>{% trans from "FrontBundle" %}Get pricing online of our solution adapt to your business needs.{% endtrans %}</p>
  171.                                     <span>{% trans from "FrontBundle" %}From{% endtrans %} 21 {% trans from "FrontBundle" %}to{% endtrans %} 50 {% trans from "FrontBundle" %}Persons{% endtrans %}</span>
  172.                                     <div class="hplan-icon">
  173.                                     <img width="70" src="{{asset('images/site/homepage/a-lheure.png')}}" alt="icon">
  174.                                     </div>
  175.                                 </div>
  176.                                 <div class="hplan-btn">
  177.                                     <a href="#" class="btn">{% trans from "FrontBundle" %}Book Monthly Plan{% endtrans %}</a>
  178.                                 </div>
  179.                             </div>
  180.                         </div>
  181.                     </div>
  182.                 </div>
  183.             </div>
  184.         </section>
  185.         <!-- s-hosting-plan-end -->
  186.         <!-- search-area -->
  187.         <section class="search-area gray-bg pt-145 pb-140">
  188.             <div class="container">
  189.                 <div class="row justify-content-center">
  190.                     <div class="col-xl-6 col-lg-8">
  191.                         <div class="section-title search-title text-center mb-40">
  192.                             <h2> {% trans from "FrontBundle" %}Estimate pricing{% endtrans %}</h2>
  193.                             <p>{% trans from "FrontBundle" %}Tape the number of employees in your company and get the price of our solution.{% endtrans %}</p>
  194.                         </div>
  195.                     </div>
  196.                 </div>
  197.                 <div class="row justify-content-center">
  198.                     <div class="col-xl-8 col-lg-10">
  199.                         <form method="POST" action="{{path('more_info')}}" class="p-relative">
  200.                             <div class="col-12">
  201.                                 <div class="domain-search">
  202.                                     <input required="" name="employees" type="number" min="5" placeholder="{% trans from "FrontBundle" %}Enter the numbers of employees in your company{% endtrans %}">
  203.                                     <input hidden="" id="prices" name="prices" type="text" placeholder="{% trans from "FrontBundle" %}per month,per year{% endtrans %}">
  204.                                     <button  class="getprice-1 btn ds-btn">{% trans from "FrontBundle" %}Get Price{% endtrans %} <i class="fas fa-search"></i></button>
  205.                                     <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>
  206.                                 </div>
  207.                             </div>
  208.                             <div class="col-12">
  209.                                 <div class="domain-list price-list hide mb-30 text-center">
  210.                                     <ul>
  211.                                         <li><i class="far fa-check-circle"></i> <span></span>Mad/{% trans from "FrontBundle" %}Person Per month(Monthly){% endtrans %} </li>
  212.                                         <li><i class="far fa-check-circle"></i> <span></span>Mad/{% trans from "FrontBundle" %}Person Per month(Yearly){% endtrans %}</li>
  213.                                     </ul>
  214.                                 </div>
  215.                             </div>
  216.                             <div class="mt-50 col-12">
  217.                                 <div class="domain-search moreinfo hide">
  218.                                     <input required="" name="email" type="email" placeholder="{% trans from "FrontBundle" %}Your email to send you more details about pricing{% endtrans %}">
  219.                                     <button type="submit" class=" btn ds-btn">{% trans from "FrontBundle" %}More info{% endtrans %} <i class="fas fa-info"></i></button>
  221.                                 </div>
  222.                             </div>
  223.                             <div class="col-12">
  224.                                 <div class="domain-list mb-30 text-center">
  225.                                     <ul>
  226.                                         <li><i class="far fa-check-circle"></i> 70MAD / {% trans from "FrontBundle" %}Person{% endtrans %}</li>
  227.                                         <li><i class="far fa-check-circle"></i> 60MAD / {% trans from "FrontBundle" %}Person{% endtrans %}</li>
  228.                                         <li><i class="far fa-check-circle"></i> 50MAD / {% trans from "FrontBundle" %}Person{% endtrans %}</li>
  229.                                     </ul>
  230.                                 </div>
  231.                                 <p class=" text-center ">{% trans from "FrontBundle" %}Plus the cost of putting the service online.{% endtrans %}</p>
  232.                             </div>
  233.                         </form>
  234.                     </div>
  235.                 </div>
  236.             </div>
  237.         </section>
  238.         <!-- search-area-end -->
  239.         <!-- get-started-area -->
  240.         <section class="getstarted-area gstarted-bg pt-145" data-background="{{asset('site/img/bg/world_wide_bg.jpg')}}">
  241.             <div class="container">
  242.                 <div class="row justify-content-center">
  243.                     <div class="col-xl-6 col-lg-8">
  244.                         <div class="section-title white-title text-center mb-35">
  245.                             <h2>{% trans from "FrontBundle" %}Connected System{% endtrans %}</h2>
  246.                             <p>{% trans from "FrontBundle" %}The complete and intuitive control access system and HR management tools, online{% endtrans %}</p>
  247.                         </div>
  248.                         <div class="getstarted-btn text-center">
  249.                             <a href="#" class="btn">{% trans from "FrontBundle" %}Get Started Now{% endtrans %}</a>
  250.                         </div>
  251.                     </div>
  252.                 </div>
  253.             </div>
  254.         </section>
  255.         <!-- get-started-area-end -->
  256.         <!-- offer-area -->
  257.         <section class="offer-area">
  258.             <div class="container">
  259.                 <div class="row justify-content-center">
  260.                     <div class="col-xl-5 col-md-6">
  261.                         <div class="offer-box text-center mb-30">
  262.                             <div class="offer-head mb-20">
  263.                                 <h3>{% trans from "FrontBundle" %}Request quote{% endtrans %}</h3>
  264.                                 <p>{% trans from "FrontBundle" %}We will help you evaluate your needs and discuss best pricing.{% endtrans %}</p>
  265.                             </div>
  266.                             <div class="offer-domain mb-25">
  267.                                 <img style="width: 90px;" src="{{asset('site/quote-request.png')}}" alt="img">
  268.                             </div>
  269.                             {#                            <span class="offer-price">Request quote </span>#}
  270.                             <div class="offer-btn">
  271.                                 <a href="{{path('contact',{'quote':'Request-quote'})}}" class="btn">{% trans from "FrontBundle" %}Send request{% endtrans %}</a>
  272.                             </div>
  273.                         </div>
  274.                     </div>
  275.                     <div class="col-xl-5 col-md-6">
  276.                         <div class="question-box text-center mb-30">
  277.                             <div class="offer-head mb-15">
  278.                                 <h3>{% trans from "FrontBundle" %}Have questions?{% endtrans %}</h3>
  279.                                 <p>{% trans from "FrontBundle" %}More informations, or you have any questions, feel free to contact us{% endtrans %}</p>
  280.                             </div>
  281.                             <div class="qbox-icon mb-30">
  282.                                 <img style="padding-bottom: 8px;padding-top: 9px;" src="{{asset('site/img/icon/q_icon.png')}}" alt="icon">
  283.                             </div>
  284.                             <div class="offer-btn">
  285.                                 <a href="#" class="btn">+212.6.60.38.15.35</a>
  286.                             </div>
  287.                         </div>
  288.                     </div>
  289.                 </div>
  290.             </div>
  291.         </section>
  292.         <!-- offer-area-end -->
  293.         <!-- END: Content-->
  294.     {% endblock %}
  295.     {% block javascripts %}
  296.         <!-- BEGIN Vendor JS-->
  298.         <script src="{{asset('site/js/vendor/jquery-1.12.4.min.js') }}"></script>
  299.         <script src="{{asset('site/js/popper.min.js') }}"></script>
  300.         <script src="{{asset('site/js/bootstrap.min.js') }}"></script>
  301.         <script src="{{asset('site/js/isotope.pkgd.min.js') }}"></script>
  302.         <script src="{{asset('site/js/slick.min.js') }}"></script>
  303.         <script src="{{asset('site/js/jquery.meanmenu.min.js') }}"></script>
  304.         <script src="{{asset('site/js/ajax-form.js') }}"></script>
  305.         <script src="{{asset('site/js/wow.min.js') }}"></script>
  306.         <script src="{{asset('site/js/jquery.nice-select.min.js') }}"></script>
  307.         <script src="{{asset('site/js/owl.carousel.min.js') }}"></script>
  308.         <script src="{{asset('site/js/jquery.scrollUp.min.js') }}"></script>
  309.         <script src="{{asset('site/js/imagesloaded.pkgd.min.js') }}"></script>
  310.         <script src="{{asset('site/js/jquery.magnific-popup.min.js') }}"></script>
  311.         <script src="{{asset('site/js/plugins.js') }}"></script>
  312.         <script src="{{asset('site/js/main.js') }}"></script> 
  313.         <script>
  314.             $(document).ready(function () {
  315.                 $(".getprice-1, .getprice-2").click(function () {
  316.                     var persons = parseInt($(this).closest(".domain-search").find('input').val());
  317.                     var prix_annee;
  318.                     var prix_mois;
  320.                     if (persons >= 5 && persons <= 20) {
  321.                         var prix_mois = 70;
  322.                         var prix_annee = 59;
  323.                     }
  324.                     if (persons >= 21 && persons <= 50) {
  325.                         var prix_mois = 60;
  326.                         var prix_annee = 50;
  327.                     }
  328.                     if (persons >= 50) {
  329.                         var prix_mois = 50;
  330.                         var prix_annee = 42;
  331.                     }
  332.                     if (persons >= 5) {
  333.                         $(this).hide();
  334.                         $("#prices").val(prix_mois + "," + prix_annee);
  335.                         $(".getprice-2").show("slow");
  336.                         $(".price-list").show("slow");
  337.                         $(".moreinfo").show("slow");
  338.                         $(".price-list span:eq(0)").append(prix_mois)
  339.                         $(".price-list span:eq(1)").append(prix_annee)
  341.             {#                  calcul ajout      #}
  343.                             $(".price-list span:eq(0)").html('')
  344.                             $(".price-list span:eq(1)").html('')
  345.                             $(".price-list span:eq(0)").append(prix_mois)
  346.                             $(".price-list span:eq(1)").append(prix_annee)
  347.                             return false;
  348.                         }
  349.                     });
  350.                 });
  351.         </script> 
  352.         <!-- use for map style --> 
  353.         <!-- use for map style --> 
  354.         <!-- END: Page JS-->
  355.     {% endblock %}