templates/front/plan/index.html.twig line 1

  1. {% extends "front/base.html.twig" %}
  3. {% block title %} - Plan{% endblock %}
  6. {% block mainContent %}
  8.     <!-- =======================
  9.     Page Banner START -->
  10.     <section class="py-5 price-wrap">
  11.         <div class="container">
  12.             <div class="row g-4 position-relative mb-4">
  13.                 <!-- SVG decoration -->
  14.                 <figure class="position-absolute top-0 start-0 d-none d-sm-block">    
  15.                     <svg width="22px" height="22px" viewBox="0 0 22 22">
  16.                     <polygon class="fill-purple" points="22,8.3 13.7,8.3 13.7,0 8.3,0 8.3,8.3 0,8.3 0,13.7 8.3,13.7 8.3,22 13.7,22 13.7,13.7 22,13.7 "></polygon>
  17.                     </svg>
  18.                 </figure>
  19.         
  20.                 <!-- Title and Search -->
  21.                 <div class="col-lg-10 mx-auto text-center position-relative">
  22.                     <!-- SVG decoration -->
  23.                     <figure class="position-absolute top-50 end-0 translate-middle-y d-none d-md-block">
  24.                         <svg width="27px" height="27px">
  25.                             <path class="fill-orange" d="M13.122,5.946 L17.679,-0.001 L17.404,7.528 L24.661,5.946 L19.683,11.533 L26.244,15.056 L18.891,16.089 L21.686,23.068 L15.400,19.062 L13.122,26.232 L10.843,19.062 L4.557,23.068 L7.352,16.089 L-0.000,15.056 L6.561,11.533 L1.582,5.946 L8.839,7.528 L8.565,-0.001 L13.122,5.946 Z"></path>
  26.                         </svg>
  27.                     </figure>
  28.                     <!-- Title -->
  29.                     <h1>Affordable Pricing Packages</h1>
  30.                     <p class="mb-4 pb-1">Perceived end knowledge certainly day sweetness why cordially</p>
  32.                     <!-- Switch START -->
  33.                     <form class="d-flex align-items-center justify-content-center">
  34.                     <!-- Label -->
  35.                     <span class="h6 mb-0 fw-bold">Monthly</span>
  36.                     <!-- Switch -->
  37.                     <div class="form-check form-switch form-check-lg mx-3 mb-0">
  38.                         <input class="form-check-input mt-0 price-toggle" type="checkbox" id="flexSwitchCheckDefault">
  39.                     </div>
  40.                     <!-- Label -->
  41.                     <div class="position-relative">
  42.                         <span class="h6 mb-0 fw-bold">Yearly</span>
  43.                         <span class="badge bg-danger bg-opacity-10 text-danger ms-1 position-absolute top-0 start-100 translate-middle mt-n2 ms-2 ms-md-5">10% discount</span>
  44.                     </div>
  45.                     </form>
  46.                     <!-- Switch END -->
  47.                 </div>
  48.             </div>    
  49.             <!-- Pricing START -->
  50.             <div class="row g-4">
  52.                 {% for plan in plans %}
  53.                     
  54.                     <!-- Pricing item START -->
  55.                     <div class="col-md-6 col-xl-4">
  56.                         <div class="card border rounded-3 p-2 p-sm-4 h-100">
  57.                             <!-- Card Header -->
  58.                             <div class="card-header p-0">
  59.                                 <!-- Price and Info -->
  60.                                 <div class="d-flex justify-content-between align-items-center p-3 bg-light rounded-2">
  61.                                     <!-- Info -->
  62.                                     <div>
  63.                                         <h5 class="mb-0">{{ plan.label }}</h5>
  64.                                         {% if plan.isRecommended %}
  65.                                             <div class="badge bg-grad mb-0 rounded-pill">Recommended</div>
  66.                                         {% endif %}
  67.                                     </div>
  68.                                     <!-- Price -->
  69.                                     <div>
  70.                                         <h4 class="text-success mb-0 plan-price" data-monthly-price="{{ plan.montant }} XAF" data-annual-price="{{ plan.montant }} XAF">{{ plan.montant }} XAF</h4>
  71.                                     </div>
  72.                                 </div>
  73.                             </div>
  75.                             <!-- Divider -->
  76.                             <div class="position-relative my-3 text-center">
  77.                                 <hr>
  78.                                 <p class="small position-absolute top-50 start-50 translate-middle bg-body px-3">All plans included</p>
  79.                             </div>
  81.                             <!-- Card Body -->
  82.                             <div class="card-body pt-0">
  83.                                 <ul class="list-unstyled mt-2 mb-0">
  84.                                     {% for item in abonnementItems %}
  85.                                         {% if item in plan.items %}
  86.                                             <li class="mb-3 h6 fw-light"><i class="bi bi-patch-check-fill text-success me-2"></i>{{ item.label }}</li>
  87.                                         {% else %}
  88.                                             <li class="mb-3 h6 fw-light"><i class="bi bi-x-octagon-fill text-danger me-2"></i>{{ item.label }}</li>
  89.                                         {% endif %}
  90.                                     {% endfor %}
  91.                                 </ul>
  92.                             </div>
  93.                             <!-- Card Footer -->
  94.                             <div class="card-footer text-center d-grid pb-0">
  95.                                 <a type="button" href="{{ url("app_front_payment_buy_plan", {slug: plan.slug}) }}" class="btn {{ plan.isRecommended ? 'btn-dark' : 'btn-light' }} btn-danger-soft-hover mb-0">Subscribe</a>
  96.                             </div>
  97.                         </div>
  98.                     </div>
  99.                     <!-- Pricing item END -->
  101.                 {% endfor %}
  102.                 
  103.             </div>    <!-- Row END -->
  104.             <!-- Pricing END -->
  105.         </div>
  106.     </section>
  107.     <!-- =======================
  108.     Page Banner END -->
  110. {% endblock %}