<template>
  <Container class="container">
    <div class="grid grid-cols-8 gap-32 mobile:auto-rows-max">
      <div class="trusted
        col-start-1 col-end-5 row-start-1 row-end-3
        tablet:col-start-1 tablet:col-end-9 tablet:row-start-1 tablet:row-end-2"
      >
        <Trusted client:visible />
      </div>
      <Services
        class="our-services
        col-start-5 col-end-9 row-start-1 row-end-2
        tablet:col-start-1 tablet:col-end-5 tablet:row-start-2 tablet:row-end-3
        mobile:col-start-1 mobile:col-end-9"
      />
      <Reviews
        class="reviews
        col-start-5 col-end-9 row-start-2 row-end-3
        mobile:col-start-1 mobile:col-end-9 mobile:row-start-3 mobile:row-end-4"
      />
      <Pricing
        class="pricing
        child-4 col-start-1 col-end-9 row-start-3
        mobile:row-start-4 mobile:row-end-5"
      />
      <div class="awards
        child-5 col-start-1 col-end-4 row-start-4
        mobile:col-start-1 mobile:col-end-9 mobile:row-start-5 mobile:row-end-6"
      >
        <Awards client:visible />
      </div>
      <Cta class="cta
        child-6 col-start-4 col-end-9 row-start-4
        mobile:col-start-1 mobile:col-end-9 mobile:row-start-6 mobile:row-end-7"
      />
    </div>
  </Container>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

import Container from '@/components/ui/Container.vue';
import Trusted from '@/components/pages/index/Grid/Tiles/Trusted.vue';
import Services from '@/components/pages/index/Grid/Tiles/Services/Services.vue';
import Reviews from '@/components/pages/index/Grid/Tiles/Reviews.vue';
import Pricing from '@/components/pages/index/Grid/Tiles/Pricing/Pricing.vue';
import Awards from '@/components/pages/index/Grid/Tiles/Awards.vue';
import Cta from "@/components/pages/index/Grid/Tiles/Cta.vue";

export default defineComponent({
  components: {
    Container,
    Trusted,
    Services,
    Reviews,
    Pricing,
    Awards,
    Cta
  },
});
</script>
