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
Hide whitespace changes
Inline Side-by-side
src/components/svg/BreakLineSvg.vue 0 → 100644
+ 12
− 0
View file @ 1e90a37c
<template>
<svg width="257" height="1" viewBox="0 0 257 1" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="257" height="1" rx="0.5" fill="currentColor"/>
</svg>
</template>
<script>
export default {
name: "BreakLineSvg",
};
</script>
src/components/svg/FeatureSvg.vue 0 → 100644
+ 11
− 0
View file @ 1e90a37c
<template>
<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.6337 36.8516C22.7921 36.8516 30.0693 36.5084 37 36.5084M12.396 27.5869L26.9505 9.74372M2 24.4986C2 23.4006 2 8.94306 2 1.85156" stroke="currentColor" stroke-width="3.46535" stroke-linecap="round"/>
</svg>
</template>
<script>
export default {
name: "FeatureSvg",
};
</script>
src/input.css
+ 41
− 9
View file @ 1e90a37c
......@@ -4,21 +4,53 @@
@font-face {
font-family: 'Futura';
src: url('../public/fonts/futura\ medium.ttf') format('truetype');
font-weight: normal;
src: url('../public/fonts/FuturaBT-Light.eot');
src: url('../public/fonts/FuturaBT-Light.eot?#iefix') format('embedded-opentype'),
url('../public/fonts/FuturaBT-Light.woff2') format('woff2'),
url('../public/fonts/FuturaBT-Light.woff') format('woff'),
url('../public/fonts/FuturaBT-Light.ttf') format('truetype'),
url('../public/fonts/FuturaBT-Light.svg#FuturaBT-Light') format('svg');
font-weight: 300;
font-style: normal;
}
font-display: swap;
}
@font-face {
font-family: 'Futura';
src: url('../public/fonts/futura\ bold.ttf') format('truetype');
font-weight: bold;
src: url('../public/fonts/FuturaBT-Heavy.eot');
src: url('../public/fonts/FuturaBT-Heavy.eot?#iefix') format('embedded-opentype'),
url('../public/fonts/FuturaBT-Heavy.woff2') format('woff2'),
url('../public/fonts/FuturaBT-Heavy.woff') format('woff'),
url('../public/fonts/FuturaBT-Heavy.ttf') format('truetype'),
url('../public/fonts/FuturaBT-Heavy.svg#FuturaBT-Heavy') format('svg');
font-weight: 500;
font-style: normal;
}
font-display: swap;
}
@font-face {
font-family: 'Futura';
src: url('../public/fonts/futura\ light.ttf') format('truetype');
font-weight: 300;
src: url('../public/fonts/FuturaBT-Medium.eot');
src: url('../public/fonts/FuturaBT-Medium.eot?#iefix') format('embedded-opentype'),
url('../public/fonts/FuturaBT-Medium.woff2') format('woff2'),
url('../public/fonts/FuturaBT-Medium.woff') format('woff'),
url('../public/fonts/FuturaBT-Medium.ttf') format('truetype'),
url('../public/fonts/FuturaBT-Medium.svg#FuturaBT-Medium') format('svg');
font-weight: normal;
font-style: normal;
}
\ No newline at end of file
font-display: swap;
}
@font-face {
font-family: 'Futura';
src: url('../public/fonts/Futura-Bold.eot');
src: url('../public/fonts/Futura-Bold.eot?#iefix') format('embedded-opentype'),
url('../public/fonts/Futura-Bold.woff2') format('woff2'),
url('../public/fonts/Futura-Bold.woff') format('woff'),
url('../public/fonts/Futura-Bold.ttf') format('truetype'),
url('../public/fonts/Futura-Bold.svg#Futura-Bold') format('svg');
font-weight: bold;
font-style: normal;
font-display: swap;
}
src/pages/HomePage.vue
+ 40
− 75
View file @ 1e90a37c
<template>
<div class="overflow-hidden">
<section
class="text-white h-[900px] rounded-b-lg bg-cover bg-no-repeat bg-center bg-blend-multiply bg-gray-300 bg-[url('../public/img/home-header.jfif')]"
class="relative z-10 text-white h-[900px] rounded-b-lg bg-cover bg-no-repeat bg-center bg-blend-multiply bg-gray-300 bg-[url('../public/img/home-header.jfif')]"
>
<HeaderComponent current-page="home"></HeaderComponent>
<h2 class="text-[54px] font-bold max-w-lg ml-24 mt-[187px]">
<h2 class="text-[54px] font-bold leading-[4.5rem] max-w-lg ml-24 mt-[187px]">
Moving to Portugal?
</h2>
<p class="text-2xl ml-24 max-w-[434px] font-gilroy">
<p class="text-2xl ml-24 mt-[10px] max-w-[434px] font-gilroy">
Let the experts of the ACK ecosystem handle your administrative
headaches
</p>
<button
class="rounded bg-blue text-white ml-24 mt-10 py-3.5 px-10 font-medium text-lg hover:bg-blue-700 transition-colors"
class="rounded bg-blue text-white ml-24 mt-10 py-3.5 px-10 w-[270px] font-medium text-lg hover:bg-blue-700 transition-colors"
>
Help to emigrate
</button>
......@@ -20,8 +20,10 @@
<!-- Reviews -->
<section
class="mt-16 w-[85.4%] mx-auto flex justify-between items-center h-36"
class="mt-16 relative"
>
<div class="absolute bg-gray-bg blur-[58px] rounded-[190px] w-[380px] h-[380px] z-0 -top-[134px] -left-[87px]"></div>
<div class="z-10 w-[85.4%] mx-auto flex justify-between items-center h-36 relative">
<button @click="reviewLeft" class="mr-3">
<LeftArrow class="text-blue"></LeftArrow>
</button>
......@@ -44,6 +46,31 @@
<button @click="reviewRight" class="ml-3">
<RightArrow class="text-blue"></RightArrow>
</button>
</div>
</section>
<!-- Services -->
<section class="mt-32 mb-12 relative">
<div class="absolute bg-gray-bg blur-[58px] rounded-[190px] w-[255px] h-[255px] z-0 -right-[65px] top-[42%]"></div>
<div class="relative z-10">
<h1 class="text-center font-medium text-[54px] leading-[4.5rem] relative">
<span class="text-dark">Our</span>
<span class="text-blue-text">Services
<FeatureSvg class="inline absolute -top-3 -translate-x-[3px]"></FeatureSvg>
</span>
</h1>
<h2 class="text-dark text-center font-medium text-[2rem] leading-[42px] mt-4">Tailor-made solutions for your unique situation</h2>
<p class="text-[15px] leading-[18px] mt-8 w-[92.5%] mx-auto">
On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will
</p>
<div class="grid w-max mx-auto gap-[31px] mt-4 justify-center grid-cols-1 min-[700px]:grid-cols-2 min-[1000px]:grid-cols-3 min-[1400px]:grid-cols-4 min-[1800px]:grid-cols-5">
<ServiceCard v-for="service in services" :key="service.service" :data="service"></ServiceCard>
<ServiceQuestionCard></ServiceQuestionCard>
</div>
</div>
</section>
<footer class="mt-10"></footer>
......@@ -53,82 +80,19 @@
<script>
import HeaderComponent from "../components/HeaderComponent.vue";
import ReviewComponent from "../components/ReviewComponent.vue";
import ServiceCard from "../components/ServiceCard.vue";
import ServiceQuestionCard from "../components/ServiceQuestionCard.vue";
import RightArrow from "../components/svg/RightArrow.vue";
import LeftArrow from "../components/svg/LeftArrow.vue";
import ReviewsMixin from '../components/mixins/ReviewsMixin.vue';
import ServicesMixin from '../components/mixins/ServicesMixin.vue';
import FeatureSvg from "../components/svg/FeatureSvg.vue";
export default {
name: "HomePage",
data() {
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",
},
},
],
slideLeft: false,
slideRight: false,
firstReview: 0,
......@@ -297,7 +261,8 @@ export default {
}, 150);
},
},
components: { HeaderComponent, ReviewComponent, LeftArrow, RightArrow },
components: { HeaderComponent, ReviewComponent, LeftArrow, RightArrow, FeatureSvg, ServiceCard, ServiceQuestionCard },
mixins:[ReviewsMixin, ServicesMixin]
};
</script>
......
tailwind.config.js
+ 8
− 1
View file @ 1e90a37c
......@@ -5,7 +5,8 @@ module.exports = {
theme: {
extend: {
boxShadow: {
'4x10': '0 3.7px 10.2px rgba(0, 0, 0, 0.10)'
'4x10': '0 3.7px 10.2px rgba(0, 0, 0, 0.10)',
'3x28': '0 3px 28px rgba(203, 203, 203, 0.25)'
},
fontFamily: {
'sans': ['Futura', ...defaultTheme.fontFamily.sans],
......@@ -22,11 +23,17 @@ module.exports = {
DEFAULT: "#2967F0",
'text': "#0F38B4",
700: "#1d4ed8",
'line': "#4950ED",
'question': "rgba(41, 103, 240, 0.8)"
},
gray:{
'bg': '#F2F6FF',
300: "rgb(0 0 0 / 35%)",
DEFAULT: "#757575",
},
dark:{
DEFAULT: "#0F0F10",
},
},
},
plugins: [],
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment