ServicesPage.vue 6.22 KiB
<template>
<div>
<HeaderComponent
current-page="services"
:with-shadow="scroll > 50"
@onButtonClick="scrollToContacts"
></HeaderComponent>
<div class="overflow-hidden">
<section class="relative z-10">
<h1 class="text-black text-[2rem] mt-[87px] ml-[7%]">
{{ curService.attributes?curService.attributes.title:'Loading...' }}
<FeatureSvg
class="inline absolute -top-[27px] -translate-x-[3px] text-blue gap-x-10"
></FeatureSvg>
</h1>
<div
v-if="curService.attributes"
class="flex flex-col-reverse sm:flex-row justify-center mx-[7%] gap-10 mt-[43px]"
>
<div class="w-full sm:w-[80%] mt-7">
<article
v-for="(category, index) in curService.attributes.categories.data"
:key="index"
class="py-7 pl-8 pr-7 mt-4 first:mt-0 shadow-14x28 text-dark"
>
<h3
@click="toggleCategory(category)"
class="cursor-pointer font-medium text-[1.25rem] hover:text-blue-text leading-[1.813rem] flex justify-between"
>
<span>{{ category.attributes.title }}</span>
<UpArrow v-if="category.attributes.expanded"></UpArrow>
<DownArrow v-else></DownArrow>
</h3>
<div v-if="category.attributes.expanded">
<BreakLineSvg
class="mt-[14px] w-full text-gray-bg"
></BreakLineSvg>
<p class="mt-4 leading-[1.625rem]">
{{ category.attributes.description }}
</p>
</div>
</article>
</div>
<div class="sm:w-[305px] w-full">
<div class="py-5 px-4 text-black shadow-1x28 rounded-[11px] h-max">
<h2
class="font-gilroy text-[2rem] leading-[2.375rem] text-center"
>
Our services
</h2>
<nav class="mt-8">
<ul>
<li
v-for="(service, index) in $store.state.services"
:key="index"
class="px-4 py-[10px] mt-[11px] first:mt-0 leading-[1.32rem] rounded hover:bg-blue hover:text-white transition-colors"
:class="service === curService ? 'bg-blue text-white' : ''"
@click="selectService(service)"
>
<button>
<img
class="inline mr-[10px] w-5 h-5"
:src="`${apiUrl}${service.attributes.image.data.attributes.url}`"
alt=""
/>
{{ service.attributes.title }}
</button>
</li>
</ul>
</nav>
</div>
<article
class="py-4 px-6 mt-4 rounded-lg w-full relative bg-blend-multiply bg-[url('../public/img/services/question.png')]"
>
<!-- Tint -->
<div
class="w-full h-full bg-blue-question absolute top-0 left-0 z-0 rounded-lg"
></div>
<h3
class="text-lg leading-[1.625rem] text-center text-white relative z-10"
>
Didn't find the right service?
</h3>
<div class="mt-[11px] mx-auto w-fit">
<button
class="relative z-10 rounded-lg text-blue-text text-lg text-center py-[9px] px-[49px] bg-white shadow-4x10 hover:bg-blue-200 transition-colors"
@click="scrollToContacts"
>
Ask a question
</button>
</div>
</article>
</div>
</div>
</section>
<footer
class="text-black mt-[70px] mb-[21px] text-sm leading-4 text-center relative"
>
<div class="relative z-10">
<router-link :to="`${$publicPath}terms-of-service`" class="text-blue-line"
>Terms of Service
</router-link>
<span class="font-gilroy font-normal">and</span>
<router-link :to="`${$publicPath}/privacy-policy`" class="text-blue-line">
Privacy Policy</router-link
>.
</div>
<div
class="absolute bg-gray-bg blur-[58px] rounded-[190px] w-[230px] h-[207px] z-0 -left-[35px] -top-[120px]"
></div>
</footer>
</div>
</div>
</template>
<script>
import HeaderComponent from "../components/HeaderComponent.vue";
import FeatureSvg from "../components/svg/FeatureSvg.vue";
import DownArrow from "../components/svg/DownArrow.vue";
import UpArrow from "../components/svg/UpArrow.vue";
import BreakLineSvg from "../components/svg/BreakLineSvg.vue";
export default {
name: "ServicesPage",
data() {
return {
curService: {},
scroll: window.scrollY,
apiUrl: process.env.VUE_APP_API_URL,
};
},
mounted() {
window.addEventListener("scroll", this.onScroll);
this.$store.dispatch("getServices").then(()=>{
if (this.$route.query.service) {
this.$store.state.services.forEach((service) => {
if (service.attributes.slug === this.$route.query.service) {
this.curService = service;
this.$store.commit('setCategoryExpanded', {index:parseInt(this.$route.query.category), value: true, service:service})
}
});
} else {
if (this.$store.state.services[0]) {
this.curService = this.$store.state.services[0];
}
}
})
},
beforeDestroy() {
window.removeEventListener("scroll", this.onScroll);
},
methods: {
toggleCategory(category) {
if (category.attributes.expanded) {
this.$store.commit('setCategoryExpanded', { value: false, category:category})
} else {
this.$store.commit('setCategoryExpanded', { value: true, category:category})
}
},
selectService(service) {
this.curService = service;
},
onScroll() {
this.scroll = window.scrollY;
},
scrollToContacts() {
this.$router.push({ path: this.$publicPath, query: { contacts: true } });
},
},
components: { HeaderComponent, FeatureSvg, UpArrow, DownArrow, BreakLineSvg }
};
</script>