From d4e33d9d514be1f00bb923eae7d63b2c7d1b4880 Mon Sep 17 00:00:00 2001
From: ivelov-vm <ivelov_vm@groupbwt.com>
Date: Mon, 20 Mar 2023 17:45:46 +0200
Subject: [PATCH] feat: add services page
---
src/components/ServiceCard.vue | 6 +-
src/components/mixins/ServicesMixin.vue | 110 +++++++++++-----------
src/components/svg/DownArrow.vue | 11 +++
src/components/svg/UpArrow.vue | 11 +++
src/pages/HomePage.vue | 3 +-
src/pages/ServicesPage.vue | 117 ++++++++++++++++++++++++
src/plugins/router.js | 5 +
tailwind.config.js | 1 +
8 files changed, 203 insertions(+), 61 deletions(-)
create mode 100644 src/components/svg/DownArrow.vue
create mode 100644 src/components/svg/UpArrow.vue
create mode 100644 src/pages/ServicesPage.vue
diff --git a/src/components/ServiceCard.vue b/src/components/ServiceCard.vue
index dd99c57..8da7f3a 100644
--- a/src/components/ServiceCard.vue
+++ b/src/components/ServiceCard.vue
@@ -19,10 +19,10 @@
class="mt-5 first:mt-0"
>
<router-link
- to="#"
+ :to="{ path: '/services', query: { service: data.service, category:index }}"
class="flex justify-between items-center gap-3 text-base leading-[19px]"
>
- <span class="w-56">{{ category }}</span>
+ <span class="w-56">{{ category.name }}</span>
<RightArrow class="w-[7px] h-3 inline"></RightArrow>
</router-link>
</li>
@@ -41,8 +41,6 @@ export default {
required: true,
},
},
- mounted() {},
- methods: {},
components: { BreakLineSvg, RightArrow },
};
</script>
diff --git a/src/components/mixins/ServicesMixin.vue b/src/components/mixins/ServicesMixin.vue
index 2a5589a..1a330e5 100644
--- a/src/components/mixins/ServicesMixin.vue
+++ b/src/components/mixins/ServicesMixin.vue
@@ -8,11 +8,11 @@ export default {
service: "home_and_living",
name:"Home & Living",
categories: [
- "Temporary Accommodation",
- "Property search / advice",
- "Internet / phone / TV",
- "Utilities",
- "Interior design",
+ {name:"Temporary Accommodation", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Property search / advice", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Internet / phone / TV", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Utilities", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Interior design", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
],
},
{
@@ -20,11 +20,11 @@ export default {
service: "real_estate",
name:"Real Estate",
categories: [
- "Market review",
- "Due diligence / purchase process",
- "Development / Architecture / engineering",
- "Priperty Management",
- "Maintanence / Repairs",
+ {name:"Market review", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Due diligence / purchase process", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Development / Architecture / engineering", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Priperty Management", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Maintanence / Repairs", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
],
},
{
@@ -32,11 +32,11 @@ export default {
service: "finance",
name:"Finance",
categories: [
- "Bank account",
- "Mortgage",
- "Other financings",
- "Investment apportunities",
- "Investment management",
+ {name:"Bank account", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Mortgage", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Other financings", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Investment apportunities", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Investment management", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
],
},
{
@@ -44,11 +44,11 @@ export default {
service: "tax",
name:"Tax",
categories: [
- "NIF / Fiscal number",
- "Structuring Advice",
- "NHR Status",
- "Social security",
- "Anunual tax returns",
+ {name:"NIF / Fiscal number", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Structuring Advice", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"NHR Status", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Social security", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Anunual tax returns", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
],
},
{
@@ -56,11 +56,11 @@ export default {
service: "legal",
name:"Legal",
categories: [
- "Legal representation",
- "Criminal register certificate",
- "Document certification / translations",
- "Contract drafting / reviewing",
- "Specialist legal advice",
+ {name:"Legal representation", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Criminal register certificate", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Document certification / translations", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Contract drafting / reviewing", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Specialist legal advice", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
],
},
{
@@ -68,11 +68,11 @@ export default {
service: "immigrations",
name:"Immigrations",
categories: [
- "Visa (non-EU)",
- "Residency (EU)",
- "Golden Visa (non-EU)",
- "Visa renewal",
- "Car rental / purchase / maintenance",
+ {name:"Visa (non-EU)", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Residency (EU)", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Golden Visa (non-EU)", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Visa renewal", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Car rental / purchase / maintenance", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
],
},
{
@@ -80,11 +80,11 @@ export default {
service: "transport_and_logistics",
name:"Transport & Logistics",
categories: [
- "Packers / movers",
- "Customs",
- "Vehicle import / divers license",
- "Car rental / purchase / maintenance",
- "Storage",
+ {name:"Packers / movers", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Customs", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Vehicle import / divers license", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Car rental / purchase / maintenance", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Storage", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
],
},
{
@@ -92,11 +92,11 @@ export default {
service: "work_and_business",
name:"Work & Business",
categories: [
- "Co-working spaces",
- "Business incorporation",
- "Accounting services",
- "Recruitment / networking",
- "PA / problem solving service",
+ {name:"Co-working spaces", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Business incorporation", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Accounting services", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Recruitment / networking", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"PA / problem solving service", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
],
},
{
@@ -104,11 +104,11 @@ export default {
service: "health",
name:"Health",
categories: [
- "Legal representation",
- "Criminal register certificate",
- "Document certification / translations",
- "Contract drafting / reviewing",
- "Specialist legal advice",
+ {name:"Legal representation", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Criminal register certificate", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Document certification / translations", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Contract drafting / reviewing", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Specialist legal advice", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
],
},
{
@@ -116,11 +116,11 @@ export default {
service: "family",
name:"Family",
categories: [
- "Visa (non-EU)",
- "Residency (EU)",
- "Golden Visa (non-EU)",
- "Visa renewal",
- "Car rental / purchase / maintenance",
+ {name:"Visa (non-EU)", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Residency (EU)", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Golden Visa (non-EU)", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Visa renewal", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Car rental / purchase / maintenance", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
],
},
{
@@ -128,11 +128,11 @@ export default {
service: "lifestyle",
name:"Lifestyle",
categories: [
- "Packers / movers",
- "Customs",
- "Vehicle import / divers license",
- "Car rental / purchase / maintenance",
- "Storage",
+ {name:"Packers / movers", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Customs", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Vehicle import / divers license", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Car rental / purchase / maintenance", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
+ {name:"Storage", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet fringilla ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies. Faucibus magna eget sit aliquet Lorem ipsum dolor sit amet, consectetur adipiscing ut nulla sociis. Ut vitae sit ac odio neque turpis arcu, massa. Et elementum odio non netus cras. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque integer sit nisi morbi vulputate ultricies."},
],
},
],
diff --git a/src/components/svg/DownArrow.vue b/src/components/svg/DownArrow.vue
new file mode 100644
index 0000000..0321e24
--- /dev/null
+++ b/src/components/svg/DownArrow.vue
@@ -0,0 +1,11 @@
+<template>
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.3345 11.9166C4.70966 11.2917 4.70966 10.2787 5.3345 9.65383V9.65383C5.95933 9.02899 6.9724 9.02899 7.59724 9.65383L16.3345 18.3911L25.0718 9.65383C25.6966 9.02899 26.7097 9.02899 27.3345 9.65383V9.65383C27.9593 10.2787 27.9593 11.2917 27.3345 11.9166L16.3345 22.9166L5.3345 11.9166Z" fill="#0F0F10"/>
+</svg>
+</template>
+
+<script>
+export default {
+ name: "DownArrow"
+};
+</script>
diff --git a/src/components/svg/UpArrow.vue b/src/components/svg/UpArrow.vue
new file mode 100644
index 0000000..8325755
--- /dev/null
+++ b/src/components/svg/UpArrow.vue
@@ -0,0 +1,11 @@
+<template>
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.3345 19.5229C27.9593 20.1477 27.9593 21.1608 27.3344 21.7856C26.7096 22.4105 25.6965 22.4105 25.0717 21.7856L16.3345 13.0484L7.59719 21.7856C6.97235 22.4105 5.95929 22.4105 5.33445 21.7856C4.70961 21.1608 4.70961 20.1477 5.33445 19.5229L16.3345 8.52288L27.3345 19.5229Z" fill="#0F0F10"/>
+</svg>
+</template>
+
+<script>
+export default {
+ name: "UpArrow"
+};
+</script>
diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue
index 87ba19d..6ab5052 100644
--- a/src/pages/HomePage.vue
+++ b/src/pages/HomePage.vue
@@ -154,7 +154,6 @@
<FooterComponent class="mt-[112px]"></FooterComponent>
</div>
</template>
-<!-- eslint-disable vue/no-unused-components -->
<script>
import HeaderComponent from "../components/HeaderComponent.vue";
@@ -183,7 +182,7 @@ export default {
lastReview: 2,
sliderRunning: false,
windowWidth: window.innerWidth,
- scroll: 0
+ scroll: window.scrollY
};
},
mounted() {
diff --git a/src/pages/ServicesPage.vue b/src/pages/ServicesPage.vue
new file mode 100644
index 0000000..e6cba9b
--- /dev/null
+++ b/src/pages/ServicesPage.vue
@@ -0,0 +1,117 @@
+<template>
+ <div>
+ <HeaderComponent current-page="services"></HeaderComponent>
+ <section class="relative">
+ <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 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>
+ </div>
+ </section>
+ <footer class="text-blue-line mt-[70px] mb-[21px] text-smleading-4 text-center">
+ Terms of Service
+ <span class="text-black font-gilroy font-normal">and</span> Privacy
+ Policy.
+ </footer>
+
+ </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);
+ }
+ });
+ }
+ },
+ 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>
diff --git a/src/plugins/router.js b/src/plugins/router.js
index c46fc86..f8db555 100644
--- a/src/plugins/router.js
+++ b/src/plugins/router.js
@@ -1,6 +1,7 @@
import Vue from "vue";
import VueRouter from "vue-router";
import HomePage from "../pages/HomePage";
+import ServicesPage from "../pages/ServicesPage";
Vue.use(VueRouter);
const router = new VueRouter({
@@ -9,6 +10,10 @@ const router = new VueRouter({
path: "/",
component: HomePage,
},
+ {
+ path: "/services",
+ component: ServicesPage,
+ },
],
mode: "history",
});
diff --git a/tailwind.config.js b/tailwind.config.js
index bcc5c6d..f005bce 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,6 +5,7 @@ module.exports = {
theme: {
extend: {
boxShadow: {
+ "1x28": "0 -1px 28px rgba(203, 203, 203, 0.25)",
"4x10": "0 3.7px 10.2px rgba(0, 0, 0, 0.10)",
"3x28": "0 3px 28px rgba(203, 203, 203, 0.25)",
"14x28": "0 14px 28px rgba(203, 203, 203, 0.25)",
--
GitLab