diff --git a/src/components/ServiceCard.vue b/src/components/ServiceCard.vue
index dd99c57984a33a75a7682ee174af3250282038e5..8da7f3a9ce2e7e1d6403c278208203496bd4a7a6 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 2a5589ad02bdb1204f54b69104bf9446ec1d7862..1a330e5de7bce2ca2284847e7e6b5a9d4f2ecd1a 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 0000000000000000000000000000000000000000..0321e24c57c9bb0b9824333779731426931681ac
--- /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 0000000000000000000000000000000000000000..8325755c2aaf42f43c779d0b91c4d60756314adb
--- /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 87ba19d363f14dc42c1ef4716fa25d4de99b6e47..6ab5052d5da43a25c8df7aa5a6a1de2bf7122d07 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 0000000000000000000000000000000000000000..e6cba9b64d1b5e42447c15e91748fcd3a6ea9a47
--- /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 c46fc86080d8c4193d6d4b1a79a4b3d10333fc32..f8db555a902dc10df0c610cf13fe2c3c22fd5f6e 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 bcc5c6d754c378e3bbfd15fe69979f752a063634..f005bce016c3c543f9d63a8e65b181544a143a55 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)",