templates/showcase/_components/_pricing.html.twig line 1

Open in your IDE?
  1. {% trans_default_domain 'interfaces' %}
  2. <section class="pricing py-5">
  3.     <div class="container">
  4.         <div class="row">
  5.             <!-- Free Tier -->
  6.             <div class="col-lg-4">
  7.                 <div class="card mb-5 mb-lg-0">
  8.                     <div class="card-body">
  9.                         <h5 class="card-title text-muted text-uppercase text-center">Free</h5>
  10.                         <h6 class="card-price text-center">0€<span class="period">/month</span></h6>
  11.                         <hr>
  12.                         <ul class="fa-ul">
  13.                             <li><span class="fa-li"><i class="fas fa-check"></i></span>Single User</li>
  14.                             <li><span class="fa-li"><i class="fas fa-check"></i></span>5GB Storage</li>
  15.                             <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>
  16.                             <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>
  17.                             <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Unlimited Private Projects</li>
  18.                             <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Dedicated Phone Support</li>
  19.                             <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Free Subdomain</li>
  20.                             <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status Reports</li>
  21.                         </ul>
  22.                         <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a>
  23.                     </div>
  24.                 </div>
  25.             </div>
  26.             <!-- Plus Tier -->
  27.             <div class="col-lg-4">
  28.                 <div class="card mb-5 mb-lg-0">
  29.                     <div class="card-body">
  30.                         <h5 class="card-title text-muted text-uppercase text-center">Plus</h5>
  31.                         <h6 class="card-price text-center">9€<span class="period">/month</span></h6>
  32.                         <hr>
  33.                         <ul class="fa-ul">
  34.                             <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>5 Users</strong></li>
  35.                             <li><span class="fa-li"><i class="fas fa-check"></i></span>50GB Storage</li>
  36.                             <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>
  37.                             <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>
  38.                             <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Private Projects</li>
  39.                             <li><span class="fa-li"><i class="fas fa-check"></i></span>Dedicated Phone Support</li>
  40.                             <li><span class="fa-li"><i class="fas fa-check"></i></span>Free Subdomain</li>
  41.                             <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status Reports</li>
  42.                         </ul>
  43.                         <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a>
  44.                     </div>
  45.                 </div>
  46.             </div>
  47.             <!-- Pro Tier -->
  48.             <div class="col-lg-4">
  49.                 <div class="card">
  50.                     <div class="card-body">
  51.                         <h5 class="card-title text-muted text-uppercase text-center">Pro</h5>
  52.                         <h6 class="card-price text-center">49€<span class="period">/month</span></h6>
  53.                         <hr>
  54.                         <ul class="fa-ul">
  55.                             <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>Unlimited Users</strong></li>
  56.                             <li><span class="fa-li"><i class="fas fa-check"></i></span>150GB Storage</li>
  57.                             <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>
  58.                             <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>
  59.                             <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Private Projects</li>
  60.                             <li><span class="fa-li"><i class="fas fa-check"></i></span>Dedicated Phone Support</li>
  61.                             <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>Unlimited</strong> Free Subdomains</li>
  62.                             <li><span class="fa-li"><i class="fas fa-check"></i></span>Monthly Status Reports</li>
  63.                         </ul>
  64.                         <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a>
  65.                     </div>
  66.                 </div>
  67.             </div>
  68.         </div>
  69.     </div>
  70. </section>