adata-ui 0.3.99 → 2.0.0

package/components/elements/button/AButton.vue

@@ -0,0 +1,188 @@
+<script lang="ts" setup>
+// TODO: refactor Ilkham
+import { twJoin, twMerge } from 'tailwind-merge'
+import type { Component } from 'vue'
+import type { DisabledViewSwitchValues, SizeSwitchValues, ViewSwitchValues } from './types'
+import { NuxtLinkLocale} from '#components'
+
+defineOptions({ name: 'AButton' })
+
+interface Props {
+  variant?: 'primary' | 'success' | 'danger' | 'gray' | 'ghost'
+  view?: 'default' | 'outline' | 'transparent' | 'rounded'
+  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+  form?: 'icon' | 'button'
+  icon?: Component
+  iconClass?: string
+  loading?: boolean
+  disabled?: boolean
+  block?: boolean
+  active?: boolean
+  to?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'primary',
+  view: 'default',
+  size: 'lg',
+  form: 'button',
+  loading: false,
+  disabled: false,
+  block: false,
+  active: false,
+  iconClass: '',
+  to: ''
+})
+
+const classes = computed(() => [
+  'body-600 rounded-md cursor-pointer outline-none transition duration-200 select-none',
+  props.block ? 'w-full' : '',
+  typeSwitchValues[props.view][props.variant],
+  sizeSwitchValues[props.form][props.size]
+])
+const disabledClasses = computed(() => [
+  'body-600 rounded-md outline-none transition duration-200 select-none',
+  props.block ? 'w-full' : '',
+  disabledTypeSwitchValues[props.view],
+  sizeSwitchValues[props.form][props.size]
+])
+
+const typeSwitchActiveValues: ViewSwitchValues = {
+  default: {
+    primary: 'bg-deepblue-900 text-white dark:bg-gray-200',
+    success: 'bg-deepblue-900 text-white dark:bg-gray-200',
+    danger: 'bg-deepblue-900 text-white dark:bg-gray-200 ',
+    gray: 'bg-deepblue-900 text-white dark:bg-gray-200 dark:text-gray-900 hover:text-deepblue-900 dark:hover:text-gray-200',
+    ghost:
+      'bg-deepblue-900 text-white dark:bg-gray-200 dark:text-gray-900 hover:text-deepblue-900 dark:hover:text-gray-200'
+  },
+  transparent: {
+    primary: 'bg-blue-700 text-white dark:bg-blue-500 dark:text-gray-900',
+    success: 'bg-green-500 text-white dark:bg-green-400 dark:text-gray-900',
+    danger: 'bg-red-500 text-white dark:bg-red-400 dark:text-gray-900',
+    gray: 'bg-deepblue-900 text-white dark:bg-gray-200 dark:text-gray-900 hover:text-deepblue-900 dark:hover:text-gray-200',
+    ghost:
+      'bg-white text-deepblue-900 dark:bg-gray-900 dark:text-gray-200 hover:text-deepblue-900 dark:hover:text-gray-200'
+  },
+  outline: {
+    primary: 'bg-blue-700 text-white dark:bg-blue-500 dark:text-gray-900',
+    success: 'bg-green-500 text-white dark:bg-green-400 dark:text-gray-900',
+    danger: 'bg-red-500 text-white dark:bg-red-400 dark:text-gray-900',
+    gray: 'bg-deepblue-900 text-white dark:bg-gray-200 dark:text-gray-900 hover:text-deepblue-900 dark:hover:text-gray-200',
+    ghost:
+      'bg-gray-500 text-white dark:bg-gray-500 dark:text-gray-900 hover:text-deepblue-900 dark:hover:text-gray-200'
+  },
+  rounded: {
+    primary: 'bg-deepblue-900 text-white dark:bg-gray-200',
+    success: 'bg-deepblue-900 text-white dark:bg-gray-200',
+    danger: 'bg-deepblue-900 text-white dark:bg-gray-200 ',
+    gray: 'bg-deepblue-900 text-white dark:bg-gray-200 dark:text-gray-900 hover:text-deepblue-900 dark:hover:text-gray-200',
+    ghost:
+      'bg-deepblue-900 text-white dark:bg-gray-200 dark:text-gray-900 hover:text-deepblue-900 dark:hover:text-gray-200'
+  },
+}
+
+const typeSwitchValues: ViewSwitchValues = {
+  default: {
+    primary:
+      'bg-blue-700 text-white hover:bg-blue-900 active:bg-deepblue-900 active:text-white dark:bg-blue-500 dark:text-gray-900 dark:hover:bg-blue-700 dark:active:bg-gray-200',
+    success:
+      'bg-green-500 text-white hover:bg-green-900 active:bg-deepblue-900 active:text-white dark:bg-green dark:text-gray-900 dark:hover:bg-green-300 dark:active:bg-gray-200',
+    danger:
+      'bg-red-500 text-white hover:bg-red-700 active:bg-deepblue-900 active:text-white dark:bg-red-400 dark:text-gray-900 dark:hover:bg-red-300 dark:active:bg-gray-200',
+    gray: 'bg-deepblue-900/5 text-deepblue-900 hover:bg-deepblue-900/10 active:bg-deepblue-900 active:text-white dark:bg-gray-200/5 dark:hover:bg-gray-200/10 dark:active:bg-gray-200 dark:text-gray-200 dark:active:text-gray-900',
+    ghost:
+      'bg-white text-deepblue-900 hover:bg-deepblue-900/5 active:bg-deepblue-900 active:text-white dark:bg-gray-900 dark:text-gray-200 dark:bg-gray-900 dark:hover:bg-gray-200/5 dark:active:bg-gray-200 dark:active:text-gray-900'
+  },
+  transparent: {
+    primary:
+      'text-blue-700 hover:bg-blue-100 active:bg-blue-700 active:text-white dark:text-blue-500 dark:hover:bg-blue-500/20 dark:active:bg-blue-500 dark:active:text-gray-900',
+    success:
+      'text-green-500 hover:bg-green-500/20 active:bg-green-500 active:text-white dark:text-green-400 dark:hover:bg-green-400/20 dark:active:bg-green-400 dark:active:text-gray-900',
+    danger:
+      'text-red-500 hover:bg-red-500/20 active:bg-red-500 active:text-white dark:text-red-400 dark:hover:bg-red-400/20 dark:active:bg-red-400 dark:active:text-gray-900',
+    gray: 'text-deepblue-900 hover:bg-deepblue-900/10 active:bg-deepblue-900 active:text-white dark:text-gray-200 dark:hover:bg-gray-200/5 dark:active:bg-gray-200 dark:active:text-gray-900',
+    ghost:
+      'text-white hover:bg-deepblue-900/10 active:bg-white active:text-deepblue-900 dark:text-gray-200 dark:hover:bg-gray-200/5 dark:active:bg-gray-900 dark:active:text-gray-200'
+  },
+  outline: {
+    primary:
+      'border border-blue-700 text-blue-700 hover:bg-blue-100 active:bg-blue-700 active:text-white dark:border-blue-500 dark:text-blue-500 dark:hover:bg-blue-500/20 dark:active:bg-blue-500 dark:active:text-gray-900',
+    success:
+      'border border-green-500 text-green-500 hover:bg-green-500/20 active:bg-green-500 active:text-white dark:border-green-400 dark:text-green-400 dark:hover:bg-green-400/20 dark:active:bg-green-400 dark:active:text-gray-900',
+    danger:
+      'border border-red-500 text-red-500 hover:bg-red-500/20 active:bg-red-500 active:text-white dark:text-red-400 dark:border-red-400 dark:hover:bg-red-400/20 dark:active:bg-red-400 dark:active:text-gray-900',
+    gray: 'border border-gray-500/50 text-deepblue-900 hover:bg-deepblue-900/10 active:bg-deepblue-900 active:text-white dark:border-gray-500/50 dark:text-gray-200 dark:hover:bg-gray-200/5 dark:active:bg-gray-200 dark:active:text-gray-900',
+    ghost:
+      'border border-white text-white hover:bg-deepblue-900 active:bg-gray-500 active:text-white dark:border-gray-200 dark:text-gray-200 dark:hover:bg-gray-200/5 dark:active:bg-gray-500 dark:active:text-gray-900'
+  },
+  rounded: {
+    primary:
+      'rounded-[32px] bg-blue-700 text-white hover:bg-blue-900 active:bg-deepblue-900 active:text-white dark:bg-blue-500 dark:text-gray-900 dark:hover:bg-blue-700 dark:active:bg-gray-200',
+    success:
+      'rounded-[32px] bg-green-500 text-white hover:bg-green-900 active:bg-deepblue-900 active:text-white dark:bg-green dark:text-gray-900 dark:hover:bg-green-300 dark:active:bg-gray-200',
+    danger:
+      'rounded-[32px] bg-red-500 text-white hover:bg-red-700 active:bg-deepblue-900 active:text-white dark:bg-red-400 dark:text-gray-900 dark:hover:bg-red-300 dark:active:bg-gray-200',
+    gray: 'rounded-[32px] bg-deepblue-900/5 text-deepblue-900 hover:bg-deepblue-900/10 active:bg-deepblue-900 active:text-white dark:bg-gray-200/5 dark:hover:bg-gray-200/10 dark:active:bg-gray-200 dark:text-gray-200 dark:active:text-gray-900',
+    ghost:
+      'rounded-[32px] bg-white text-deepblue-900 hover:bg-deepblue-900/5 active:bg-deepblue-900 active:text-white dark:bg-gray-900 dark:text-gray-200 dark:bg-gray-900 dark:hover:bg-gray-200/5 dark:active:bg-gray-200 dark:active:text-gray-900'
+  },
+}
+
+const disabledTypeSwitchValues: DisabledViewSwitchValues = {
+  default:
+    'bg-deepblue-900/5 text-deepblue-900/20 dark:bg-gray-200/5 dark:text-gray-200/20 pointer-events-none',
+  transparent: 'text-gray-500/50 pointer-events-none',
+  outline: 'border border-gray-500/50 text-gray-500/50 pointer-events-none'
+}
+
+const sizeSwitchValues: SizeSwitchValues = {
+  icon: {
+    sm: 'p-1 text-base',
+    md: 'p-2 text-base',
+    lg: 'p-2 text-2xl',
+    xl: 'p-4 text-3xl',
+  },
+  button: {
+    sm: 'px-4 py-1.5 leading-4 !h-[28px]',
+    md: 'px-4 py-1.5 !h-[32px]',
+    lg: 'px-4 py-2.5',
+    xl: 'px-8 py-2.5',
+    '2xl': 'px-6 py-[14px] text-xl',
+  }
+}
+
+const buttonClasses = computed(() =>
+  twMerge(
+    twJoin(
+      props.disabled ? disabledClasses.value : classes.value,
+      props.active ? typeSwitchActiveValues[props.view][props.variant] : '',
+      props.to ? 'inline-block' : ''
+    )
+  )
+)
+</script>
+<template>
+  <component
+    :is="to ? NuxtLinkLocale : 'button'"
+    :class="[buttonClasses, 'relative h-fit transition flex items-center justify-center']"
+    :disabled="disabled"
+    :to="to"
+  >
+    <span
+      :class="[
+        { 'opacity-0': loading },
+        'flex items-center justify-center gap-2 whitespace-nowrap'
+      ]"
+    >
+      <component :is="icon" :class="[`${iconClass}`]" />
+      <slot />
+    </span>
+    <span
+      v-if="loading"
+      class="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center"
+    >
+      <a-icon-loader-circle  class="animate-spin"/>
+    </span>
+  </component>
+</template>

