<template>
     <div class="container">
      <div class="payment-order-section">
        <div class="custom-row row position-relative">
          <div
            class="col-12 col-xl-6 col-lg-6 d-flex align-items-cente justify-content-cen mb-5 mb-xl-0 mb-lg-0"
          >
            <div class="main-one d-flex flex-column">
              <div class="text-contaier">
                <h2 class="mobileHead">{{ $t("orderHome") }}</h2>
                <p>
                  {{ $t("orderHome2") }}
                </p>
              </div>
              <div class="image-container">
                <div class="text">
                  <h3>{{ $t("indi") }}</h3>
                  <nuxt-link :to="localePath('/order-individuals')">
                    <button class="paymentBTN">
                      {{ $t("orderHome") }}
                      <svg
                        class="arrowDir"
                        xmlns="http://www.w3.org/2000/svg"
                        width="18"
                        height="18"
                        viewBox="0 0 18 18"
                        fill="none"
                      >
                        <path
                          fill-rule="evenodd"
                          clip-rule="evenodd"
                          d="M12.5247 4.72498H4.72473L4.72472 12.525H5.77472L5.77473 6.51744L12.7497 13.4924L13.4922 12.75L6.51719 5.77498H12.5247V4.72498Z"
                          fill="white"
                        />
                      </svg>
                    </button>
                  </nuxt-link>
                  <NuxtImg
                    src="/images/order2.png"
                    format="webp"
                    quality="80"
                    loading="lazy"
                    alt="order car"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="col-12 position-relative col-xl-6 col-lg-6 d-flex align-items-cente justify-content-"
          >
            <div class="position-sticky image-container">
              <div class="text">
                <h3>{{ $t("comp") }}</h3>
                <nuxt-link :to="localePath('/order-company')">
                  <button class="orderBtn2">
                    {{ $t("orderHome") }}
                    <svg
                      class="arrowDir"
                      xmlns="http://www.w3.org/2000/svg"
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                    >
                      <path
                        fill-rule="evenodd"
                        clip-rule="evenodd"
                        d="M12.5247 4.72498H4.72473L4.72472 12.525H5.77472L5.77473 6.51744L12.7497 13.4924L13.4922 12.75L6.51719 5.77498H12.5247V4.72498Z"
                        fill="white"
                      />
                    </svg>
                  </button>
                </nuxt-link>
                <NuxtImg
                  src="/images/order1.png"
                  format="webp"
                  quality="80"
                  loading="lazy"
                  alt="order"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script setup>
const localePath = useLocalePath();

</script>