376 lines
21 KiB
HTML
376 lines
21 KiB
HTML
{% load static %} {% load i18n %}
|
||
<!DOCTYPE html>
|
||
{% get_current_language as LANGUAGE_CODE %}
|
||
<html lang="{{ LANGUAGE_CODE }}"
|
||
dir="{% if LANGUAGE_CODE == 'ar' %}rtl{% else %}ltr{% endif %}"
|
||
data-bs-theme=""
|
||
data-navigation-type="default"
|
||
data-navbar-horizontal-shape="default">
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="description" content="Haikal - The Backbone of Car Qar: An innovative car inventory management system designed to streamline dealership operations. Manage inventory, sales, transfers, and accounting seamlessly with advanced analytics and intuitive tools. Inspired by Arabic origins, Haikal empowers businesses with precision and efficiency.">
|
||
|
||
<title>{% block title %}{% trans 'HAIKAL' %}{% endblock %}</title>
|
||
|
||
<link rel="apple-touch-icon" sizes="180x180" href="{% static 'images/favicons/apple-touch-icon.png' %}">
|
||
<link rel="icon" type="image/png" sizes="32x32" href="{% static 'images/favicons/favicon-32x32.png' %}">
|
||
<link rel="icon" type="image/png" sizes="16x16" href="{% static 'images/favicons/favicon-16x16.png' %}">
|
||
<link rel="shortcut icon" type="image/x-icon" href="{% static 'images/favicons/favicon.ico' %}">
|
||
<link rel="manifest" href="{% static 'images/favicons/manifest.json' %}">
|
||
<meta name="msapplication-TileImage" content="{% static 'images/logos/logo-d.png' %}">
|
||
<meta name="theme-color" content="#ffffff">
|
||
|
||
<script src="{% static 'vendors/simplebar/simplebar.min.js' %}"></script>
|
||
<script src="{% static 'js/config.js' %}"></script>
|
||
<script src="{% static 'js/sweetalert2.all.min.js' %}"></script>
|
||
|
||
|
||
<link href="{% static 'vendors/mapbox-gl/mapbox-gl.css' %}" rel="stylesheet">
|
||
<link href="{% static 'vendors/swiper/swiper-bundle.min.css' %}" rel="stylesheet">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700;800;900&display=swap"
|
||
rel="stylesheet">
|
||
<link href="{% static 'vendors/simplebar/simplebar.min.css' %}" rel="stylesheet">
|
||
<link href="{% static 'css/sweetalert2.min.css' %}" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
|
||
{% if LANGUAGE_CODE == 'en' %}
|
||
<link href="{% static 'css/theme.min.css' %}" type="text/css" rel="stylesheet" id="style-default">
|
||
<link href="{% static 'css/user.min.css' %}" type="text/css" rel="stylesheet" id="user-style-default">
|
||
{% else %}
|
||
<link href="{% static 'css/theme-rtl.min.css' %}" type="text/css" rel="stylesheet" id="style-rtl">
|
||
<link href="{% static 'css/user-rtl.min.css' %}" type="text/css" rel="stylesheet" id="user-style-rtl">
|
||
{% endif %}
|
||
|
||
</head>
|
||
|
||
<body style="--phoenix-scroll-margin-top: 1.2rem;">
|
||
|
||
<main class="main" id="top">
|
||
<div class="bg-body-emphasis sticky-top"
|
||
data-navbar-shadow-on-scroll="data-navbar-shadow-on-scroll">
|
||
<nav class="navbar navbar-expand-lg container-small px-3 px-lg-7 px-xxl-3">
|
||
<a class="navbar-brand me-1 me-sm-3" href="{% url 'landing_page' %}">
|
||
<div class="d-flex align-items-center">
|
||
<img class="logo-img d-dark-none"
|
||
src="{% static 'images/logos/logo-d.png' %}"
|
||
alt="haikal" width="27" />
|
||
<img class="logo-img d-light-none"
|
||
src="{% static 'images/logos/logo.png' %}"
|
||
alt="haikal" width="27" />
|
||
<h5 class="logo-text ms-2 d-none d-sm-block">{% trans 'Haikal' %}</h5>
|
||
</div>
|
||
</a>
|
||
|
||
<button class="navbar-toggler"
|
||
type="button"
|
||
data-bs-toggle="collapse"
|
||
data-bs-target="#navbarSupportedContent"
|
||
aria-controls="navbarSupportedContent"
|
||
aria-expanded="false"
|
||
aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||
<div class="border-bottom border-translucent border-bottom-lg-0 mb-2">
|
||
<div class="search-box d-inline d-lg-none">
|
||
<form class="position-relative">
|
||
<input class="form-control search-input search rounded-pill my-4"
|
||
type="search"
|
||
placeholder="Search"
|
||
aria-label="Search" />
|
||
<span class="fas fa-search search-box-icon"></span>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||
<li class="nav-item border-bottom border-translucent border-bottom-lg-0">
|
||
<a class="nav-link lh-1 py-0 fs-9 fw-bold py-3"
|
||
aria-current="page"
|
||
href="#home">{% trans 'home'|capfirst %}
|
||
</a>
|
||
</li>
|
||
<li class="nav-item border-bottom border-translucent border-bottom-lg-0">
|
||
<a class="nav-link lh-1 py-0 fs-9 fw-bold py-3"
|
||
href="#feature">Features
|
||
</a>
|
||
</li>
|
||
<li class="nav-item border-bottom border-translucent border-bottom-lg-0">
|
||
<a class="nav-link lh-1 py-0 fs-9 fw-bold py-3"
|
||
href="#pricing">{{ _("Subscriptions") }}
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<div class="d-grid d-lg-flex align-items-center">
|
||
<div class="nav-item d-flex align-items-center d-none d-lg-block pe-2">
|
||
<div class="theme-control-toggle fa-icon-wait px-2">
|
||
<input class="form-check-input ms-0 theme-control-toggle-input"
|
||
type="checkbox" data-theme-control="phoenixTheme" value="dark" id="themeControlToggle" />
|
||
<label class="mb-0 theme-control-toggle-label theme-control-toggle-light"
|
||
for="themeControlToggle"
|
||
data-bs-toggle="tooltip"
|
||
data-bs-placement="left"
|
||
data-bs-title="Switch theme"
|
||
style="height:32px;width:32px;">
|
||
<span class="icon" data-feather="moon"></span>
|
||
</label>
|
||
<label class="mb-0 theme-control-toggle-label theme-control-toggle-dark"
|
||
for="themeControlToggle"
|
||
data-bs-toggle="tooltip"
|
||
data-bs-placement="left"
|
||
data-bs-title="Switch theme"
|
||
style="height:32px;width:32px;">
|
||
<span class="icon" data-feather="sun"></span>
|
||
</label>
|
||
</div>
|
||
</div><a class="text-body-quaternary text-body-tertiary-hover px-2 d-none d-lg-inline lh-sm"
|
||
href="#"
|
||
data-bs-toggle="modal"
|
||
data-bs-target="#searchBoxModal">
|
||
<span data-feather="search" style="height: 20px; width: 20px;"></span>
|
||
</a>
|
||
<a class="btn btn-link text-body order-1 order-lg-0 ps-4 me-lg-2"
|
||
href="{% url 'account_login' %}">{{ _("Sign In") }}
|
||
</a>
|
||
<a class="btn btn-phoenix-primary order-0"
|
||
href="{% url 'account_signup' %}">
|
||
<span class="fw-bold">{{ _("Sign Up") }}</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
<section class="bg-body-emphasis pb-8" id="home">
|
||
<div class="container-small hero-header-container px-lg-7 px-xxl-3">
|
||
<div class="row align-items-center">
|
||
<div class="col-12 col-lg-auto order-0 order-md-1 text-end order-1">
|
||
<div class="position-relative p-5 p-md-7 d-lg-none">
|
||
<div class="bg-holder" style="background-image:url({% static 'images/bg/bg-23.png' %});background-size:contain;">
|
||
</div>
|
||
<!--/.bg-holder-->
|
||
|
||
<div class="position-relative"><img class="w-100 shadow-lg d-dark-none rounded-2" src="{% static 'images/bg/bg-31.png'%}" alt="hero-header" />
|
||
<img class="w-100 shadow-lg d-light-none rounded-2" src="{% static 'images/bg/bg-31.png'%}" alt="hero-header" />
|
||
</div>
|
||
</div>
|
||
<div class="hero-image-container position-absolute top-0 bottom-0 end-0 d-none d-lg-block">
|
||
<div class="position-relative h-100 w-100">
|
||
<div class="position-absolute h-100 top-0 d-flex align-items-center end-0 hero-image-container-bg">
|
||
<img class="pt-7 pt-md-0 w-100" src="{% static 'images/bg/bg-1-2.png'%}" alt="hero-header" /></div>
|
||
<div class="position-absolute h-100 top-0 d-flex align-items-center end-0">
|
||
<img class="pt-7 pt-md-0 w-100 shadow-lg d-dark-none rounded-2" src="{% static 'images/bg/bg-28.png'%}" alt="hero-header" />
|
||
<img class="pt-7 pt-md-0 w-100 shadow-lg d-light-none rounded-2" src="{% static 'images/bg/bg-29.png'%}" alt="hero-header" /></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-lg-6 text-lg-start text-center pt-8 pb-6 order-0 position-relative">
|
||
<h1 class="fs-3 fs-lg-2 fs-md-1 fs-lg-2 fs-xl-1 fs fw-black mb-4"><span class="text-primary me-3">Elegance</span>for<br />your web app</h1>
|
||
<p class="mb-5">Standard, modern and Elegant solution for your next web app so you don’t have to look further. Sign up or check the demo below.</p>
|
||
<a class="btn btn-lg btn-primary rounded-pill me-3" href="" role="button">Sign up</a>
|
||
<a class="btn btn-link me-2 fs-8 p-0" href="" role="button">Check Demo<span class="fa-solid fa-angle-right ms-2 fs-9"></span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="py-5 pt-xl-13 bg-body-emphasis">
|
||
|
||
<div class="container-small px-lg-7 px-xxl-3">
|
||
<div class="row g-0">
|
||
<div class="col-6 col-md-3">
|
||
<div class="p-2 p-lg-5 d-flex flex-center h-100 border-1 border-dashed border-bottom border-translucent border-end"><img class="w-100" src="{% static 'images/brand2/netflix-n.png'%}" alt="" /></div>
|
||
</div>
|
||
<div class="col-6 col-md-3">
|
||
<div class="p-2 p-lg-5 d-flex flex-center h-100 border-1 border-dashed border-bottom border-translucent border-end-md"><img class="w-100" src="{% static 'images/brand2/blender.png'%}" alt="" /></div>
|
||
</div>
|
||
<div class="col-6 col-md-3">
|
||
<div class="p-2 p-lg-5 d-flex flex-center h-100 border-1 border-dashed border-bottom border-translucent border-end border-end-md"><img class="w-100" src="{% static 'images/brand2/upwork.png'%}" alt="" /></div>
|
||
</div>
|
||
<div class="col-6 col-md-3">
|
||
<div class="p-2 p-lg-5 d-flex flex-center h-100 border-1 border-dashed border-bottom border-translucent border-end-lg-0"><img class="w-100" src="{% static 'images/brand2/facebook-f.png'%}" alt="" /></div>
|
||
</div>
|
||
<div class="col-6 col-md-3">
|
||
<div class="p-2 p-lg-5 d-flex flex-center h-100 border-1 border-dashed border-end border-bottom border-translucent border-bottom-md-0"><img class="w-100" src="{% static 'images/brand2/pocket.png'%}" alt="" /></div>
|
||
</div>
|
||
<div class="col-6 col-md-3">
|
||
<div class="p-2 p-lg-5 d-flex flex-center h-100 border-1 border-dashed border-end-md border-bottom border-translucent border-bottom-md-0"><img class="w-100" src="{% static 'images/brand2/mail-bluster-1.png'%}" alt="" /></div>
|
||
</div>
|
||
<div class="col-6 col-md-3">
|
||
<div class="p-2 p-lg-5 d-flex flex-center h-100 border-1 border-dashed border-end border-translucent"><img class="w-100" src="{% static 'images/brand2/discord.png'%}" alt="" /></div>
|
||
</div>
|
||
<div class="col-6 col-md-3">
|
||
<div class="p-2 p-lg-5 d-flex flex-center h-100 border-1 border-dashed border-end-lg-0 border-translucent"><img class="w-100" src="{% static 'images/brand2/google-g.png'%}" alt="" /></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end of .container-->
|
||
|
||
</section>
|
||
|
||
<section class="pt-15 pb-0" id="feature">
|
||
|
||
<div class="container-small px-lg-7 px-xxl-3">
|
||
<div class="position-relative z-2">
|
||
<div class="row">
|
||
<div class="col-lg-6 text-center text-lg-start pe-xxl-3">
|
||
<h4 class="text-primary fw-bolder mb-4">Features</h4>
|
||
<h2 class="mb-3 text-body-emphasis lh-base">Seamless Payments: A Fully
|
||
<br class="d-md-none" />Integrated Suite</h2>
|
||
<p class="mb-5">With the power of Phoenix, you can now focus only on functionaries
|
||
for your digital products, while leaving the UI design on us!With the power
|
||
of Phoenix, you can now focus only on functionaries for your digital products,
|
||
while leaving the UI design on us!</p>
|
||
<a class="btn btn-lg btn-outline-primary rounded-pill me-2"
|
||
href=""
|
||
role="button">Find out more<i class="fa-solid fa-angle-right ms-2"></i>
|
||
</a>
|
||
</div>
|
||
<div class="col-sm-6 col-lg-3 mt-7 text-center text-lg-start">
|
||
<div class="h-100 d-flex flex-column justify-content-between">
|
||
<div class="border-start-lg border-translucent border-dashed ps-4">
|
||
<img class="mb-4"
|
||
src="{% static 'images/icons/illustrations/bolt.png'%}"
|
||
width="48"
|
||
height="48"
|
||
alt="" />
|
||
<div>
|
||
<h5 class="fw-bolder mb-2">Lightning Speed</h5>
|
||
<p class="fw-semibold lh-sm">Present everything you need within minutes! Grow with Phoenix!</p>
|
||
</div>
|
||
<div><a class="btn btn-link me-2 p-0 fs-9" href="" role="button">Check Demo
|
||
<span class="fa-solid fa-angle-right ms-2"></span></a></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-6 col-lg-3 mt-7 text-center text-lg-start">
|
||
<div class="h-100 d-flex flex-column">
|
||
<div class="border-start-lg border-translucent border-dashed ps-4">
|
||
<img class="mb-4"
|
||
src="{% static 'images/icons/illustrations/pie.png'%}"
|
||
width="48"
|
||
height="48"
|
||
alt="" />
|
||
<div>
|
||
<h5 class="fw-bolder mb-2">All-in-one solution</h5>
|
||
<p class="fw-semibold lh-sm">Show your production and growth graph in one place with Phoenix!</p>
|
||
</div>
|
||
<div>
|
||
<a class="btn btn-link me-2 p-0 fs-9"
|
||
href=""
|
||
role="button">Check Demo<i class="fa-solid fa-angle-right ms-2"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row mt-12 align-items-center justify-content-between text-center text-lg-start mb-6 mb-lg-0">
|
||
<div class="col-lg-5">
|
||
<img class="feature-image img-fluid mb-9 mb-lg-0 d-dark-none"
|
||
src="{% static 'images/spot-illustrations/22_2.png'%}"
|
||
alt="" />
|
||
<img class="feature-image img-fluid mb-9 mb-lg-0 d-light-none"
|
||
src="{% static 'images/spot-illustrations/dark_22.png'%}"
|
||
alt="" />
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<h6 class="text-primary mb-2 ls-2">SIGNAL</h6>
|
||
<h3 class="fw-bolder mb-3">Receive the signals instantly</h3>
|
||
<p class="mb-4 px-md-7 px-lg-0">Phoenix makes it possible for you to quickly and effectively receive every signal. No need for drawn-out waiting.</p>
|
||
<a class="btn btn-link me-2 p-0 fs-9" href="" role="button">Check Demo
|
||
<i class="fa-solid fa-angle-right ms-2"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="row mt-2 align-items-center justify-content-between text-center text-lg-start mb-6 mb-lg-0">
|
||
<div class="col-lg-5 order-0 order-lg-1">
|
||
<img class="feature-image img-fluid mb-9 mb-lg-0 d-dark-none"
|
||
src="{% static 'images/spot-illustrations/23_2.png'%}" height="394" alt="" />
|
||
<img class="feature-image img-fluid mb-9 mb-lg-0 d-light-none"
|
||
src="{% static 'images/spot-illustrations/dark_23.png'%}" height="394" alt="" />
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<h6 class="text-primary mb-2 ls-2">REVENUE</h6>
|
||
<h3 class="fw-bolder mb-3">See Your Revenue Grow</h3>
|
||
<p class="mb-4 px-md-7 px-lg-0">Grow with Phoenix. We help you with everything you might need., We make it easy and keep it simple.</p>
|
||
<a class="btn btn-link me-2 p-0 fs-9" href="" role="button">Check Demo
|
||
<i class="fa-solid fa-angle-right ms-2"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="row mt-2 align-items-center justify-content-between text-center text-lg-start mb-6 mb-lg-0">
|
||
<div class="col-lg-5">
|
||
<img class="feature-image img-fluid mb-9 mb-lg-0 d-dark-none"
|
||
src="{% static 'images/spot-illustrations/24_2.png'%}"
|
||
height="394"
|
||
alt="" />
|
||
<img class="feature-image img-fluid mb-9 mb-lg-0 d-light-none"
|
||
src="{% static 'images/spot-illustrations/dark_24.png'%}"
|
||
height="394"
|
||
alt="" />
|
||
</div>
|
||
<div class="col-lg-6 text-center text-lg-start">
|
||
<h6 class="text-primary mb-2 ls-2">REPORTS</h6>
|
||
<h3 class="fw-bolder mb-3">Get Reports Ready</h3>
|
||
<p class="mb-4 px-md-7 px-lg-0">With Phoenix, you can get ready reports on your growth anytime.</p>
|
||
<a class="btn btn-link me-2 p-0 fs-9" href=""
|
||
role="button">Check Demo<i class="fa-solid fa-angle-right ms-2"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end of .container-->
|
||
|
||
</section>
|
||
|
||
<div class="position-relative">
|
||
<div class="bg-holder world-map-bg" style="background-image:url({% static 'images/bg/bg-13.png'%});">
|
||
</div>
|
||
<div class="bg-holder z-2 opacity-25 "
|
||
style="background-image:url({% static 'images/bg/bg-right-21.png'%});background-size:auto;background-position:right;">
|
||
</div>
|
||
<div class="bg-holder z-2 mt-9 opacity-25"
|
||
style="background-image:url({% static 'images/bg/bg-left-21.png'%});background-size:auto;background-position:left;">
|
||
</div>
|
||
</div>
|
||
|
||
<section class="bg-body-emphasis pt-lg-0 pt-xl-8" id="pricing">
|
||
<div class="bg-holder d-none d-md-block" style="background-image:url({% static 'images/bg/bg-left-15.png'%});background-position:left;background-size:auto;">
|
||
</div>
|
||
<div class="bg-holder d-none d-md-block" style="background-image:url({% static 'images/bg/bg-right-15.png'%});background-position:right;background-size:auto;">
|
||
</div>
|
||
<div class="container-small position-relative px-lg-7 px-xxl-3">
|
||
{% block pricing %}
|
||
|
||
{% endblock pricing%}
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<script src="{% static 'vendors/popper/popper.min.js' %}"></script>
|
||
<script src="{% static 'vendors/bootstrap/bootstrap.min.js' %}"></script>
|
||
<script src="{% static 'vendors/anchorjs/anchor.min.js' %}"></script>
|
||
<script src="{% static 'vendors/is/is.min.js' %}"></script>
|
||
<script src="{% static 'vendors/fontawesome/all.min.js' %}"></script>
|
||
<script src="{% static 'vendors/lodash/lodash.min.js' %}"></script>
|
||
<script src="{% static 'vendors/list.js/list.min.js' %}"></script>
|
||
<script src="{% static 'vendors/feather-icons/feather.min.js' %}"></script>
|
||
<script src="{% static 'vendors/dayjs/dayjs.min.js' %}"></script>
|
||
<script src="{% static 'js/phoenix.js' %}"></script>
|
||
<script src="{% static 'vendors/echarts/echarts.min.js' %}"></script>
|
||
<script src="{% static 'js/travel-agency-dashboard.js' %}"></script>
|
||
<script src="{% static 'vendors/mapbox-gl/mapbox-gl.js' %}"></script>
|
||
<script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>
|
||
<script src="{% static 'vendors/swiper/swiper-bundle.min.js' %}"></script>
|
||
|
||
</body>
|
||
|
||
</html>
|