package/components/elements/button/types.ts

@@ -0,0 +1,24 @@
+export type TypeSwitchValues = {
+  [key in 'primary' | 'success' | 'danger' | 'gray' | 'ghost']: string;
+};
+
+export type ViewSwitchValues = {
+  default: TypeSwitchValues;
+  transparent: TypeSwitchValues;
+  outline: TypeSwitchValues;
+};
+
+export type SizeSwitchValues = {
+  icon: {
+    [key in 'sm' | 'md' | 'lg' | 'xl']: string;
+  };
+  button: {
+    [key in 'sm' | 'md' | 'lg' | 'xl']: string;
+  };
+};
+
+export type DisabledViewSwitchValues = {
+  default: string;
+  transparent: string;
+  outline: string;
+}

package/components/elements/calendar/ACalendar.vue

@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import { ref } from '#imports'
+
+defineOptions({
+  name: 'ACalendar'
+})
+
+interface Props {
+  locale?: 'ru' | 'en'
+  color: 'blue' | 'red' | 'yellow' | 'gray' | 'green'
+  type: 'single-date' | 'range-date'
+  mode: 'date' | 'time' | 'dateTime'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  locale: 'ru',
+  color: 'blue',
+  type: 'range-date',
+  mode: 'date'
+})
+
+const date = defineModel<Date>({
+  default: new Date()
+})
+
+const range = defineModel<{
+  value: {
+    start: Date
+    end: Date
+  }
+}>('range', {
+  default: {
+    start: new Date(),
+    end: new Date(new Date().setDate(new Date().getDate() + 14))
+  }
+})
+
+const popover = {
+  visibility: 'click',
+  placement: 'bottom-end',
+}
+</script>
+
+<template>
+  <div>
+    <client-only>
+      <VDatePicker
+        v-if="type === 'range-date'"
+        v-model.range="range"
+        :is-dark="{ selector: ':root', darkClass: 'dark' }"
+        :color="color"
+        :locale="locale"
+        :mode="mode"
+        title-position="left"
+        :popover="popover"
+      >
+        <template
+          v-if="$slots.default"
+          #default="value"
+        >
+          <slot v-bind="value" />
+        </template>
+      </VDatePicker>
+      <VDatePicker
+        v-else
+        v-model="date"
+        :is-dark="{ selector: ':root', darkClass: 'dark' }"
+        :color="color"
+        :locale="locale"
+        :mode="mode"
+        title-position="left"
+        :popover="popover"
+      >
+        <template
+          v-if="$slots.default"
+          #default="value"
+        >
+          <slot v-bind="value" />
+        </template>
+      </VDatePicker>
+    </client-only>
+  </div>
+</template>

