<script setup lang="ts">
import { $t } from '@/locales';
</script>

<template>
  <div>
    <h2 class="ml-[21px] mt-[21px] text-[18px] font-bold">
      {{ $t('homeModule.productList') }}
    </h2>
    <div class="flex flex-wrap gap-[18px]">
      <div
        class="mt-[24px] flex cursor-pointer items-center rounded-[30px] border border-gray-200 bg-white px-[24px] py-[7px] shadow-md"
      >
        <img
          class="h-[30px] w-auto object-contain"
          src="@/assets/image/product1.png"
        />
      </div>
      <div
        class="mt-[24px] flex cursor-pointer items-center rounded-[30px] border border-gray-200 bg-white px-[24px] py-[7px] shadow-md"
      >
        <img
          class="h-[30px] w-auto object-contain"
          src="@/assets/image/product2.png"
        />
      </div>
      <div
        class="mt-[24px] flex cursor-pointer items-center rounded-[30px] border border-gray-200 bg-white px-[24px] py-[7px] shadow-md"
      >
        <img
          class="h-[30px] w-auto object-contain"
          src="@/assets/image/product3.png"
        />
      </div>
      <div
        class="mt-[24px] flex cursor-pointer items-center rounded-[30px] border border-gray-200 bg-white px-[24px] py-[7px] shadow-md"
      >
        <img
          class="h-[30px] w-auto object-contain"
          src="@/assets/image/product4.png"
        />
      </div>
      <div
        class="mt-[24px] flex cursor-pointer items-center rounded-[30px] border border-gray-200 bg-white px-[24px] py-[7px] shadow-md"
      >
        <img
          class="h-[30px] w-auto object-contain"
          src="@/assets/image/product5.png"
        />
      </div>
      <div
        class="mt-[24px] flex cursor-pointer items-center rounded-[30px] border border-gray-200 bg-white px-[24px] py-[7px] text-[#810041] shadow-md"
      >
        More >
      </div>
    </div>
  </div>
</template>

<style scoped></style>
