<template>
  <div class="flex flex-col gap-4 lg:gap-8">
    <h2 class="lg:heading-01 heading-02 lg:text-left text-center ">{{ t('our_clients.title') }}</h2>
    <a-infinite-carousel>
      <div class="flex items-center justify-center">
        <a-icon-company-forte class="max-w-[150px] sm:max-w-none"></a-icon-company-forte>
      </div>
      <div class="flex items-center justify-center">
        <a-icon-company-mycar class="max-w-[150px] sm:max-w-none"></a-icon-company-mycar>
      </div>
      <div class="flex items-center justify-center">
        <a-icon-company-jusan class="max-w-[150px] sm:max-w-none"></a-icon-company-jusan>
      </div>
      <div class="flex items-center justify-center">
        <a-icon-company-bereke class="max-w-[150px] sm:max-w-none"></a-icon-company-bereke>
      </div>
      <div class="flex items-center justify-center">
        <a-icon-company-halyk class="max-w-[150px] sm:max-w-none"></a-icon-company-halyk>
      </div>
      <div class="flex items-center justify-center">
        <a-icon-company-kaspi class="max-w-[150px] sm:max-w-none"></a-icon-company-kaspi>
      </div>
      <div class="flex items-center justify-center">
        <a-icon-company-bigroup class="max-w-[150px] sm:max-w-none"></a-icon-company-bigroup>
      </div>
      <div class="flex items-center justify-center">
        <a-icon-company-samruk class="max-w-[150px] sm:max-w-none"></a-icon-company-samruk>
      </div>
      <div class="flex items-center justify-center">
        <a-icon-company-bazis class="max-w-[150px] sm:max-w-none"></a-icon-company-bazis>
      </div>
      <div class="flex items-center justify-center">
        <a-icon-company-erg class="max-w-[150px] sm:max-w-none"></a-icon-company-erg>
      </div>
    </a-infinite-carousel>
  </div>
</template>
<script setup lang="ts">
import AInfiniteCarousel from "#adata-ui/components/elements/infinite-carousel/AInfiniteCarousel.vue";

const { t } = useI18n()
</script>