package/components/elements/carousel/ACarousel.vue

@@ -0,0 +1,159 @@
+<template>
+  <div
+    :class="ui.wrapper"
+    v-bind="attrs"
+  >
+    <div
+      ref="carouselRef"
+      :class="ui.container"
+      class="no-scrollbar"
+    >
+      <div
+        v-for="(item, index) in items"
+        :key="index"
+        :class="ui.item"
+        :role="indicators ? 'tabpanel' : null"
+      >
+        <slot
+          :item="item"
+          :index="index"
+        />
+      </div>
+    </div>
+
+    <div
+      v-if="arrows"
+      :class="ui.arrows.wrapper"
+    >
+      <slot
+        name="prev"
+        :on-click="onClickPrev"
+        :disabled="isFirst"
+      />
+
+      <slot
+        name="next"
+        :on-click="onClickNext"
+        :disabled="isLast"
+      />
+    </div>
+
+    <div
+      v-if="indicators"
+      role="tablist"
+      :class="ui.indicators.wrapper"
+    >
+      <template
+        v-for="page in pages"
+        :key="page"
+      >
+        <slot
+          name="indicator"
+          :on-click="onClick"
+          :active="page === currentPage"
+          :page="page"
+        >
+          <button
+            type="button"
+            role="tab"
+            :aria-selected="page === currentPage"
+            :class="[
+              ui.indicators.base,
+              page === currentPage ? ui.indicators.active : ui.indicators.inactive
+            ]"
+            :aria-label="`set slide ${page}`"
+            @click="onClick(page)"
+          />
+        </slot>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" generic="T">
+import {useScroll, useResizeObserver, useElementSize} from '@vueuse/core'
+import {useCarouselScroll} from "#adata-ui/composables/useCarouselScroll";
+import {ui as defaultUi} from './config.ui';
+import {computed, ref, toRefs} from "vue";
+import type {Ui} from "#adata-ui/components/elements/carousel/types";
+import {mergeConfig} from "#adata-ui/components/utils";
+
+defineOptions({
+  inheritAttrs: false
+})
+const attrs = useAttrs()
+
+
+interface Props {
+  items: T[]
+  indicators?: boolean
+  arrows?: boolean
+  defaultUi?: Ui
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  indicators: false,
+  arrows: false,
+  defaultUi: () => {
+  }
+})
+const ui = computed(() =>mergeConfig<Ui>(defaultUi, props.defaultUi))
+const carouselRef = ref<HTMLElement>()
+const itemWidth = ref(0)
+
+const {x, arrivedState} = useScroll(carouselRef, {behavior: 'smooth'})
+const {width: carouselWidth} = useElementSize(carouselRef)
+
+const {left: isFirst, right: isLast} = toRefs(arrivedState)
+
+useCarouselScroll(carouselRef)
+
+useResizeObserver(carouselRef, (entries) => {
+  const [entry] = entries
+
+  itemWidth.value = entry?.target?.firstElementChild?.clientWidth || 0
+})
+
+const currentPage = computed(() => Math.round(x.value / itemWidth.value) + 1)
+
+const pages = computed(() => {
+  if (!itemWidth.value) {
+    return 0
+  }
+
+  return props.items.length - Math.round(carouselWidth.value / itemWidth.value) + 1
+})
+
+function onClickNext() {
+  x.value += itemWidth.value
+}
+
+function onClickPrev() {
+  x.value -= itemWidth.value
+}
+
+function onClick(page: number) {
+  x.value = (page - 1) * itemWidth.value
+}
+
+defineExpose({
+  pages,
+  page: currentPage,
+  prev: onClickPrev,
+  next: onClickNext,
+  select: onClick
+})
+</script>
+
+<style scoped>
+/* Hide scrollbar for Chrome, Safari and Opera */
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.no-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+</style>

