158 lines
11 KiB
HTML
158 lines
11 KiB
HTML
{% extends 'base.html' %}
|
|
{% load i18n %}
|
|
{% load static %}
|
|
{% block content %}
|
|
<div class="row">
|
|
<h2 class="mb-7">{{ _("Pricing") }}</h2>
|
|
<div class="row">
|
|
<div class="col-xl-12 col-xxl-9 mb-1">
|
|
<div class="tabs mb-7">
|
|
<div class="tab-content" id="pills-tabContent">
|
|
<div class="tab-pane fade show active"
|
|
id="pills-month"
|
|
role="tabpanel"
|
|
aria-labelledby="pills-month-tab">
|
|
<div class="row g-3">
|
|
{% for plan in plans %}
|
|
<div class="col-12 col-md-6 col-lg-12 col-xl-6">
|
|
<div class="h-100">
|
|
<input class="card-form-check-input d-none"
|
|
type="radio"
|
|
name="pricingMonthly"
|
|
id="subscription_{{ plan.id }}"
|
|
checked="checked" />
|
|
<div class="position-relative h-100">
|
|
<label class="stretched-link" for="subscription_{{ plan.id }}"></label>
|
|
<div class="card h-100 overflow-hidden cursor-pointer">
|
|
<div class="bg-holder d-dark-none"
|
|
style="background-image:url({% static 'images/bg/8.png' %});
|
|
background-position:left bottom;
|
|
background-size:auto;
|
|
bottom:-1px"></div>
|
|
<div class="bg-holder d-light-none"
|
|
style="background-image:url({% static 'images/bg/8-dark.png' %});
|
|
background-position:left bottom;
|
|
background-size:auto;
|
|
bottom:-1px"></div>
|
|
<div class="card-body d-flex flex-column justify-content-between position-relative">
|
|
<div class="d-flex justify-content-between">
|
|
<div class="mb-5 mb-md-0 mb-lg-5 me-3">
|
|
<div class="d-sm-flex align-items-center mb-3">
|
|
<h3 class="mb-0">{{ plan.name }}</h3>
|
|
</div>
|
|
<p class="fs-9 text-body-tertiary">
|
|
For individuals who are interested
|
|
<br>
|
|
in giving it a shot first.
|
|
</p>
|
|
<div class="d-flex align-items-end mb-md-5 mb-lg-0">
|
|
<h4 class="fw-bolder me-1">
|
|
{{ plan.price|floatformat }} <span class="icon-saudi_riyal"></span>
|
|
</h4>
|
|
<h5 class="fs-9 fw-normal text-body-tertiary ms-1">{{ _("Per month") }}</h5>
|
|
</div>
|
|
</div>
|
|
<img class="d-dark-none opacity-50"
|
|
src="{% static 'images/spot-illustrations/dark_21.png' %}"
|
|
width="auto"
|
|
height="120"
|
|
alt="" />
|
|
<img class="d-light-none opacity-50"
|
|
src="{% static 'images/spot-illustrations/21.png' %}"
|
|
width="auto"
|
|
height="120"
|
|
alt="" />
|
|
</div>
|
|
<div class="row flex-1 justify-content-end">
|
|
<div class="col-sm-8 col-md-12">
|
|
<div class="d-sm-flex d-md-block d-lg-flex justify-content-end align-items-end h-100">
|
|
<ul class="list-unstyled mb-0 border-start-sm border-start-md-0 border-start-lg ps-sm-5 ps-md-0 ps-lg-5 border-translucent">
|
|
<li class="d-flex align-items-center">
|
|
<span class="uil uil-check-circle text-success me-2"></span>
|
|
<span class="text-body-tertiary fw-semibold">{{ _("Max Users") }}: {{ plan.max_users }}</span>
|
|
</li>
|
|
<li class="d-flex align-items-center">
|
|
<span class="uil uil-check-circle text-success me-2"></span>
|
|
<span class="text-body-tertiary fw-semibold">{{ _("Inventory Size") }}: {{ plan.max_inventory_size }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="d-grid d-sm-flex">
|
|
<button class="btn btn-lg btn-phoenix-primary d-sm-flex align-items-center mb-3 mb-sm-0 me-sm-3 px-sm-8">
|
|
{{ _("Subscribe") }}
|
|
{{ _("Now") }}<span class="fas fa-angle-right ms-1"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col col-xxl-3 mt-8">
|
|
<h3 class="fw-semibold mb-3">Included in our all packages</h3>
|
|
<div class="row">
|
|
<div class="col-md-6 col-xxl-12">
|
|
<div class="rounded-3 py-2 px-3 bg-body-emphasis d-flex align-items-center mb-3">
|
|
<span class="fas fa-check text-primary me-3 fs-9"></span>
|
|
<p class="mb-0 text-body-secondary">Timeline</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-xxl-12">
|
|
<div class="rounded-3 py-2 px-3 bg-body-emphasis d-flex align-items-center mb-3">
|
|
<span class="fas fa-check text-primary me-3 fs-9"></span>
|
|
<p class="mb-0 text-body-secondary">Advanced Search</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-xxl-12">
|
|
<div class="rounded-3 py-2 px-3 bg-body-emphasis d-flex align-items-center mb-3">
|
|
<span class="fas fa-check text-primary me-3 fs-9"></span>
|
|
<p class="mb-0 text-body-secondary">Custom fields</p>
|
|
<span class="badge badge-phoenix badge-phoenix-primary ms-2">New</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-xxl-12">
|
|
<div class="rounded-3 py-2 px-3 bg-body-emphasis d-flex align-items-center mb-3">
|
|
<span class="fas fa-check text-primary me-3 fs-9"></span>
|
|
<p class="mb-0 text-body-secondary">Task dependencies</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-xxl-12">
|
|
<div class="rounded-3 py-2 px-3 bg-body-emphasis d-flex align-items-center mb-3">
|
|
<span class="fas fa-check text-primary me-3 fs-9"></span>
|
|
<p class="mb-0 text-body-secondary">20TB of additional space</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-xxl-12">
|
|
<div class="rounded-3 py-2 px-3 bg-body-emphasis d-flex align-items-center mb-3">
|
|
<span class="fas fa-check text-primary me-3 fs-9"></span>
|
|
<p class="mb-0 text-body-secondary">Bandwidth of Upto 1 Gbps</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-xxl-12">
|
|
<div class="rounded-3 py-2 px-3 bg-body-emphasis d-flex align-items-center mb-3">
|
|
<span class="fas fa-check text-primary me-3 fs-9"></span>
|
|
<p class="mb-0 text-body-secondary">Private teams & projects</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-xxl-12">
|
|
<div class="rounded-3 py-2 px-3 bg-body-emphasis d-flex align-items-center mb-3">
|
|
<span class="fas fa-check text-primary me-3 fs-9"></span>
|
|
<p class="mb-0 text-body-secondary">Customer Support and Training</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock content %}
|