From 9a702b538c8f76e14e2e29f97013dc7ec3021ec5 Mon Sep 17 00:00:00 2001
From: ivelov-vm <ivelov_vm@groupbwt.com>
Date: Tue, 21 Mar 2023 11:40:24 +0200
Subject: [PATCH] feat: add ask a question card to services page
---
src/components/HeaderComponent.vue | 2 +-
src/components/ServiceQuestionCard.vue | 4 +-
src/pages/ServicesPage.vue | 182 +++++++++++++++----------
3 files changed, 111 insertions(+), 77 deletions(-)
diff --git a/src/components/HeaderComponent.vue b/src/components/HeaderComponent.vue
index 5bc08e5..cf96d34 100644
--- a/src/components/HeaderComponent.vue
+++ b/src/components/HeaderComponent.vue
@@ -11,7 +11,7 @@
<nav class="flex justify-around flex-auto basis-[42.86%] text-xl">
<router-link
- to="/home"
+ to="/"
class="hover:text-gray transition-colors"
:class="currentPage === 'home' ? 'font-bold' : ''"
>Home</router-link
diff --git a/src/components/ServiceQuestionCard.vue b/src/components/ServiceQuestionCard.vue
index d4bc659..dbe2ccb 100644
--- a/src/components/ServiceQuestionCard.vue
+++ b/src/components/ServiceQuestionCard.vue
@@ -11,8 +11,8 @@
</h3>
<div class="mt-[19px] mx-auto w-fit">
- <router-link to="#" >
- <div class="relative z-10 rounded-lg text-blue-text text-lg text-center py-[14px] px-[49px] bg-white shadow-4x10">
+ <router-link to="#">
+ <div class="relative z-10 rounded-lg text-blue-text text-lg text-center py-[14px] px-[49px] bg-white shadow-4x10 hover:bg-blue-200 transition-colors">
Ask a question
</div>
</router-link>
diff --git a/src/pages/ServicesPage.vue b/src/pages/ServicesPage.vue
index cb1ea16..d248d28 100644
--- a/src/pages/ServicesPage.vue
+++ b/src/pages/ServicesPage.vue
@@ -1,84 +1,114 @@
<template>
- <div class="overflow-hidden">
+ <div>
<HeaderComponent current-page="services"></HeaderComponent>
-
- <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="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"
+ <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"
>
- <span>{{ category.name }}</span>
- <UpArrow v-if="category.expanded"></UpArrow>
- <DownArrow v-else></DownArrow>
- </h3>
+ <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 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 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>
- </div>
- <div
- class="sm:w-[305px] w-full 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)"
+ <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"
>
- <button>
- <img
- class="inline mr-[10px] w-5 h-5"
- :src="`/img/services/${service.image}`"
- alt=""
- />
- {{ service.name }}
- </button>
- </li>
- </ul>
- </nav>
+ 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>
- </div>
- </section>
+ </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>
-
+ <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>
+ class="absolute bg-gray-bg blur-[58px] rounded-[190px] w-[230px] h-[207px] z-0 -left-[35px] -top-[120px]"
+ ></div>
+ </footer>
+ </div>
</div>
</template>
@@ -102,11 +132,15 @@ export default {
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);
+ this.$set(
+ service.categories[parseInt(this.$route.query.category)],
+ "expanded",
+ true
+ );
}
});
- }else{
- if(this.services[0]){
+ } else {
+ if (this.services[0]) {
this.curService = this.services[0];
}
}
@@ -119,9 +153,9 @@ export default {
this.$set(category, "expanded", true);
}
},
- selectService(service){
+ selectService(service) {
this.curService = service;
- }
+ },
},
components: { HeaderComponent, FeatureSvg, UpArrow, DownArrow, BreakLineSvg },
mixins: [ServicesMixin],
--
GitLab