{% extends 'layout.html' %}
{% block title %}
Home
{% endblock %}
{% block content %}
{% load static %}
<section class="section banner relative">
  <div class="container">
    <div class="row items-center">
      <div class="lg:col-6">
        <h1 class="banner-title">
          {{heroSection.heading}}
        </h1>
        <p class="mt-6">
          {{heroSection.description}}
        </p>
        <a class="btn btn-white mt-8" href="{% url 'about' %}"> {{heroSection.btn_text}} </a>
      </div>
      <div class="lg:col-6">
        <img
          class="w-full object-contain"
          src="{{heroSection.banner.url}}"
          width="603"
          height="396"
          alt=""
        />
      </div>
    </div>
  </div>
  <img
    class="banner-shape absolute -top-28 right-0 -z-[1] w-full max-w-[30%]"
    src="{{heroSection.shape_image.url}}"
    alt=""
  />
</section>
<!-- ./end Banner -->

<!-- Key features -->
<section class="section key-feature relative">
  <img
    class="absolute left-0 top-0 -z-[1] -translate-y-1/2"
    src="{% static 'frontend/images/icons/feature-shape.svg' %}"
    alt=""
  />
  <div class="container">
    <div class="row justify-between text-center lg:text-start">
      <div class="lg:col-5">
        <h2>The Highlighting Part Of Our Solution</h2>
      </div>
      <div class="mt-6 lg:col-5 lg:mt-0">
        <p>
     
        </p>
      </div>
    </div>
    <div
      class="key-feature-grid mt-10 grid grid-cols-2 gap-7 md:grid-cols-3 xl:grid-cols-4"
    >
    {% for solution in ourSolutionData %}
      <div
        class="flex flex-col justify-between rounded-lg bg-white p-5 shadow-lg"
      >
        <div>
          <h3 class="h4 text-xl lg:text-2xl">{{solution.title}} </h3>
          <p>{{solution.description}}</p>
        </div>
        <span class="icon mt-4">
          <img
            class="objec-contain"
            src="{{solution.icon.url}}"
            alt=""
          />
        </span>
      </div>
    {% endfor %}
    </div>
  </div>
</section>
<!-- ./end Key features -->

