Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<template>
<div>
<HeaderComponent current-page="services"></HeaderComponent>
<div class="overflow-hidden">
<section class="relative z-10">
<h1 class="text-black text-[2rem] mt-[87px] ml-[7%]">
{{ curService.name }}
<FeatureSvg
class="inline absolute -top-[27px] -translate-x-[3px] text-blue gap-x-10"
></FeatureSvg>
</h1>
<div
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.categories"
: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.name }}</span>
<UpArrow v-if="category.expanded"></UpArrow>
<DownArrow v-else></DownArrow>
</h3>
<div v-if="category.expanded">
<BreakLineSvg
class="mt-[14px] w-full text-gray-bg"
></BreakLineSvg>
<p class="mt-4 leading-[1.625rem]">
{{ category.content }}
</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 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="`/img/services/${service.image}`"
alt=""
/>
{{ service.name }}
</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">
<router-link to="#">
<div
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"
>
Ask a question
</div>
</router-link>
</div>
</article>
</div>
</div>
</section>
<footer
class="text-blue-line mt-[70px] mb-[21px] text-smleading-4 text-center relative"
>
<div class="relative z-10">
Terms of Service
<span class="text-black font-gilroy font-normal">and</span> Privacy
Policy.
</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";
import ServicesMixin from "../components/mixins/ServicesMixin.vue";
export default {
name: "ServicePage",
data() {
return {
curService: {},
};
},
mounted() {
if (this.$route.query.service) {
this.services.forEach((service) => {
if (service.service === this.$route.query.service) {
this.curService = service;
this.$set(
service.categories[parseInt(this.$route.query.category)],
"expanded",
true
);
}
});
} else {
if (this.services[0]) {
this.curService = this.services[0];
}
}
},
methods: {
toggleCategory(category) {
if (category.expanded) {
this.$set(category, "expanded", false);
} else {
this.$set(category, "expanded", true);
}
},
selectService(service) {
this.curService = service;
},
},
components: { HeaderComponent, FeatureSvg, UpArrow, DownArrow, BreakLineSvg },
mixins: [ServicesMixin],
};
</script>