package/components/elements/carousel/config.ui.ts

@@ -0,0 +1,15 @@
+export const ui = {
+  wrapper: 'relative',
+  container: 'relative w-full flex overflow-x-auto snap-x snap-mandatory scroll-smooth',
+  item: 'flex flex-none snap-center',
+  arrows: {
+    wrapper: 'flex items-center justify-between',
+  },
+  indicators: {
+    wrapper: 'absolute z-10 flex items-center justify-center gap-3 bottom-4 inset-x-0',
+    base: 'rounded-full h-3 w-3',
+    active: 'bg-primary-500 dark:bg-primary-400 bg-blue-700',
+    inactive: 'bg-gray-200 dark:bg-gray-800 mix-blend-overlay',
+  },
+}
+export default {ui}

package/components/elements/carousel/types.ts

@@ -0,0 +1,18 @@
+export interface Ui {
+  wrapper:    string;
+  container:  string;
+  item:       string;
+  arrows:     Arrows;
+  indicators: Indicators;
+}
+
+export interface Arrows {
+  wrapper: string;
+}
+
+export interface Indicators {
+  wrapper:  string;
+  base:     string;
+  active:   string;
+  inactive: string;
+}

package/components/elements/chip-wrapper/AChipWrapper.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import type {Props} from './types'
+import {twJoin, twMerge} from "tailwind-merge";
+
+defineOptions({
+  inheritAttrs: false
+})
+const props = withDefaults(defineProps<Props>(), {
+  position: 'top-right',
+  show: true,
+  size: 'sm',
+  color: 'green',
+  inset: false,
+})
+const ui = {
+  wrapper: 'relative inline-flex items-center justify-center flex-shrink-0',
+  base: 'absolute rounded-full ring-1 ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap',
+  background: {
+    green: 'bg-green-500 dark:bg-green-500'
+  },
+  position: {
+    'top-right': 'top-0 right-0',
+    'bottom-right': 'bottom-0 right-0',
+    'top-left': 'top-0 left-0',
+    'bottom-left': 'bottom-0 left-0',
+  },
+  translate: {
+    'top-right': '-translate-y-1/2 translate-x-1/2 transform',
+    'bottom-right': 'translate-y-1/2 translate-x-1/2 transform',
+    'top-left': '-translate-y-1/2 -translate-x-1/2 transform',
+    'bottom-left': 'translate-y-1/2 -translate-x-1/2 transform',
+  },
+  size: {
+    '3xs': 'h-[4px] min-w-[4px] text-[4px] p-px',
+    '2xs': 'h-[5px] min-w-[5px] text-[5px] p-px',
+    xs: 'h-1.5 min-w-[0.375rem] text-[6px] p-px',
+    sm: 'h-2 min-w-[0.5rem] text-[7px] p-0.5',
+    md: 'h-2.5 min-w-[0.625rem] text-[8px] p-0.5',
+    lg: 'h-3 min-w-[0.75rem] text-[10px] p-0.5',
+    xl: 'h-3.5 min-w-[0.875rem] text-[11px] p-1',
+    '2xl': 'h-4 min-w-[1rem] text-[12px] p-1',
+    '3xl': 'h-5 min-w-[1.25rem] text-[14px] p-1',
+  },
+}
+const attrs = useAttrs()
+const chipClass = computed(() => {
+  return twMerge(
+    twJoin(
+      ui.base,
+      ui.size[props.size],
+      ui.position[props.position],
+      props.inset ? null : ui.translate[props.position],
+      ui.background[props.color],
+      props.class,
+    )
+  )
+})
+</script>
+
+<template>
+  <div
+    :class="ui.wrapper"
+    v-bind="attrs"
+  >
+    <slot/>
+
+    <span
+      v-if="show"
+      :class="chipClass"
+    >
+      <slot name="content">
+        {{ text }}
+      </slot>
+    </span>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/components/elements/chip-wrapper/types.ts

