{% extends 'layouts/vertical.html' %}

{% load static i18n %}

{% block title %}Tour{% endblock title %}

{% block extra_css %}

<!-- Ladda style -->
<link href="{% static 'plugins/tourguidejs/tour.min.css' %}" rel="stylesheet">

{% endblock extra_css %}

{% block page_content %}

<div class="container-fluid">

  {% include 'partials/page-title.html' with title='Tour' subtitle='Miscellaneous' %}

  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">
          <div>
            <div class="row justify-content-center">
              <div class="col-lg-5">
                <div class="text-center mt-4 mb-5">
                  <div class="auth-brand text-center mb-4">
                    <a href="/" class="logo-dark">
                      <img src="{% static 'images/logo-black.png' %}" alt="dark logo" height="32">
                    </a>
                    <a href="/" class="logo-light">
                      <img src="{% static 'images/logo.png' %}" alt="logo" height="32">
                    </a>
                  </div>

                  <h5 class="fs-lg mb-2">Powerful & Flexible Admin Panel Template</h5>
                  <p class="text-muted fs-sm">
                    Our admin panel provides a robust foundation for modern web apps. With support for multiple
                    frameworks and over a dozen demo variations, developers can build exactly what they need, fast and
                    easily. Customize with ease and enjoy consistent UI across projects.
                  </p>

                  <!-- Buttons -->
                  <div class="d-flex justify-content-center mt-4 flex-wrap gap-2">
                    <button id="tourTrigger" onclick="startTour()" class="btn btn-primary">
                      <i class="ti ti-player-play me-1"></i> Start Tour
                    </button>

                    <a href="#" class="btn btn-dark" data-tg-order="1"
                       data-tg-tour="Click here to get started and explore our framework-rich admin panel. 🚀"
                       data-tg-title="Getting Started">
                      <i class="ti ti-compass me-1"></i> Explore Features
                    </a>

                    <a
                      href="https://wrapbootstrap.com/theme/inspinia-multipurpose-admin-dashboard-template-WB0R5L90S?ref=inspinia"
                      target="_blank" class="btn btn-danger" data-tg-order="2"
                      data-tg-tour="Ready to supercharge your project? Click here to purchase the template!"
                      data-tg-title="Buy Now">
                      <i class="ti ti-shopping-cart me-1"></i> Buy Now
                    </a>
                  </div>
                </div>
              </div>
              <!-- end col -->
            </div>
            <!-- end row -->

            <div class="container" data-tg-order="3"
                 data-tg-tour="Learn more about the versatile services and modules we provide to enhance development."
                 data-tg-title="Core Features">
              <div class="row">
                <div class="col-12 text-center">
                  <span class="text-muted rounded-3 d-inline-block">🚀 Empowering your digital journey</span>
                  <h3 class="mt-3 fw-bold mb-5">Framework
                    <mark>Support & Core</mark>
                    Features
                  </h3>
                </div>
              </div>

              <div class="row">
                <div class="col-xl-3">
                  <div class="card border-0 p-2 card-h-100">
                    <div class="card-body pb-0">
                      <div class="avatar-xl mb-3">
                                                            <span
                                                              class="avatar-title text-bg-secondary rounded-circle fs-22">
                                                                <i class="ti ti-device-desktop"></i>
                                                            </span>
                      </div>
                      <h4 class="fw-semibold mb-2">Multiple Frameworks</h4>
                      <p class="text-muted mb-3">Support for Bootstrap, Tailwind, React, Vue, Angular, Laravel, and more
                        — use what suits your stack.</p>
                    </div>
                    <div class="card-footer border-0 pt-0">
                      <a class="link-primary fw-semibold" href="#">Know more<i
                        class="ti ti-arrow-right ms-2 align-middle"></i></a>
                    </div>
                  </div>
                </div>

                <div class="col-xl-3">
                  <div class="card border-0 p-2 card-h-100">
                    <div class="card-body pb-0">
                      <div class="avatar-xl mb-3">
                                                            <span
                                                              class="avatar-title text-bg-secondary rounded-circle fs-22">
                                                                <i class="ti ti-layout"></i>
                                                            </span>
                      </div>
                      <h4 class="fw-semibold mb-2">Multiple Demos</h4>
                      <p class="text-muted mb-3">Choose from a variety of pre-built demos to match your use case — from
                        CRM to SaaS dashboards.</p>
                    </div>
                    <div class="card-footer border-0 pt-0">
                      <a class="link-primary fw-semibold" href="#">Know more<i
                        class="ti ti-arrow-right ms-2 align-middle"></i></a>
                    </div>
                  </div>
                </div>

                <div class="col-xl-3">
                  <div class="card border-0 p-2 card-h-100">
                    <div class="card-body pb-0">
                      <div class="avatar-xl mb-3">
                                                            <span
                                                              class="avatar-title text-bg-secondary rounded-circle fs-22">
                                                                <i class="ti ti-brush"></i>
                                                            </span>
                      </div>
                      <h4 class="fw-semibold mb-2">Customizable UI</h4>
                      <p class="text-muted mb-3">Easily tailor colors, layouts, and components to match your branding
                        and requirements.</p>
                    </div>
                    <div class="card-footer border-0 pt-0">
                      <a class="link-primary fw-semibold" href="#">Know more<i
                        class="ti ti-arrow-right ms-2 align-middle"></i></a>
                    </div>
                  </div>
                </div>

                <div class="col-xl-3">
                  <div class="card border-0 p-2 card-h-100">
                    <div class="card-body pb-0">
                      <div class="avatar-xl mb-3">
                                                            <span
                                                              class="avatar-title text-bg-secondary rounded-circle fs-22">
                                                                <i class="ti ti-rocket"></i>
                                                            </span>
                      </div>
                      <h4 class="fw-semibold mb-2">High Performance</h4>
                      <p class="text-muted mb-3">Optimized for speed and efficiency, our admin panel ensures a seamless
                        experience for developers and users alike.</p>
                    </div>
                    <div class="card-footer border-0 pt-0">
                      <a class="link-primary fw-semibold" href="#">Know more<i
                        class="ti ti-arrow-right ms-2 align-middle"></i></a>
                    </div>
                  </div>
                </div>
              </div>
              <!-- end row -->
            </div>
            <!-- end container -->

            <div class="text-center my-4">
              <button class="btn btn-success" id="thankyou-tour" data-tg-order="7"
                      data-tg-tour="<p>Thanks for exploring! Read the documentation to get the most out of this template.</p>"
                      data-tg-title="Documentation">
                <i class="ti ti-file-dots me-1"></i> Documentation
              </button>
            </div>
          </div>
        </div>
      </div><!-- end card-body -->
    </div><!-- end card -->
  </div>
  <!-- end col -->
</div>
<!-- end row -->

{% endblock page_content %}

{% block extra_javascript %}

<!-- Tour Plugin Js-->
<script src="{% static 'plugins/tourguidejs/tour.js' %}"></script>
<!-- Tour Page Js-->
<script src="{% static 'js/pages/misc-tour.js' %}"></script>

{% endblock extra_javascript %}