210 lines
14 KiB
HTML
210 lines
14 KiB
HTML
{% extends 'welcome_base.html' %}
|
|
{% load custom_filters %}
|
|
{% load i18n static %}
|
|
|
|
{% block content %}
|
|
<main class="main" id="top">
|
|
|
|
|
|
<div class="booking-hero-header d-flex align-items-center">
|
|
<div class="bg-holder bg-holder overlay bg-opacity-75" style="background-image:url({% static 'video/image-haikal-02.png' %});">
|
|
<video class="bg-video " autoplay="autoplay" loop="loop" muted="muted" playsinline="playsinline" style="height: 100%; width: 100%; offset: right;">
|
|
<source src="{% static 'video/haikal-video-02.mp4' %}" type="video/mp4" />
|
|
</video>
|
|
</div>
|
|
<!--/.bg-holder-->
|
|
|
|
<div class="container-medium position-relative z-5 mb-2 p-2">
|
|
<h2 class="text-secondary-lighter fs-7 fs-md-3 fw-bolder mb-3 text-uppercase p-2">{{ _("Why us")}}?</h2>
|
|
<h6 class="fs-6 fs-md-2 text-white fw-bolder mb-6 overflow-hidden">{{ _("HAIKAL") }}
|
|
<span class="typed-text text-primary p-2" data-typed-text="["<span class=text-primary p-2>{% trans 'Inventory'|upper %}</span>","<span class=text-warning p-2>{% trans 'CRM'|upper %}</span>", "<span class=text-info p-2>{% trans 'Accounting'|upper %}</span>", "<span class=text-success p-2>{% trans 'Reporting'|upper %}</span>"]"><span class="text-warning p-2"></span></span>
|
|
<span class="typed-cursor p-2" aria-hidden="true"></span>
|
|
</h6>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="pt-6 pt-md-10 pb-10" id="feature">
|
|
<div class="container-medium">
|
|
<div class="bg-holder d-none d-xl-block" style="background-image:url({% static 'images/bg/bg-left-27.png' %});background-size:auto;background-position:left;"></div>
|
|
<div class="bg-holder d-none d-xl-block" style="background-image:url({% static 'images/bg/bg-right-27.png' %});background-size:auto;background-position:right;"></div>
|
|
|
|
<div class="row g-3 position-relative">
|
|
<div class="col-lg-6">
|
|
<div class="row g-3">
|
|
<div class="col-md-7">
|
|
<h4 class="fw-semibold mb-3">{{ _("Because Inventory Needs Order") }}</h4>
|
|
<p class="mb-3 mb-md-0 text-body-tertiary">
|
|
{% blocktrans %}Haikal empowers car dealers with a seamless, structured system to manage their inventory effortlessly, ensuring every vehicle is tracked, accounted for, and ready for sale with precision and efficiency.{% endblocktrans %}
|
|
</p>
|
|
</div>
|
|
<div class="col-6 col-md-5">
|
|
<div class="img-zoom-hover position-relative h-100 rounded-3 overflow-hidden"><a href="#"><img class="w-100 h-100 object-fit-cover bg-opacity-75" src="{% static 'images/bg/haikal-01.png' %}" alt="" /></a>
|
|
<div class="backdrop-faded">
|
|
<a class="fw-bold fs-7 text-white stretched-link" href="#">{% trans 'Inventory Management' %}</a>
|
|
<p class="mb-0 text-white fs-9">{% trans 'Effortlessly manage your car inventory with real-time updates and intuitive tools.' %}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-5">
|
|
<div class="img-zoom-hover position-relative h-100 rounded-3 overflow-hidden"><a href="#"> <img class="w-100 h-100 object-fit-cover bg-opacity-75" src="{% static 'images/bg/haikal-10.png' %}" alt="" /></a>
|
|
<div class="backdrop-faded">
|
|
<a class="fw-bold fs-7 text-white" href="#!">{% trans 'Seamless Accounting' %}</a>
|
|
<p class="mb-0 text-white fs-9">{% trans 'Integrated double-entry accounting tailored for car dealers.' %}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-7">
|
|
<div class="img-zoom-hover position-relative h-100 rounded-3 overflow-hidden"><a href="#">
|
|
<img class="w-100 h-md-100 object-fit-cover bg-opacity-75" src="{% static 'images/bg/haikal-11.png' %}" alt="" height="220" />
|
|
</a>
|
|
<div class="backdrop-faded">
|
|
<a class="fw-bold fs-7 text-white" href="#">{% trans 'Advanced Analytics' %}</a>
|
|
<p class="mb-0 text-white fs-9">{% trans 'Gain insights and make data-driven decisions for your business.' %}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="d-flex flex-column gap-3 h-100">
|
|
<div class="img-zoom-hover position-relative h-100 rounded-3 overflow-hidden">
|
|
<a href="#">
|
|
<img class="w-100 h-lg-100 object-fit-cover bg-opacity-75" src="{% static 'images/bg/haikal-09.png' %}" alt="" height="220" />
|
|
</a>
|
|
<div class="backdrop-faded"><a class="fw-bold fs-7 text-white" href="#!">{% trans 'CRM' %}</a>
|
|
<p class="mb-0 text-white fs-9">{% trans 'Specialized customer relationship management system designed for car dealers, offering streamlined sales.' %}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="bg-body-emphasis pt-lg-0 pt-xl-8" id="pricing">
|
|
<div class="bg-holder d-none d-xl-block" style="background-image:url({% static 'images/bg/bg-left-29.png' %});background-size:auto;background-position:-15%;"></div>
|
|
<div class="container-medium position-relative">
|
|
<h2 class="mb-7">{{ _("Pricing") }}</h2>
|
|
<div class="row g-7 g-lg-11 mb-7">
|
|
{% for plan in plan_list %}
|
|
<div class="col-12 col-sm-6 col-xxl-3">
|
|
<div class="d-flex flex-column justify-content-between h-100">
|
|
<div>
|
|
<img class="mb-4 d-dark-none" src="{% static 'images/spot-illustrations/13.png' %}" alt="" width="120" height="96" />
|
|
<img class="mb-4 d-light-none" src="{% static 'images/spot-illustrations/dark_13.png' %}" alt="" width="120" height="96" />
|
|
<div class="mb-sm-5">
|
|
<h3 class="mb-2">{{ plan.name }}</h3>
|
|
<p class="text-body-secondary mb-0 pe-3"></p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
{% if not plan.is_free %}
|
|
<div class="row justify-content-between">
|
|
{% for plan_pricing in plan.planpricing_set.all %}
|
|
{% if plan_pricing.visible %}
|
|
<div class="col-6 mb-2">
|
|
{% if plan_pricing.pricing.url %}<a href="{{ plan_pricing.pricing.url }}" class="info_link pricing text-decoration-none">{% endif %}
|
|
<span class="plan_pricing_name font-weight-bold">{{ plan_pricing.pricing.name }}</span>
|
|
<small class="plan_pricing_period d-block text-muted">({{ plan_pricing.pricing.period }} {% trans "day" %})</small>
|
|
{% if plan_pricing.pricing.url %}</a>{% endif %}
|
|
<span class="plan_pricing_price d-block font-weight-bold">{{ plan_pricing.price }} <span class="currency">{{ CURRENCY }}</span></span>
|
|
{% if plan_pricing.plan == userplan.plan or userplan.is_expired or userplan.plan.is_free %}
|
|
<a href="{% url 'create_order_plan' pk=plan_pricing.pk %}" class="buy btn btn-sm btn-success">{% trans "Buy" %}</a>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<li class="mb-2">
|
|
<span class="plan_pricing_name font-weight-bold">{% trans "Free" %}</span>
|
|
<small class="plan_pricing_period d-block text-muted">({% trans "no expiry" %})</small>
|
|
<span class="plan_pricing_price d-block font-weight-bold">0 <span class="currency">{{ CURRENCY }}</span></span>
|
|
{% if plan != userplan.plan or userplan.is_expired %}
|
|
<a href="{% url 'create_order_plan_change' pk=plan.id %}" class="change_plan btn btn-sm btn-phoenix-primary">
|
|
{% if userplan.is_expired %}
|
|
{% trans "Select" %}
|
|
{% else %}
|
|
{% trans "Change" %}
|
|
{% endif %}
|
|
</a>
|
|
{% endif %}
|
|
</li>
|
|
{% endif %}
|
|
<h5 class="mb-4">{{ _("Included")}}</h5>
|
|
<ul class="fa-ul" style="--fa-li-margin: 1.5em;">
|
|
{% for line in plan.description|splitlines %}
|
|
<li class="d-flex align-items-start">
|
|
<span class="uil uil-check-circle text-success me-2"></span>
|
|
<span class="text-body-tertiary fw-semibold">{{ line }}</span>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="pb-7 pt-0 overflow-x-hidden">
|
|
<div class="bg-holder d-none d-xl-block" style="background-image:url({% static 'images/bg/bg-left-31.png' %});background-size:22%;background-position:left;z-index:1;"></div>
|
|
<div class="bg-holder d-none d-xl-block" style="background-image:url({% static 'images/bg/bg-right-31.png' %});background-size:15%;background-position:right bottom;z-index:1;"></div>
|
|
|
|
<div class="bg-latest-posts"></div>
|
|
<div class="container-medium text-center position-relative z-2">
|
|
<h3 class="mb-2 text-body-emphasis">Our Latest Posts For Travellers</h3>
|
|
<p class="mb-0 text-body-tertiary mb-13">Find the best travel memories from our past tours and get a clear idea of what we do.</p>
|
|
</div>
|
|
<div class="swiper-theme-container swiper-zooming-slider">
|
|
<div class="swiper-container theme-slider" data-swiper='{"loop":true,"slidesPerView":1.3,"spaceBetween":32,"speed":2000,"autoplay":true,"centeredSlides":true,"simulateTouch":false,"breakpoints":{"540":{"slidesPerView":1.5},"768":{"slidesPerView":1.8},"1200":{"slidesPerView":2},"1530":{"slidesPerView":2.8}}}'>
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide rounded-3 overflow-hidden">
|
|
<div class="position-relative w-100 h-100"><img class="w-100 h-100 object-fit-cover" src="{% static 'images/bg/haikal-02.png' %}" alt="" />
|
|
<div class="backdrop-faded p-4 p-md-6">
|
|
<a class="text-white fw-bold fs-7" href="#!">Beautiful Frence, Let's Travelling!</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide rounded-3 overflow-hidden">
|
|
<div class="position-relative w-100 h-100"><img class="w-100 h-100 object-fit-cover" src="{% static 'images/bg/haikal-08.png' %}" alt="" />
|
|
<div class="backdrop-faded p-4 p-md-6">
|
|
<a class="text-white fw-bold fs-7" href="#!">Man Standing on Watching Mountain</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide rounded-3 overflow-hidden">
|
|
<div class="position-relative w-100 h-100"><img class="w-100 h-100 object-fit-cover" src="{% static 'images/bg/haikal-03.png' %}" alt="" />
|
|
<div class="backdrop-faded p-4 p-md-6">
|
|
<a class="text-white fw-bold fs-7" href="#!">Beautiful Bali Indonesia, Let's Travelling!</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide rounded-3 overflow-hidden">
|
|
<div class="position-relative w-100 h-100"><img class="w-100 h-100 object-fit-cover" src="{% static 'images/bg/haikal-04.png' %}" alt="" />
|
|
<div class="backdrop-faded p-4 p-md-6">
|
|
<a class="text-white fw-bold fs-7" href="#!">Chasing sunsets, making memories worldwide.</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-nav">
|
|
<div class="swiper-button-next"><span class="fas fa-chevron-right text-primary" data-fa-transform="shrink-3"></span></div>
|
|
<div class="swiper-button-prev"><span class="fas fa-chevron-left text-primary" data-fa-transform="shrink-3"></span></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="pb-10 pt-3">
|
|
<div class="bg-holder d-none d-xl-block" style="background-image:url({% static 'images/bg/bg-left-32.png' %});background-size:26%;background-position:left 115px;"></div>
|
|
<div class="bg-holder d-none d-xl-block" style="background-image:url({% static 'images/bg/bg-right-32.png' %});background-size:28%;background-position:right -25px;"></div>
|
|
</section>
|
|
|
|
<section class="pt-9 pb-10">
|
|
<div class="bg-holder d-none d-xl-block" style="background-image:url({% static 'images/bg/bg-left-33.png' %});background-size:auto;background-position:-8% 38px;"></div>
|
|
<div class="bg-holder d-none d-xl-block" style="background-image:url({% static 'images/bg/bg-right-33.png' %});background-size:18%;background-position:right;"></div>
|
|
</section>
|
|
|
|
</main>
|
|
{% endblock %} |