<script>
import { mapState } from "vuex";

export default {
  data: () => {
    return {};
  },

  computed: {
    ...mapState(["clientsHeading", "clients"]),
  },
};
</script>

<template>
  <!-- About clients section -->
  <div class="mt-10 sm:mt-20">
    <p
      class="
        font-general-medium
        text-2xl text-center
        sm:text-3xl
        text-white
      "
    >
      {{ clientsHeading }}
    </p>
    <div id="clients-list" class="flex flex-row flex-wrap mt-10 sm:mt-14 gap-4 mx-4 sm:mx-12 justify-center">
      <AboutClientSingle
        v-for="client in clients"
        :key="client.id"
        :client="client"
      />
    </div>
  </div>
</template>