<!-- Services -->
<section class="section services">
  <div class="container">
    <div class="tab row gx-5 items-center" data-tab-group="integration-tab">
      <div class="lg:col-7 lg:order-2">
        <div class="tab-content" data-tab-content>
          <div class="tab-content-panel active" data-tab-panel="0">
            <img
              class="w-full object-contain"
              src="{% static 'frontend/images/sells-by-country.png' %}"
            />
          </div>
          <div class="tab-content-panel" data-tab-panel="1">
            <img class="w-full object-contain" src="{% static 'frontend/images/collaboration.png' %}" />
          </div>
          <div class="tab-content-panel" data-tab-panel="2">
            <img
              class="w-full object-contain"
              src="{% static 'frontend/images/sells-by-country.png' %}"
            />
          </div>
        </div>
      </div>
      <div class="mt-6 lg:col-5 lg:order-1 lg:mt-0">
        <div class="text-container">
          <h2 class="lg:text-4xl">
            Prevent failure from impacting your reputation
          </h2>
          <p class="mt-4">
            Our platform helps you build secure onboarding authentication
            experiences that retain and engage your users. We build the
            infrastructure, you can.
          </p>
          <ul class="tab-nav -ml-4 mt-8 border-b-0" data-tab-nav>
            <li class="tab-nav-item active" data-tab="0">
              <img class="mr-3" src="{% static 'frontend/images/icons/drop.svg' %}" alt="" />
              Habit building essential choose habit
            </li>
            <li class="tab-nav-item" data-tab="1">
              <img class="mr-3" src="{% static 'frontend/images/icons/brain.svg' %}" alt="" />
              Get an overview of Habit Calendars.
            </li>
            <li class="tab-nav-item" data-tab="2">
              <img class="mr-3" src="{% static 'frontend/images/icons/timer.svg' %}" alt="" />
              Start building with Habitify platform
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="row gx-5 mt-12 items-center lg:mt-0">
      <div class="lg:col-7">
        <div class="relative">
          <img class="w-full object-contain" src="{{PaymentSectionData.image.url}}" />
          <img
            class="absolute bottom-6 left-1/2 -z-[1] -translate-x-1/2"
            src="{{PaymentSectionData.shaper.url}}"
            alt=""
          />
        </div>
      </div>
      <div class="mt-6 lg:col-5 lg:mt-0">
        <div class="text-container">
          <h2 class="lg:text-4xl">
            {{PaymentSectionData.heading}}
          </h2>
          <p class="mt-4">
            {{PaymentSectionData.description}}
          </p>
          <ul class="mt-6 text-dark lg:-ml-4">
            <li class="mb-2 flex items-center rounded px-4">
              <img
                class="mr-3"
                src="{{PaymentSectionData.circle.url}}"
                alt=""
              />
              {{PaymentSectionData.list1}}

            </li>
            <li class="mb-2 flex items-center rounded px-4">
              <img
                class="mr-3"
                src="{{PaymentSectionData.circle.url}}"
                alt=""
              />
              {{PaymentSectionData.list2}}

            </li>
            <li class="flex items-center rounded px-4">
              <img
                class="mr-3"
                src="{{PaymentSectionData.circle.url}}"
                alt=""
              />
              {{PaymentSectionData.list3}}
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="row gx-5 mt-12 items-center lg:mt-0">
      <div class="lg:col-7 lg:order-2">
        <div class="video pb-5 pr-9">
          <div class="video-thumbnail overflow-hidden rounded-2xl">
            <img
              class="w-full object-contain"
              src="{{about.image.url}}"
              alt=""
            />
            <button class="video-play-btn">
              <img src="{% static 'frontend/images/icons/play-icon.svg' %}" alt="" />
            </button>
          </div>
          <div
            class="video-player absolute left-0 top-0 z-10 hidden h-full w-full"
          >
            <iframe
              class="h-full w-full"
              allowfullscreen=""
              src="https://www.youtube.com/embed/g3-VxLQO7do?autoplay=1"
            ></iframe>
          </div>
          <img
            class="intro-shape absolute bottom-0 right-0 -z-[1]"
            src="{% static 'frontend/images/shape.svg' %}"
            alt=""
          />
        </div>
      </div>
      <div class="mt-6 lg:col-5 lg:order-1 lg:mt-0">
        <div class="text-container">
          <h2 class="lg:text-4xl">Accountability that works for you</h2>
          <p class="mt-4">
            {{ about.description|truncatewords:20 }}
            
          </p>
          <a href="{% url 'about' %}" class="btn btn-white mt-6">Know about us</a>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- ./end Services -->

<!-- Reviews -->
<!-- Reviews -->
<section class="reviews">
  <div class="container">
    <div class="row justify-between">
      <div class="lg:col-6">
        <h2>Our customers have nice things to say about us</h2>
      </div>
      <div class="lg:col-4">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas
          Werat viverra id et aliquet. vulputate egestas sollicitudin .
        </p>
      </div>
    </div>
    <div class="row mt-10">
      <div class="col-12">
        <div class="swiper reviews-carousel">
          <div class="swiper-wrapper">
            {% for customer in OurCustomerData %}
            <div class="swiper-slide">
              <div class="review">
                <div class="review-author-avatar bg-gradient">
                  <img src="{{ customer.profile.url}}" alt="{{customer.name}}" />
                </div>
                <h4 class="mb-2">{{customer.name}} </h4>
                <p class="mb-4 text-[#666]"> {{customer.designation}} </p>
                <p>
                  {{customer.about}}
                </p>
                <div class="review-rating mt-6 flex items-center justify-center space-x-2.5"  >
                  {% for i in "12345" %}
                      {% if forloop.counter <= customer.rating %}
                          <img src="{% static 'frontend/images/icons/star.svg' %}" alt="Golden Star" />
                      {% else %}
                          <img src="{% static 'frontend/images/icons/star-white.svg' %}" alt="White Star" />
                      {% endif %}
                  {% endfor %}
                </div>
              </div>
            </div>
            {% endfor %}
         
          </div>
          <!-- If we need pagination -->
          <div
            class="swiper-pagination reviews-carousel-pagination !bottom-0"
          ></div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- Reviews -->
<!-- Reviews -->

<!-- Call To action -->
{% include 'common/call_To_action.html' %}

<!-- ./end Services -->
{% endblock %}