Skip to content
Snippets Groups Projects
Commit 1e90a37c authored by ivelov-vm's avatar ivelov-vm
Browse files

feat: add 3 section of 1 page

parent 03398dd5
No related branches found
No related tags found
No related merge requests found
Showing
with 297 additions and 2 deletions
File deleted
File deleted
File deleted
public/img/services/Build.png

1.11 KiB

public/img/services/Family.png

1.93 KiB

public/img/services/Finance.png

1.2 KiB

public/img/services/Health.png

1.48 KiB

public/img/services/Home.png

1.3 KiB

public/img/services/Immigrate.png

1.22 KiB

public/img/services/Legal.png

1.58 KiB

public/img/services/Lifestyle.png

2.13 KiB

public/img/services/Tax.png

925 B

public/img/services/Transport.png

1.26 KiB

public/img/services/Work.png

1.37 KiB

public/img/services/question.png

137 KiB

<template>
<article
class="rounded-lg w-[200px] sm:w-[335px] p-4 shadow-4x10 h-min max-h-40 overflow-y-auto"
class="rounded-lg bg-white w-[200px] sm:w-[335px] p-4 shadow-4x10 h-min max-h-40 overflow-y-auto"
>
<p class="flex items-center">
<DotSvg class="text-blue-text mr-2"></DotSvg>
......@@ -13,7 +13,7 @@
<StarSvg class="text-blue" v-for="n in data.rate" :key="n"></StarSvg>
<StarSvg class="text-gray" v-for="n in 5 - data.rate" :key="n"></StarSvg>
</div>
<p class="ml-3 font-gilroy mr-9 leading-[17px]">
<p class="ml-3 text-[0.938rem] font-light mr-9 leading-[17px]">
{{ data.message }}
</p>
</article>
......
<template>
<article
class="group rounded-lg w-[290px] pr-[15px] pl-5 py-[26px] p-4 shadow-3x28 h-[380px] hover:text-white bg-white hover:bg-blue transition-colors"
>
<p class="font-medium text-xl">
<img
class="inline mr-4 w-[42px] h-[42px]"
:src="`/img/services/${data.image}`"
alt=""
/>{{ data.name }}
</p>
<BreakLineSvg
class="mt-6 ml-[-3px] text-blue-text group-hover:text-white"
></BreakLineSvg>
<ul class="mr-[15px] mt-[24px] text-dark group-hover:text-white">
<li
v-for="(category, index) in data.categories"
:key="index"
class="mt-5 first:mt-0"
>
<router-link
to="#"
class="flex justify-between items-center gap-3 text-base leading-[19px]"
>
<span class="w-56">{{ category }}</span>
<RightArrow class="w-[7px] h-3 inline"></RightArrow>
</router-link>
</li>
</ul>
</article>
</template>
<script>
import BreakLineSvg from "./svg/BreakLineSvg.vue";
import RightArrow from "./svg/RightArrow.vue";
export default {
name: "ServiceCard",
props: {
data: {
type: Object,
required: true,
},
},
mounted() {},
methods: {},
components: { BreakLineSvg, RightArrow },
};
</script>
<template>
<article
class="rounded-lg w-[290px] h-[380px] relative bg-blend-multiply bg-[url('../public/img/services/question.png')]"
>
<!-- Tint -->
<div class="w-full h-full bg-blue-question absolute z-0 rounded-lg">
</div>
<h3 class="text-2xl text-center text-white mt-[83px] relative z-10 w-[160px] mx-auto">
Didn't find the right service?
</h3>
<div class="mt-[19px] mx-auto w-fit">
<router-link to="#" >
<div class="relative z-10 rounded-lg text-blue-text text-lg text-center py-[14px] px-[49px] bg-white shadow-4x10">
Ask a question
</div>
</router-link>
</div>
</article>
</template>
<script>
export default {
name: "ServiceQuestionCard",
};
</script>
<script>
export default {
data: function () {
return {
reviews: [
{
absolute: false,
fade: false,
isRight: false,
isLeft: false,
hidden: false,
data: {
author: "Jeffry Jacobs 1",
rate: 5,
role: "Business analytics",
message: "Helped my dad move to other countries in 2 months",
},
},
{
absolute: true,
fade: true,
isRight: false,
isLeft: false,
hidden: true,
data: {
author: "Josiane Ebert",
rate: 5,
role: "Business analytics",
message:
"Helped with migration, prepared all the documents, professional team and good job! I will recommend to all acquaintances",
},
},
{
absolute: false,
fade: false,
isRight: false,
isLeft: false,
hidden: false,
data: {
author: "Kristian Murazik",
rate: 5,
role: "Business analytics",
message:
"Professional team, helped with all questions, thanks! professional team and good job",
},
},
{
absolute: true,
fade: true,
isRight: false,
isLeft: false,
hidden: true,
data: {
author: "Jeffry Jacobs 2",
rate: 5,
role: "Business analytics",
message: "Helped my dad move to other countries in 2 months",
},
},
{
absolute: true,
fade: true,
isRight: false,
isLeft: false,
hidden: true,
data: {
author: "Jeffry Jacobs 3",
rate: 5,
role: "Business analytics",
message: "Helped my dad move to other countries in 2 months",
},
},
],
};
},
};
</script>
<script>
export default {
data: function () {
return {
services: [
{
image: "Home.png",
service: "home_and_living",
name:"Home & Living",
categories: [
"Temporary Accommodation",
"Property search / advice",
"Internet / phone / TV",
"Utilities",
"Interior design",
],
},
{
image: "Build.png",
service: "real_estate",
name:"Real Estate",
categories: [
"Market review",
"Due diligence / purchase process",
"Development / Architecture / engineering",
"Priperty Management",
"Maintanence / Repairs",
],
},
{
image: "Finance.png",
service: "finance",
name:"Finance",
categories: [
"Bank account",
"Mortgage",
"Other financings",
"Investment apportunities",
"Investment management",
],
},
{
image: "Build.png",
service: "tax",
name:"Tax",
categories: [
"NIF / Fiscal number",
"Structuring Advice",
"NHR Status",
"Social security",
"Anunual tax returns",
],
},
{
image: "Legal.png",
service: "legal",
name:"Legal",
categories: [
"Legal representation",
"Criminal register certificate",
"Document certification / translations",
"Contract drafting / reviewing",
"Specialist legal advice",
],
},
{
image: "Immigrate.png",
service: "immigrations",
name:"Immigrations",
categories: [
"Visa (non-EU)",
"Residency (EU)",
"Golden Visa (non-EU)",
"Visa renewal",
"Car rental / purchase / maintenance",
],
},
{
image: "Transport.png",
service: "transport_and_logistics",
name:"Transport & Logistics",
categories: [
"Packers / movers",
"Customs",
"Vehicle import / divers license",
"Car rental / purchase / maintenance",
"Storage",
],
},
{
image: "Work.png",
service: "work_and_business",
name:"Work & Business",
categories: [
"Co-working spaces",
"Business incorporation",
"Accounting services",
"Recruitment / networking",
"PA / problem solving service",
],
},
{
image: "Health.png",
service: "health",
name:"Health",
categories: [
"Legal representation",
"Criminal register certificate",
"Document certification / translations",
"Contract drafting / reviewing",
"Specialist legal advice",
],
},
{
image: "Family.png",
service: "family",
name:"Family",
categories: [
"Visa (non-EU)",
"Residency (EU)",
"Golden Visa (non-EU)",
"Visa renewal",
"Car rental / purchase / maintenance",
],
},
{
image: "Lifestyle.png",
service: "lifestyle",
name:"Lifestyle",
categories: [
"Packers / movers",
"Customs",
"Vehicle import / divers license",
"Car rental / purchase / maintenance",
"Storage",
],
},
],
};
},
};
</script>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment