From 32f5ba806b85558551473b410e7ced5659543189 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Fri, 30 Sep 2022 18:29:29 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A1=D0=BE=D0=B7=D0=B4=D0=B0=D0=BB=D0=B0=20?=
 =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B5=D0=BC=D0=B5=D0=BD=D0=BD=D1=8B=D0=B5,?=
 =?UTF-8?q?=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=D0=B0=20=D0=BB?=
 =?UTF-8?q?=D0=BE=D0=B3=D0=BE=D1=82=D0=B8=D0=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   | 18 +++++++++++++---
 src/assets/images/logo.svg                    |  3 +++
 src/assets/sass/variables.sass                |  5 +++++
 .../homePageComponents/HeaderComponent.vue    | 21 +++++++++++++++++++
 src/vue.config.js                             |  9 ++++++++
 5 files changed, 53 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/images/logo.svg
 create mode 100644 src/assets/sass/variables.sass
 create mode 100644 src/vue.config.js

diff --git a/src/App.vue b/src/App.vue
index 75e1f82..893e5e1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,22 +1,34 @@
 <template lang="pug">
-  div(class='text') HelloWorld
+  div.text
+    div.wrapper
+      header-component
 </template>
 
 <script>
-
+import HeaderComponent from './components/homePageComponents/HeaderComponent.vue'
 export default {
   name: 'App',
+  components: {HeaderComponent}
 }
 </script>
 
 <style lang="sass">
+@import "./assets/sass/variables.sass"
 .text
   color: #42b983
+
 #app
   font-family: Avenir, Helvetica, Arial, sans-serif
   -webkit-font-smoothing: antialiased
   -moz-osx-font-smoothing: grayscale
   text-align: center
   color: #2c3e50
-  margin-top: 60px
+
+body
+  margin: 0  
+
+.wrapper
+  background-color: $bg-lavender-color
+  width: 1920px
+  height: 1000px
 </style>
