<script>
import {mapState, mapGetters} from "vuex";
import feather from "feather-icons";

import AppBanner from "@/components/shared/AppBanner.vue";
import Gallery from "@/components/gallery/Gallery.vue";
import AboutMe from "@/components/about/AboutMe.vue";
import AboutClients from "@/components/about/AboutClients.vue";
import ContactForm from "@/components/contact/ContactForm.vue";
import ContactDetails from "@/components/contact/ContactDetails.vue";


export default {
  scrollToTop: true,
  components: {AppBanner, Gallery, AboutMe, AboutClients, ContactForm, ContactDetails},

  computed: {
    ...mapState(["photos", "initialCategory", "contacts"]),
    ...mapGetters(["showcasePhotos"])
  },

  mounted() {
    feather.replace();
  },
  updated() {
    feather.replace();
  },
};
</script>

<template>
  <div class="">
    <AppBanner/>

    <div class="container mx-auto mt-20">
      <Gallery id="portfolio"
               :images="photos"
               :initial-category="initialCategory"
               :filter-enabled="true"/>

      <AboutMe id="about" class=""/>
      <AboutClients class=""/>

      <div id="contact" class="flex flex-col-reverse md:flex-row md:py-10 md:mt-20">
        <ContactForm class="w-full md:w-3/5"/>
        <ContactDetails class="w-full md:w-2/5" :contacts="contacts"/>
      </div>
    </div>

  </div>
</template>

<style scoped>

</style>
