templates/site/pricing.html.twig line 1

  1. {% extends "landing.html.twig" %}
  3. {% block body %}
  4.     <div id="page" class="page gr--whitesmoke inner-page-hero">
  5.     <div class="overflow-hidden post-118 page type-page status-publish hentry entry">
  6.         <div data-elementor-type="wp-page" data-elementor-id="118" class="elementor elementor-118">
  7.             <section id="pricing-1" class="pricing-section">
  8.                 <div class="container">
  9.                     <!-- SECTION TITLE -->
  10.                     <div class="row justify-content-center">
  11.                         <div class="col-md-10 col-lg-8">
  12.                             <div class="section-title mb-70">
  13.                                 <h2 class="s-52 w-700">Simple, Flexible Pricing</h2>
  14.                                 <!-- TOGGLE BUTTON -->
  15.                                 <div class="toggle-btn ext-toggle-btn toggle-btn-md mt-30">
  17.                                     <span class="toggler-txt">Billed monthly</span>
  18.                                     <label class="switch-wrap">
  19.                                         <input type="checkbox" id="checbox" onclick="check()">
  20.                                         <span class="switcher bg--grey switcher--theme">
  21.                                                 <span class="show-annual"></span>
  22.                                                 <span class="show-monthly"></span>
  23.                                             </span>
  24.                                     </label>
  26.                                     <span class="toggler-txt">Billed yearly</span>
  27.                                     <!-- Text -->
  28.                                     <p class="color--theme">Save up to 35% with yearly billing</p>
  29.                                 </div>
  31.                             </div>
  32.                         </div>
  33.                     </div> <!-- END SECTION TITLE -->
  35.                     <!-- PRICING TABLES -->
  36.                     <div class="pricing-1-wrapper ">
  37.                         <div class="row row-cols-1 row-cols-md-3">
  38.                             {% for plan in plans %}
  39.                                 <div class="col">
  40.                                     <div id="pt-1-2"
  41.                                          class="p-table pricing-1-table bg--white-100 block-shadow r-12">
  42.                                         <!-- TABLE HEADER -->
  43.                                         <div class="pricing-table-header">
  44.                                             <!-- Title -->
  45.                                             <h5 class="s-24">{{ plan.name }}</h5>
  46.                                             <!-- Price -->
  47.                                             <div class="price">
  49.                                                 <!-- Monthly Price -->
  50.                                                 <div class="price2" style="display: block;">
  51.                                                     <sup class="color--black">$</sup>
  52.                                                     <span class="color--black">{{ plan.amount }}</span>
  53.                                                     <sup class="validity color--grey">/Mois</sup>
  54.                                                 </div>
  56.                                                 <!-- Yearly Price -->
  57.                                                 <div class="price1" style="display: none;">
  58.                                                     <sup class="color--black">$</sup>
  59.                                                     <span class="color--black">{{ plan.amount * 12 }}</span>
  60.                                                     <sup class="validity color--grey">/An</sup>
  61.                                                     {% if true %}
  62.                                                         <div class="pricing-discount bg--yellow-400 color--black r-36">
  63.                                                             <h6 class="s-17">Economisez 30 %</h6>
  64.                                                         </div>
  65.                                                     {% endif %}
  66.                                                 </div>
  68.                                                 <!-- Text -->
  69.                                                 <p class="color--grey">For professionals getting started with
  70.                                                     smaller
  71.                                                     projects.</p>
  72.                                             </div> <!-- End Price -->
  74.                                             <!-- Button -->
  75.                                             <a href="#" class="pt-btn btn r-04 btn--theme hover--theme">Commencez
  76.                                                 gratuitement</a>
  78.                                             <!-- Text -->
  79.                                             <p class="p-sm btn-txt text-center color--grey">
  80.                                                 Profitez de 15 jours d'essaie gratuit
  81.                                             </p>
  83.                                         </div> <!-- END TABLE HEADER -->
  84.                                         <!-- PRICING FEATURES -->
  85.                                         <ul class="pricing-features color--black ico-10 ico--green mt-25">
  86.                                             {% for offer in plan.options %}
  87.                                                 <li class="">
  88.                                                     <p><span class="flaticon-check"></span> {{ offer.name }}</p>
  89.                                                 </li>
  90.                                             {% endfor %}
  91.                                         </ul>
  92.                                     </div>
  93.                                 </div>
  94.                             {% endfor %}
  95.                         </div>
  96.                     </div> <!-- PRICING TABLES -->
  99.                 </div> <!-- End container -->
  100.             </section>
  102.             {{ render(controller('App\\Controller\\SiteController::partnairs')) }}
  104.             <section
  105.                     class="elementor-section elementor-top-section elementor-element elementor-element-6c56aed elementor-section-full_width elementor-section-height-default elementor-section-height-default"
  106.                     data-id="6c56aed" data-element_type="section" id="compare-plans">
  107.                 <div class="elementor-container elementor-column-gap-no">
  108.                     <div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6ac3489"
  109.                          data-id="6ac3489" data-element_type="column">
  110.                         <div class="elementor-widget-wrap elementor-element-populated">
  111.                             <div class="elementor-element elementor-element-db22b95 elementor-widget elementor-widget-martex_compare_table"
  112.                                  data-id="db22b95" data-element_type="widget"
  113.                                  data-widget_type="martex_compare_table.default">
  114.                                 <div class="elementor-widget-container">
  115.                                     <section id="comp-table" class="pt-100 pb-60 pricing-section division">
  116.                                         <div class="container">
  118.                                             <div class="row justify-content-center">
  119.                                                 <div class="col-md-10 col-lg-9">
  120.                                                     <div class="section-title mb-70">
  121.                                                         <!-- Title -->
  122.                                                         <h2 class="s-52 w-700">Comparez nos Plans</h2>
  123.                                                         <!-- Text -->
  124.                                                         <p class="p-xl">Liste complète des fonctionnalités disponibles
  125.                                                             dans nos plans tarifaires</p>
  126.                                                     </div>
  127.                                                 </div>
  128.                                             </div>
  130.                                             <!-- PRICING COMPARE -->
  131.                                             <div class="comp-table">
  132.                                                 <div class="row">
  133.                                                     <div class="col">
  134.                                                         <div class="table-responsive mb-50">
  135.                                                             <table class="table text-center">
  137.                                                                 <thead>
  138.                                                                 <tr>
  139.                                                                     <th></th>
  140.                                                                     {% for plan in plans %}
  141.                                                                         <th>{{ plan.name }}</th>
  142.                                                                     {% endfor %}
  143.                                                                 </tr>
  144.                                                                 </thead>
  146.                                                                 <tbody>
  147.                                                                 {% for option in options %}
  148.                                                                     <tr>
  149.                                                                         <th scope="row" class="text-start">
  150.                                                                             {{ option.name }}
  151.                                                                         </th>
  152.                                                                         {% for plan in plans %}
  153.                                                                             {% if plan.hasOption(option) %}
  154.                                                                                 <td class="ico-20 color--theme">
  155.                                                                                     <span class="flaticon-check"></span>
  156.                                                                                 </td>
  157.                                                                             {% else %}
  158.                                                                                 <td class="ico-20 disabled-option">
  159.                                                                                     <span class="flaticon-cancel"></span>
  160.                                                                                 </td>
  161.                                                                             {% endif %}
  162.                                                                         {% endfor %}
  164.                                                                     </tr>
  165.                                                                 {% endfor %}
  166.                                                                 </tbody>
  168.                                                             </table>
  169.                                                         </div> <!-- End Table -->
  171.                                                     </div>
  172.                                                 </div>
  173.                                             </div> <!-- END PRICING COMPARE -->
  175.                                         </div> <!-- End container -->
  176.                                     </section> <!-- END PRICING COMPARE -->
  177.                                 </div>
  178.                             </div>
  179.                         </div>
  180.                     </div>
  181.                 </div>
  182.             </section>
  183.         </div>
  184.     </div>
  185.     <section
  186.             class="elementor-section elementor-top-section elementor-element elementor-element-2451c11b elementor-section-full_width gr--whitesmoke elementor-section-height-default elementor-section-height-default"
  187.             data-id="2451c11b" data-element_type="section">
  188.         <div class="elementor-container elementor-column-gap-extended">
  189.             <div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7582cdfd"
  190.                  data-id="7582cdfd" data-element_type="column">
  191.                 <div class="elementor-widget-wrap elementor-element-populated">
  192.                     <div class="elementor-element elementor-element-3f4c047a elementor-widget elementor-widget-martex_faq"
  193.                          data-id="3f4c047a" data-element_type="widget" data-widget_type="martex_faq.default">
  194.                         <div class="elementor-widget-container">
  197.                             {{ render(controller('App\\Controller\\SiteController::faq')) }}
  198.                         </div>
  199.                     </div>
  200.                 </div>
  201.             </div>
  202.         </div>
  203.     </section>
  204.     <div class="elementor-container elementor-column-gap-extended text-center">
  205.         <div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-63381c97"
  206.              data-id="63381c97" data-element_type="column">
  207.             <div class="elementor-widget-wrap elementor-element-populated">
  208.                 <section
  209.                         class="elementor-section elementor-inner-section elementor-element elementor-element-31598ec3 elementor-section-boxed elementor-section-height-default elementor-section-height-default"
  210.                         data-id="31598ec3" data-element_type="section"
  211.                         data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
  212.                     <div class="elementor-container elementor-column-gap-default">
  213.                         <div class="elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-92bb850"
  214.                              data-id="92bb850" data-element_type="column">
  215.                             <div class="elementor-widget-wrap elementor-element-populated">
  216.                                 <div class="txt-block elementor-element elementor-element-cdd143f elementor-widget elementor-widget-content-text"
  217.                                      data-id="cdd143f" data-element_type="widget"
  218.                                      data-widget_type="content-text.default">
  219.                                     <div class="elementor-widget-container">
  220.                                         <h2 class="title-element s-46">Essayez-le, c'est gratuit!</h2>
  221.                                         <p class="subtitle-element p-xl">Ajoutez le nom de votre section ici</p>
  222.                                     </div>
  223.                                 </div>
  224.                                 <div class="elementor-element elementor-element-2398e8db elementor-widget elementor-widget-buttons"
  225.                                      data-id="2398e8db" data-element_type="widget" data-widget_type="buttons.default">
  226.                                     <div class="elementor-widget-container">
  227.                                         <div class="button-alignment">
  229.                                             <div class="btns-group">
  230.                                                 <a href="https://jthemes.net/themes/wp/martex/pricing-page-1"
  231.                                                    class="btn icon-20 r-04 btn--theme hover--theme">Démarrez-vous -
  232.                                                     c'est
  233.                                                     gratuit
  234.                                                 </a>
  235.                                             </div>
  237.                                             <p class="p-sm btn-txt ico-15 o-85">
  238.                                                 <span class="flaticon-check"></span> Gratuit pendant 14 jours, pas de
  239.                                                 carte de crédit
  240.                                                 requis.
  241.                                             </p>
  243.                                         </div>
  244.                                     </div>
  245.                                 </div>
  246.                             </div>
  247.                         </div>
  248.                     </div>
  249.                 </section>
  250.             </div>
  251.         </div>
  252.     </div>
  253. {% endblock %}