<template>
  <v-sheet class="pa-0" color="transparent">
    <Introduction />

    <v-sheet class="d-flex justify-center py-9 ga-10">
      <v-card
        width="360"
        height="100"
        variant="text"
        class="pa-5 rounded-xl elevation-10"
      >
        <v-row class="ma-0 h-100">
          <v-col cols="6" class="h-100 d-flex align-center pa-0">
            <v-avatar class="ml-n3" image="/Home/avatar.png"></v-avatar>
            <v-avatar class="ml-n3" image="/Home/avatar.png"></v-avatar>
            <v-avatar class="ml-n3" image="/Home/avatar.png"></v-avatar>
            <v-avatar class="ml-n3" image="/Home/avatar.png"></v-avatar>
            <v-avatar class="ml-n3" image="/Home/avatar.png"></v-avatar>
            <v-avatar class="ml-n3 d-flex" image="/Home/avatar.png"> </v-avatar>
          </v-col>
          <v-col cols="6" class="pa-0 d-flex flex-column justify-center">
            <v-card-title class=""
              ><h4 class="text-h6" style="line-height: 20px">
                72k+ Happy
              </h4></v-card-title
            >
            <v-card-title class=""
              ><h4 class="text-h6" style="line-height: 20px">
                Customers
              </h4></v-card-title
            >
          </v-col>
        </v-row>
      </v-card>
      <v-card
        width="320"
        height="100"
        variant="text"
        class="pa-5 rounded-xl elevation-10"
      >
        <v-row class="ma-0 h-100">
          <v-col cols="2" class="h-100 d-flex align-center pa-0">
            <v-avatar size="x-large" image="/Home/avatar.png"></v-avatar>
          </v-col>
          <v-col cols="10" class="pa-0 d-flex flex-column justify-center">
            <v-card-title class=""
              ><h4 class="text-h6" style="line-height: 20px">
                200+ New
              </h4></v-card-title
            >
            <v-card-title class=""
              ><h4 class="text-h6" style="line-height: 20px">
                Listings Everyday!
              </h4></v-card-title
            >
          </v-col>
        </v-row>
      </v-card>
    </v-sheet>

    <v-row class="pa-0 ma-0" justify="center">
      <v-col cols="10">
        <!-- gear -->

        <div class="ml-16" style="width: 100px">
          <v-img
            class="gear"
            height="100"
            src="@/assets/decorations/gear.svg"
          ></v-img>
        </div>
      </v-col>

      <v-col cols="11">
        <!-- Trusted by -->
        <trustedBy />

        <introductionAbout />
        <qualityCertificates />
        <products />
      </v-col>
      <Services />
      <v-row justify="center">
        <v-col cols="11">
          <products_2 />
          <ourTeam />
        </v-col>
      </v-row>
    </v-row>
    <contactUs />
    <v-row justify="center">
      <v-col cols="10">
        <distributors />
      </v-col>
    </v-row>
  </v-sheet>
</template>

<script setup>
import Introduction from "../components/Introduction.vue";
import trustedBy from "@/modules/About/components/trustedBy.vue";
import introductionAbout from "@/modules/About/components/Introduction.vue";
import qualityCertificates from "@/modules/qualityCertificates/components/showHome.vue";
import products from "@/modules/Products/components/showRoom.vue";
import Services from "@/modules/OurServices/components/showRoom.vue";
import products_2 from "@/modules/Products/components/showRoom_2.vue";
import ourTeam from "@/modules/About/components/ourTeam.vue";
import contactUs from "@/modules/Contact/components/contactUs.vue";
import distributors from "@/modules/Distributors/components/showRoom.vue";
</script>

<style scoped>
.gear {
  animation: rotate 5s linear infinite;
}
</style>
