<template>
  <v-sheet class="py-9">
    <v-card-title class="d-flex justify-end">
      <gear height="50" />
    </v-card-title>
    <v-card-title>
      <h6 class="text-h6 text-primary">products</h6>
    </v-card-title>
    <v-card-title style="max-width: 721px">
      <h4 class="text-wrap text-h4">
        Comprehensive purchase of all low voltage and lighting products
      </h4>
    </v-card-title>
    <v-sheet>
      <v-row class="ma-0 justify-space-between">
        <v-col cols="7" class="d-flex align-center">
          <v-card
            variant="text"
            height="500"
            width="100%"
            class="d-flex flex-column align-start justify-end position-relative rounded-xl pa-3"
            image="@/assets/products/measurement.png"
            lazy="true"
          >
            <v-card-subtitle class="py-1 d-flex w-auto">
              <p class="text-h6 text-white">measurement</p>
            </v-card-subtitle>
            <v-card-title class="d-flex px-0">
              <v-btn
                variant="text"
                class="text-white text-h6"
                append-icon="mdi-arrow-right"
              >
                Explore
              </v-btn>
            </v-card-title>
          </v-card>
        </v-col>
        <v-col cols="5" class="d-flex align-center flex-column justify-center">
          <v-card
            variant="text"
            width="100%"
            height="500"
            image="@/assets/products/end.png"
            class="d-flex flex-column justify-end rounded-xl pa-3"
          >
            <v-card-subtitle class="py-1 d-flex w-auto">
              <p class="text-h6 text-white">end</p>
            </v-card-subtitle>
            <v-card-title class="d-flex px-0">
              <v-btn
                variant="text"
                class="text-white text-h6"
                append-icon="mdi-arrow-right"
              >
                Explore
              </v-btn>
            </v-card-title>
          </v-card>
        </v-col>

        <v-col cols="5" class="d-flex align-center flex-column justify-center">
          <v-card
            variant="text"
            width="100%"
            height="500"
            image="@/assets/products/end.png"
            class="d-flex flex-column justify-end rounded-xl pa-3"
          >
            <v-card-subtitle class="py-1 d-flex w-auto">
              <p class="text-h6 text-white">end</p>
            </v-card-subtitle>
            <v-card-title class="d-flex px-0">
              <v-btn
                variant="text"
                class="text-white text-h6"
                append-icon="mdi-arrow-right"
              >
                Explore
              </v-btn>
            </v-card-title>
          </v-card>
        </v-col>
        <v-col cols="7" class="d-flex align-center">
          <v-card
            variant="text"
            height="500"
            width="100%"
            class="d-flex flex-column align-start justify-end position-relative rounded-xl pa-3"
            image="@/assets/products/measurement.png"
          >
            <v-card-subtitle class="py-1 d-flex w-auto">
              <p class="text-h6 text-white">measurement</p>
            </v-card-subtitle>
            <v-card-title class="d-flex px-0">
              <v-btn
                variant="text"
                class="text-white text-h6"
                append-icon="mdi-arrow-right"
              >
                Explore
              </v-btn>
            </v-card-title>
          </v-card>
        </v-col>
      </v-row>
    </v-sheet>
  </v-sheet>
</template>

<script setup>
import gear from "@/core/components/decorations/gear.vue";
</script>

<style></style>