diff --git a/src/assets/images/logo.svg b/src/assets/images/logo.svg
new file mode 100644
index 0000000..ea74ee9
--- /dev/null
+++ b/src/assets/images/logo.svg
@@ -0,0 +1,3 @@
+<svg width="68" height="21" viewBox="0 0 68 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.4072 16.4404V20H3.7041V16.4404H13.4072ZM5.35205 0.804688V20H0.724609V0.804688H5.35205ZM30.7568 10.02V10.7979C30.7568 12.2656 30.5503 13.584 30.1372 14.7529C29.7329 15.9131 29.1572 16.9062 28.4102 17.7324C27.6631 18.5498 26.7798 19.1782 25.7603 19.6177C24.7407 20.0483 23.6157 20.2637 22.3853 20.2637C21.146 20.2637 20.0122 20.0483 18.9839 19.6177C17.9644 19.1782 17.0767 18.5498 16.3208 17.7324C15.5737 16.9062 14.9937 15.9131 14.5806 14.7529C14.1763 13.584 13.9741 12.2656 13.9741 10.7979V10.02C13.9741 8.55225 14.1763 7.23389 14.5806 6.06494C14.9937 4.896 15.5693 3.90283 16.3076 3.08545C17.0547 2.25928 17.938 1.63086 18.9575 1.2002C19.9858 0.760742 21.1196 0.541016 22.3589 0.541016C23.5894 0.541016 24.7144 0.760742 25.7339 1.2002C26.7622 1.63086 27.6499 2.25928 28.397 3.08545C29.144 3.90283 29.7241 4.896 30.1372 6.06494C30.5503 7.23389 30.7568 8.55225 30.7568 10.02ZM26.0635 10.7979V9.99365C26.0635 9.04443 25.98 8.20947 25.813 7.48877C25.6548 6.75928 25.4175 6.14844 25.1011 5.65625C24.7847 5.16406 24.3936 4.79492 23.9277 4.54883C23.4707 4.29395 22.9478 4.1665 22.3589 4.1665C21.7437 4.1665 21.2075 4.29395 20.7505 4.54883C20.2935 4.79492 19.9111 5.16406 19.6035 5.65625C19.2959 6.14844 19.063 6.75928 18.9048 7.48877C18.7554 8.20947 18.6807 9.04443 18.6807 9.99365V10.7979C18.6807 11.7383 18.7554 12.5732 18.9048 13.3027C19.063 14.0234 19.2959 14.6343 19.6035 15.1353C19.9199 15.6362 20.3066 16.0142 20.7637 16.269C21.2295 16.5239 21.77 16.6514 22.3853 16.6514C22.9741 16.6514 23.4971 16.5239 23.9541 16.269C24.4111 16.0142 24.7935 15.6362 25.1011 15.1353C25.4175 14.6343 25.6548 14.0234 25.813 13.3027C25.98 12.5732 26.0635 11.7383 26.0635 10.7979ZM48.8579 9.74316V17.627C48.5327 17.9873 48.0317 18.374 47.355 18.7871C46.687 19.1914 45.8433 19.5386 44.8237 19.8286C43.8042 20.1187 42.6045 20.2637 41.2246 20.2637C39.9502 20.2637 38.7944 20.0615 37.7573 19.6572C36.7202 19.2441 35.8281 18.6421 35.0811 17.8511C34.3428 17.0513 33.7715 16.0757 33.3672 14.9243C32.9717 13.7642 32.7739 12.437 32.7739 10.9429V9.875C32.7739 8.38086 32.9761 7.05371 33.3804 5.89355C33.7847 4.7334 34.3516 3.75781 35.0811 2.9668C35.8193 2.16699 36.6851 1.56055 37.6782 1.14746C38.6802 0.734375 39.7788 0.527832 40.9741 0.527832C42.7407 0.527832 44.1777 0.809082 45.2852 1.37158C46.3926 1.92529 47.2319 2.69434 47.8032 3.67871C48.3745 4.6543 48.7217 5.78369 48.8447 7.06689H44.4019C44.314 6.43408 44.147 5.89795 43.9009 5.4585C43.6636 5.01025 43.3208 4.67187 42.8726 4.44336C42.4243 4.20605 41.8442 4.0874 41.1323 4.0874C40.5786 4.0874 40.0732 4.20605 39.6162 4.44336C39.168 4.68066 38.7856 5.04102 38.4692 5.52441C38.1528 5.99902 37.9067 6.59668 37.731 7.31738C37.564 8.03809 37.4805 8.88184 37.4805 9.84863V10.9429C37.4805 11.9009 37.5596 12.7402 37.7178 13.4609C37.8848 14.1816 38.1309 14.7837 38.4561 15.2671C38.79 15.7417 39.2119 16.1021 39.7217 16.3481C40.2402 16.5854 40.8511 16.7041 41.5542 16.7041C42.0464 16.7041 42.4683 16.6646 42.8198 16.5854C43.1714 16.4976 43.4614 16.3921 43.6899 16.269C43.9272 16.1372 44.1074 16.0142 44.2305 15.8999V12.9204H41.0137V9.74316H48.8579ZM67.8027 10.02V10.7979C67.8027 12.2656 67.5962 13.584 67.1831 14.7529C66.7788 15.9131 66.2031 16.9062 65.4561 17.7324C64.709 18.5498 63.8257 19.1782 62.8062 19.6177C61.7866 20.0483 60.6616 20.2637 59.4312 20.2637C58.1919 20.2637 57.0581 20.0483 56.0298 19.6177C55.0103 19.1782 54.1226 18.5498 53.3667 17.7324C52.6196 16.9062 52.0396 15.9131 51.6265 14.7529C51.2222 13.584 51.02 12.2656 51.02 10.7979V10.02C51.02 8.55225 51.2222 7.23389 51.6265 6.06494C52.0396 4.896 52.6152 3.90283 53.3535 3.08545C54.1006 2.25928 54.9839 1.63086 56.0034 1.2002C57.0317 0.760742 58.1655 0.541016 59.4048 0.541016C60.6353 0.541016 61.7603 0.760742 62.7798 1.2002C63.8081 1.63086 64.6958 2.25928 65.4429 3.08545C66.1899 3.90283 66.77 4.896 67.1831 6.06494C67.5962 7.23389 67.8027 8.55225 67.8027 10.02ZM63.1094 10.7979V9.99365C63.1094 9.04443 63.0259 8.20947 62.8589 7.48877C62.7007 6.75928 62.4634 6.14844 62.147 5.65625C61.8306 5.16406 61.4395 4.79492 60.9736 4.54883C60.5166 4.29395 59.9937 4.1665 59.4048 4.1665C58.7896 4.1665 58.2534 4.29395 57.7964 4.54883C57.3394 4.79492 56.957 5.16406 56.6494 5.65625C56.3418 6.14844 56.1089 6.75928 55.9507 7.48877C55.8013 8.20947 55.7266 9.04443 55.7266 9.99365V10.7979C55.7266 11.7383 55.8013 12.5732 55.9507 13.3027C56.1089 14.0234 56.3418 14.6343 56.6494 15.1353C56.9658 15.6362 57.3525 16.0142 57.8096 16.269C58.2754 16.5239 58.8159 16.6514 59.4312 16.6514C60.02 16.6514 60.543 16.5239 61 16.269C61.457 16.0142 61.8394 15.6362 62.147 15.1353C62.4634 14.6343 62.7007 14.0234 62.8589 13.3027C63.0259 12.5732 63.1094 11.7383 63.1094 10.7979Z" fill="#4169E1"/>
+</svg>
diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass
new file mode 100644
index 0000000..d1ac2c6
--- /dev/null
+++ b/src/assets/sass/variables.sass
@@ -0,0 +1,5 @@
+$bg-lavender-color: #D7D9FF
+$bg-white-color: #F8F8FF
+$font-dark-blue-color: #252850
+$font-black-color: #090A15
+$btn-blue-color: #4169E1
\ No newline at end of file
diff --git a/src/components/homePageComponents/HeaderComponent.vue b/src/components/homePageComponents/HeaderComponent.vue
index e69de29..844eaa0 100644
--- a/src/components/homePageComponents/HeaderComponent.vue
+++ b/src/components/homePageComponents/HeaderComponent.vue
@@ -0,0 +1,21 @@
+<template lang="pug">
+  div.header-wrapper.flex
+    img(src="../../assets/images/logo.svg")
+</template>
+
+<script>
+
+export default {
+  name: 'HeaderComponent',
+}
+</script>
+
+<style lang="sass">
+@import "../../assets/sass/variables.sass"
+.header-wrapper
+  width: auto
+  padding: 8px 24px
+  background-color: $bg-white-color
+.flex
+  display: flex
+</style>
diff --git a/src/vue.config.js b/src/vue.config.js
new file mode 100644
index 0000000..5011196
--- /dev/null
+++ b/src/vue.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+  css: {
+    loaderOptions: {
+      sass: {
+        additionalData: ' @import "@/assets/sass/styles.sass" '
+      }
+    }
+  }
+}
\ No newline at end of file