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

feat: add header and 1 section of home page

parent 528eb1e6
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
public/img/home-header.jfif 0 → 100644
+ 0
− 0
View file @ 203ff4b3
File added
src/assets/logo.png deleted 100644 → 0
+ 0
− 0
View file @ 528eb1e6
src/assets/logo.png

6.69 KiB

src/components/HeaderComponent.vue 0 → 100644
+ 52
− 0
View file @ 203ff4b3
<template>
<header class="flex justify-around items-center pt-3.5 text-white">
<LogoSvg
class="flex-auto basis-[28.57%] h-[46px]"
></LogoSvg>
<nav class="flex justify-around flex-auto basis-[42.86%] text-xl">
<router-link to="/home" :class="currentPage === 'home' ? 'font-bold' : ''"
>Home</router-link
>
<router-link
to="/home"
:class="currentPage === 'services' ? 'font-bold' : ''"
>Services</router-link
>
<router-link
to="/home"
:class="currentPage === 'about us' ? 'font-bold' : ''"
>About us</router-link
>
<router-link to="/home" :class="currentPage === 'team' ? 'font-bold' : ''"
>Team</router-link
>
<router-link
to="/home"
:class="currentPage === 'contact' ? 'font-bold' : ''"
>Contact</router-link
>
<router-link to="/home" :class="currentPage === 'blog' ? 'font-bold' : ''"
>Blog</router-link
>
</nav>
<div class="flex-auto basis-[28.57%] flex justify-center">
<button class="rounded bg-blue text-white py-3.5 px-[42px] font-medium hover:bg-blue-700 transition-colors">
Book an online
</button>
</div>
</header>
</template>
<script>
import LogoSvg from "./LogoSvg.vue";
export default {
name: "HeaderComponent",
props: {
currentPage: {
type: String,
},
},
components: { LogoSvg },
};
</script>
src/components/LogoSvg.vue 0 → 100644
+ 34
− 0
View file @ 203ff4b3
<template>
<svg
width="177"
height="46"
viewBox="0 0 177 46"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_1062_13206)">
<path
:fill="colorClass ? colorClass : 'currentColor'"
fill-rule="evenodd"
clip-rule="evenodd"
d="M68.6994 5.43654V10.8732L68.076 10.249C67.2727 9.44468 66.1537 8.96952 64.6904 8.81125C60.8147 8.39247 57.9813 10.2364 56.7073 14.0069C55.3468 18.0335 56.6508 22.5173 59.7241 24.3802C61.1575 25.2491 62.4188 25.5614 64.1947 25.4872C65.9824 25.4124 67.2493 24.8995 68.3375 23.8099C68.7259 23.4209 69.0825 23.1027 69.1299 23.1027C69.1772 23.1027 69.216 23.5682 69.216 24.1371V25.1715H71.4543H73.6926V12.5858V0H71.196H68.6994V5.43654ZM164.947 5.44412V10.8881L164.509 10.3665C163.065 8.64798 159.083 8.21506 156.653 9.51243C152.933 11.4975 151.382 17.3706 153.481 21.5189C155.586 25.6783 161.385 26.877 164.598 23.8171C165.01 23.4242 165.374 23.1027 165.406 23.1027C165.438 23.1027 165.464 23.5682 165.464 24.1371V25.1715H167.702H169.941V12.5858V0H167.444H164.947V5.44412ZM77.2223 1.29409C76.8435 1.43288 76.5146 1.54771 76.4915 1.54908C76.4685 1.55046 76.2168 1.87373 75.932 2.26716C74.2217 4.63122 76.8404 7.6987 79.493 6.4384C80.9603 5.74118 81.4901 3.62039 80.5166 2.34216C80.2545 1.99838 79.8711 1.6096 79.6643 1.47857C79.0608 1.09565 77.9854 1.01445 77.2223 1.29409ZM6.88716 13.4478V25.1715H14.2909H21.6946V22.844V20.5165H16.8735H12.0525V11.1203V1.72408H9.46984H6.88716V13.4478ZM118.803 13.4478V25.1715H121.386H123.969V20.6298V16.0881L127.111 15.9801C131.58 15.8265 133.383 15.276 134.882 13.6068C136.568 11.7286 136.979 8.19489 135.825 5.50119C135.403 4.51588 134.142 3.26144 133.008 2.69784C131.353 1.87511 129.979 1.72408 124.148 1.72408H118.803V13.4478ZM129.844 6.58874C131.582 7.61198 131.652 9.83087 129.984 11.065C129.391 11.5041 128.009 11.7237 125.839 11.7237H123.969V8.86314V6.00272L126.509 6.06152C128.908 6.1172 129.092 6.14634 129.844 6.58874ZM29.2704 8.79521C28.6549 8.86038 27.8026 9.01004 27.3765 9.12779C26.5016 9.36968 24.5763 10.3512 23.9444 10.8777L23.5253 11.2267L24.8435 12.5466L26.1616 13.8664L26.6399 13.4299C27.6988 12.4637 28.7814 12.0439 30.2153 12.0439C31.8421 12.0439 33.4027 13.2502 33.4027 14.5078V14.9995H32.1908C31.5241 14.9995 30.2262 15.0831 29.3068 15.1852C24.7528 15.691 22.5554 17.4437 22.5554 20.5703C22.5554 22.0115 22.8499 22.8373 23.702 23.7864C24.8632 25.0795 25.8305 25.4302 28.2374 25.4302C29.9502 25.4302 30.3388 25.3752 31.1174 25.0228C31.6124 24.7986 32.329 24.2766 32.71 23.8628L33.4027 23.1104V24.1409V25.1715H35.641H37.8794L37.8764 19.9562C37.873 14.0738 37.7344 12.9677 36.8058 11.4089C35.5823 9.35485 32.8702 8.41419 29.2704 8.79521ZM48.0242 8.7947C47.5906 8.86814 46.9146 9.09227 46.5222 9.29261C45.7833 9.67019 44.5944 10.7477 44.5944 11.0398C44.5944 11.1315 44.5169 11.2065 44.4222 11.2065C44.3264 11.2065 44.25 10.7467 44.25 10.1721V9.13762H41.9256H39.6012V17.1546V25.1715H41.9958H44.3903L44.4494 20.301C44.5074 15.5067 44.515 15.4171 44.9387 14.5714C45.4933 13.4644 46.2332 13.0225 47.5319 13.0225C48.7206 13.0225 49.3258 13.3859 49.7704 14.3664C50.0664 15.0191 50.0969 15.5526 50.1003 20.1286L50.1041 25.1715H52.6007H55.0973V20.1841C55.0973 17.4411 55.0153 14.59 54.9151 13.8481C54.6563 11.9337 53.9702 10.5303 52.9168 9.76208C51.7617 8.91935 49.6976 8.51126 48.0242 8.7947ZM91.0689 8.79659C89.9437 8.98452 88.8712 9.57622 88.0265 10.4755L87.2947 11.2544V10.196V9.13762H84.9703H82.6459V17.1546V25.1715H85.0564H87.4669V20.6974C87.4669 15.6241 87.5888 14.7197 88.3901 13.8461C89.3817 12.7653 91.3094 12.6823 92.2475 13.6802C93.0917 14.5783 93.1488 14.9971 93.1488 20.2836V25.1715H95.6644H98.1797L98.0897 19.5252C98.0403 16.4198 97.9154 13.4909 97.8126 13.0168C97.3701 10.9777 96.0242 9.39588 94.3821 8.98504C93.387 8.73608 91.9281 8.65298 91.0689 8.79659ZM105.321 8.81073C101.631 9.34399 98.9742 13.2085 99.2283 17.6718C99.4389 21.3715 101.368 24.0212 104.595 25.0433C105.391 25.2955 105.991 25.356 107.181 25.3041C108.993 25.2252 110.098 24.8105 111.098 23.835L111.744 23.2051L111.74 24.49C111.738 25.4086 111.636 25.9962 111.385 26.5508C110.739 27.9787 109.975 28.5356 108.287 28.8076C106.457 29.1028 104.542 28.5828 102.498 27.2358L101.947 26.8725L100.609 28.8842C99.0668 31.2029 99.027 30.9769 101.155 31.9918C102.787 32.7703 104.647 33.1183 107.186 33.1208C112.174 33.1256 114.831 31.497 116.183 27.6058C116.42 26.9242 116.469 25.536 116.521 17.9735L116.583 9.13762H114.335H112.089L112.082 10.2152L112.076 11.2927L111.695 10.8476C110.334 9.25778 107.81 8.45109 105.321 8.81073ZM142.622 8.80401C141.943 8.87194 140.883 9.09589 140.265 9.30175C139.169 9.66691 137.051 10.8939 137.058 11.1596C137.06 11.2329 137.586 11.867 138.227 12.5687L139.392 13.8449L140.265 13.2168C141.509 12.3213 142.276 12.047 143.532 12.047C144.91 12.047 145.863 12.5363 146.455 13.5473C147.24 14.8888 147.187 14.9317 144.587 15.051C139.869 15.2674 137.38 16.2817 136.351 18.4066C136.041 19.0452 135.954 19.5247 135.949 20.6027C135.944 21.8099 136.006 22.0965 136.447 22.8999C137.414 24.6619 139.09 25.5164 141.58 25.5164C143.589 25.5164 144.955 25.0355 146.044 23.9449L146.869 23.119V24.1454V25.1715H149.107H151.345V20.3667C151.345 13.8409 151.062 12.2701 149.581 10.5808C148.943 9.85277 147.305 9.01607 146.278 8.89297C144.744 8.70918 143.801 8.68625 142.622 8.80401ZM75.7588 17.1546V25.1715H78.1693H80.5798V17.1546V9.13762H78.1693H75.7588V17.1546ZM67.2281 13.5057C68.5265 14.2173 69.3931 16.1465 69.1483 17.7809C68.9938 18.8126 68.1507 20.2295 67.423 20.6796C66.1634 21.4593 63.8905 21.4298 62.6652 20.6179C61.1103 19.5876 60.5714 16.8377 61.5659 15.0081C61.8338 14.5154 62.2845 13.9469 62.5678 13.745C63.7785 12.8816 65.8915 12.7732 67.2281 13.5057ZM108.966 13.1125C112.108 13.838 113.184 17.878 110.794 19.9793C109.456 21.155 107.846 21.3744 106.282 20.5943C103.536 19.2242 103.312 15.3943 105.878 13.6937C106.941 12.9897 107.763 12.8349 108.966 13.1125ZM163.429 13.4638C166.292 14.926 165.989 19.8752 162.967 21.0357C162.099 21.3687 160.269 21.2862 159.471 20.8781C156.375 19.2966 156.895 13.9337 160.224 13.1171C161.123 12.8963 162.639 13.0602 163.429 13.4638ZM33.4027 19.1118C33.4027 20.4262 32.9502 21.1288 31.693 21.7665C30.1699 22.5391 28.1757 22.3458 27.4851 21.3584C26.8775 20.4898 27.3115 19.2749 28.4379 18.6916C29.1785 18.308 30.1787 18.1432 31.8962 18.1218L33.4027 18.1028V19.1118ZM146.869 18.9104C146.869 20.8222 145.596 22.0451 143.446 22.1991C141.33 22.3506 140.112 21.2575 140.735 19.7657C141.186 18.6847 142.666 18.1485 145.276 18.1201L146.869 18.1028V18.9104ZM37.6211 31.6677C29.1122 32.0954 19.0223 33.5161 11.9664 35.28C7.7484 36.3344 2.9737 37.7892 0.731761 38.7033L0 39.0016V42.1725V45.3433H88.5H177V40.0102C177 35.0807 176.977 34.6704 176.699 34.5862C176.201 34.4362 172.467 33.8352 169.166 33.374C165.535 32.8666 160.139 32.3192 156.252 32.0639C152.707 31.831 143.815 31.8341 140.928 32.0692C135.668 32.4978 134.316 32.7758 121.731 36.0153C113.095 38.2378 106.887 38.7054 97.5394 37.8372C92.7015 37.3877 84.0635 36.085 77.5666 34.8252C65.0539 32.3985 56.192 31.5224 44.7731 31.5832C41.4077 31.6012 38.1893 31.6393 37.6211 31.6677Z"
/>
</g>
<defs>
<clipPath id="clip0_1062_13206">
<rect width="177" height="46" fill="white" />
</clipPath>
</defs>
</svg>
</template>
<script>
export default {
name: "LogoSvg",
props: {
colorClass: {
type: String,
},
},
};
</script>
src/pages/HomePage.vue
+ 14
− 2
View file @ 203ff4b3
<template>
<div>
a
<div class="text-white">
<section class="h-[900px] 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]">Moving to Portugal?</h2>
<p class="text-2xl ml-24 max-w-[434px]">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">Help to emigrate</button>
</section>
</div>
</template>
<script>
import HeaderComponent from "../components/HeaderComponent.vue";
export default {
name: 'HomePage',
data(){
return {
};
},
components:{HeaderComponent}
}
</script>
tailwind.config.js
+ 16
− 5
View file @ 203ff4b3
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
content: ["./public/index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
theme: {
extend: {},
colors: {
transparent: "transparent",
current: "currentColor",
white: "#ffffff",
blue: {
500: "#3b82f6",
600: "#2563eb",
DEFAULT: "#2967F0",
700: "#1d4ed8",
},
},
plugins: [],
}
\ No newline at end of file
},
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