feat: initial commit - Band Management application

This commit is contained in:
2026-01-06 03:11:46 +01:00
commit 34e12e00b3
24543 changed files with 3991790 additions and 0 deletions

View File

@@ -0,0 +1,2 @@
# Register your models here.

View File

@@ -0,0 +1,6 @@
from django.apps import AppConfig
class FrontPagesConfig(AppConfig):
default_auto_field = "django.db.models.BigAutoField"
name = "apps.front_pages"

View File

@@ -0,0 +1,2 @@
# Create your models here.

View File

@@ -0,0 +1,49 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Checkout Card - Front Pages{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/select2/select2.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/bs-stepper/bs-stepper.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/raty-js/raty-js.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/jquery/jquery.js' %}"></script>
<script src="{% static 'vendor/libs/select2/select2.js' %}"></script>
<script src="{% static 'vendor/libs/bs-stepper/bs-stepper.js' %}"></script>
<script src="{% static 'vendor/libs/raty-js/raty-js.js' %}"></script>
<script src="{% static 'vendor/libs/cleave-zen/cleave-zen.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
{% endblock vendor_js %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/wizard-ex-checkout.css' %}" />
{% endblock page_css %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/modal-add-new-address.js' %}"></script>
<script src="{% static 'js/wizard-ex-checkout.js' %}"></script>
{% endblock page_js %}
{% block content %}
<section class="section-py bg-body first-section-pt">
<div class="container">
<!--/ Checkout Wizard -->
{% include "partials/wizard_ex_checkout.html" %}
<!-- Add new address modal -->
{% include "partials/_modals/modal_add_new_address.html" %}
</div>
</section>
{% endblock %}

View File

@@ -0,0 +1,81 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Help center Page - Front Pages{% endblock %}
{% block content %}
<section class="section-py first-section-pt">
<div class="container">
<div class="row g-6">
<div class="col-lg-8">
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-style1 mb-2">
<li class="breadcrumb-item">
<a href="javascript:void(0);">Help centre</a>
</li>
<li class="breadcrumb-item">
<a href="javascript:void(0);"> Buying and support</a>
</li>
<li class="breadcrumb-item active">Template kits</li>
</ol>
</nav>
<h4 class="mb-2">How to add product in cart?</h4>
<p>1 month ago - Updated</p>
<hr class="my-6" />
<p>If youre after only one item, simply choose the Buy Now option on the item page. This will take you directly to Checkout.</p>
<p class="mb-0">If you want several items, use the Add to Cart button and then choose Keep Browsing to continue shopping or Checkout to finalise your purchase.</p>
<div class="my-6">
<img src="{% static 'img/front-pages/misc/product-image.png' %}" alt="product" class="img-fluid w-100" />
</div>
<p class="mb-0">You can go back to your cart at any time by clicking on the shopping cart icon at the top right side of the page.</p>
<div class="mt-6">
<img src="{% static 'img/front-pages/misc/checkout-image.png' %}" alt="product" class="img-fluid w-100" />
</div>
</div>
<div class="col-lg-4">
<div class="input-group input-group-merge mb-6 mt-6 mt-lg-0">
<span class="input-group-text" id="article-search"><i class="icon-base ti tabler-search"></i></span>
<input type="text" class="form-control" placeholder="Search..." aria-label="Search..." aria-describedby="article-search" />
</div>
<div class="bg-lighter py-2 px-4 rounded">
<h5 class="mb-0">Articles in this section</h5>
</div>
<ul class="list-unstyled mt-4 mb-0">
<li class="mb-4">
<a href="javascript:void(0)" class="text-heading d-flex justify-content-between">
<span class="text-truncate me-2">Template Kits</span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
<li class="mb-4">
<a href="javascript:void(0)" class="text-heading d-flex justify-content-between">
<span class="text-truncate me-2">Envato Elements Template Kits - Importing Issues</span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
<li class="mb-4">
<a href="javascript:void(0)" class="text-heading d-flex justify-content-between">
<span class="text-truncate me-2">Envato Elements Template Kits - Troubleshooting</span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
<li class="mb-4">
<a href="javascript:void(0)" class="text-heading d-flex justify-content-between">
<span class="text-truncate me-2">How to use the template in WordPress</span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
<li>
<a href="javascript:void(0)" class="text-heading d-flex justify-content-between">
<span class="text-truncate me-2">How to use the Template Kit Import plugin</span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
{% endblock %}

View File

@@ -0,0 +1,602 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Help Center Landing - Front Pages{% endblock %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/front-page-help-center.css' %}" />
{% endblock page_css %}
{% block content %}
<!-- Help Center Header: Start -->
<section class="section-py first-section-pt help-center-header position-relative overflow-hidden">
<img class="banner-bg-img z-n1" src="{% static 'img/pages/header.png' %}" alt="Help center header" />
<h4 class="text-center text-primary">Hello, how can we help?</h4>
<div class="input-wrapper mb-4 input-group input-group-merge position-relative mx-auto">
<span class="input-group-text" id="basic-addon1"><i class="icon-base ti tabler-search"></i></span>
<input type="text" class="form-control" placeholder="Search" aria-label="Search" aria-describedby="basic-addon1" />
</div>
<p class="text-center px-4 mb-0">Common troubleshooting topics: eCommerce, Blogging to payment</p>
</section>
<!-- Help Center Header: End -->
<!-- Popular Articles: Start -->
<section class="section-py">
<div class="container">
<h4 class="text-center mb-6">Popular Articles</h4>
<div class="row">
<div class="col-lg-10 mx-auto">
<div class="row g-6">
<div class="col-xl-4 col-md-6">
<div class="card border shadow-none">
<div class="card-body text-center">
<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.2">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M48.2351 33.6218L41.1211 25.0804C41.393 30.314 40.1016 36.4086 36.1141 43.364L42.9109 48.8015C43.1526 48.9935 43.4393 49.1205 43.7438 49.1706C44.0484 49.2207 44.3607 49.1922 44.6511 49.0879C44.9415 48.9835 45.2005 48.8067 45.4035 48.5742C45.6065 48.3417 45.7467 48.0612 45.8109 47.7593L48.5976 35.1625C48.6648 34.8954 48.667 34.6161 48.6039 34.348C48.5408 34.08 48.4144 33.8309 48.2351 33.6218ZM9.62888 33.7578L16.7429 25.239C16.4711 30.4726 17.7625 36.5672 21.75 43.5L14.9531 48.9375C14.7129 49.1294 14.4279 49.257 14.1248 49.3084C13.8217 49.3598 13.5106 49.3333 13.2206 49.2314C12.9305 49.1294 12.6712 48.9554 12.467 48.7256C12.2628 48.4958 12.1203 48.2179 12.0531 47.9179L9.26638 35.2984C9.1992 35.0313 9.19705 34.7521 9.26013 34.484C9.3232 34.2159 9.44966 33.9669 9.62888 33.7578Z"
fill="currentColor" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M48.2351 33.6218L41.1211 25.0804C41.393 30.314 40.1016 36.4086 36.1141 43.364L42.9109 48.8015C43.1526 48.9935 43.4393 49.1205 43.7438 49.1706C44.0484 49.2207 44.3607 49.1922 44.6511 49.0879C44.9415 48.9835 45.2005 48.8067 45.4035 48.5742C45.6065 48.3417 45.7467 48.0612 45.8109 47.7593L48.5976 35.1625C48.6648 34.8954 48.667 34.6161 48.6039 34.348C48.5408 34.08 48.4144 33.8309 48.2351 33.6218ZM9.62888 33.7578L16.7429 25.239C16.4711 30.4726 17.7625 36.5672 21.75 43.5L14.9531 48.9375C14.7129 49.1294 14.4279 49.257 14.1248 49.3084C13.8217 49.3598 13.5106 49.3333 13.2206 49.2314C12.9305 49.1294 12.6712 48.9554 12.467 48.7256C12.2628 48.4958 12.1203 48.2179 12.0531 47.9179L9.26638 35.2984C9.1992 35.0313 9.19705 34.7521 9.26013 34.484C9.3232 34.2159 9.44966 33.9669 9.62888 33.7578Z"
fill="white"
fill-opacity="0.2" />
</g>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M27.235 3.71096C27.7312 3.30004 28.3553 3.07507 28.9999 3.07507C29.6459 3.07507 30.2715 3.30111 30.7683 3.71388C32.9647 5.50218 37.7192 9.93865 40.3437 16.7605C41.2551 19.1295 41.9046 21.7738 42.1067 24.6785L49.1354 33.1129C49.416 33.4422 49.6141 33.8337 49.7132 34.2549C49.8117 34.6734 49.8096 35.1092 49.7073 35.5266L46.9233 48.1336L46.9226 48.1367C46.8183 48.6021 46.5973 49.0334 46.2804 49.3899C45.9635 49.7465 45.5611 50.0165 45.1111 50.1747C44.6611 50.3329 44.1782 50.3741 43.7079 50.2943C43.2376 50.2145 42.7953 50.0165 42.4226 49.7187L42.4222 49.7183L35.8992 44.5H22.1007L15.5778 49.7183L15.5773 49.7187C15.2046 50.0165 14.7624 50.2146 14.2921 50.2943C13.8218 50.3741 13.3389 50.333 12.8889 50.1748C12.4389 50.0165 12.0365 49.7465 11.7196 49.3899C11.4027 49.0334 11.1817 48.6021 11.0773 48.1367L11.0766 48.1336L8.29268 35.5266C8.19032 35.1092 8.18824 34.6734 8.28671 34.2549C8.38587 33.8335 8.58413 33.4418 8.86498 33.1124L15.7606 24.8552C15.9445 21.8769 16.6066 19.1694 17.5467 16.749C20.1971 9.92535 25.0133 5.48954 27.235 3.71096ZM40.1374 25.2385C40.1225 25.1572 40.1179 25.0747 40.1232 24.9929C39.9491 22.2126 39.3336 19.705 38.4771 17.4787C36.0283 11.1135 31.5663 6.94197 29.5015 5.26152L29.4916 5.25349L29.4917 5.25343C29.3537 5.1382 29.1796 5.07507 28.9999 5.07507C28.8201 5.07507 28.646 5.1382 28.5081 5.25343L28.4917 5.26678C26.4054 6.93588 21.8836 11.1072 19.411 17.4732C18.5219 19.7622 17.8919 22.3492 17.7428 25.2243C17.7435 25.2674 17.7414 25.3105 17.7365 25.3534C17.5077 30.2529 18.6768 35.9841 22.3314 42.5H35.6625C39.2712 35.9325 40.398 30.163 40.1374 25.2385ZM47.6029 34.398L42.1455 27.8491C41.9426 32.4347 40.608 37.5834 37.5337 43.2463L43.6711 48.1562C43.7787 48.2422 43.9065 48.2994 44.0424 48.3225C44.1782 48.3455 44.3177 48.3337 44.4477 48.2879C44.5777 48.2422 44.694 48.1642 44.7855 48.0612C44.8768 47.9585 44.9406 47.8343 44.9708 47.7003L44.9711 47.6992L47.7571 35.0828L47.7604 35.0681L47.7638 35.0544C47.792 34.9425 47.7929 34.8254 47.7664 34.713C47.74 34.6006 47.687 34.4962 47.6118 34.4086L47.6028 34.398L47.6029 34.398ZM15.7471 27.9916L10.3964 34.3988L10.3882 34.4086L10.3881 34.4086C10.313 34.4962 10.26 34.6006 10.2335 34.713C10.2071 34.8254 10.208 34.9425 10.2362 35.0544C10.2385 35.0639 10.2408 35.0733 10.2429 35.0828L13.0289 47.6992L13.0292 47.7004C13.0594 47.8344 13.1232 47.9586 13.2144 48.0612C13.306 48.1642 13.4222 48.2423 13.5522 48.288C13.6822 48.3337 13.8217 48.3455 13.9576 48.3225C14.0934 48.2995 14.2212 48.2422 14.3289 48.1562L20.4604 43.251C17.3566 37.647 15.985 32.5442 15.7471 27.9916ZM24.375 50.75C24.375 50.1977 24.8227 49.75 25.375 49.75H32.625C33.1773 49.75 33.625 50.1977 33.625 50.75C33.625 51.3022 33.1773 51.75 32.625 51.75H25.375C24.8227 51.75 24.375 51.3022 24.375 50.75ZM31.7187 21.75C31.7187 23.2515 30.5015 24.4687 29 24.4687C27.4985 24.4687 26.2812 23.2515 26.2812 21.75C26.2812 20.2484 27.4985 19.0312 29 19.0312C30.5015 19.0312 31.7187 20.2484 31.7187 21.75Z"
fill="currentColor" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M27.235 3.71096C27.7312 3.30004 28.3553 3.07507 28.9999 3.07507C29.6459 3.07507 30.2715 3.30111 30.7683 3.71388C32.9647 5.50218 37.7192 9.93865 40.3437 16.7605C41.2551 19.1295 41.9046 21.7738 42.1067 24.6785L49.1354 33.1129C49.416 33.4422 49.6141 33.8337 49.7132 34.2549C49.8117 34.6734 49.8096 35.1092 49.7073 35.5266L46.9233 48.1336L46.9226 48.1367C46.8183 48.6021 46.5973 49.0334 46.2804 49.3899C45.9635 49.7465 45.5611 50.0165 45.1111 50.1747C44.6611 50.3329 44.1782 50.3741 43.7079 50.2943C43.2376 50.2145 42.7953 50.0165 42.4226 49.7187L42.4222 49.7183L35.8992 44.5H22.1007L15.5778 49.7183L15.5773 49.7187C15.2046 50.0165 14.7624 50.2146 14.2921 50.2943C13.8218 50.3741 13.3389 50.333 12.8889 50.1748C12.4389 50.0165 12.0365 49.7465 11.7196 49.3899C11.4027 49.0334 11.1817 48.6021 11.0773 48.1367L11.0766 48.1336L8.29268 35.5266C8.19032 35.1092 8.18824 34.6734 8.28671 34.2549C8.38587 33.8335 8.58413 33.4418 8.86498 33.1124L15.7606 24.8552C15.9445 21.8769 16.6066 19.1694 17.5467 16.749C20.1971 9.92535 25.0133 5.48954 27.235 3.71096ZM40.1374 25.2385C40.1225 25.1572 40.1179 25.0747 40.1232 24.9929C39.9491 22.2126 39.3336 19.705 38.4771 17.4787C36.0283 11.1135 31.5663 6.94197 29.5015 5.26152L29.4916 5.25349L29.4917 5.25343C29.3537 5.1382 29.1796 5.07507 28.9999 5.07507C28.8201 5.07507 28.646 5.1382 28.5081 5.25343L28.4917 5.26678C26.4054 6.93588 21.8836 11.1072 19.411 17.4732C18.5219 19.7622 17.8919 22.3492 17.7428 25.2243C17.7435 25.2674 17.7414 25.3105 17.7365 25.3534C17.5077 30.2529 18.6768 35.9841 22.3314 42.5H35.6625C39.2712 35.9325 40.398 30.163 40.1374 25.2385ZM47.6029 34.398L42.1455 27.8491C41.9426 32.4347 40.608 37.5834 37.5337 43.2463L43.6711 48.1562C43.7787 48.2422 43.9065 48.2994 44.0424 48.3225C44.1782 48.3455 44.3177 48.3337 44.4477 48.2879C44.5777 48.2422 44.694 48.1642 44.7855 48.0612C44.8768 47.9585 44.9406 47.8343 44.9708 47.7003L44.9711 47.6992L47.7571 35.0828L47.7604 35.0681L47.7638 35.0544C47.792 34.9425 47.7929 34.8254 47.7664 34.713C47.74 34.6006 47.687 34.4962 47.6118 34.4086L47.6028 34.398L47.6029 34.398ZM15.7471 27.9916L10.3964 34.3988L10.3882 34.4086L10.3881 34.4086C10.313 34.4962 10.26 34.6006 10.2335 34.713C10.2071 34.8254 10.208 34.9425 10.2362 35.0544C10.2385 35.0639 10.2408 35.0733 10.2429 35.0828L13.0289 47.6992L13.0292 47.7004C13.0594 47.8344 13.1232 47.9586 13.2144 48.0612C13.306 48.1642 13.4222 48.2423 13.5522 48.288C13.6822 48.3337 13.8217 48.3455 13.9576 48.3225C14.0934 48.2995 14.2212 48.2422 14.3289 48.1562L20.4604 43.251C17.3566 37.647 15.985 32.5442 15.7471 27.9916ZM24.375 50.75C24.375 50.1977 24.8227 49.75 25.375 49.75H32.625C33.1773 49.75 33.625 50.1977 33.625 50.75C33.625 51.3022 33.1773 51.75 32.625 51.75H25.375C24.8227 51.75 24.375 51.3022 24.375 50.75ZM31.7187 21.75C31.7187 23.2515 30.5015 24.4687 29 24.4687C27.4985 24.4687 26.2812 23.2515 26.2812 21.75C26.2812 20.2484 27.4985 19.0312 29 19.0312C30.5015 19.0312 31.7187 20.2484 31.7187 21.75Z"
fill="white"
fill-opacity="0.2" />
</svg>
<h5 class="my-3">Getting Started</h5>
<p class="mb-3">Whether you're new or you're a power user, this article will…</p>
<a class="btn btn-sm btn-label-primary" href="{% url 'help-center-article' %}">Read More</a>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6">
<div class="card border shadow-none">
<div class="card-body text-center">
<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M32.2689 8.56722C31.7876 9.05354 31.3688 9.84814 31.029 10.8704C30.6946 11.8767 30.4652 13.0152 30.31 14.1032C30.1553 15.1872 30.0776 16.197 30.0386 16.9371C30.0358 16.991 30.0332 17.0434 30.0307 17.0943C30.0816 17.0918 30.134 17.0892 30.1879 17.0864C30.928 17.0475 31.9378 16.9697 33.0218 16.815C34.1098 16.6598 35.2483 16.4304 36.2546 16.096C37.2769 15.7562 38.0715 15.3374 38.5578 14.8561C39.3907 14.0223 39.8587 12.8919 39.8587 11.7133C39.8587 10.5339 39.3901 9.4028 38.5562 8.56883C37.7222 7.73487 36.5911 7.26636 35.4117 7.26636C34.2331 7.26636 33.1027 7.73427 32.2689 8.56722ZM39.2633 15.5649L39.9704 16.272C41.1794 15.0629 41.8587 13.4231 41.8587 11.7133C41.8587 10.0035 41.1794 8.36365 39.9704 7.15462C38.7614 5.94559 37.1216 5.26636 35.4117 5.26636C33.7019 5.26636 32.0621 5.94559 30.853 7.15461L30.8499 7.15774C30.0518 7.96296 29.5111 9.09639 29.1311 10.2396C29.0855 10.3767 29.0418 10.5154 28.9999 10.6551C28.958 10.5154 28.9143 10.3767 28.8688 10.2396C28.4888 9.09639 27.9481 7.96296 27.1499 7.15774L27.1468 7.15462C25.9378 5.94559 24.298 5.26636 22.5882 5.26636C20.8783 5.26636 19.2385 5.94559 18.0295 7.15462C16.8205 8.36366 16.1412 10.0035 16.1412 11.7133C16.1412 13.4231 16.8205 15.0629 18.0295 16.272L18.7366 15.5649L18.0326 16.2751C18.3589 16.5985 18.7391 16.8797 19.152 17.125H9.0625C7.5092 17.125 6.25 18.3842 6.25 19.9375V27.1875C6.25 28.7408 7.5092 30 9.0625 30H9.875V45.3125C9.875 46.0584 10.1713 46.7738 10.6988 47.3012C11.2262 47.8287 11.9416 48.125 12.6875 48.125H29H45.3125C46.0584 48.125 46.7738 47.8287 47.3012 47.3012C47.8287 46.7738 48.125 46.0584 48.125 45.3125V30H48.9375C50.4908 30 51.75 28.7408 51.75 27.1875V19.9375C51.75 18.3842 50.4908 17.125 48.9375 17.125H38.8479C39.2608 16.8797 39.641 16.5985 39.9673 16.2751L39.2633 15.5649ZM9.0625 19.125C8.61377 19.125 8.25 19.4888 8.25 19.9375V27.1875C8.25 27.6362 8.61377 28 9.0625 28H10.875H28V19.125H9.0625ZM30 19.125V28H47.125H48.9375C49.3862 28 49.75 27.6362 49.75 27.1875V19.9375C49.75 19.4888 49.3862 19.125 48.9375 19.125H30ZM28 30H11.875V45.3125C11.875 45.528 11.9606 45.7347 12.113 45.887C12.2653 46.0394 12.472 46.125 12.6875 46.125H28V30ZM30 46.125V30H46.125V45.3125C46.125 45.528 46.0394 45.7347 45.887 45.887C45.7347 46.0394 45.528 46.125 45.3125 46.125H30ZM21.7452 16.096C20.723 15.7562 19.9284 15.3374 19.4421 14.8562C18.6091 14.0223 18.1412 12.8919 18.1412 11.7133C18.1412 10.5339 18.6097 9.4028 19.4437 8.56883C20.2777 7.73487 21.4088 7.26636 22.5882 7.26636C23.7668 7.26636 24.8972 7.73428 25.731 8.56725C26.2123 9.05357 26.6311 9.84816 26.9708 10.8704C27.3053 11.8767 27.5346 13.0152 27.6899 14.1032C27.8445 15.1872 27.9223 16.197 27.9613 16.9371C27.9641 16.991 27.9667 17.0434 27.9691 17.0943C27.9183 17.0918 27.8659 17.0892 27.812 17.0864C27.0719 17.0475 26.0621 16.9697 24.978 16.815C23.89 16.6598 22.7516 16.4304 21.7452 16.096Z"
fill="currentColor" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M32.2689 8.56722C31.7876 9.05354 31.3688 9.84814 31.029 10.8704C30.6946 11.8767 30.4652 13.0152 30.31 14.1032C30.1553 15.1872 30.0776 16.197 30.0386 16.9371C30.0358 16.991 30.0332 17.0434 30.0307 17.0943C30.0816 17.0918 30.134 17.0892 30.1879 17.0864C30.928 17.0475 31.9378 16.9697 33.0218 16.815C34.1098 16.6598 35.2483 16.4304 36.2546 16.096C37.2769 15.7562 38.0715 15.3374 38.5578 14.8561C39.3907 14.0223 39.8587 12.8919 39.8587 11.7133C39.8587 10.5339 39.3901 9.4028 38.5562 8.56883C37.7222 7.73487 36.5911 7.26636 35.4117 7.26636C34.2331 7.26636 33.1027 7.73427 32.2689 8.56722ZM39.2633 15.5649L39.9704 16.272C41.1794 15.0629 41.8587 13.4231 41.8587 11.7133C41.8587 10.0035 41.1794 8.36365 39.9704 7.15462C38.7614 5.94559 37.1216 5.26636 35.4117 5.26636C33.7019 5.26636 32.0621 5.94559 30.853 7.15461L30.8499 7.15774C30.0518 7.96296 29.5111 9.09639 29.1311 10.2396C29.0855 10.3767 29.0418 10.5154 28.9999 10.6551C28.958 10.5154 28.9143 10.3767 28.8688 10.2396C28.4888 9.09639 27.9481 7.96296 27.1499 7.15774L27.1468 7.15462C25.9378 5.94559 24.298 5.26636 22.5882 5.26636C20.8783 5.26636 19.2385 5.94559 18.0295 7.15462C16.8205 8.36366 16.1412 10.0035 16.1412 11.7133C16.1412 13.4231 16.8205 15.0629 18.0295 16.272L18.7366 15.5649L18.0326 16.2751C18.3589 16.5985 18.7391 16.8797 19.152 17.125H9.0625C7.5092 17.125 6.25 18.3842 6.25 19.9375V27.1875C6.25 28.7408 7.5092 30 9.0625 30H9.875V45.3125C9.875 46.0584 10.1713 46.7738 10.6988 47.3012C11.2262 47.8287 11.9416 48.125 12.6875 48.125H29H45.3125C46.0584 48.125 46.7738 47.8287 47.3012 47.3012C47.8287 46.7738 48.125 46.0584 48.125 45.3125V30H48.9375C50.4908 30 51.75 28.7408 51.75 27.1875V19.9375C51.75 18.3842 50.4908 17.125 48.9375 17.125H38.8479C39.2608 16.8797 39.641 16.5985 39.9673 16.2751L39.2633 15.5649ZM9.0625 19.125C8.61377 19.125 8.25 19.4888 8.25 19.9375V27.1875C8.25 27.6362 8.61377 28 9.0625 28H10.875H28V19.125H9.0625ZM30 19.125V28H47.125H48.9375C49.3862 28 49.75 27.6362 49.75 27.1875V19.9375C49.75 19.4888 49.3862 19.125 48.9375 19.125H30ZM28 30H11.875V45.3125C11.875 45.528 11.9606 45.7347 12.113 45.887C12.2653 46.0394 12.472 46.125 12.6875 46.125H28V30ZM30 46.125V30H46.125V45.3125C46.125 45.528 46.0394 45.7347 45.887 45.887C45.7347 46.0394 45.528 46.125 45.3125 46.125H30ZM21.7452 16.096C20.723 15.7562 19.9284 15.3374 19.4421 14.8562C18.6091 14.0223 18.1412 12.8919 18.1412 11.7133C18.1412 10.5339 18.6097 9.4028 19.4437 8.56883C20.2777 7.73487 21.4088 7.26636 22.5882 7.26636C23.7668 7.26636 24.8972 7.73428 25.731 8.56725C26.2123 9.05357 26.6311 9.84816 26.9708 10.8704C27.3053 11.8767 27.5346 13.0152 27.6899 14.1032C27.8445 15.1872 27.9223 16.197 27.9613 16.9371C27.9641 16.991 27.9667 17.0434 27.9691 17.0943C27.9183 17.0918 27.8659 17.0892 27.812 17.0864C27.0719 17.0475 26.0621 16.9697 24.978 16.815C23.89 16.6598 22.7516 16.4304 21.7452 16.096Z"
fill="white"
fill-opacity="0.2" />
<g opacity="0.2">
<path d="M47.125 29V45.3125C47.125 45.7932 46.934 46.2542 46.5941 46.5941C46.2542 46.934 45.7932 47.125 45.3125 47.125H12.6875C12.2068 47.125 11.7458 46.934 11.4059 46.5941C11.066 46.2542 10.875 45.7932 10.875 45.3125V29H47.125Z" fill="currentColor" />
<path d="M47.125 29V45.3125C47.125 45.7932 46.934 46.2542 46.5941 46.5941C46.2542 46.934 45.7932 47.125 45.3125 47.125H12.6875C12.2068 47.125 11.7458 46.934 11.4059 46.5941C11.066 46.2542 10.875 45.7932 10.875 45.3125V29H47.125Z" fill="white" fill-opacity="0.2" />
</g>
</svg>
<h5 class="my-3">First Steps</h5>
<p class="mb-3">Are you a new customer wondering how to get started?</p>
<a class="btn btn-sm btn-label-primary" href="{% url 'help-center-article' %}">Read More</a>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6">
<div class="card border shadow-none">
<div class="card-body text-center">
<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.2">
<path d="M50.6367 12.6875H7.36328C6.2997 12.6875 5.4375 13.5497 5.4375 14.6133V43.3867C5.4375 44.4503 6.2997 45.3125 7.36328 45.3125H50.6367C51.7003 45.3125 52.5625 44.4503 52.5625 43.3867V14.6133C52.5625 13.5497 51.7003 12.6875 50.6367 12.6875Z" fill="currentColor" />
<path d="M50.6367 12.6875H7.36328C6.2997 12.6875 5.4375 13.5497 5.4375 14.6133V43.3867C5.4375 44.4503 6.2997 45.3125 7.36328 45.3125H50.6367C51.7003 45.3125 52.5625 44.4503 52.5625 43.3867V14.6133C52.5625 13.5497 51.7003 12.6875 50.6367 12.6875Z" fill="white" fill-opacity="0.2" />
</g>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.6875 14.6133C6.6875 14.2401 6.99006 13.9375 7.36328 13.9375H50.6367C51.0099 13.9375 51.3125 14.2401 51.3125 14.6133V43.3867C51.3125 43.7599 51.0099 44.0625 50.6367 44.0625H7.36328C6.99006 44.0625 6.6875 43.7599 6.6875 43.3867V14.6133ZM7.36328 11.4375C5.60935 11.4375 4.1875 12.8593 4.1875 14.6133V43.3867C4.1875 45.1407 5.60935 46.5625 7.36328 46.5625H50.6367C52.3907 46.5625 53.8125 45.1407 53.8125 43.3867V14.6133C53.8125 12.8593 52.3907 11.4375 50.6367 11.4375H7.36328ZM12.6875 20.75C12.1352 20.75 11.6875 21.1977 11.6875 21.75C11.6875 22.3023 12.1352 22.75 12.6875 22.75H45.3125C45.8648 22.75 46.3125 22.3023 46.3125 21.75C46.3125 21.1977 45.8648 20.75 45.3125 20.75H12.6875ZM12.6875 28C12.1352 28 11.6875 28.4477 11.6875 29C11.6875 29.5523 12.1352 30 12.6875 30H45.3125C45.8648 30 46.3125 29.5523 46.3125 29C46.3125 28.4477 45.8648 28 45.3125 28H12.6875ZM11.6875 36.25C11.6875 35.6977 12.1352 35.25 12.6875 35.25H14.5C15.0523 35.25 15.5 35.6977 15.5 36.25C15.5 36.8023 15.0523 37.25 14.5 37.25H12.6875C12.1352 37.25 11.6875 36.8023 11.6875 36.25ZM21.75 35.25C21.1977 35.25 20.75 35.6977 20.75 36.25C20.75 36.8023 21.1977 37.25 21.75 37.25H36.25C36.8023 37.25 37.25 36.8023 37.25 36.25C37.25 35.6977 36.8023 35.25 36.25 35.25H21.75ZM42.5 36.25C42.5 35.6977 42.9477 35.25 43.5 35.25H45.3125C45.8648 35.25 46.3125 35.6977 46.3125 36.25C46.3125 36.8023 45.8648 37.25 45.3125 37.25H43.5C42.9477 37.25 42.5 36.8023 42.5 36.25Z"
fill="currentColor" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.6875 14.6133C6.6875 14.2401 6.99006 13.9375 7.36328 13.9375H50.6367C51.0099 13.9375 51.3125 14.2401 51.3125 14.6133V43.3867C51.3125 43.7599 51.0099 44.0625 50.6367 44.0625H7.36328C6.99006 44.0625 6.6875 43.7599 6.6875 43.3867V14.6133ZM7.36328 11.4375C5.60935 11.4375 4.1875 12.8593 4.1875 14.6133V43.3867C4.1875 45.1407 5.60935 46.5625 7.36328 46.5625H50.6367C52.3907 46.5625 53.8125 45.1407 53.8125 43.3867V14.6133C53.8125 12.8593 52.3907 11.4375 50.6367 11.4375H7.36328ZM12.6875 20.75C12.1352 20.75 11.6875 21.1977 11.6875 21.75C11.6875 22.3023 12.1352 22.75 12.6875 22.75H45.3125C45.8648 22.75 46.3125 22.3023 46.3125 21.75C46.3125 21.1977 45.8648 20.75 45.3125 20.75H12.6875ZM12.6875 28C12.1352 28 11.6875 28.4477 11.6875 29C11.6875 29.5523 12.1352 30 12.6875 30H45.3125C45.8648 30 46.3125 29.5523 46.3125 29C46.3125 28.4477 45.8648 28 45.3125 28H12.6875ZM11.6875 36.25C11.6875 35.6977 12.1352 35.25 12.6875 35.25H14.5C15.0523 35.25 15.5 35.6977 15.5 36.25C15.5 36.8023 15.0523 37.25 14.5 37.25H12.6875C12.1352 37.25 11.6875 36.8023 11.6875 36.25ZM21.75 35.25C21.1977 35.25 20.75 35.6977 20.75 36.25C20.75 36.8023 21.1977 37.25 21.75 37.25H36.25C36.8023 37.25 37.25 36.8023 37.25 36.25C37.25 35.6977 36.8023 35.25 36.25 35.25H21.75ZM42.5 36.25C42.5 35.6977 42.9477 35.25 43.5 35.25H45.3125C45.8648 35.25 46.3125 35.6977 46.3125 36.25C46.3125 36.8023 45.8648 37.25 45.3125 37.25H43.5C42.9477 37.25 42.5 36.8023 42.5 36.25Z"
fill="white"
fill-opacity="0.2" />
</svg>
<h5 class="my-3">Add External Content</h5>
<p class="mb-3">This article will show you how to expand the functionality of...</p>
<a class="btn btn-sm btn-label-primary" href="{% url 'help-center-article' %}">Read More</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Popular Articles: End -->
<!-- Knowledge Base: Start -->
<section class="section-py bg-body">
<div class="container knowledge-base">
<h4 class="text-center mb-6">Knowledge Base</h4>
<div class="row">
<div class="col-lg-10 mx-auto">
<div class="row g-6">
<div class="col-xl-4 col-sm-6">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center">
<div class="avatar avatar-sm flex-shrink-0 me-3">
<span class="avatar-initial rounded bg-label-primary"><i class="icon-base ti tabler-shopping-cart"></i></span>
</div>
<h5 class="mb-0">Buying</h5>
</div>
<ul class="list-unstyled my-6">
<li class="mb-2">
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-2 me-lg-4"> What are Favourites? </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
<li class="mb-2">
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-2 me-lg-4"> How do I purchase an item? </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
<li class="mb-2">
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-2 me-lg-4"> How do i add or change my details? </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
<li class="mb-2">
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-2 me-lg-4"> How do refunds work? </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
<li class="mb-2">
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-2 me-lg-4"> Can I Get A Refund? </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
<li>
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-2 me-lg-4"> I'm trying to find a specific item </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
</ul>
<p class="mb-0 fw-medium mt-6">
<a href="{% url 'help-center-article' %}" class="d-flex align-items-center">
<span class="me-3">See all 10 articles</span>
<i class="icon-base ti tabler-arrow-right scaleX-n1-rtl icon-sm fw-semibold"></i>
</a>
</p>
</div>
</div>
</div>
<div class="col-xl-4 col-sm-6">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center">
<div class="avatar avatar-sm flex-shrink-0 me-3">
<span class="avatar-initial rounded bg-label-primary"><i class="icon-base ti tabler-help-circle"></i></span>
</div>
<h5 class="mb-0">Item Support</h5>
</div>
<ul class="list-unstyled my-6">
<li class="mb-2">
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-2 me-lg-4"> What is Item Support? </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
<li class="mb-2">
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-2 me-lg-4"> How to contact an author </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
<li class="mb-2">
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-2 me-lg-4"> Where Is My Purchase Code? </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
<li class="mb-2">
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-2 me-lg-4"> Extend or renew Item Support </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
<li class="mb-2">
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-2 me-lg-4"> Item Support FAQ </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
<li>
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-2 me-lg-4"> Why has my item been removed? </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
</ul>
<p class="mb-0 fw-medium mt-6">
<a href="{% url 'help-center-article' %}" class="d-flex align-items-center">
<span class="me-3">See all 14 articles</span>
<i class="icon-base ti tabler-arrow-right scaleX-n1-rtl icon-sm fw-semibold"></i>
</a>
</p>
</div>
</div>
</div>
<div class="col-xl-4 col-sm-6">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center">
<div class="avatar avatar-sm flex-shrink-0 me-3">
<span class="avatar-initial rounded bg-label-primary"><i class="icon-base ti tabler-currency-dollar"></i></span>
</div>
<h5 class="mb-0">Licenses</h5>
</div>
<ul class="list-unstyled my-6">
<li class="mb-2">
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-1"> Can I use the same license for the same item on multiple sites? </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
<li class="mb-2">
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-2 me-lg-4"> How do licenses work for any plugins </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
<li class="mb-2">
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-2 me-lg-4"> For logo what license do I need? </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
<li class="mb-2">
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-1"> Im making a test site - its not for a client. Which license do I need? </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
<li class="mb-2">
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-2 me-lg-4"> which license do I need? </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
<li>
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-2 me-lg-4"> I want to make multiple end products </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
</ul>
<p class="mb-0 fw-medium mt-6">
<a href="{% url 'help-center-article' %}" class="d-flex align-items-center">
<span class="me-3">See all 8 articles</span>
<i class="icon-base ti tabler-arrow-right scaleX-n1-rtl icon-sm fw-semibold"></i>
</a>
</p>
</div>
</div>
</div>
<div class="col-xl-4 col-sm-6">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center">
<div class="avatar avatar-sm flex-shrink-0 me-3">
<span class="avatar-initial rounded bg-label-primary"><i class="icon-base ti tabler-color-swatch"></i></span>
</div>
<h5 class="mb-0">Template Kits</h5>
</div>
<ul class="list-unstyled my-6">
<li class="mb-2">
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-2 me-lg-4"> Template Kits </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
<li class="mb-2">
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-1"> Elementor Template Kits: PHP Zip File Missing </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
<li class="mb-2">
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-1"> Template Kits - Imported template is blank or broken </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
<li class="mb-2">
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-2 me-lg-4"> Troubleshooting Import Problems </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
<li class="mb-2">
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-2 me-lg-4"> How to use the WordPress Plugin </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
<li>
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-1"> How to use the Template Kit Importer Plugin </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
</ul>
<p class="mb-0 fw-medium mt-6">
<a href="{% url 'help-center-article' %}" class="d-flex align-items-center">
<span class="me-3">See all 5 articles</span>
<i class="icon-base ti tabler-arrow-right scaleX-n1-rtl icon-sm fw-semibold"></i>
</a>
</p>
</div>
</div>
</div>
<div class="col-xl-4 col-sm-6">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center">
<div class="avatar avatar-sm flex-shrink-0 me-3">
<span class="avatar-initial rounded bg-label-primary"><i class="icon-base ti tabler-lock-open"></i></span>
</div>
<h5 class="mb-0">Account & Password</h5>
</div>
<ul class="list-unstyled my-6">
<li class="mb-2">
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-2 me-lg-4"> Signing in with a social account </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
<li class="mb-2">
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-2 me-lg-4"> Locked Out of Account </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
<li class="mb-2">
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-2 me-lg-4"> I'm not receiving the verification email </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
<li class="mb-2">
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-2 me-lg-4"> Forgotten Username Or Password </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
<li class="mb-2">
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-2 me-lg-4"> New password not accepted </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
<li>
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-2 me-lg-4"> What is Sign In Verification? </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
</ul>
<p class="mb-0 fw-medium mt-6">
<a href="{% url 'help-center-article' %}" class="d-flex align-items-center">
<span class="me-3">See all 16 articles</span>
<i class="icon-base ti tabler-arrow-right scaleX-n1-rtl icon-sm fw-semibold"></i>
</a>
</p>
</div>
</div>
</div>
<div class="col-xl-4 col-sm-6">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center">
<div class="avatar avatar-sm flex-shrink-0 me-3">
<span class="avatar-initial rounded bg-label-primary"><i class="icon-base ti tabler-user"></i></span>
</div>
<h5 class="mb-0">Account Settings</h5>
</div>
<ul class="list-unstyled my-6">
<li class="mb-2">
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-2 me-lg-4"> How do I change my password? </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
<li class="mb-2">
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-2 me-lg-4"> How do I change my username? </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
<li class="mb-2">
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-2 me-lg-4"> How do I close my account? </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
<li class="mb-2">
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-2 me-lg-4"> How do I change my email address? </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
<li class="mb-2">
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-2 me-lg-4"> How can I regain access to my account? </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
<li>
<a href="{% url 'help-center-article' %}" class="text-heading d-flex justify-content-between align-items-center">
<span class="text-truncate me-2 me-lg-4"> Are RSS feeds available on Market? </span>
<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl text-body-secondary"></i>
</a>
</li>
</ul>
<p class="mb-0 fw-medium mt-6">
<a href="{% url 'help-center-article' %}" class="d-flex align-items-center">
<span class="me-3">See all 12 articles</span>
<i class="icon-base ti tabler-arrow-right scaleX-n1-rtl icon-sm fw-semibold"></i>
</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Knowledge Base: End -->
<!-- Keep Learning: Start -->
<section class="section-py">
<div class="container">
<h4 class="text-center mb-6">Keep Learning</h4>
<div class="row">
<div class="col-lg-10 mx-auto">
<div class="row g-6">
<div class="col-xl-4 col-md-6">
<div class="card border shadow-none">
<div class="card-body text-center">
<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.2">
<path d="M9.0625 39.875V16.3125C9.0625 15.3511 9.44442 14.4291 10.1242 13.7492C10.8041 13.0694 11.7261 12.6875 12.6875 12.6875H45.3125C46.2739 12.6875 47.1959 13.0694 47.8758 13.7492C48.5556 14.4291 48.9375 15.3511 48.9375 16.3125V39.875H9.0625Z" fill="currentColor" />
<path d="M9.0625 39.875V16.3125C9.0625 15.3511 9.44442 14.4291 10.1242 13.7492C10.8041 13.0694 11.7261 12.6875 12.6875 12.6875H45.3125C46.2739 12.6875 47.1959 13.0694 47.8758 13.7492C48.5556 14.4291 48.9375 15.3511 48.9375 16.3125V39.875H9.0625Z" fill="white" fill-opacity="0.2" />
</g>
<path
d="M8.0625 39.875C8.0625 40.4273 8.51022 40.875 9.0625 40.875C9.61478 40.875 10.0625 40.4273 10.0625 39.875H8.0625ZM12.6875 12.6875L12.6875 11.6875L12.6875 12.6875ZM45.3125 12.6875V11.6875V12.6875ZM47.9375 39.875C47.9375 40.4273 48.3852 40.875 48.9375 40.875C49.4898 40.875 49.9375 40.4273 49.9375 39.875H47.9375ZM5.4375 39.875V38.875C4.88522 38.875 4.4375 39.3227 4.4375 39.875H5.4375ZM52.5625 39.875H53.5625C53.5625 39.3227 53.1148 38.875 52.5625 38.875V39.875ZM5.4375 43.5H4.4375H5.4375ZM32.625 20.9375C33.1773 20.9375 33.625 20.4898 33.625 19.9375C33.625 19.3852 33.1773 18.9375 32.625 18.9375V20.9375ZM25.375 18.9375C24.8227 18.9375 24.375 19.3852 24.375 19.9375C24.375 20.4898 24.8227 20.9375 25.375 20.9375V18.9375ZM10.0625 39.875V16.3125H8.0625V39.875H10.0625ZM10.0625 16.3125C10.0625 15.6163 10.3391 14.9486 10.8313 14.4563L9.41713 13.0421C8.54978 13.9095 8.0625 15.0859 8.0625 16.3125H10.0625ZM10.8313 14.4563C11.3236 13.9641 11.9913 13.6875 12.6875 13.6875L12.6875 11.6875C11.4609 11.6875 10.2845 12.1748 9.41713 13.0421L10.8313 14.4563ZM12.6875 13.6875H45.3125V11.6875H12.6875V13.6875ZM45.3125 13.6875C46.0087 13.6875 46.6764 13.9641 47.1687 14.4563L48.5829 13.0421C47.7155 12.1748 46.5391 11.6875 45.3125 11.6875V13.6875ZM47.1687 14.4563C47.6609 14.9486 47.9375 15.6163 47.9375 16.3125H49.9375C49.9375 15.0859 49.4502 13.9095 48.5829 13.0421L47.1687 14.4563ZM47.9375 16.3125V39.875H49.9375V16.3125H47.9375ZM5.4375 40.875H52.5625V38.875H5.4375V40.875ZM51.5625 39.875V43.5H53.5625V39.875H51.5625ZM51.5625 43.5C51.5625 44.1962 51.2859 44.8639 50.7937 45.3562L52.2079 46.7704C53.0752 45.903 53.5625 44.7266 53.5625 43.5H51.5625ZM50.7937 45.3562C50.3014 45.8484 49.6337 46.125 48.9375 46.125V48.125C50.1641 48.125 51.3405 47.6377 52.2079 46.7704L50.7937 45.3562ZM48.9375 46.125H9.0625V48.125H48.9375V46.125ZM9.0625 46.125C8.36631 46.125 7.69863 45.8484 7.20634 45.3562L5.79213 46.7704C6.65949 47.6377 7.83587 48.125 9.0625 48.125V46.125ZM7.20634 45.3562C6.71406 44.8639 6.4375 44.1962 6.4375 43.5H4.4375C4.4375 44.7266 4.92478 45.903 5.79213 46.7704L7.20634 45.3562ZM6.4375 43.5V39.875H4.4375V43.5H6.4375ZM32.625 18.9375H25.375V20.9375H32.625V18.9375Z"
fill="currentColor" />
<path
d="M8.0625 39.875C8.0625 40.4273 8.51022 40.875 9.0625 40.875C9.61478 40.875 10.0625 40.4273 10.0625 39.875H8.0625ZM12.6875 12.6875L12.6875 11.6875L12.6875 12.6875ZM45.3125 12.6875V11.6875V12.6875ZM47.9375 39.875C47.9375 40.4273 48.3852 40.875 48.9375 40.875C49.4898 40.875 49.9375 40.4273 49.9375 39.875H47.9375ZM5.4375 39.875V38.875C4.88522 38.875 4.4375 39.3227 4.4375 39.875H5.4375ZM52.5625 39.875H53.5625C53.5625 39.3227 53.1148 38.875 52.5625 38.875V39.875ZM5.4375 43.5H4.4375H5.4375ZM32.625 20.9375C33.1773 20.9375 33.625 20.4898 33.625 19.9375C33.625 19.3852 33.1773 18.9375 32.625 18.9375V20.9375ZM25.375 18.9375C24.8227 18.9375 24.375 19.3852 24.375 19.9375C24.375 20.4898 24.8227 20.9375 25.375 20.9375V18.9375ZM10.0625 39.875V16.3125H8.0625V39.875H10.0625ZM10.0625 16.3125C10.0625 15.6163 10.3391 14.9486 10.8313 14.4563L9.41713 13.0421C8.54978 13.9095 8.0625 15.0859 8.0625 16.3125H10.0625ZM10.8313 14.4563C11.3236 13.9641 11.9913 13.6875 12.6875 13.6875L12.6875 11.6875C11.4609 11.6875 10.2845 12.1748 9.41713 13.0421L10.8313 14.4563ZM12.6875 13.6875H45.3125V11.6875H12.6875V13.6875ZM45.3125 13.6875C46.0087 13.6875 46.6764 13.9641 47.1687 14.4563L48.5829 13.0421C47.7155 12.1748 46.5391 11.6875 45.3125 11.6875V13.6875ZM47.1687 14.4563C47.6609 14.9486 47.9375 15.6163 47.9375 16.3125H49.9375C49.9375 15.0859 49.4502 13.9095 48.5829 13.0421L47.1687 14.4563ZM47.9375 16.3125V39.875H49.9375V16.3125H47.9375ZM5.4375 40.875H52.5625V38.875H5.4375V40.875ZM51.5625 39.875V43.5H53.5625V39.875H51.5625ZM51.5625 43.5C51.5625 44.1962 51.2859 44.8639 50.7937 45.3562L52.2079 46.7704C53.0752 45.903 53.5625 44.7266 53.5625 43.5H51.5625ZM50.7937 45.3562C50.3014 45.8484 49.6337 46.125 48.9375 46.125V48.125C50.1641 48.125 51.3405 47.6377 52.2079 46.7704L50.7937 45.3562ZM48.9375 46.125H9.0625V48.125H48.9375V46.125ZM9.0625 46.125C8.36631 46.125 7.69863 45.8484 7.20634 45.3562L5.79213 46.7704C6.65949 47.6377 7.83587 48.125 9.0625 48.125V46.125ZM7.20634 45.3562C6.71406 44.8639 6.4375 44.1962 6.4375 43.5H4.4375C4.4375 44.7266 4.92478 45.903 5.79213 46.7704L7.20634 45.3562ZM6.4375 43.5V39.875H4.4375V43.5H6.4375ZM32.625 18.9375H25.375V20.9375H32.625V18.9375Z"
fill="white"
fill-opacity="0.2" />
</svg>
<h5 class="my-3">Blogging</h5>
<p class="mb-3">Expert tips and tools to improve your website or online store using our blog.</p>
<a href="{% url 'help-center-article' %}" class="btn btn-sm btn-label-primary">Read More</a>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6">
<div class="card border shadow-none">
<div class="card-body text-center">
<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.2">
<path
d="M17.8304 37.8359C15.6726 36.1581 13.925 34.0112 12.7199 31.5579C11.5148 29.1045 10.8839 26.4091 10.8749 23.6757C10.8296 13.8429 18.7367 5.66403 28.5695 5.43747C32.375 5.34725 36.1123 6.45746 39.2514 8.61062C42.3904 10.7638 44.7719 13.8506 46.0581 17.4333C47.3442 21.016 47.4698 24.9127 46.4169 28.5707C45.364 32.2288 43.1861 35.4625 40.1921 37.8132C39.5308 38.3245 38.995 38.9802 38.6259 39.7302C38.2568 40.4802 38.0641 41.3047 38.0624 42.1406V43.5C38.0624 43.9807 37.8715 44.4417 37.5316 44.7816C37.1917 45.1215 36.7307 45.3125 36.2499 45.3125H21.7499C21.2692 45.3125 20.8082 45.1215 20.4683 44.7816C20.1284 44.4417 19.9374 43.9807 19.9374 43.5V42.1406C19.9318 41.3109 19.7394 40.4932 19.3747 39.748C19.0099 39.0029 18.4821 38.3493 17.8304 37.8359V37.8359Z"
fill="currentColor" />
<path
d="M17.8304 37.8359C15.6726 36.1581 13.925 34.0112 12.7199 31.5579C11.5148 29.1045 10.8839 26.4091 10.8749 23.6757C10.8296 13.8429 18.7367 5.66403 28.5695 5.43747C32.375 5.34725 36.1123 6.45746 39.2514 8.61062C42.3904 10.7638 44.7719 13.8506 46.0581 17.4333C47.3442 21.016 47.4698 24.9127 46.4169 28.5707C45.364 32.2288 43.1861 35.4625 40.1921 37.8132C39.5308 38.3245 38.995 38.9802 38.6259 39.7302C38.2568 40.4802 38.0641 41.3047 38.0624 42.1406V43.5C38.0624 43.9807 37.8715 44.4417 37.5316 44.7816C37.1917 45.1215 36.7307 45.3125 36.2499 45.3125H21.7499C21.2692 45.3125 20.8082 45.1215 20.4683 44.7816C20.1284 44.4417 19.9374 43.9807 19.9374 43.5V42.1406C19.9318 41.3109 19.7394 40.4932 19.3747 39.748C19.0099 39.0029 18.4821 38.3493 17.8304 37.8359V37.8359Z"
fill="white"
fill-opacity="0.2" />
</g>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M38.6857 9.43527C35.7198 7.4009 32.1887 6.35195 28.5932 6.43719L28.5925 6.4372C28.3515 6.44275 28.1116 6.45338 27.8731 6.46896L28.5464 4.43773C32.5617 4.34269 36.5049 5.51414 39.817 7.78597C43.1293 10.0579 45.6422 13.3151 46.9993 17.0954C48.3564 20.8758 48.4889 24.9875 47.3779 28.8473C46.2669 32.7072 43.9688 36.1193 40.8097 38.5998L40.8037 38.6045L40.8037 38.6044C40.263 39.0224 39.8249 39.5585 39.5232 40.1717C39.2215 40.7847 39.0639 41.4585 39.0625 42.1416V42.1425V43.5C39.0625 44.2459 38.7661 44.9613 38.2387 45.4887C37.7112 46.0161 36.9959 46.3125 36.25 46.3125H21.75C21.004 46.3125 20.2887 46.0161 19.7612 45.4887C19.2338 44.9613 18.9375 44.2459 18.9375 43.5V42.1441C18.9323 41.4657 18.7748 40.7971 18.4765 40.1877C18.1781 39.5781 17.7466 39.0434 17.2138 38.6231L17.8866 36.5936C18.069 36.7483 18.255 36.8993 18.4442 37.0465L17.8304 37.836L18.4492 37.0504C19.2189 37.6567 19.8421 38.4284 20.2729 39.3084C20.7036 40.1884 20.9307 41.154 20.9374 42.1338L20.9375 42.1406L20.9375 43.5C20.9375 43.7155 21.0231 43.9221 21.1754 44.0745C21.3278 44.2269 21.5345 44.3125 21.75 44.3125H36.25C36.4654 44.3125 36.6721 44.2269 36.8245 44.0745C36.9768 43.9221 37.0625 43.7155 37.0625 43.5V42.1406V42.1387C37.0644 41.1503 37.2923 40.1754 37.7287 39.2886C38.1646 38.4029 38.7969 37.6285 39.5775 37.0244C42.4048 34.8035 44.4614 31.7492 45.4559 28.2941C46.4507 24.8379 46.3321 21.1562 45.1169 17.7712C43.9017 14.3862 41.6516 11.4696 38.6857 9.43527ZM17.8865 36.5936L17.8866 36.5936L27.8731 6.46896L27.8724 6.469L28.5458 4.43775C18.1651 4.67729 9.8275 13.3058 9.87496 23.6797C9.88451 26.5645 10.5504 29.4094 11.8223 31.9987C13.0938 34.5872 14.9375 36.8525 17.2138 38.6231L17.8865 36.5936ZM17.8865 36.5936C16.1041 35.0827 14.6499 33.2189 13.6175 31.117C12.4793 28.7998 11.8834 26.254 11.8749 23.6725L11.8749 23.6711C11.8332 14.6214 18.9246 7.05389 27.8724 6.469L17.8865 36.5936ZM18.9376 52.5625C18.9376 52.0102 19.3853 51.5625 19.9376 51.5625H38.0626C38.6149 51.5625 39.0626 52.0102 39.0626 52.5625C39.0626 53.1148 38.6149 53.5625 38.0626 53.5625H19.9376C19.3853 53.5625 18.9376 53.1148 18.9376 52.5625ZM31.0024 11.8828C30.4579 11.7905 29.9416 12.1571 29.8493 12.7016C29.757 13.2461 30.1236 13.7624 30.6681 13.8547C32.6793 14.1956 34.535 15.1524 35.9792 16.5929C37.4235 18.0334 38.385 19.8867 38.731 21.897C38.8247 22.4413 39.3419 22.8066 39.8862 22.7129C40.4304 22.6192 40.7957 22.102 40.702 21.5577C40.2857 19.1394 39.129 16.9098 37.3916 15.1769C35.6543 13.4439 33.4218 12.293 31.0024 11.8828Z"
fill="currentColor" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M38.6857 9.43527C35.7198 7.4009 32.1887 6.35195 28.5932 6.43719L28.5925 6.4372C28.3515 6.44275 28.1116 6.45338 27.8731 6.46896L28.5464 4.43773C32.5617 4.34269 36.5049 5.51414 39.817 7.78597C43.1293 10.0579 45.6422 13.3151 46.9993 17.0954C48.3564 20.8758 48.4889 24.9875 47.3779 28.8473C46.2669 32.7072 43.9688 36.1193 40.8097 38.5998L40.8037 38.6045L40.8037 38.6044C40.263 39.0224 39.8249 39.5585 39.5232 40.1717C39.2215 40.7847 39.0639 41.4585 39.0625 42.1416V42.1425V43.5C39.0625 44.2459 38.7661 44.9613 38.2387 45.4887C37.7112 46.0161 36.9959 46.3125 36.25 46.3125H21.75C21.004 46.3125 20.2887 46.0161 19.7612 45.4887C19.2338 44.9613 18.9375 44.2459 18.9375 43.5V42.1441C18.9323 41.4657 18.7748 40.7971 18.4765 40.1877C18.1781 39.5781 17.7466 39.0434 17.2138 38.6231L17.8866 36.5936C18.069 36.7483 18.255 36.8993 18.4442 37.0465L17.8304 37.836L18.4492 37.0504C19.2189 37.6567 19.8421 38.4284 20.2729 39.3084C20.7036 40.1884 20.9307 41.154 20.9374 42.1338L20.9375 42.1406L20.9375 43.5C20.9375 43.7155 21.0231 43.9221 21.1754 44.0745C21.3278 44.2269 21.5345 44.3125 21.75 44.3125H36.25C36.4654 44.3125 36.6721 44.2269 36.8245 44.0745C36.9768 43.9221 37.0625 43.7155 37.0625 43.5V42.1406V42.1387C37.0644 41.1503 37.2923 40.1754 37.7287 39.2886C38.1646 38.4029 38.7969 37.6285 39.5775 37.0244C42.4048 34.8035 44.4614 31.7492 45.4559 28.2941C46.4507 24.8379 46.3321 21.1562 45.1169 17.7712C43.9017 14.3862 41.6516 11.4696 38.6857 9.43527ZM17.8865 36.5936L17.8866 36.5936L27.8731 6.46896L27.8724 6.469L28.5458 4.43775C18.1651 4.67729 9.8275 13.3058 9.87496 23.6797C9.88451 26.5645 10.5504 29.4094 11.8223 31.9987C13.0938 34.5872 14.9375 36.8525 17.2138 38.6231L17.8865 36.5936ZM17.8865 36.5936C16.1041 35.0827 14.6499 33.2189 13.6175 31.117C12.4793 28.7998 11.8834 26.254 11.8749 23.6725L11.8749 23.6711C11.8332 14.6214 18.9246 7.05389 27.8724 6.469L17.8865 36.5936ZM18.9376 52.5625C18.9376 52.0102 19.3853 51.5625 19.9376 51.5625H38.0626C38.6149 51.5625 39.0626 52.0102 39.0626 52.5625C39.0626 53.1148 38.6149 53.5625 38.0626 53.5625H19.9376C19.3853 53.5625 18.9376 53.1148 18.9376 52.5625ZM31.0024 11.8828C30.4579 11.7905 29.9416 12.1571 29.8493 12.7016C29.757 13.2461 30.1236 13.7624 30.6681 13.8547C32.6793 14.1956 34.535 15.1524 35.9792 16.5929C37.4235 18.0334 38.385 19.8867 38.731 21.897C38.8247 22.4413 39.3419 22.8066 39.8862 22.7129C40.4304 22.6192 40.7957 22.102 40.702 21.5577C40.2857 19.1394 39.129 16.9098 37.3916 15.1769C35.6543 13.4439 33.4218 12.293 31.0024 11.8828Z"
fill="white"
fill-opacity="0.2" />
</svg>
<h5 class="my-3">Inspiration Center</h5>
<p class="mb-3">Inspiration from experts to help you start and grow your big ideas.</p>
<a href="{% url 'help-center-article' %}" class="btn btn-sm btn-label-primary">Read More</a>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6">
<div class="card border shadow-none">
<div class="card-body text-center">
<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.2">
<path
d="M22.8829 41.2571L20.1415 46.6946C19.9651 47.0654 19.6651 47.3632 19.293 47.5369C18.9209 47.7105 18.4999 47.7491 18.1024 47.6462C12.5517 46.2868 7.74854 43.9305 4.25947 40.8946C3.99643 40.6625 3.80541 40.3599 3.70904 40.0226C3.61267 39.6853 3.61499 39.3275 3.71572 38.9915L11.3962 13.3446C11.4709 13.0821 11.6062 12.8409 11.7912 12.6402C11.9761 12.4395 12.2055 12.285 12.461 12.1891C14.631 11.2989 16.875 10.6014 19.1673 10.1047C19.6078 10.0083 20.0684 10.0774 20.4612 10.2988C20.854 10.5203 21.1515 10.8787 21.297 11.3055L23.0868 16.7204C27.0103 16.1766 30.9899 16.1766 34.9134 16.7204V16.7204L36.7032 11.3055C36.8487 10.8787 37.1462 10.5203 37.539 10.2988C37.9318 10.0774 38.3924 10.0083 38.8329 10.1047C41.1252 10.6014 43.3692 11.2989 45.5392 12.1891C45.7947 12.285 46.0241 12.4395 46.209 12.6402C46.394 12.8409 46.5293 13.0821 46.604 13.3446L54.2845 38.9915C54.3852 39.3275 54.3875 39.6853 54.2912 40.0226C54.1948 40.3599 54.0038 40.6625 53.7407 40.8946C50.2517 43.9305 45.4485 46.2868 39.8978 47.6462C39.5003 47.7491 39.0793 47.7105 38.7072 47.5369C38.3351 47.3632 38.0351 47.0654 37.8587 46.6946L35.1173 41.2571C33.0907 41.5421 31.0467 41.6859 29.0001 41.6876C26.9535 41.6859 24.9095 41.5421 22.8829 41.2571V41.2571Z"
fill="currentColor" />
<path
d="M22.8829 41.2571L20.1415 46.6946C19.9651 47.0654 19.6651 47.3632 19.293 47.5369C18.9209 47.7105 18.4999 47.7491 18.1024 47.6462C12.5517 46.2868 7.74854 43.9305 4.25947 40.8946C3.99643 40.6625 3.80541 40.3599 3.70904 40.0226C3.61267 39.6853 3.61499 39.3275 3.71572 38.9915L11.3962 13.3446C11.4709 13.0821 11.6062 12.8409 11.7912 12.6402C11.9761 12.4395 12.2055 12.285 12.461 12.1891C14.631 11.2989 16.875 10.6014 19.1673 10.1047C19.6078 10.0083 20.0684 10.0774 20.4612 10.2988C20.854 10.5203 21.1515 10.8787 21.297 11.3055L23.0868 16.7204C27.0103 16.1766 30.9899 16.1766 34.9134 16.7204V16.7204L36.7032 11.3055C36.8487 10.8787 37.1462 10.5203 37.539 10.2988C37.9318 10.0774 38.3924 10.0083 38.8329 10.1047C41.1252 10.6014 43.3692 11.2989 45.5392 12.1891C45.7947 12.285 46.0241 12.4395 46.209 12.6402C46.394 12.8409 46.5293 13.0821 46.604 13.3446L54.2845 38.9915C54.3852 39.3275 54.3875 39.6853 54.2912 40.0226C54.1948 40.3599 54.0038 40.6625 53.7407 40.8946C50.2517 43.9305 45.4485 46.2868 39.8978 47.6462C39.5003 47.7491 39.0793 47.7105 38.7072 47.5369C38.3351 47.3632 38.0351 47.0654 37.8587 46.6946L35.1173 41.2571C33.0907 41.5421 31.0467 41.6859 29.0001 41.6876C26.9535 41.6859 24.9095 41.5421 22.8829 41.2571V41.2571Z"
fill="white"
fill-opacity="0.2" />
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.4688 32.625C24.4688 34.1265 23.2515 35.3438 21.75 35.3438C20.2485 35.3438 19.0312 34.1265 19.0312 32.625C19.0312 31.1235 20.2485 29.9062 21.75 29.9062C23.2515 29.9062 24.4688 31.1235 24.4688 32.625ZM38.9688 32.625C38.9688 34.1265 37.7515 35.3438 36.25 35.3438C34.7485 35.3438 33.5312 34.1265 33.5312 32.625C33.5312 31.1235 34.7485 29.9062 36.25 29.9062C37.7515 29.9062 38.9688 31.1235 38.9688 32.625Z" fill="currentColor" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M24.4688 32.625C24.4688 34.1265 23.2515 35.3438 21.75 35.3438C20.2485 35.3438 19.0312 34.1265 19.0312 32.625C19.0312 31.1235 20.2485 29.9062 21.75 29.9062C23.2515 29.9062 24.4688 31.1235 24.4688 32.625ZM38.9688 32.625C38.9688 34.1265 37.7515 35.3438 36.25 35.3438C34.7485 35.3438 33.5312 34.1265 33.5312 32.625C33.5312 31.1235 34.7485 29.9062 36.25 29.9062C37.7515 29.9062 38.9688 31.1235 38.9688 32.625Z"
fill="white"
fill-opacity="0.2" />
<path
d="M16.8563 18.1251C20.7855 16.8936 24.8826 16.2821 29.0001 16.3126C33.1176 16.2821 37.2147 16.8936 41.1439 18.1251M41.1439 39.8751C37.2147 41.1065 33.1176 41.718 29.0001 41.6876C24.8826 41.718 20.7855 41.1065 16.8563 39.8751M35.1173 41.2571L37.8587 46.6946C38.0351 47.0654 38.3351 47.3632 38.7072 47.5368C39.0793 47.7105 39.5003 47.7491 39.8978 47.6462C45.4485 46.2868 50.2517 43.9305 53.7407 40.8946C54.0038 40.6625 54.1948 40.3599 54.2912 40.0226C54.3875 39.6853 54.3852 39.3275 54.2845 38.9915L46.604 13.3446C46.5293 13.0821 46.394 12.8409 46.209 12.6402C46.0241 12.4395 45.7947 12.285 45.5392 12.1891C43.3692 11.2989 41.1252 10.6014 38.8329 10.1047C38.3924 10.0083 37.9318 10.0774 37.539 10.2988C37.1462 10.5203 36.8487 10.8787 36.7032 11.3055L34.9134 16.7204M22.8829 41.2571L20.1415 46.6946C19.9651 47.0654 19.6651 47.3632 19.293 47.5368C18.9209 47.7105 18.4999 47.7491 18.1024 47.6462C12.5517 46.2868 7.74854 43.9305 4.25947 40.8946C3.99643 40.6625 3.80541 40.3599 3.70904 40.0226C3.61267 39.6853 3.61499 39.3275 3.71572 38.9915L11.3962 13.3446C11.4709 13.0821 11.6062 12.8409 11.7912 12.6402C11.9761 12.4395 12.2055 12.285 12.461 12.1891C14.631 11.2989 16.875 10.6014 19.1673 10.1047C19.6078 10.0083 20.0684 10.0774 20.4612 10.2988C20.854 10.5203 21.1515 10.8787 21.297 11.3055L23.0868 16.7204"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M16.8563 18.1251C20.7855 16.8936 24.8826 16.2821 29.0001 16.3126C33.1176 16.2821 37.2147 16.8936 41.1439 18.1251M41.1439 39.8751C37.2147 41.1065 33.1176 41.718 29.0001 41.6876C24.8826 41.718 20.7855 41.1065 16.8563 39.8751M35.1173 41.2571L37.8587 46.6946C38.0351 47.0654 38.3351 47.3632 38.7072 47.5368C39.0793 47.7105 39.5003 47.7491 39.8978 47.6462C45.4485 46.2868 50.2517 43.9305 53.7407 40.8946C54.0038 40.6625 54.1948 40.3599 54.2912 40.0226C54.3875 39.6853 54.3852 39.3275 54.2845 38.9915L46.604 13.3446C46.5293 13.0821 46.394 12.8409 46.209 12.6402C46.0241 12.4395 45.7947 12.285 45.5392 12.1891C43.3692 11.2989 41.1252 10.6014 38.8329 10.1047C38.3924 10.0083 37.9318 10.0774 37.539 10.2988C37.1462 10.5203 36.8487 10.8787 36.7032 11.3055L34.9134 16.7204M22.8829 41.2571L20.1415 46.6946C19.9651 47.0654 19.6651 47.3632 19.293 47.5368C18.9209 47.7105 18.4999 47.7491 18.1024 47.6462C12.5517 46.2868 7.74854 43.9305 4.25947 40.8946C3.99643 40.6625 3.80541 40.3599 3.70904 40.0226C3.61267 39.6853 3.61499 39.3275 3.71572 38.9915L11.3962 13.3446C11.4709 13.0821 11.6062 12.8409 11.7912 12.6402C11.9761 12.4395 12.2055 12.285 12.461 12.1891C14.631 11.2989 16.875 10.6014 19.1673 10.1047C19.6078 10.0083 20.0684 10.0774 20.4612 10.2988C20.854 10.5203 21.1515 10.8787 21.297 11.3055L23.0868 16.7204"
stroke="white"
stroke-opacity="0.2"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<h5 class="my-3">Community</h5>
<p class="mb-3">A group of people living in the same place or having a particular.</p>
<a href="{% url 'help-center-article' %}" class="btn btn-sm btn-label-primary">Read More</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Keep Learning: End -->
<!-- Help Area: Start -->
<section class="section-py bg-body">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8 col-lg-6 text-center">
<h4>Still need help?</h4>
<p>Our specialists are always happy to help.<br />Contact us during standard business hours or email us 24/7 and we'll get back to you.</p>
<div class="d-flex justify-content-center flex-wrap gap-4">
<a href="javascript:void(0);" class="btn btn-primary">Visit our community</a>
<a href="javascript:void(0);" class="btn btn-primary">Contact us</a>
</div>
</div>
</div>
</div>
</section>
<!-- Help Area: End -->
{% endblock %}

View File

@@ -0,0 +1,996 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Landing Page - Front Pages{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/nouislider/nouislider.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/swiper/swiper.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/nouislider/nouislider.js' %}"></script>
<script src="{% static 'vendor/libs/swiper/swiper.js' %}"></script>
{% endblock vendor_js %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/front-page-landing.css' %}">
{% endblock page_css %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/front-page-landing.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div data-bs-spy="scroll" class="scrollspy-example">
<!-- Hero: Start -->
<section id="hero-animation">
<div id="landingHero" class="section-py landing-hero position-relative">
<img src="{% static 'img/front-pages/backgrounds/hero-bg.png' %}" alt="hero background" class="position-absolute top-0 start-50 translate-middle-x object-fit-cover w-100 h-100" data-speed="1" />
<div class="container">
<div class="hero-text-box text-center position-relative">
<h1 class="text-primary hero-title display-6 fw-extrabold">One dashboard to manage all your businesses</h1>
<h2 class="hero-sub-title h6 mb-6">
Production-ready & easy to use Admin Template<br class="d-none d-lg-block" />
for Reliability and Customizability.
</h2>
<div class="landing-hero-btn d-inline-block position-relative">
<span class="hero-btn-item position-absolute d-none d-md-flex fw-medium">Join community <img src="{% static 'img/front-pages/icons/Join-community-arrow.png' %}" alt="Join community arrow" class="scaleX-n1-rtl" /></span>
<a href="{% url 'landing-page' %}#landingPricing" class="btn btn-primary btn-lg">Get early access</a>
</div>
</div>
<div id="heroDashboardAnimation" class="hero-animation-img">
<a href="{% url 'app-ecommerce-dashboard' %}" target="_blank">
<div id="heroAnimationImg" class="position-relative hero-dashboard-img">
<img src="{% static 'img/front-pages/landing-page/hero-dashboard-' %}{{ COOKIES.theme|default:theme }}.png" alt="hero dashboard" class="animation-img" data-app-light-img="front-pages/landing-page/hero-dashboard-light.png" data-app-dark-img="front-pages/landing-page/hero-dashboard-dark.png" />
<img src="{% static 'img/front-pages/landing-page/hero-elements-' %}{{ COOKIES.theme|default:theme }}.png" alt="hero elements" class="position-absolute hero-elements-img animation-img top-0 start-0" data-app-light-img="front-pages/landing-page/hero-elements-light.png" data-app-dark-img="front-pages/landing-page/hero-elements-dark.png" />
</div>
</a>
</div>
</div>
</div>
<div class="landing-hero-blank"></div>
</section>
<!-- Hero: End -->
<!-- Useful features: Start -->
<section id="landingFeatures" class="section-py landing-features">
<div class="container">
<div class="text-center mb-4">
<span class="badge bg-label-primary">Useful Features</span>
</div>
<h4 class="text-center mb-1">
<span class="position-relative fw-extrabold z-1"
>Everything you need
<img src="{% static 'img/front-pages/icons/section-title-icon.png' %}" alt="laptop charging" class="section-title-img position-absolute object-fit-contain bottom-0 z-n1" />
</span>
to start your next project
</h4>
<p class="text-center mb-12">Not just a set of tools, the package includes ready-to-deploy conceptual application.</p>
<div class="features-icon-wrapper row gx-0 gy-6 g-sm-12">
<div class="col-lg-4 col-sm-6 text-center features-icon-box">
<div class="mb-4 text-primary text-center">
<svg width="64" height="65" viewBox="0 0 64 65" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.2" d="M10 44.4663V18.4663C10 17.4054 10.4214 16.388 11.1716 15.6379C11.9217 14.8877 12.9391 14.4663 14 14.4663H50C51.0609 14.4663 52.0783 14.8877 52.8284 15.6379C53.5786 16.388 54 17.4054 54 18.4663V44.4663H10Z" fill="currentColor" />
<path
d="M10 44.4663V18.4663C10 17.4054 10.4214 16.388 11.1716 15.6379C11.9217 14.8877 12.9391 14.4663 14 14.4663H50C51.0609 14.4663 52.0783 14.8877 52.8284 15.6379C53.5786 16.388 54 17.4054 54 18.4663V44.4663M36 22.4663H28M6 44.4663H58V48.4663C58 49.5272 57.5786 50.5446 56.8284 51.2947C56.0783 52.0449 55.0609 52.4663 54 52.4663H10C8.93913 52.4663 7.92172 52.0449 7.17157 51.2947C6.42143 50.5446 6 49.5272 6 48.4663V44.4663Z"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</div>
<h5 class="mb-2">Quality Code</h5>
<p class="features-icon-description">Code structure that all developers will easily understand and fall in love with.</p>
</div>
<div class="col-lg-4 col-sm-6 text-center features-icon-box">
<div class="mb-4 text-primary text-center">
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
opacity="0.2"
fill-rule="evenodd"
clip-rule="evenodd"
d="M52.8934 36.9867L45.1661 27.709C45.4614 33.3937 44.0587 40.0137 39.7274 47.5687L47.1102 53.475C47.3728 53.6835 47.6842 53.8215 48.0149 53.8759C48.3457 53.9303 48.6849 53.8994 49.0004 53.786C49.3159 53.6726 49.5972 53.4806 49.8177 53.228C50.0381 52.9755 50.1905 52.6709 50.2602 52.343L53.2872 38.6602C53.3602 38.3701 53.3625 38.0667 53.294 37.7755C53.2255 37.4843 53.0881 37.2138 52.8934 36.9867ZM10.959 37.1344L18.6864 27.8813C18.3911 33.566 19.7938 40.1859 24.1251 47.7164L16.7422 53.6227C16.4814 53.8311 16.1718 53.9698 15.8426 54.0256C15.5134 54.0814 15.1754 54.0526 14.8604 53.9419C14.5453 53.8311 14.2637 53.6421 14.0418 53.3925C13.82 53.143 13.6653 52.8411 13.5922 52.5152L10.5653 38.8078C10.4923 38.5177 10.49 38.2144 10.5585 37.9232C10.627 37.632 10.7644 37.3615 10.959 37.1344Z"
fill="currentColor" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M30.1373 4.56417C30.661 4.13034 31.3197 3.89282 31.9999 3.89282C32.6817 3.89282 33.3419 4.1314 33.8661 4.56708C36.2461 6.5048 41.3981 11.3124 44.2413 18.7028C45.231 21.2754 45.9359 24.1485 46.1526 27.3062L53.8054 36.4894C54.1015 36.8368 54.3105 37.2498 54.4151 37.6941C54.519 38.1357 54.5167 38.5956 54.4085 39.0361L51.3844 52.7309L51.3837 52.734C51.2735 53.2253 51.0402 53.6805 50.7057 54.0569C50.3712 54.4332 49.9465 54.7183 49.4715 54.8853C48.9964 55.0523 48.4867 55.0957 47.9903 55.0115C47.4939 54.9273 47.027 54.7182 46.6337 54.4039L46.6332 54.4035L39.5243 48.7164H24.4758L17.3669 54.4035L17.3665 54.4039C16.9731 54.7182 16.5062 54.9273 16.0098 55.0115C15.5134 55.0957 15.0037 55.0523 14.5287 54.8853C14.0537 54.7183 13.6289 54.4332 13.2944 54.0569C12.9599 53.6805 12.7266 53.2253 12.6165 52.734L12.6158 52.7309L9.59162 39.0361C9.48345 38.5957 9.48117 38.1358 9.58509 37.6941C9.68969 37.2496 9.89886 36.8364 10.1952 36.489L17.7037 27.4979C17.9004 24.2604 18.619 21.3188 19.6398 18.6906C22.5111 11.2981 27.7301 6.49122 30.1373 4.56417ZM44.1834 27.8703C44.1674 27.7856 44.1625 27.6995 44.1686 27.6142C43.9794 24.5834 43.3088 21.8491 42.3746 19.4209C39.7071 12.4872 34.8477 7.94455 32.5992 6.11468L32.5893 6.10666L32.5894 6.1066C32.424 5.96848 32.2154 5.89282 31.9999 5.89282C31.7845 5.89282 31.5759 5.96848 31.4105 6.1066L31.3942 6.11994C29.1222 7.93749 24.1977 12.4799 21.5041 19.4147C20.5347 21.9107 19.8484 24.7306 19.6863 27.8638C19.6871 27.9087 19.6849 27.9536 19.6796 27.9984C19.4292 33.348 20.7083 39.6051 24.7062 46.7164H39.2879C43.2365 39.5474 44.4691 33.2477 44.1834 27.8703ZM52.2729 37.7746L46.2018 30.4892C46.0153 35.5301 44.567 41.2065 41.1592 47.4631L47.8821 52.8414C48.0105 52.944 48.1628 53.0122 48.3248 53.0397C48.4868 53.0672 48.6531 53.053 48.8081 52.9985C48.9631 52.944 49.1017 52.851 49.2109 52.7282C49.3197 52.6057 49.3957 52.4576 49.4318 52.2978L49.4321 52.2965L52.4584 38.5922C52.4605 38.5827 52.4627 38.5733 52.4651 38.5639C52.499 38.4289 52.5001 38.2877 52.4682 38.1522C52.4363 38.0167 52.3724 37.8908 52.2818 37.7852L52.2728 37.7746L52.2729 37.7746ZM17.6801 30.6463L11.7266 37.7754L11.7184 37.7852L11.7183 37.7852C11.6277 37.8908 11.5638 38.0167 11.5319 38.1522C11.5 38.2877 11.5011 38.4289 11.5351 38.5639C11.5374 38.5733 11.5397 38.5827 11.5418 38.5922L14.568 52.2965L14.5683 52.2978C14.6044 52.4576 14.6804 52.6057 14.7893 52.7282C14.8984 52.851 15.037 52.944 15.192 52.9985C15.347 53.053 15.5133 53.0672 15.6753 53.0397C15.8373 53.0122 15.9897 52.944 16.118 52.8414L22.835 47.4678C19.3947 41.2766 17.9053 35.6511 17.6801 30.6463ZM27.0626 55.5914C27.0626 55.0391 27.5103 54.5914 28.0626 54.5914H35.9376C36.4899 54.5914 36.9376 55.0391 36.9376 55.5914C36.9376 56.1437 36.4899 56.5914 35.9376 56.5914H28.0626C27.5103 56.5914 27.0626 56.1437 27.0626 55.5914ZM34.9532 24.0914C34.9532 25.7224 33.631 27.0445 32.0001 27.0445C30.3691 27.0445 29.047 25.7224 29.047 24.0914C29.047 22.4604 30.3691 21.1383 32.0001 21.1383C33.631 21.1383 34.9532 22.4604 34.9532 24.0914Z"
fill="currentColor" />
</svg>
</div>
<h5 class="mb-2">Continuous Updates</h5>
<p class="features-icon-description">Free updates for the next 12 months, including new demos and features.</p>
</div>
<div class="col-lg-4 col-sm-6 text-center features-icon-box">
<div class="text-center mb-4 text-primary">
<svg width="64" height="65" viewBox="0 0 64 65" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
opacity="0.2"
d="M52.575 9.44123L5.97499 22.5662C5.57831 22.6747 5.2247 22.9028 4.96234 23.2195C4.69997 23.5361 4.54161 23.926 4.50881 24.3359C4.47602 24.7459 4.57039 25.1559 4.77907 25.5103C4.98775 25.8647 5.3006 26.1461 5.67499 26.3162L27.075 36.4412C27.4942 36.6354 27.8309 36.972 28.025 37.3912L38.15 58.7912C38.3201 59.1656 38.6016 59.4785 38.9559 59.6872C39.3103 59.8958 39.7204 59.9902 40.1303 59.9574C40.5402 59.9246 40.9301 59.7662 41.2468 59.5039C41.5634 59.2415 41.7915 58.8879 41.9 58.4912L55.025 11.8912C55.1245 11.5512 55.1306 11.1906 55.0428 10.8474C54.955 10.5041 54.7765 10.1908 54.5259 9.94028C54.2754 9.68975 53.9621 9.51123 53.6189 9.42342C53.2756 9.33562 52.9151 9.34177 52.575 9.44123Z"
fill="currentColor" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M53.8666 8.45462C53.3513 8.32282 52.8102 8.33156 52.2995 8.47988L52.2942 8.48144L5.71115 21.6016L5.70701 21.6028C5.11366 21.7659 4.5848 22.1076 4.19216 22.5815C3.79862 23.0565 3.56107 23.6413 3.51188 24.2562C3.46268 24.8711 3.60424 25.4862 3.91726 26.0177C4.22884 26.5468 4.69522 26.9675 5.25338 27.2231L26.6472 37.3452L26.6472 37.3452L26.6546 37.3486C26.8589 37.4432 27.0229 37.6072 27.1175 37.8115L27.1174 37.8115L27.1209 37.8189L37.243 59.2126C37.4985 59.7708 37.9192 60.2372 38.4484 60.5488C38.9799 60.8619 39.595 61.0034 40.2099 60.9542C40.8248 60.905 41.4096 60.6675 41.8846 60.2739C42.3586 59.8813 42.7002 59.3524 42.8634 58.759L42.8645 58.755L55.9847 12.1719L55.9862 12.1668C56.1346 11.656 56.1433 11.1149 56.0115 10.5996C55.8792 10.0825 55.6103 9.61055 55.2329 9.23317C54.8556 8.85579 54.3836 8.58688 53.8666 8.45462ZM52.846 10.4038L52.5749 9.44123L52.8556 10.401C53.0235 10.3519 53.2015 10.3489 53.3709 10.3922C53.5404 10.4356 53.695 10.5237 53.8187 10.6474C53.9424 10.7711 54.0305 10.9257 54.0739 11.0952C54.1172 11.2646 54.1142 11.4426 54.0651 11.6105L54.065 11.6105L54.0623 11.6201L40.9373 58.2201L40.9353 58.2275C40.8811 58.4258 40.767 58.6026 40.6087 58.7338C40.4503 58.865 40.2554 58.9442 40.0504 58.9606C39.8455 58.977 39.6404 58.9298 39.4632 58.8255C39.2861 58.7211 39.1454 58.5647 39.0603 58.3775L39.0538 58.3635L28.9323 36.971L28.9303 36.9667C28.9285 36.9629 28.9268 36.9591 28.925 36.9553L39.732 26.1483C40.1225 25.7578 40.1225 25.1246 39.732 24.7341C39.3415 24.3436 38.7083 24.3436 38.3178 24.7341L27.5108 35.5411C27.5069 35.5393 27.503 35.5375 27.4991 35.5357L6.10255 25.4123L6.0886 25.4058C5.9014 25.3208 5.74498 25.18 5.64064 25.0029C5.53629 24.8257 5.48911 24.6206 5.50551 24.4157C5.5219 24.2107 5.60109 24.0158 5.73227 23.8574C5.86345 23.6991 6.04025 23.5851 6.2386 23.5308L6.2386 23.5309L6.24598 23.5288L52.846 10.4038Z"
fill="currentColor" />
</svg>
</div>
<h5 class="mb-2">Stater-Kit</h5>
<p class="features-icon-description">Start your project quickly without having to remove unnecessary features.</p>
</div>
<div class="col-lg-4 col-sm-6 text-center features-icon-box">
<div class="text-center mb-4 text-primary">
<svg width="64" height="65" viewBox="0 0 64 65" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
opacity="0.2"
d="M13.625 50.8413C11.325 48.5413 12.85 43.7163 11.675 40.8913C10.5 38.0663 6 35.5913 6 32.4663C6 29.3413 10.45 26.9663 11.675 24.0413C12.9 21.1163 11.325 16.3913 13.625 14.0913C15.925 11.7913 20.75 13.3163 23.575 12.1413C26.4 10.9663 28.875 6.46631 32 6.46631C35.125 6.46631 37.5 10.9163 40.425 12.1413C43.35 13.3663 48.075 11.7913 50.375 14.0913C52.675 16.3913 51.15 21.2163 52.325 24.0413C53.5 26.8663 58 29.3413 58 32.4663C58 35.5913 53.55 37.9663 52.325 40.8913C51.1 43.8163 52.675 48.5413 50.375 50.8413C48.075 53.1413 43.25 51.6163 40.425 52.7913C37.6 53.9663 35.125 58.4663 32 58.4663C28.875 58.4663 26.5 54.0163 23.575 52.7913C20.65 51.5663 15.925 53.1413 13.625 50.8413Z"
fill="currentColor" />
<path
d="M43 26.4663L28.325 40.4663L21 33.4663M13.625 50.8413C11.325 48.5413 12.85 43.7163 11.675 40.8913C10.5 38.0663 6 35.5913 6 32.4663C6 29.3413 10.45 26.9663 11.675 24.0413C12.9 21.1163 11.325 16.3913 13.625 14.0913C15.925 11.7913 20.75 13.3163 23.575 12.1413C26.4 10.9663 28.875 6.46631 32 6.46631C35.125 6.46631 37.5 10.9163 40.425 12.1413C43.35 13.3663 48.075 11.7913 50.375 14.0913C52.675 16.3913 51.15 21.2163 52.325 24.0413C53.5 26.8663 58 29.3413 58 32.4663C58 35.5913 53.55 37.9663 52.325 40.8913C51.1 43.8163 52.675 48.5413 50.375 50.8413C48.075 53.1413 43.25 51.6163 40.425 52.7913C37.6 53.9663 35.125 58.4663 32 58.4663C28.875 58.4663 26.5 54.0163 23.575 52.7913C20.65 51.5663 15.925 53.1413 13.625 50.8413Z"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</div>
<h5 class="mb-2">API Ready</h5>
<p class="features-icon-description">Just change the endpoint and see your own data loaded within seconds.</p>
</div>
<div class="col-lg-4 col-sm-6 text-center features-icon-box">
<div class="text-center mb-4 text-primary">
<svg width="64" height="65" viewBox="0 0 64 65" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
opacity="0.2"
d="M31.9999 8.46631C27.1437 8.46489 22.4012 9.93672 18.399 12.6874C14.3969 15.438 11.3233 19.3381 9.58436 23.8723C7.84542 28.4066 7.52291 33.3617 8.65945 38.0831C9.79598 42.8045 12.3381 47.0701 15.9499 50.3163C17.4549 47.3526 19.7511 44.8636 22.5841 43.125C25.417 41.3864 28.676 40.4662 31.9999 40.4663C30.0221 40.4663 28.0887 39.8798 26.4442 38.781C24.7997 37.6822 23.518 36.1204 22.7611 34.2931C22.0043 32.4659 21.8062 30.4552 22.1921 28.5154C22.5779 26.5756 23.5303 24.7938 24.9289 23.3952C26.3274 21.9967 28.1092 21.0443 30.049 20.6585C31.9888 20.2726 33.9995 20.4706 35.8268 21.2275C37.654 21.9844 39.2158 23.2661 40.3146 24.9106C41.4135 26.5551 41.9999 28.4885 41.9999 30.4663C41.9999 33.1185 40.9464 35.662 39.071 37.5374C37.1956 39.4127 34.6521 40.4663 31.9999 40.4663C35.3238 40.4662 38.5829 41.3864 41.4158 43.125C44.2487 44.8636 46.545 47.3526 48.0499 50.3163C51.6618 47.0701 54.2039 42.8045 55.3404 38.0831C56.477 33.3617 56.1545 28.4066 54.4155 23.8723C52.6766 19.3381 49.603 15.438 45.6008 12.6874C41.5987 9.93672 36.8562 8.46489 31.9999 8.46631Z"
fill="currentColor" />
<path
d="M32 40.4663C37.5228 40.4663 42 35.9892 42 30.4663C42 24.9435 37.5228 20.4663 32 20.4663C26.4772 20.4663 22 24.9435 22 30.4663C22 35.9892 26.4772 40.4663 32 40.4663ZM32 40.4663C28.6759 40.4663 25.4168 41.3852 22.5839 43.1241C19.7509 44.863 17.4548 47.3524 15.95 50.3163M32 40.4663C35.3241 40.4663 38.5832 41.3852 41.4161 43.1241C44.2491 44.863 46.5452 47.3524 48.05 50.3163M56 32.4663C56 45.7211 45.2548 56.4663 32 56.4663C18.7452 56.4663 8 45.7211 8 32.4663C8 19.2115 18.7452 8.46631 32 8.46631C45.2548 8.46631 56 19.2115 56 32.4663Z"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</div>
<h5 class="mb-2">Excellent Support</h5>
<p class="features-icon-description">An easy-to-follow doc with lots of references and code examples.</p>
</div>
<div class="col-lg-4 col-sm-6 text-center features-icon-box">
<div class="text-center mb-4 text-primary">
<svg width="64" height="65" viewBox="0 0 64 65" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.2" d="M55.875 14.4663H8.125C6.95139 14.4663 6 15.4177 6 16.5913V48.3413C6 49.5149 6.95139 50.4663 8.125 50.4663H55.875C57.0486 50.4663 58 49.5149 58 48.3413V16.5913C58 15.4177 57.0486 14.4663 55.875 14.4663Z" fill="currentColor" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M7 16.5913C7 15.97 7.50368 15.4663 8.125 15.4663H55.875C56.4963 15.4663 57 15.97 57 16.5913V48.3413C57 48.9626 56.4963 49.4663 55.875 49.4663H8.125C7.50368 49.4663 7 48.9626 7 48.3413V16.5913ZM8.125 13.4663C6.39911 13.4663 5 14.8654 5 16.5913V48.3413C5 50.0672 6.39911 51.4663 8.125 51.4663H55.875C57.6009 51.4663 59 50.0672 59 48.3413V16.5913C59 14.8654 57.6009 13.4663 55.875 13.4663H8.125ZM14 23.4663C13.4477 23.4663 13 23.914 13 24.4663C13 25.0186 13.4477 25.4663 14 25.4663H50C50.5523 25.4663 51 25.0186 51 24.4663C51 23.914 50.5523 23.4663 50 23.4663H14ZM14 31.4663C13.4477 31.4663 13 31.914 13 32.4663C13 33.0186 13.4477 33.4663 14 33.4663H50C50.5523 33.4663 51 33.0186 51 32.4663C51 31.914 50.5523 31.4663 50 31.4663H14ZM13 40.4663C13 39.914 13.4477 39.4663 14 39.4663H16C16.5523 39.4663 17 39.914 17 40.4663C17 41.0186 16.5523 41.4663 16 41.4663H14C13.4477 41.4663 13 41.0186 13 40.4663ZM24 39.4663C23.4477 39.4663 23 39.914 23 40.4663C23 41.0186 23.4477 41.4663 24 41.4663H40C40.5523 41.4663 41 41.0186 41 40.4663C41 39.914 40.5523 39.4663 40 39.4663H24ZM47 40.4663C47 39.914 47.4477 39.4663 48 39.4663H50C50.5523 39.4663 51 39.914 51 40.4663C51 41.0186 50.5523 41.4663 50 41.4663H48C47.4477 41.4663 47 41.0186 47 40.4663Z"
fill="currentColor" />
</svg>
</div>
<h5 class="mb-2">Well Documented</h5>
<p class="features-icon-description">An easy-to-follow doc with lots of references and code examples.</p>
</div>
</div>
</div>
</section>
<!-- Useful features: End -->
<!-- Real customers reviews: Start -->
<section id="landingReviews" class="section-py bg-body landing-reviews pb-0">
<!-- What people say slider: Start -->
<div class="container">
<div class="row align-items-center gx-0 gy-4 g-lg-5 mb-5 pb-md-5">
<div class="col-md-6 col-lg-5 col-xl-3">
<div class="mb-4">
<span class="badge bg-label-primary">Real Customers Reviews</span>
</div>
<h4 class="mb-1">
<span class="position-relative fw-extrabold z-1"
>What people say
<img src="{% static 'img/front-pages/icons/section-title-icon.png' %}" alt="laptop charging" class="section-title-img position-absolute object-fit-contain bottom-0 z-n1" />
</span>
</h4>
<p class="mb-5 mb-md-12">
See what our customers have to<br class="d-none d-xl-block" />
say about their experience.
</p>
<div class="landing-reviews-btns">
<button id="reviews-previous-btn" class="btn btn-icon btn-label-primary reviews-btn me-3" type="button">
<i class="icon-base ti tabler-chevron-left icon-md scaleX-n1-rtl"></i>
</button>
<button id="reviews-next-btn" class="btn btn-icon btn-label-primary reviews-btn" type="button">
<i class="icon-base ti tabler-chevron-right icon-md scaleX-n1-rtl"></i>
</button>
</div>
</div>
<div class="col-md-6 col-lg-7 col-xl-9">
<div class="swiper-reviews-carousel overflow-hidden">
<div class="swiper" id="swiper-reviews">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="card h-100">
<div class="card-body text-body d-flex flex-column justify-content-between h-100">
<div class="mb-4">
<img src="{% static 'img/front-pages/branding/logo-1.png' %}" alt="client logo" class="client-logo img-fluid" />
</div>
<p>“Vuexy is hands down the most useful front end Bootstrap theme I've ever used. I can't wait to use it again for my next project.”</p>
<div class="text-warning mb-4">
<i class="icon-base ti tabler-star-filled"></i>
<i class="icon-base ti tabler-star-filled"></i>
<i class="icon-base ti tabler-star-filled"></i>
<i class="icon-base ti tabler-star-filled"></i>
<i class="icon-base ti tabler-star-filled"></i>
</div>
<div class="d-flex align-items-center">
<div class="avatar me-3 avatar-sm">
<img src="{% static 'img/avatars/1.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div>
<h6 class="mb-0">Cecilia Payne</h6>
<p class="small text-body-secondary mb-0">CEO of Airbnb</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card h-100">
<div class="card-body text-body d-flex flex-column justify-content-between h-100">
<div class="mb-4">
<img src="{% static 'img/front-pages/branding/logo-2.png' %}" alt="client logo" class="client-logo img-fluid" />
</div>
<p>“I've never used a theme as versatile and flexible as Vuexy. It's my go to for building dashboard sites on almost any project.”</p>
<div class="text-warning mb-4">
<i class="icon-base ti tabler-star-filled"></i>
<i class="icon-base ti tabler-star-filled"></i>
<i class="icon-base ti tabler-star-filled"></i>
<i class="icon-base ti tabler-star-filled"></i>
<i class="icon-base ti tabler-star-filled"></i>
</div>
<div class="d-flex align-items-center">
<div class="avatar me-3 avatar-sm">
<img src="{% static 'img/avatars/2.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div>
<h6 class="mb-0">Eugenia Moore</h6>
<p class="small text-body-secondary mb-0">Founder of Hubspot</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card h-100">
<div class="card-body text-body d-flex flex-column justify-content-between h-100">
<div class="mb-4">
<img src="{% static 'img/front-pages/branding/logo-3.png' %}" alt="client logo" class="client-logo img-fluid" />
</div>
<p>This template is really clean & well documented. The docs are really easy to understand and it's always easy to find a screenshot from their website.</p>
<div class="text-warning mb-4">
<i class="icon-base ti tabler-star-filled"></i>
<i class="icon-base ti tabler-star-filled"></i>
<i class="icon-base ti tabler-star-filled"></i>
<i class="icon-base ti tabler-star-filled"></i>
<i class="icon-base ti tabler-star-filled"></i>
</div>
<div class="d-flex align-items-center">
<div class="avatar me-3 avatar-sm">
<img src="{% static 'img/avatars/3.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div>
<h6 class="mb-0">Curtis Fletcher</h6>
<p class="small text-body-secondary mb-0">Design Lead at Dribbble</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card h-100">
<div class="card-body text-body d-flex flex-column justify-content-between h-100">
<div class="mb-4">
<img src="{% static 'img/front-pages/branding/logo-4.png' %}" alt="client logo" class="client-logo img-fluid" />
</div>
<p>All the requirements for developers have been taken into consideration, so Im able to build any interface I want.</p>
<div class="text-warning mb-4">
<i class="icon-base ti tabler-star-filled"></i>
<i class="icon-base ti tabler-star-filled"></i>
<i class="icon-base ti tabler-star-filled"></i>
<i class="icon-base ti tabler-star-filled"></i>
<i class="icon-base ti tabler-star-filled"></i>
</div>
<div class="d-flex align-items-center">
<div class="avatar me-3 avatar-sm">
<img src="{% static 'img/avatars/4.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div>
<h6 class="mb-0">Sara Smith</h6>
<p class="small text-body-secondary mb-0">Founder of Continental</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card h-100">
<div class="card-body text-body d-flex flex-column justify-content-between h-100">
<div class="mb-4">
<img src="{% static 'img/front-pages/branding/logo-5.png' %}" alt="client logo" class="client-logo img-fluid" />
</div>
<p>“I've never used a theme as versatile and flexible as Vuexy. It's my go to for building dashboard sites on almost any project.”</p>
<div class="text-warning mb-4">
<i class="icon-base ti tabler-star-filled"></i>
<i class="icon-base ti tabler-star-filled"></i>
<i class="icon-base ti tabler-star-filled"></i>
<i class="icon-base ti tabler-star-filled"></i>
<i class="icon-base ti tabler-star-filled"></i>
</div>
<div class="d-flex align-items-center">
<div class="avatar me-3 avatar-sm">
<img src="{% static 'img/avatars/5.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div>
<h6 class="mb-0">Eugenia Moore</h6>
<p class="small text-body-secondary mb-0">Founder of Hubspot</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card h-100">
<div class="card-body text-body d-flex flex-column justify-content-between h-100">
<div class="mb-4">
<img src="{% static 'img/front-pages/branding/logo-6.png' %}" alt="client logo" class="client-logo img-fluid" />
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam nemo mollitia, ad eum officia numquam nostrum repellendus consequuntur!</p>
<div class="text-warning mb-4">
<i class="icon-base ti tabler-star-filled"></i>
<i class="icon-base ti tabler-star-filled"></i>
<i class="icon-base ti tabler-star-filled"></i>
<i class="icon-base ti tabler-star-filled"></i>
<i class="icon-base ti tabler-star-filled"></i>
</div>
<div class="d-flex align-items-center">
<div class="avatar me-3 avatar-sm">
<img src="{% static 'img/avatars/1.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div>
<h6 class="mb-0">Sara Smith</h6>
<p class="small text-body-secondary mb-0">Founder of Continental</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</div>
</div>
</div>
<!-- What people say slider: End -->
<hr class="m-0 mt-6 mt-md-12" />
<!-- Logo slider: Start -->
<div class="container">
<div class="swiper-logo-carousel pt-8">
<div class="swiper" id="swiper-clients-logos">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="{% static 'img/front-pages/branding/logo_1-' %}{{ COOKIES.theme|default:theme }}.png" alt="client logo" class="client-logo" data-app-light-img="front-pages/branding/logo_1-light.png" data-app-dark-img="front-pages/branding/logo_1-dark.png" />
</div>
<div class="swiper-slide">
<img src="{% static 'img/front-pages/branding/logo_2-' %}{{ COOKIES.theme|default:theme }}.png" alt="client logo" class="client-logo" data-app-light-img="front-pages/branding/logo_2-light.png" data-app-dark-img="front-pages/branding/logo_2-dark.png" />
</div>
<div class="swiper-slide">
<img src="{% static 'img/front-pages/branding/logo_3-' %}{{ COOKIES.theme|default:theme }}.png" alt="client logo" class="client-logo" data-app-light-img="front-pages/branding/logo_3-light.png" data-app-dark-img="front-pages/branding/logo_3-dark.png" />
</div>
<div class="swiper-slide">
<img src="{% static 'img/front-pages/branding/logo_4-' %}{{ COOKIES.theme|default:theme }}.png" alt="client logo" class="client-logo" data-app-light-img="front-pages/branding/logo_4-light.png" data-app-dark-img="front-pages/branding/logo_4-dark.png" />
</div>
<div class="swiper-slide">
<img src="{% static 'img/front-pages/branding/logo_5-' %}{{ COOKIES.theme|default:theme }}.png" alt="client logo" class="client-logo" data-app-light-img="front-pages/branding/logo_5-light.png" data-app-dark-img="front-pages/branding/logo_5-dark.png" />
</div>
</div>
</div>
</div>
</div>
<!-- Logo slider: End -->
</section>
<!-- Real customers reviews: End -->
<!-- Our great team: Start -->
<section id="landingTeam" class="section-py landing-team">
<div class="container">
<div class="text-center mb-4">
<span class="badge bg-label-primary">Our Great Team</span>
</div>
<h4 class="text-center mb-1">
<span class="position-relative fw-extrabold z-1"
>Supported
<img src="{% static 'img/front-pages/icons/section-title-icon.png' %}" alt="laptop charging" class="section-title-img position-absolute object-fit-contain bottom-0 z-n1" />
</span>
by Real People
</h4>
<p class="text-center mb-md-11 pb-0 pb-xl-12">Who is behind these great-looking interfaces?</p>
<div class="row gy-12 mt-2">
<div class="col-lg-3 col-sm-6">
<div class="card mt-3 mt-lg-0 shadow-none">
<div class="bg-label-primary border border-bottom-0 border-label-primary position-relative team-image-box">
<img src="{% static 'img/front-pages/landing-page/team-member-1.png' %}" class="position-absolute card-img-position bottom-0 start-50" alt="human image" />
</div>
<div class="card-body border border-top-0 border-label-primary text-center">
<h5 class="card-title mb-0">Sophie Gilbert</h5>
<p class="text-body-secondary mb-0">Project Manager</p>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card mt-3 mt-lg-0 shadow-none">
<div class="bg-label-info border border-bottom-0 border-label-info position-relative team-image-box">
<img src="{% static 'img/front-pages/landing-page/team-member-2.png' %}" class="position-absolute card-img-position bottom-0 start-50" alt="human image" />
</div>
<div class="card-body border border-top-0 border-label-info text-center">
<h5 class="card-title mb-0">Paul Miles</h5>
<p class="text-body-secondary mb-0">UI Designer</p>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card mt-3 mt-lg-0 shadow-none">
<div class="bg-label-danger border border-bottom-0 border-label-danger position-relative team-image-box">
<img src="{% static 'img/front-pages/landing-page/team-member-3.png' %}" class="position-absolute card-img-position bottom-0 start-50" alt="human image" />
</div>
<div class="card-body border border-top-0 border-label-danger text-center">
<h5 class="card-title mb-0">Nannie Ford</h5>
<p class="text-body-secondary mb-0">Development Lead</p>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card mt-3 mt-lg-0 shadow-none">
<div class="bg-label-success border border-bottom-0 border-label-success position-relative team-image-box">
<img src="{% static 'img/front-pages/landing-page/team-member-4.png' %}" class="position-absolute card-img-position bottom-0 start-50" alt="human image" />
</div>
<div class="card-body border border-top-0 border-label-success text-center">
<h5 class="card-title mb-0">Chris Watkins</h5>
<p class="text-body-secondary mb-0">Marketing Manager</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Our great team: End -->
<!-- Pricing plans: Start -->
<section id="landingPricing" class="section-py bg-body landing-pricing">
<div class="container">
<div class="text-center mb-4">
<span class="badge bg-label-primary">Pricing Plans</span>
</div>
<h4 class="text-center mb-1">
<span class="position-relative fw-extrabold z-1"
>Tailored pricing plans
<img src="{% static 'img/front-pages/icons/section-title-icon.png' %}" alt="laptop charging" class="section-title-img position-absolute object-fit-contain bottom-0 z-n1" />
</span>
designed for you
</h4>
<p class="text-center pb-2 mb-7">All plans include 40+ advanced tools and features to boost your product.<br />Choose the best plan to fit your needs.</p>
<div class="text-center mb-12">
<div class="position-relative d-inline-block pt-3 pt-md-0">
<label class="switch switch-sm switch-primary me-0">
<span class="switch-label fs-6 text-body me-3">Pay Monthly</span>
<input type="checkbox" class="switch-input price-duration-toggler" checked />
<span class="switch-toggle-slider">
<span class="switch-on"></span>
<span class="switch-off"></span>
</span>
<span class="switch-label fs-6 text-body ms-3">Pay Annual</span>
</label>
<div class="pricing-plans-item position-absolute d-flex">
<img src="{% static 'img/front-pages/icons/pricing-plans-arrow.png' %}" alt="pricing plans arrow" class="scaleX-n1-rtl" />
<span class="fw-medium mt-2 ms-1"> Save 25%</span>
</div>
</div>
</div>
<div class="row g-6 pt-lg-5">
<!-- Basic Plan: Start -->
<div class="col-xl-4 col-lg-6">
<div class="card">
<div class="card-header">
<div class="text-center">
<img src="{% static 'img/front-pages/icons/paper-airplane.png' %}" alt="paper airplane icon" class="mb-8 pb-2" />
<h4 class="mb-0">Basic</h4>
<div class="d-flex align-items-center justify-content-center">
<span class="price-monthly h2 text-primary fw-extrabold mb-0">$19</span>
<span class="price-yearly h2 text-primary fw-extrabold mb-0 d-none">$14</span>
<sub class="h6 text-body-secondary mb-n1 ms-1">/mo</sub>
</div>
<div class="position-relative pt-2">
<div class="price-yearly text-body-secondary price-yearly-toggle d-none">$ 168 / year</div>
</div>
</div>
</div>
<div class="card-body">
<ul class="list-unstyled pricing-list">
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-label-primary p-0 me-3"><i class="icon-base ti tabler-check icon-12px"></i></span>
Timeline
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-label-primary p-0 me-3"><i class="icon-base ti tabler-check icon-12px"></i></span>
Basic search
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-label-primary p-0 me-3"><i class="icon-base ti tabler-check icon-12px"></i></span>
Live chat widget
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-label-primary p-0 me-3"><i class="icon-base ti tabler-check icon-12px"></i></span>
Email marketing
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-label-primary p-0 me-3"><i class="icon-base ti tabler-check icon-12px"></i></span>
Custom Forms
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-label-primary p-0 me-3"><i class="icon-base ti tabler-check icon-12px"></i></span>
Traffic analytics
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-label-primary p-0 me-3"><i class="icon-base ti tabler-check icon-12px"></i></span>
Basic Support
</h6>
</li>
</ul>
<div class="d-grid mt-8">
<a href="{% url 'payment-page' %}" class="btn btn-label-primary">Get Started</a>
</div>
</div>
</div>
</div>
<!-- Basic Plan: End -->
<!-- Favourite Plan: Start -->
<div class="col-xl-4 col-lg-6">
<div class="card border border-primary shadow-xl">
<div class="card-header">
<div class="text-center">
<img src="{% static 'img/front-pages/icons/plane.png' %}" alt="plane icon" class="mb-8 pb-2" />
<h4 class="mb-0">Team</h4>
<div class="d-flex align-items-center justify-content-center">
<span class="price-monthly h2 text-primary fw-extrabold mb-0">$29</span>
<span class="price-yearly h2 text-primary fw-extrabold mb-0 d-none">$22</span>
<sub class="h6 text-body-secondary mb-n1 ms-1">/mo</sub>
</div>
<div class="position-relative pt-2">
<div class="price-yearly text-body-secondary price-yearly-toggle d-none">$ 264 / year</div>
</div>
</div>
</div>
<div class="card-body">
<ul class="list-unstyled pricing-list">
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-primary p-0 me-3"><i class="icon-base ti tabler-check icon-12px"></i></span>
Everything in basic
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-primary p-0 me-3"><i class="icon-base ti tabler-check icon-12px"></i></span>
Timeline with database
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-primary p-0 me-3"><i class="icon-base ti tabler-check icon-12px"></i></span>
Advanced search
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-primary p-0 me-3"><i class="icon-base ti tabler-check icon-12px"></i></span>
Marketing automation
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-primary p-0 me-3"><i class="icon-base ti tabler-check icon-12px"></i></span>
Advanced chatbot
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-primary p-0 me-3"><i class="icon-base ti tabler-check icon-12px"></i></span>
Campaign management
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-primary p-0 me-3"><i class="icon-base ti tabler-check icon-12px"></i></span>
Collaboration tools
</h6>
</li>
</ul>
<div class="d-grid mt-8">
<a href="{% url 'payment-page' %}" class="btn btn-primary">Get Started</a>
</div>
</div>
</div>
</div>
<!-- Favourite Plan: End -->
<!-- Standard Plan: Start -->
<div class="col-xl-4 col-lg-6">
<div class="card">
<div class="card-header">
<div class="text-center">
<img src="{% static 'img/front-pages/icons/shuttle-rocket.png' %}" alt="shuttle rocket icon" class="mb-8 pb-2" />
<h4 class="mb-0">Enterprise</h4>
<div class="d-flex align-items-center justify-content-center">
<span class="price-monthly h2 text-primary fw-extrabold mb-0">$49</span>
<span class="price-yearly h2 text-primary fw-extrabold mb-0 d-none">$37</span>
<sub class="h6 text-body-secondary mb-n1 ms-1">/mo</sub>
</div>
<div class="position-relative pt-2">
<div class="price-yearly text-body-secondary price-yearly-toggle d-none">$ 444 / year</div>
</div>
</div>
</div>
<div class="card-body">
<ul class="list-unstyled pricing-list">
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-label-primary p-0 me-3"><i class="icon-base ti tabler-check icon-12px"></i></span>
Everything in premium
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-label-primary p-0 me-3"><i class="icon-base ti tabler-check icon-12px"></i></span>
Timeline with database
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-label-primary p-0 me-3"><i class="icon-base ti tabler-check icon-12px"></i></span>
Fuzzy search
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-label-primary p-0 me-3"><i class="icon-base ti tabler-check icon-12px"></i></span>
A/B testing sanbox
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-label-primary p-0 me-3"><i class="icon-base ti tabler-check icon-12px"></i></span>
Custom permissions
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-label-primary p-0 me-3"><i class="icon-base ti tabler-check icon-12px"></i></span>
Social media automation
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-label-primary p-0 me-3"><i class="icon-base ti tabler-check icon-12px"></i></span>
Sales automation tools
</h6>
</li>
</ul>
<div class="d-grid mt-8">
<a href="{% url 'payment-page' %}" class="btn btn-label-primary">Get Started</a>
</div>
</div>
</div>
</div>
<!-- Standard Plan: End -->
</div>
</div>
</section>
<!-- Pricing plans: End -->
<!-- Fun facts: Start -->
<section id="landingFunFacts" class="section-py landing-fun-facts">
<div class="container">
<div class="row gy-6">
<div class="col-sm-6 col-lg-3">
<div class="card border border-primary shadow-none">
<div class="card-body text-center">
<div class="mb-4 text-primary">
<svg width="64" height="65" viewBox="0 0 64 65" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.2" d="M10 44.4663V18.4663C10 17.4054 10.4214 16.388 11.1716 15.6379C11.9217 14.8877 12.9391 14.4663 14 14.4663H50C51.0609 14.4663 52.0783 14.8877 52.8284 15.6379C53.5786 16.388 54 17.4054 54 18.4663V44.4663H10Z" fill="currentColor" />
<path
d="M10 44.4663V18.4663C10 17.4054 10.4214 16.388 11.1716 15.6379C11.9217 14.8877 12.9391 14.4663 14 14.4663H50C51.0609 14.4663 52.0783 14.8877 52.8284 15.6379C53.5786 16.388 54 17.4054 54 18.4663V44.4663M36 22.4663H28M6 44.4663H58V48.4663C58 49.5272 57.5786 50.5446 56.8284 51.2947C56.0783 52.0449 55.0609 52.4663 54 52.4663H10C8.93913 52.4663 7.92172 52.0449 7.17157 51.2947C6.42143 50.5446 6 49.5272 6 48.4663V44.4663Z"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</div>
<h3 class="mb-0">7.1k+</h3>
<p class="fw-medium mb-0">
Support Tickets<br />
Resolved
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="card border border-success shadow-none">
<div class="card-body text-center">
<div class="mb-4 text-success">
<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="User">
<path
id="Vector"
opacity="0.2"
d="M32.4999 8.52881C27.6437 8.52739 22.9012 9.99922 18.899 12.7499C14.8969 15.5005 11.8233 19.4006 10.0844 23.9348C8.34542 28.4691 8.02291 33.4242 9.15945 38.1456C10.296 42.867 12.8381 47.1326 16.4499 50.3788C17.9549 47.4151 20.2511 44.9261 23.0841 43.1875C25.917 41.4489 29.176 40.5287 32.4999 40.5288C30.5221 40.5288 28.5887 39.9423 26.9442 38.8435C25.2997 37.7447 24.018 36.1829 23.2611 34.3556C22.5043 32.5284 22.3062 30.5177 22.6921 28.5779C23.0779 26.6381 24.0303 24.8563 25.4289 23.4577C26.8274 22.0592 28.6092 21.1068 30.549 20.721C32.4888 20.3351 34.4995 20.5331 36.3268 21.29C38.154 22.0469 39.7158 23.3286 40.8146 24.9731C41.9135 26.6176 42.4999 28.551 42.4999 30.5288C42.4999 33.181 41.4464 35.7245 39.571 37.5999C37.6956 39.4752 35.1521 40.5288 32.4999 40.5288C35.8238 40.5287 39.0829 41.4489 41.9158 43.1875C44.7487 44.9261 47.045 47.4151 48.5499 50.3788C52.1618 47.1326 54.7039 42.867 55.8404 38.1456C56.977 33.4242 56.6545 28.4691 54.9155 23.9348C53.1766 19.4006 50.103 15.5005 46.1008 12.7499C42.0987 9.99922 37.3562 8.52739 32.4999 8.52881Z"
fill="currentColor" />
<path
id="Vector_2"
d="M32.5 40.5288C38.0228 40.5288 42.5 36.0517 42.5 30.5288C42.5 25.006 38.0228 20.5288 32.5 20.5288C26.9772 20.5288 22.5 25.006 22.5 30.5288C22.5 36.0517 26.9772 40.5288 32.5 40.5288ZM32.5 40.5288C29.1759 40.5288 25.9168 41.4477 23.0839 43.1866C20.2509 44.9255 17.9548 47.4149 16.45 50.3788M32.5 40.5288C35.8241 40.5288 39.0832 41.4477 41.9161 43.1866C44.7491 44.9255 47.0452 47.4149 48.55 50.3788M56.5 32.5288C56.5 45.7836 45.7548 56.5288 32.5 56.5288C19.2452 56.5288 8.5 45.7836 8.5 32.5288C8.5 19.274 19.2452 8.52881 32.5 8.52881C45.7548 8.52881 56.5 19.274 56.5 32.5288Z"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round" />
</g>
</svg>
</div>
<h3 class="mb-0">50k+</h3>
<p class="fw-medium mb-0">
Join creatives<br />
community
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="card border border-info shadow-none">
<div class="card-body text-center">
<div class="mb-4 text-info">
<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.2" d="M46.5001 10.5288H32.5001L20.2251 26.5288L32.5001 56.5288L60.5001 26.5288L46.5001 10.5288Z" fill="currentColor" />
<path d="M18.5 10.5288H46.5L60.5 26.5288L32.5 56.5288L4.5 26.5288L18.5 10.5288Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M33.2934 9.92012C33.1042 9.67343 32.8109 9.52881 32.5 9.52881C32.1891 9.52881 31.8958 9.67343 31.7066 9.92012L19.7318 25.5288H4.5C3.94772 25.5288 3.5 25.9765 3.5 26.5288C3.5 27.0811 3.94772 27.5288 4.5 27.5288H19.5537L31.5745 56.9075C31.7282 57.2833 32.094 57.5288 32.5 57.5288C32.906 57.5288 33.2718 57.2833 33.4255 56.9075L45.4463 27.5288H60.5C61.0523 27.5288 61.5 27.0811 61.5 26.5288C61.5 25.9765 61.0523 25.5288 60.5 25.5288H45.2682L33.2934 9.92012ZM42.7474 25.5288L32.5 12.1717L22.2526 25.5288H42.7474ZM21.7146 27.5288L32.5 53.8881L43.2854 27.5288H21.7146Z"
fill="currentColor" />
</svg>
</div>
<h3 class="mb-0">4.8/5</h3>
<p class="fw-medium mb-0">
Highly Rated<br />
Products
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="card border border-warning shadow-none">
<div class="card-body text-center">
<div class="mb-4 text-warning">
<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
opacity="0.2"
d="M14.125 50.9038C11.825 48.6038 13.35 43.7788 12.175 40.9538C11 38.1288 6.5 35.6538 6.5 32.5288C6.5 29.4038 10.95 27.0288 12.175 24.1038C13.4 21.1788 11.825 16.4538 14.125 14.1538C16.425 11.8538 21.25 13.3788 24.075 12.2038C26.9 11.0288 29.375 6.52881 32.5 6.52881C35.625 6.52881 38 10.9788 40.925 12.2038C43.85 13.4288 48.575 11.8538 50.875 14.1538C53.175 16.4538 51.65 21.2788 52.825 24.1038C54 26.9288 58.5 29.4038 58.5 32.5288C58.5 35.6538 54.05 38.0288 52.825 40.9538C51.6 43.8788 53.175 48.6038 50.875 50.9038C48.575 53.2038 43.75 51.6788 40.925 52.8538C38.1 54.0288 35.625 58.5288 32.5 58.5288C29.375 58.5288 27 54.0788 24.075 52.8538C21.15 51.6288 16.425 53.2038 14.125 50.9038Z"
fill="currentColor" />
<path
d="M43.5 26.5288L28.825 40.5288L21.5 33.5288M14.125 50.9038C11.825 48.6038 13.35 43.7788 12.175 40.9538C11 38.1288 6.5 35.6538 6.5 32.5288C6.5 29.4038 10.95 27.0288 12.175 24.1038C13.4 21.1788 11.825 16.4538 14.125 14.1538C16.425 11.8538 21.25 13.3788 24.075 12.2038C26.9 11.0288 29.375 6.52881 32.5 6.52881C35.625 6.52881 38 10.9788 40.925 12.2038C43.85 13.4288 48.575 11.8538 50.875 14.1538C53.175 16.4538 51.65 21.2788 52.825 24.1038C54 26.9288 58.5 29.4038 58.5 32.5288C58.5 35.6538 54.05 38.0288 52.825 40.9538C51.6 43.8788 53.175 48.6038 50.875 50.9038C48.575 53.2038 43.75 51.6788 40.925 52.8538C38.1 54.0288 35.625 58.5288 32.5 58.5288C29.375 58.5288 27 54.0788 24.075 52.8538C21.15 51.6288 16.425 53.2038 14.125 50.9038Z"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</div>
<h3 class="mb-0">100%</h3>
<p class="fw-medium mb-0">
Money Back<br />
Guarantee
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Fun facts: End -->
<!-- FAQ: Start -->
<section id="landingFAQ" class="section-py bg-body landing-faq">
<div class="container">
<div class="text-center mb-4">
<span class="badge bg-label-primary">FAQ</span>
</div>
<h4 class="text-center mb-1">
Frequently asked
<span class="position-relative fw-extrabold z-1"
>questions
<img src="{% static 'img/front-pages/icons/section-title-icon.png' %}" alt="laptop charging" class="section-title-img position-absolute object-fit-contain bottom-0 z-n1" />
</span>
</h4>
<p class="text-center mb-12 pb-md-4">Browse through these FAQs to find answers to commonly asked questions.</p>
<div class="row gy-12 align-items-center">
<div class="col-lg-5">
<div class="text-center">
<img src="{% static 'img/front-pages/landing-page/faq-boy-with-logos.png' %}" alt="faq boy with logos" class="faq-image" />
</div>
</div>
<div class="col-lg-7">
<div class="accordion" id="accordionExample">
<div class="card accordion-item">
<h2 class="accordion-header" id="headingOne">
<button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#accordionOne" aria-expanded="true" aria-controls="accordionOne">Do you charge for each upgrade?</button>
</h2>
<div id="accordionOne" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">Lemon drops chocolate cake gummies carrot cake chupa chups muffin topping. Sesame snaps icing marzipan gummi bears macaroon dragée danish caramels powder. Bear claw dragée pastry topping soufflé. Wafer gummi bears marshmallow pastry pie.</div>
</div>
</div>
<div class="card accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionTwo" aria-expanded="false" aria-controls="accordionTwo">Do I need to purchase a license for each website?</button>
</h2>
<div id="accordionTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">Dessert ice cream donut oat cake jelly-o pie sugar plum cheesecake. Bear claw dragée oat cake dragée ice cream halvah tootsie roll. Danish cake oat cake pie macaroon tart donut gummies. Jelly beans candy canes carrot cake. Fruitcake chocolate chupa chups.</div>
</div>
</div>
<div class="card accordion-item active">
<h2 class="accordion-header" id="headingThree">
<button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#accordionThree" aria-expanded="false" aria-controls="accordionThree">What is regular license?</button>
</h2>
<div id="accordionThree" class="accordion-collapse collapse show" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
Regular license can be used for end products that do not charge users for access or service(access is free and there will be no monthly subscription fee). Single regular license can be used for single end product and end product can be used by you or your client. If you want to sell end product to multiple clients then you will need to purchase separate license for each client. The same rule applies if you want to use the same end product on multiple domains(unique setup).
For more info on regular license you can check official description.
</div>
</div>
</div>
<div class="card accordion-item">
<h2 class="accordion-header" id="headingFour">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionFour" aria-expanded="false" aria-controls="accordionFour">What is extended license?</button>
</h2>
<div id="accordionFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
<div class="accordion-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis et aliquid quaerat possimus maxime! Mollitia reprehenderit neque repellat deleniti delectus architecto dolorum maxime, blanditiis earum ea, incidunt quam possimus cumque.</div>
</div>
</div>
<div class="card accordion-item">
<h2 class="accordion-header" id="headingFive">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionFive" aria-expanded="false" aria-controls="accordionFive">Which license is applicable for SASS application?</button>
</h2>
<div id="accordionFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionExample">
<div class="accordion-body">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi molestias exercitationem ab cum nemo facere voluptates veritatis quia, eveniet veniam at et repudiandae mollitia ipsam quasi labore enim architecto non!</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ: End -->
<!-- CTA: Start -->
<section id="landingCTA" class="section-py landing-cta position-relative p-lg-0 pb-0">
<img src="{% static 'img/front-pages/backgrounds/cta-bg-' %}{{ COOKIES.theme|default:theme }}.png" class="position-absolute bottom-0 end-0 scaleX-n1-rtl h-100 w-100 z-n1" alt="cta image" data-app-light-img="front-pages/backgrounds/cta-bg-light.png" data-app-dark-img="front-pages/backgrounds/cta-bg-dark.png" />
<div class="container">
<div class="row align-items-center gy-12">
<div class="col-lg-6 text-start text-sm-center text-lg-start">
<h3 class="cta-title text-primary fw-bold mb-1">Ready to Get Started?</h3>
<h5 class="text-body mb-8">Start your project with a 14-day free trial</h5>
<a href="{% url 'payment-page' %}" class="btn btn-lg btn-primary">Get Started</a>
</div>
<div class="col-lg-6 pt-lg-12 text-center text-lg-end">
<img src="{% static 'img/front-pages/landing-page/cta-dashboard.png' %}" alt="cta dashboard" class="img-fluid mt-lg-4" />
</div>
</div>
</div>
</section>
<!-- CTA: End -->
<!-- Contact Us: Start -->
<section id="landingContact" class="section-py bg-body landing-contact">
<div class="container">
<div class="text-center mb-4">
<span class="badge bg-label-primary">Contact US</span>
</div>
<h4 class="text-center mb-1">
<span class="position-relative fw-extrabold z-1"
>Let's work
<img src="{% static 'img/front-pages/icons/section-title-icon.png' %}" alt="laptop charging" class="section-title-img position-absolute object-fit-contain bottom-0 z-n1" />
</span>
together
</h4>
<p class="text-center mb-12 pb-md-4">Any question or remark? just write us a message</p>
<div class="row g-6">
<div class="col-lg-5">
<div class="contact-img-box position-relative border p-2 h-100">
<img src="{% static 'img/front-pages/icons/contact-border.png' %}" alt="contact border" class="contact-border-img position-absolute d-none d-lg-block scaleX-n1-rtl" />
<img src="{% static 'img/front-pages/landing-page/contact-customer-service.png' %}" alt="contact customer service" class="contact-img w-100 scaleX-n1-rtl" />
<div class="p-4 pb-2">
<div class="row g-4">
<div class="col-md-6 col-lg-12 col-xl-6">
<div class="d-flex align-items-center">
<div class="badge bg-label-primary rounded p-1_5 me-3"><i class="icon-base ti tabler-mail icon-lg"></i></div>
<div>
<p class="mb-0">Email</p>
<h6 class="mb-0"><a href="mailto:example@gmail.com" class="text-heading">example@gmail.com</a></h6>
</div>
</div>
</div>
<div class="col-md-6 col-lg-12 col-xl-6">
<div class="d-flex align-items-center">
<div class="badge bg-label-success rounded p-1_5 me-3"><i class="icon-base ti tabler-phone-call icon-lg"></i></div>
<div>
<p class="mb-0">Phone</p>
<h6 class="mb-0"><a href="tel:+1234-568-963" class="text-heading">+1234 568 963</a></h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-7">
<div class="card h-100">
<div class="card-body">
<h4 class="mb-2">Send a message</h4>
<p class="mb-6">
If you would like to discuss anything related to payment, account, licensing,<br class="d-none d-lg-block" />
partnerships, or have pre-sales questions, youre at the right place.
</p>
<form>
<div class="row g-4">
<div class="col-md-6">
<label class="form-label" for="contact-form-fullname">Full Name</label>
<input type="text" class="form-control" id="contact-form-fullname" placeholder="john" />
</div>
<div class="col-md-6">
<label class="form-label" for="contact-form-email">Email</label>
<input type="text" id="contact-form-email" class="form-control" placeholder="johndoe@gmail.com" />
</div>
<div class="col-12">
<label class="form-label" for="contact-form-message">Message</label>
<textarea id="contact-form-message" class="form-control" rows="7" placeholder="Write a message"></textarea>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Send inquiry</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Us: End -->
</div>
{% endblock %}

View File

@@ -0,0 +1,169 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Payment Page - Front Pages{% endblock %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/cleave-zen/cleave-zen.js' %}"></script>
{% endblock vendor_js %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/front-page-payment.css' %}">
{% endblock page_css %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/pages-pricing.js' %}"></script>
<script src="{% static 'js/front-page-payment.js' %}"></script>
{% endblock page_js %}
{% block content %}
<section class="section-py bg-body first-section-pt">
<div class="container">
<div class="card px-3">
<div class="row">
<div class="col-lg-7 card-body border-end p-md-8">
<h4 class="mb-2">Checkout</h4>
<p class="mb-0">
All plans include 40+ advanced tools and features to boost your product. <br />
Choose the best plan to fit your needs.
</p>
<div class="row g-5 py-8">
<div class="col-md col-lg-12 col-xl-6">
<div class="form-check custom-option custom-option-basic checked">
<label class="form-check-label custom-option-content form-check-input-payment gap-4 align-items-center" for="customRadioVisa">
<input name="customRadioTemp" class="form-check-input my-2" type="radio" value="credit-card" id="customRadioVisa" checked />
<span class="custom-option-body">
<img src="{% static 'img/icons/payments/visa-' %}{{ COOKIES.theme|default:theme }}.png" alt="visa-card" width="58" data-app-light-img="icons/payments/visa-light.png" data-app-dark-img="icons/payments/visa-dark.png" />
<span class="ms-4 fw-medium text-heading">Credit Card</span>
</span>
</label>
</div>
</div>
<div class="col-md col-lg-12 col-xl-6">
<div class="form-check custom-option custom-option-basic">
<label class="form-check-label custom-option-content form-check-input-payment gap-4 align-items-center" for="customRadioPaypal">
<input name="customRadioTemp" class="form-check-input my-2" type="radio" value="paypal" id="customRadioPaypal" />
<span class="custom-option-body">
<img src="{% static 'img/icons/payments/paypal-' %}{{ COOKIES.theme|default:theme }}.png" alt="paypal" width="58" data-app-light-img="icons/payments/paypal-light.png" data-app-dark-img="icons/payments/paypal-dark.png" />
<span class="ms-4 fw-medium text-heading">Paypal</span>
</span>
</label>
</div>
</div>
</div>
<h4 class="mb-6">Billing Details</h4>
<form>
<div class="row g-6">
<div class="col-md-6">
<label class="form-label" for="billings-email">Email Address</label>
<input type="text" id="billings-email" class="form-control" placeholder="john.doe@gmail.com" />
</div>
<div class="col-md-6">
<label class="form-label" for="billings-password">Password</label>
<input type="password" id="billings-password" class="form-control" placeholder="Password" />
</div>
<div class="col-md-6">
<label class="form-label" for="billings-country">Country</label>
<select id="billings-country" class="form-select" data-allow-clear="true">
<option value="">Select</option>
<option value="Australia">Australia</option>
<option value="Brazil">Brazil</option>
<option value="Canada">Canada</option>
<option value="China">China</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="India">India</option>
<option value="Turkey">Turkey</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
</select>
</div>
<div class="col-md-6">
<label class="form-label" for="billings-zip">Billing Zip / Postal Code</label>
<input type="text" id="billings-zip" class="form-control billings-zip-code" placeholder="Zip / Postal Code" />
</div>
</div>
</form>
<div id="form-credit-card">
<h4 class="mt-8 mb-6">Credit Card Info</h4>
<form>
<div class="row g-6">
<div class="col-12">
<label class="form-label" for="billings-card-num">Card number</label>
<div class="input-group input-group-merge">
<input type="text" id="billings-card-num" class="form-control billing-card-mask" placeholder="7465 8374 5837 5067" aria-describedby="paymentCard" />
<span class="input-group-text cursor-pointer p-1" id="paymentCard"><span class="card-type"></span></span>
</div>
</div>
<div class="col-md-6">
<label class="form-label" for="billings-card-name">Name</label>
<input type="text" id="billings-card-name" class="form-control" placeholder="John Doe" />
</div>
<div class="col-md-3">
<label class="form-label" for="billings-card-date">EXP. Date</label>
<input type="text" id="billings-card-date" class="form-control billing-expiry-date-mask" placeholder="MM/YY" />
</div>
<div class="col-md-3">
<label class="form-label" for="billings-card-cvv">CVV</label>
<input type="text" id="billings-card-cvv" class="form-control billing-cvv-mask" maxlength="3" placeholder="965" />
</div>
</div>
</form>
</div>
</div>
<div class="col-lg-5 card-body p-md-8">
<h4 class="mb-2">Order Summary</h4>
<p class="mb-8">
It can help you manage and service orders before,<br />
during and after fulfilment.
</p>
<div class="bg-lighter p-6 rounded">
<p>A simple start for everyone</p>
<div class="d-flex align-items-center mb-4">
<h1 class="text-heading mb-0">$59.99</h1>
<sub class="h6 text-body mb-n3">/month</sub>
</div>
<div class="d-grid">
<button type="button" data-bs-target="#pricingModal" data-bs-toggle="modal" class="btn btn-label-primary">Change Plan</button>
</div>
</div>
<div class="mt-5">
<div class="d-flex justify-content-between align-items-center">
<p class="mb-0">Subtotal</p>
<h6 class="mb-0">$85.99</h6>
</div>
<div class="d-flex justify-content-between align-items-center mt-2">
<p class="mb-0">Tax</p>
<h6 class="mb-0">$4.99</h6>
</div>
<hr />
<div class="d-flex justify-content-between align-items-center mt-4 pb-1">
<p class="mb-0">Total</p>
<h6 class="mb-0">$90.98</h6>
</div>
<div class="d-grid mt-5">
<button class="btn btn-success">
<span class="me-2">Proceed with Payment</span>
<i class="icon-base ti tabler-arrow-right scaleX-n1-rtl"></i>
</button>
</div>
<p class="mt-8">By continuing, you accept to our Terms of Services and Privacy Policy. Please note that payments are non-refundable.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Modal -->
{% include "partials/_modals/modal_pricing.html" %}
<!-- /Modal -->
{% endblock content %}

View File

@@ -0,0 +1,396 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Pricing - Front Pages{% endblock %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/front-page-pricing.css' %}" />
{% endblock page_css %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/front-page-pricing.js' %}"></script>
{% endblock page_js %}
{% block content %}
<!-- Pricing Plans -->
<section class="section-py first-section-pt">
<div class="container">
<h2 class="text-center mb-2">Pricing Plans</h2>
<p class="text-center mb-0">All plans include 40+ advanced tools and features to boost your product.<br />Choose the best plan to fit your needs.</p>
<div class="d-flex align-items-center justify-content-center flex-wrap gap-2 pt-9 pb-3 mb-50">
<label class="switch switch-sm ms-sm-12 ps-sm-12 me-0">
<span class="switch-label text-body fs-6 fw-medium">Monthly</span>
<input type="checkbox" class="switch-input price-duration-toggler" checked />
<span class="switch-toggle-slider">
<span class="switch-on"></span>
<span class="switch-off"></span>
</span>
<span class="switch-label text-body fs-6 fw-medium">Annually</span>
</label>
<div class="mt-n5 ms-n10 ml-2 mb-12 d-none d-sm-flex align-items-center gap-1">
<i class="icon-base icon-base ti tabler-corner-left-down icon-lg text-body-secondary scaleX-n1-rtl"></i>
<span class="badge badge-sm bg-label-primary rounded-1 mb-3 ">Save up to 10%</span>
</div>
</div>
<div class="row g-6">
<!-- Basic -->
<div class="col-lg">
<div class="card border rounded shadow-none">
<div class="card-body pt-12 px-5">
<div class="mt-3 mb-5 text-center">
<img src="{% static 'img/illustrations/page-pricing-basic.png' %}" alt="Basic Image" height="120" />
</div>
<h4 class="card-title text-center text-capitalize mb-1">Basic</h4>
<p class="text-center mb-5">A simple start for everyone</p>
<div class="text-center h-px-50">
<div class="d-flex justify-content-center">
<sup class="h6 text-body pricing-currency mt-2 mb-0 me-1">$</sup>
<h1 class="mb-0 text-primary">0</h1>
<sub class="h6 text-body pricing-duration mt-auto mb-1 ms-1">/month</sub>
</div>
</div>
<ul class="list-group ps-6 my-5 pt-9">
<li class="mb-4">100 responses a month</li>
<li class="mb-4">Unlimited forms and surveys</li>
<li class="mb-4">Unlimited fields</li>
<li class="mb-4">Basic form creation tools</li>
<li class="mb-0">Up to 2 subdomains</li>
</ul>
<a href="{% url 'payment-page' %}" class="btn btn-label-success d-grid w-100">Your Current Plan</a>
</div>
</div>
</div>
<!-- Pro -->
<div class="col-lg">
<div class="card border-primary border shadow-none">
<div class="card-body position-relative pt-4 px-5">
<div class="position-absolute end-0 me-5 top-0 mt-4">
<span class="badge bg-label-primary rounded-1">Popular</span>
</div>
<div class="my-5 pt-6 text-center">
<img src="{% static 'img/illustrations/page-pricing-standard.png' %}" alt="Standard Image" height="120" />
</div>
<h4 class="card-title text-center text-capitalize mb-1">Standard</h4>
<p class="text-center mb-5">For small to medium businesses</p>
<div class="text-center h-px-50">
<div class="d-flex justify-content-center">
<sup class="h6 text-body pricing-currency mt-2 mb-0 me-1">$</sup>
<h1 class="price-toggle price-yearly text-primary mb-0">7</h1>
<h1 class="price-toggle price-monthly text-primary mb-0 d-none">9</h1>
<sub class="h6 text-body pricing-duration mt-auto mb-1 ms-1">/month</sub>
</div>
<small class="price-yearly price-yearly-toggle text-body-secondary">USD 480 / year</small>
</div>
<ul class="list-group ps-6 my-5 pt-9">
<li class="mb-4">Unlimited responses</li>
<li class="mb-4">Unlimited forms and surveys</li>
<li class="mb-4">Instagram profile page</li>
<li class="mb-4">Google Docs integration</li>
<li class="mb-0">Custom "Thank you" page</li>
</ul>
<a href="{% url 'payment-page' %}" class="btn btn-primary d-grid w-100">Upgrade</a>
</div>
</div>
</div>
<!-- Enterprise -->
<div class="col-lg">
<div class="card border rounded shadow-none">
<div class="card-body pt-12 px-5">
<div class="mt-3 mb-5 text-center">
<img src="{% static 'img/illustrations/page-pricing-enterprise.png' %}" alt="Enterprise Image" height="120" />
</div>
<h4 class="card-title text-center text-capitalize mb-1">Enterprise</h4>
<p class="text-center mb-5">Solution for big organizations</p>
<div class="text-center h-px-50">
<div class="d-flex justify-content-center">
<sup class="h6 text-body pricing-currency mt-2 mb-0 me-1">$</sup>
<h1 class="price-toggle price-yearly text-primary mb-0">16</h1>
<h1 class="price-toggle price-monthly text-primary mb-0 d-none">19</h1>
<sub class="h6 text-body pricing-duration mt-auto mb-1 ms-1">/month</sub>
</div>
<small class="price-yearly price-yearly-toggle text-body-secondary">USD 960 / year</small>
</div>
<ul class="list-group ps-6 my-5 pt-9">
<li class="mb-4">PayPal payments</li>
<li class="mb-4">Logic Jumps</li>
<li class="mb-4">File upload with 5GB storage</li>
<li class="mb-4">Custom domain support</li>
<li class="mb-0">Stripe integration</li>
</ul>
<a href="{% url 'payment-page' %}" class="btn btn-label-primary d-grid w-100">Upgrade</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!--/ Pricing Plans -->
<!-- Pricing Free Trial -->
<section class="pricing-free-trial bg-label-primary">
<div class="container">
<div class="position-relative">
<div class="d-flex justify-content-between flex-column-reverse flex-lg-row align-items-center pt-12 pb-10">
<div class="text-center text-lg-start">
<h4 class="text-primary mb-2">Still not convinced? Start with a 14-day FREE trial!</h4>
<p class="text-body mb-6 mb-md-11">You will get full access to with all the features for 14 days.</p>
<a href="{% url 'payment-page' %}" class="btn btn-primary">Start 14-day free trial</a>
</div>
<!-- image -->
<div class="text-center">
<img src="{% static 'img/illustrations/girl-with-laptop-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid me-lg-5 pe-lg-1 mb-3 mb-lg-0" alt="Api Key Image" width="202" data-app-light-img="illustrations/girl-with-laptop.png" data-app-dark-img="illustrations/girl-with-laptop.png" />
</div>
</div>
</div>
</div>
</section>
<!--/ Pricing Free Trial -->
<!-- Plans Comparison -->
<section class="section-py pricing-plans-comparison">
<div class="container">
<div class="col-12 text-center mb-6">
<h3 class="mb-2">Pick a plan that works best for you</h3>
<p>Stay cool, we have a 48-hour money back guarantee!</p>
</div>
<div class="row">
<div class="col-12">
<div class="table-responsive border border-top-0 rounded">
<table class="table table-striped text-center mb-0">
<thead>
<tr>
<th scope="col">
<p class="mb-0">Features</p>
<small class="text-body fw-normal text-capitalize">Native front features</small>
</th>
<th scope="col">
<p class="mb-0">Starter</p>
<small class="text-body fw-normal text-capitalize">Free</small>
</th>
<th scope="col">
<p class="mb-0 position-relative">
Pro
<span class="badge badge-center rounded-pill bg-primary position-absolute mt-n2 ms-1"><i class="icon-base ti tabler-star"></i></span>
</p>
<small class="text-body fw-normal text-capitalize">$7.5/month</small>
</th>
<th scope="col">
<p class="mb-0">Enterprise</p>
<small class="text-body fw-normal text-capitalize">$16/month</small>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-heading">14-days free trial</td>
<td>
<span class="badge badge-center rounded-pill w-px-20 h-px-20 bg-label-primary p-0">
<i class="icon-base ti tabler-check"></i>
</span>
</td>
<td>
<span class="badge badge-center rounded-pill w-px-20 h-px-20 bg-label-primary p-0">
<i class="icon-base ti tabler-check"></i>
</span>
</td>
<td>
<span class="badge badge-center rounded-pill w-px-20 h-px-20 bg-label-primary p-0">
<i class="icon-base ti tabler-check"></i>
</span>
</td>
</tr>
<tr>
<td class="text-heading">No user limit</td>
<td>
<span class="badge badge-center rounded-pill w-px-20 h-px-20 bg-label-secondary p-0 ">
<i class="icon-base ti tabler-x"></i>
</span>
</td>
<td>
<span class="badge badge-center rounded-pill w-px-20 h-px-20 bg-label-secondary p-0 ">
<i class="icon-base ti tabler-x"></i>
</span>
</td>
<td>
<span class="badge badge-center rounded-pill w-px-20 h-px-20 bg-label-primary p-0 ">
<i class="icon-base ti tabler-check"></i>
</span>
</td>
</tr>
<tr>
<td class="text-heading">Product Support</td>
<td>
<span class="badge badge-center rounded-pill w-px-20 h-px-20 bg-label-secondary p-0 ">
<i class="icon-base ti tabler-x"></i>
</span>
</td>
<td>
<span class="badge badge-center rounded-pill w-px-20 h-px-20 bg-label-primary p-0 ">
<i class="icon-base ti tabler-check"></i>
</span>
</td>
<td>
<span class="badge badge-center rounded-pill w-px-20 h-px-20 bg-label-primary p-0 ">
<i class="icon-base ti tabler-check"></i>
</span>
</td>
</tr>
<tr>
<td class="text-heading">Email Support</td>
<td>
<span class="badge badge-center rounded-pill w-px-20 h-px-20 bg-label-secondary p-0 ">
<i class="icon-base ti tabler-x"></i>
</span>
</td>
<td>
<span class="badge bg-label-primary badge-sm">Add-On-Available</span>
</td>
<td>
<span class="badge badge-center rounded-pill w-px-20 h-px-20 bg-label-primary p-0 ">
<i class="icon-base ti tabler-check"></i>
</span>
</td>
</tr>
<tr>
<td class="text-heading">Integrations</td>
<td>
<span class="badge badge-center rounded-pill w-px-20 h-px-20 bg-label-secondary p-0 ">
<i class="icon-base ti tabler-x"></i>
</span>
</td>
<td>
<span class="badge badge-center rounded-pill w-px-20 h-px-20 bg-label-primary p-0 ">
<i class="icon-base ti tabler-check"></i>
</span>
</td>
<td>
<span class="badge badge-center rounded-pill w-px-20 h-px-20 bg-label-primary p-0 ">
<i class="icon-base ti tabler-check"></i>
</span>
</td>
</tr>
<tr>
<td class="text-heading">Removal of Front branding</td>
<td>
<span class="badge badge-center rounded-pill w-px-20 h-px-20 bg-label-secondary p-0 ">
<i class="icon-base ti tabler-x"></i>
</span>
</td>
<td>
<span class="badge bg-label-primary badge-sm">Add-On-Available</span>
</td>
<td>
<span class="badge badge-center rounded-pill w-px-20 h-px-20 bg-label-primary p-0 ">
<i class="icon-base ti tabler-check"></i>
</span>
</td>
</tr>
<tr>
<td class="text-heading">Active maintenance & support</td>
<td>
<span class="badge badge-center rounded-pill w-px-20 h-px-20 bg-label-secondary p-0 ">
<i class="icon-base ti tabler-x"></i>
</span>
</td>
<td>
<span class="badge badge-center rounded-pill w-px-20 h-px-20 bg-label-secondary p-0 ">
<i class="icon-base ti tabler-x"></i>
</span>
</td>
<td>
<span class="badge badge-center rounded-pill w-px-20 h-px-20 bg-label-primary p-0 ">
<i class="icon-base ti tabler-check"></i>
</span>
</td>
</tr>
<tr>
<td class="text-heading">Data storage for 365 days</td>
<td>
<span class="badge badge-center rounded-pill w-px-20 h-px-20 bg-label-secondary p-0 ">
<i class="icon-base ti tabler-x"></i>
</span>
</td>
<td>
<span class="badge badge-center rounded-pill w-px-20 h-px-20 bg-label-secondary p-0 ">
<i class="icon-base ti tabler-x"></i>
</span>
</td>
<td>
<span class="badge badge-center rounded-pill w-px-20 h-px-20 bg-label-primary p-0 ">
<i class="icon-base ti tabler-check"></i>
</span>
</td>
</tr>
<tr>
<td></td>
<td>
<a href="{% url 'payment-page' %}" class="btn text-nowrap btn-label-primary">Choose Plan</a>
</td>
<td>
<a href="{% url 'payment-page' %}" class="btn text-nowrap btn-primary">Choose Plan</a>
</td>
<td>
<a href="{% url 'payment-page' %}" class="btn text-nowrap btn-label-primary">Choose Plan</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<!--/ Plans Comparison -->
<!-- FAQS -->
<section class="section-py pricing-faqs rounded-bottom bg-body">
<div class="container">
<div class="text-center mb-6">
<h4 class="mb-2">FAQs</h4>
<p>Let us help answer the most common questions you might have.</p>
</div>
<div class="accordion" id="pricingFaq">
<div class="card accordion-item">
<h2 class="accordion-header" id="headingone">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#faq-1" aria-expanded="false" aria-controls="faq-1">What counts towards the 100 responses limit?</button>
</h2>
<div id="faq-1" class="accordion-collapse collapse" aria-labelledby="headingone" data-bs-parent="#pricingFaq">
<div class="accordion-body">We accept Visa®, MasterCard®, American Express®, and PayPal®. So you can be confident that your credit card information will be kept safe and secure.</div>
</div>
</div>
<div class="card accordion-item active">
<h2 class="accordion-header" id="headingTwo">
<button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#faq-2" aria-expanded="false" aria-controls="faq-2">How do you process payments?</button>
</h2>
<div id="faq-2" class="accordion-collapse collapse show" aria-labelledby="headingTwo" data-bs-parent="#pricingFaq">
<div class="accordion-body">Donec placerat, lectus sed mattis semper, neque lectus feugiat lectus, varius pulvinar diam eros in elit. Pellentesque convallis laoreet laoreet.Donec placerat, lectus sed mattis semper, neque lectus feugiat lectus, varius pulvinar diam eros in elit. Pellentesque convallis laoreet laoreet.</div>
</div>
</div>
<div class="card accordion-item">
<h2 class="accordion-header" id="headingThree">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#faq-3" aria-expanded="false" aria-controls="faq-3">Do you have a money-back guarantee?</button>
</h2>
<div id="faq-3" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#pricingFaq">
<div class="accordion-body">We count all responses submitted through all your forms in a month. If you already received 100 responses this month, you wont be able to receive any more of them until next month when the counter resets.</div>
</div>
</div>
<div class="card accordion-item">
<h6 class="accordion-header" id="headingFour">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#faq-4" aria-expanded="false" aria-controls="faq-4">I have more questions. Where can I get help?</button>
</h6>
<div id="faq-4" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#pricingFaq">
<div class="accordion-body">2Checkout accepts all types of credit and debit cards.</div>
</div>
</div>
</div>
</div>
</section>
<!--/ FAQS -->
{% endblock %}

View File

@@ -0,0 +1,36 @@
from django.urls import path
from .views import FrontPagesView
urlpatterns = [
path(
"front/landing/",
FrontPagesView.as_view(template_name="landing_page.html"),
name="landing-page",
),
path(
"front/pricing/",
FrontPagesView.as_view(template_name="pricing_page.html"),
name="pricing-page",
),
path(
"front/payment/",
FrontPagesView.as_view(template_name="payment_page.html"),
name="payment-page",
),
path(
"front/checkout/",
FrontPagesView.as_view(template_name="checkout_page.html"),
name="checkout-page",
),
path(
"front/help_center/",
FrontPagesView.as_view(template_name="help_center_landing.html"),
name="help-center-landing",
),
path(
"front/help_center/article/",
FrontPagesView.as_view(template_name="help_center_article.html"),
name="help-center-article",
),
]

View File

@@ -0,0 +1,31 @@
from django.views.generic import TemplateView
from web_project import TemplateLayout
from web_project.template_helpers.theme import TemplateHelper
"""
This file is a view controller for multiple pages as a module.
Here you can override the page view layout.
Refer to front_pages/urls.py file for more pages.
"""
class FrontPagesView(TemplateView):
# Predefined function
def get_context_data(self, **kwargs):
# A function to init the global layout. It is defined in web_project/__init__.py file
context = TemplateLayout.init(self, super().get_context_data(**kwargs))
# Update the context
context.update(
{
"layout": "front",
"layout_path": TemplateHelper.set_layout("layout_front.html", context),
"active_url": self.request.path, # Get the current url path (active URL) from request
}
)
# map_context according to updated context values
TemplateHelper.map_context(context)
return context