From 85f11a9028bd715e84065b4f7f09c72867f43deb Mon Sep 17 00:00:00 2001
From: ivelov-vm <ivelov_vm@groupbwt.com>
Date: Tue, 21 Mar 2023 11:24:23 +0200
Subject: [PATCH] feat: add decor to services page
---
src/components/HeaderComponent.vue | 12 +++++++++---
src/pages/ServicesPage.vue | 20 ++++++++++++++++----
2 files changed, 25 insertions(+), 7 deletions(-)
diff --git a/src/components/HeaderComponent.vue b/src/components/HeaderComponent.vue
index 1c1146f..5bc08e5 100644
--- a/src/components/HeaderComponent.vue
+++ b/src/components/HeaderComponent.vue
@@ -12,31 +12,37 @@
<nav class="flex justify-around flex-auto basis-[42.86%] text-xl">
<router-link
to="/home"
+ class="hover:text-gray transition-colors"
:class="currentPage === 'home' ? 'font-bold' : ''"
>Home</router-link
>
<router-link
- to="/home"
+ to="/services"
+ class="hover:text-gray transition-colors"
:class="currentPage === 'services' ? 'font-bold' : ''"
>Services</router-link
>
<router-link
to="/home"
+ class="hover:text-gray transition-colors"
:class="currentPage === 'about us' ? 'font-bold' : ''"
>About us</router-link
>
<router-link
to="/home"
+ class="hover:text-gray transition-colors"
:class="currentPage === 'team' ? 'font-bold' : ''"
>Team</router-link
>
<router-link
to="/home"
+ class="hover:text-gray transition-colors"
:class="currentPage === 'contact' ? 'font-bold' : ''"
>Contact</router-link
>
<router-link
to="/home"
+ class="hover:text-gray transition-colors"
:class="currentPage === 'blog' ? 'font-bold' : ''"
>Blog</router-link
>
@@ -65,7 +71,7 @@
<nav class="text-xl text-black">
<div>
<router-link
- to="#"
+ to="/"
class="flex justify-between items-center gap-3"
>
<span
@@ -79,7 +85,7 @@
<div class="mt-2">
<router-link
- to="#"
+ to="/services"
class="flex justify-between items-center gap-3"
>
<span
diff --git a/src/pages/ServicesPage.vue b/src/pages/ServicesPage.vue
index e6cba9b..cb1ea16 100644
--- a/src/pages/ServicesPage.vue
+++ b/src/pages/ServicesPage.vue
@@ -1,7 +1,8 @@
<template>
- <div>
+ <div class="overflow-hidden">
<HeaderComponent current-page="services"></HeaderComponent>
- <section class="relative">
+
+ <section class="relative z-10">
<h1 class="text-black text-[2rem] mt-[87px] ml-[7%]">
{{ curService.name }}
<FeatureSvg
@@ -65,12 +66,19 @@
</div>
</div>
</section>
- <footer class="text-blue-line mt-[70px] mb-[21px] text-smleading-4 text-center">
+
+ <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>
</template>
@@ -97,6 +105,10 @@ export default {
this.$set(service.categories[parseInt(this.$route.query.category)], "expanded", true);
}
});
+ }else{
+ if(this.services[0]){
+ this.curService = this.services[0];
+ }
}
},
methods: {
--
GitLab