@@ -0,0 +1,12 @@
+type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+type Color = 'green'
+type Size = '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+export interface Props {
+  position?: Position
+  text?: string
+  show?: boolean
+  class?: string
+  color?: Color
+  inset?: boolean
+  size?: Size
+}

package/components/elements/chips/AChips.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import {twMerge} from "tailwind-merge";
+
+type Props = {
+  size?: 'sm' | 'md' | 'lg'
+  view?: 'standard' | 'outline'
+}
+
+withDefaults(defineProps<Props>(), {view: 'outline', size: 'sm'})
+
+
+const chipView = {
+  standard: 'text-deepblue border-gray focus-visible:outline-gray',
+  outline: 'text-blue border-blue focus-visible:outline-blue'
+}
+
+const sizeOptions = {
+  sm: 'h-4',
+  md: 'h-5',
+  lg: 'h-7'
+}
+</script>
+
+<template>
+  <button
+    :class="twMerge(['flex items-center gap-2 rounded-3xl border border-solid px-2.5 text-xs hover:bg-deepblue-100 dark:hover:bg-[#E3E5E80D] focus-visible:shadow-[0_0_0_4px#1B64B3] active:bg-blue active:text-white disabled:border-deepblue-200 disabled:text-deepblue-200', chipView[view], sizeOptions[size]], $attrs.class)"
+  >
+    <slot/>
+  </button>
+</template>
+
+<style scoped></style>

package/components/elements/companies/AOurClients.vue

@@ -0,0 +1,42 @@
+<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>