Monorepo

2026-03-20 02:44:42 +00:00 · 2022-05-23 19:01:04 +07:00
parent fa4a0ed77e
commit 4ae8ba4228
48 changed files with 1747 additions and 328 deletions
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -0,0 +1,29 @@
+# metr
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin).
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap" rel="stylesheet">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "metr",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview --port 5050"
+  },
+  "dependencies": {
+    "vue": "^3.2.33",
+    "vue-router": "^4.0.14"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^2.3.1",
+    "vite": "^2.9.5"
+  }
+}
--- a/frontend/public/favicon.ico
+++ b/frontend/public/favicon.ico
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -0,0 +1,26 @@
+<template>
+  <RouterView />
+</template>
+<style >
+@import url("@/assets/fonts/StapelS/style.css");  
+
+body {
+    margin: 0;
+    font-family: 'Inter', sans-serif;
+    background-color:  rgba(124, 173, 201, 1);
+    font-size: 17px;
+    color: white;
+    background: black;
+    line-height: 1.6;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: border-box;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+}
+</style>
--- a/frontend/src/assets/base.css
+++ b/frontend/src/assets/base.css
@@ -0,0 +1,74 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  position: relative;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition: color 0.5s, background-color 0.5s;
+  line-height: 1.6;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
--- a/frontend/src/assets/css/main.css
+++ b/frontend/src/assets/css/main.css
@@ -0,0 +1,472 @@
+/* Fonts */
+
+
+
+/* Main */
+.main {
+    width: 100%;
+}
+
+
+/* Container */
+.container {
+    width: 100%;
+    max-width: 1920px;
+    margin: 0 auto;
+}
+
+
+/* Header */
+
+.header {
+    width: 100%;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+}
+
+.header__table {
+    width: 1052px;
+    height: 100px;
+    border: 2px solid white;
+    margin: 50px auto 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+
+    color: white;
+    
+}
+
+.header__image {
+    width: 140px;
+    height: 96px;
+    margin: 0 auto;
+    
+    background: url("@/assets/images/metr.svg") center
+    no-repeat;
+    background-size: cover;
+    border-right: 2px solid white;
+}
+
+.header__block {
+    width: 145px;
+    height: 96px;
+    margin: 0 auto;
+    border-right: 2px solid white;
+}
+
+.header__search {
+    width: 426px;
+    height: 96px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+
+    border-right: 2px solid white;
+}
+
+.search {
+    width: 340px;
+    height: 40px;
+    padding-top: 25px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.search__block {
+    width: 300px;
+    height: 40px;
+    margin: 0;
+    padding-top: 20px;
+
+    background: white;
+    border: 1px solid black;
+}
+
+.search__img {
+    width: 40px;
+    height: 40px;
+    margin: 0;
+    padding-top: 2px;
+}
+
+.header__contacts {
+    width: 46px;
+    height: 96px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+}
+
+.header__contacts__imgtop {
+    width: 48px;
+    height: 48px;
+    padding-top: 5px;
+    border-bottom: 2px solid white;
+}
+
+.header__contacts__img {
+    width: 48px;
+    height: 48px;
+    padding-top: 5px;
+}
+
+.header__block__content {
+    width: 70px;
+    height: 20px;
+    margin: 0 auto;
+    padding-top: 35px;
+}
+
+.header__block__contenttop {
+    width: 145px;
+    height: 48px;
+    margin: 0 auto;
+    border-bottom: 2px solid white;
+}
+
+.header__block__contentbott {
+    width: 145px;
+    height: 48px;
+}
+
+.nav__link {
+    text-decoration: none;
+    color: white;
+    font-size: 15px;
+    
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    padding-top: 10px;
+}
+
+.nav__link_tomsk {
+    text-decoration: none;
+    color: white;
+    font-size: 15px;
+    
+}
+
+.nav__link:hover, .nav__link_tomsk:hover {
+    color: #389EEB;
+    transition: color .2s linear;
+}
+
+/* Intro */
+.intro {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content:center;
+    padding-top: 250px;
+
+    background-image: linear-gradient(to top, rgb(124, 173, 201, 1), rgb(94, 196, 242, 0.3)), url(
+ "@/assets/images/intro.jpg");
+    background-size: cover;
+}
+
+.intro__text {
+    width: 100%;
+    height: 100px;
+    margin: 0 auto;
+}
+
+.intro__title {
+    font-size: 25px;
+    color: white;
+    text-align: center;
+}
+
+.newhome {
+    font-family: 'Stapel';
+}
+
+.intro__subtitle {
+    font-size: 17px;
+    color: white;
+    text-align: center;
+    font-family: 'Inter', sans-serif;
+}
+
+.intro_footer {
+    width: 1050px;
+    height: 80px;
+    margin: 300px auto 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.intro__btn {
+    width: 185px;
+    height: 55px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    border-radius: 5px;
+
+    background-color: rgba(26, 137, 201, 1);
+
+}
+
+.intro__button {
+    font-size: 12px;
+    text-transform: uppercase;
+    text-decoration: none;
+    margin: 0 auto;
+    
+    font-weight: 500;
+    color: white;
+}
+
+.intro__button:hover {
+    color: #0f171d;
+    font-weight: 600;
+    transition: color .2s linear;
+}
+
+.intro__odnushka {
+    width: 250px;
+    height: 50px;
+    display: flex;
+    flex-direction: column;
+}
+
+.odnushka {
+    font-size: 17px;
+    color: black;
+    background: white;
+    text-decoration: none;
+    padding: 2px;
+    font-weight: 600;
+}
+
+.odnushka__price {
+    width: 115px;
+    font-size: 17px;
+    text-decoration: none;
+    padding: 2px;
+    font-weight: 900;
+    color: black;
+    background: white;
+    font-family: 'Inter';
+}
+
+.title {
+    font-size: 25px;
+    font-family: 'Inter';
+    font-weight: 400;
+}
+
+/* About */
+
+.about { 
+    height: 100vh;
+    background-color:  rgba(124, 173, 201, 1);
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    font-family: 'Inter', sans-serif;
+}
+
+.about__title {
+    padding-left: 10%;
+    padding-top: 50px;
+    font-size: 40px;
+    font-family: 'Stapel';
+}
+
+.video {
+    margin: 0 auto;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 1300px;
+    height: 590px;
+    border: 1px solid black;
+    background-image: linear-gradient(to top, rgb(124, 173, 201, 0.6), rgb(94, 196, 242, 0.2)), url(
+ "@/assets/images/video.jpg");
+    background-size: cover;
+
+}
+
+.about__us {
+    margin-right: 5%;
+    font-family: 'Inter';
+    font-weight: 100;
+    font-size: 17px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+}
+    
+/* Suggestions */
+
+.suggestions {
+    padding-top: 10%;
+    background-color:  rgba(124, 173, 201, 1);
+    height: 100%;
+    min-height: 600px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin: 0 auto;
+}
+
+.suggestions__title {
+    font-size: 25px;
+    padding-left: 10%;
+}
+
+.suggestions__images {
+    margin: 2% 12%;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.sugg__img {
+    flex-basis: 30%;
+    height: 460px;
+    margin: 4% 0 1% auto;
+    background: linear-gradient(to top, rgba(1, 80, 140, 1), rgba(37, 45, 45, 0.6));
+    transition: transform .2s linear;
+}
+
+.afterword {
+    margin: 0 5% 0 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    font-size: 17px;
+}
+
+.after__afterword {
+    font-weight: 600;
+    margin-right: 5%;
+}
+
+.gradient {
+    
+	display: inline-block;
+	position: relative;    
+	line-height: 0;
+}
+
+.gradient:after {
+	content: "";
+	display: block;    
+	width: 100%;
+	height: 100%;    
+	position: absolute;
+	top: 0;      
+	left: 0;   
+	background: transparent;
+	background-image: linear-gradient(to bottom, rgba(15, 34, 38, 0.4), rgba(99, 137, 159, 0.8));
+	opacity: 0.8;
+}
+
+.podlozhka {
+    position: relative;
+}
+
+.podlozhka:hover .sugg__img {
+    transform: translate3d(-10px, -10px, 0);
+}
+
+
+.podlozhka:hover .sugg__img img {
+    opacity: 0.6;
+}
+
+.podlozhka:hover .sugg__text{
+    opacity: 1;
+}
+
+.sugg__img img {
+    transition: opacity .1s linear;
+}
+
+.sugg__text {
+    width: 100%;
+    text-align: center;
+    position: absolute;
+    top: 90%;
+    left: 0;
+    z-index: 2;
+    transform: translate3d(0, -50%, 0);
+    opacity: 0;
+    transition: opacity .2s linear;
+}
+
+.sugg__text p {
+    width: 180px;
+    color: black;
+    font-family:sans-serif;
+    font-weight: 100;
+    font-size: 17px;
+    background: white;
+    text-decoration: none;
+    margin: 0 auto;
+}
+
+.sugg__text h2 {
+    width: 100px;
+    font-weight: 700;
+    margin: 0 auto;
+    color: black;
+    font-family:sans-serif;
+    font-size: 17px;
+    background: white;
+}
+
+/* Footer */
+
+.footer {
+    height: 200px;
+    margin: 0 auto;
+    padding-top: 1%;
+    background-color:  rgba(124, 173, 201, 1);
+}
+
+.footer__search {
+    width: 300px;
+    height: 96px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+
+    border-right: 2px solid white;
+}
+
+.footer__contacts {
+    width: 165px;
+    height: 96px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+}
+
+.footer__contacts__imgtop {
+    width: 165px;
+    height: 48px;
+    border-bottom: 2px solid white;
+    margin: 0;
+}
+
+.footer__contacts__img {
+    width: 166px;
+    height: 48px;
+    margin: 0;
+}
--- a/frontend/src/assets/css/signin.css
+++ b/frontend/src/assets/css/signin.css
@@ -0,0 +1,76 @@
+
+
+.container {
+    width: 100%;
+    height: 100vh;
+    max-width: 1920px;
+    margin: 0 auto;
+    background-image: linear-gradient(to top, rgb(124, 173, 201, 0.2), rgb(124, 173, 201, 0.2)), url(
+ "@/assets/images/intro.jpg");
+    background-size: cover;
+    display: flex;
+    flex-direction: column;
+    justify-content:center;
+}
+
+.logo {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.logoMetr {
+    width: 185px;
+    height: 100px;
+    background: url("@/assets/images/metr.svg") center
+    no-repeat;
+    background-size: cover;
+}
+
+.title {
+    margin: 1% 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.title h2{
+    font-size: 35px;
+}
+
+.form__example {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.form__input {
+    margin-top: 30px;
+    width: 320px;
+    height: 40px;
+    background-color: #1A89C9;
+    color: white;
+    font-family: 'Montserrat', sans-serif;
+    font-size: 14px;
+    border-radius: 10px;
+    border: 0px;
+}
+
+.form__input:hover {
+    color: rgb(15, 10, 41);
+    font-weight: 600;
+    transition: color .1s linear;
+}
+
+.login {
+    width: 320px;
+    height: 50px;
+    padding-left: 1%;
+}
+ 
+input {
+    margin: 0;
+    padding: 0;
+    color: rgb(129, 125, 125);
+    font-family: 'Montserrat', sans-serif;
+}
--- a/frontend/src/assets/fonts/Stapel/Stapel-Bold.ttf
+++ b/frontend/src/assets/fonts/Stapel/Stapel-Bold.ttf
--- a/frontend/src/assets/fonts/Stapel/Stapel-Bold.woff
+++ b/frontend/src/assets/fonts/Stapel/Stapel-Bold.woff
--- a/frontend/src/assets/fonts/Stapel/Stapel-Bold.woff2
+++ b/frontend/src/assets/fonts/Stapel/Stapel-Bold.woff2
--- a/frontend/src/assets/fonts/Stapel/stapel-semi-expanded-bold.otf
+++ b/frontend/src/assets/fonts/Stapel/stapel-semi-expanded-bold.otf
--- a/frontend/src/assets/fonts/StapelS/Stapel-SemiExpandedBold.ttf
+++ b/frontend/src/assets/fonts/StapelS/Stapel-SemiExpandedBold.ttf
--- a/frontend/src/assets/fonts/StapelS/Stapel-SemiExpandedBold.woff
+++ b/frontend/src/assets/fonts/StapelS/Stapel-SemiExpandedBold.woff
--- a/frontend/src/assets/fonts/StapelS/Stapel-SemiExpandedBold.woff2
+++ b/frontend/src/assets/fonts/StapelS/Stapel-SemiExpandedBold.woff2
--- a/frontend/src/assets/fonts/StapelS/style.css
+++ b/frontend/src/assets/fonts/StapelS/style.css
@@ -0,0 +1,9 @@
+@font-face {
+    font-family: 'Stapel';
+    src: local('Stapel Semi Expanded Bold'), local('Stapel-Semi-Expanded-Bold'),
+        url('Stapel-SemiExpandedBold.woff2') format('woff2'),
+        url('Stapel-SemiExpandedBold.woff') format('woff'),
+        url('Stapel-SemiExpandedBold.ttf') format('truetype');
+    font-weight: 700;
+    font-style: normal;
+  }
--- a/frontend/src/assets/images/1.jpg
+++ b/frontend/src/assets/images/1.jpg
--- a/frontend/src/assets/images/2jpg.jpg
+++ b/frontend/src/assets/images/2jpg.jpg
--- a/frontend/src/assets/images/3.jpg
+++ b/frontend/src/assets/images/3.jpg
--- a/frontend/src/assets/images/4.jpg
+++ b/frontend/src/assets/images/4.jpg
--- a/frontend/src/assets/images/5.jpg
+++ b/frontend/src/assets/images/5.jpg
--- a/frontend/src/assets/images/6.jpg
+++ b/frontend/src/assets/images/6.jpg
--- a/frontend/src/assets/images/image
+++ b/frontend/src/assets/images/image
--- a/frontend/src/assets/images/intro.jpg
+++ b/frontend/src/assets/images/intro.jpg
--- a/frontend/src/assets/images/location.png
+++ b/frontend/src/assets/images/location.png
--- a/frontend/src/assets/images/metr.jpg
+++ b/frontend/src/assets/images/metr.jpg
--- a/frontend/src/assets/images/metr.svg
+++ b/frontend/src/assets/images/metr.svg
@@ -0,0 +1,3 @@
+<svg width="265" height="139" viewBox="0 0 265 139" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M264.708 0H0V139H264.708V0ZM127.614 71.5571V68.2211C127.614 63.7361 126.374 60.5113 123.894 58.5467C121.414 56.5822 117.656 55.5999 112.619 55.5999C107.201 55.5999 103.252 56.7119 100.772 58.9359C98.3295 61.1229 97.1085 64.9778 97.1085 70.5007C97.1085 75.8754 98.3486 79.6562 100.829 81.8431C103.309 83.993 107.258 85.0679 112.676 85.0679C117.56 85.0679 121.204 84.2525 123.608 82.6215C126.012 80.9906 127.347 78.1921 127.614 74.2259H117.999C117.732 76.7094 115.958 77.9511 112.676 77.9511C110.692 77.9511 109.204 77.4693 108.212 76.5055C107.258 75.5418 106.762 73.9294 106.724 71.6683V71.5571H127.614ZM106.724 68.6659V68.2211C106.8 66.2195 107.334 64.811 108.326 63.9955C109.318 63.143 110.73 62.7167 112.562 62.7167C114.355 62.7167 115.691 63.1801 116.568 64.1067C117.484 64.9963 117.942 66.5161 117.942 68.6659H106.724ZM62.2136 69.4999L70.1691 77.5619L78.1247 69.4999V84.2339H87.3966V56.4339H79.7272L70.1691 66.9423L60.611 56.4339H52.9416V84.2339H62.2136V69.4999ZM134.941 56.4339H162.871V63.5507H153.714V84.2339H144.098V63.5507H134.941V56.4339ZM181.922 78.5071C183.067 82.881 186.138 85.0679 191.137 85.0679C195.029 85.0679 197.89 84.0115 199.722 81.8987C201.553 79.7489 202.469 75.931 202.469 70.4451C202.469 64.9222 201.553 61.0673 199.722 58.8803C197.89 56.6934 195.029 55.5999 191.137 55.5999C188.695 55.5999 186.672 56.1745 185.07 57.3235C183.505 58.4726 182.456 60.085 181.922 62.1607H180.949V56.4339H171.334V94.2419H180.949V78.5071H181.922ZM180.949 67.7207C181.064 64.3847 182.971 62.7167 186.672 62.7167C189.038 62.7167 190.66 63.2357 191.537 64.2735C192.453 65.2743 192.911 67.3315 192.911 70.4451C192.911 73.4846 192.472 75.5047 191.595 76.5055C190.717 77.4693 189.076 77.9511 186.672 77.9511C182.857 77.9511 180.949 76.1905 180.949 72.6691V67.7207Z" fill="white"/>
+</svg>
--- a/frontend/src/assets/images/search.jpg
+++ b/frontend/src/assets/images/search.jpg
--- a/frontend/src/assets/images/tell.jpg
+++ b/frontend/src/assets/images/tell.jpg
--- a/frontend/src/assets/images/user.jpg
+++ b/frontend/src/assets/images/user.jpg
--- a/frontend/src/assets/images/video.jpg
+++ b/frontend/src/assets/images/video.jpg
--- a/frontend/src/assets/logo.svg
+++ b/frontend/src/assets/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"  xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -0,0 +1,9 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(router)
+
+app.mount('#app')
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -0,0 +1,21 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import MainView from '@/views/MainView.vue'
+import AuthView from '@/views/AuthView.vue'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: MainView
+    },
+    {
+      path: '/auth',
+      name: 'auth',
+      component: AuthView
+    },
+  ]
+})
+
+export default router
--- a/frontend/src/views/AuthView.vue
+++ b/frontend/src/views/AuthView.vue
@@ -0,0 +1,44 @@
+<template>
+    <div class="container">
+    <div class="logo">
+        <div class="logoMetr">
+        </div>
+    </div>
+    <div class="title">
+        <h2> {{authForm? "Вход" : "Регистрация" }} Метр</h2>
+    </div>
+    <form action="" method="get" class="form__example">
+      <div class="form__example">
+        <label for="name"></label>
+        <input class="login" type="text" name="name" id="name" placeholder="Почта" required>
+      </div>
+      <div class="form__example">
+        <label for="email"></label>
+        <input class="login" type="email" name="email" id="email" placeholder="Пароль" required>
+      </div>
+      <div class="form__example">
+        <button class="form__input">
+        {{authForm? "Войти" : "Зарегистрироваться" }}
+        </button>
+      </div>
+    </form>
+    
+    <div class="form__example">
+        <button class="form__input" @click="authForm = false" v-if="authForm">
+        Зарегистрироваться
+        </button>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data ()  {
+    return {authForm: true}
+  }
+}
+</script>>
+
+<style scoped>
+    @import url("@/assets/css/signin.css");
+</style>
--- a/frontend/src/views/MainView.vue
+++ b/frontend/src/views/MainView.vue
@@ -0,0 +1,174 @@
+<template>
+    <header class="header">
+        <div class="container">
+            <div class="header__table">
+                <div class="header__image"></div>
+                <div class="header__block">
+                    <div class="header__block__content">
+                        <img src="@/assets/images/location.png" alt="">
+                        <a class="nav__link_tomsk" href="#">Томск</a>
+                    </div>
+                </div>
+                <div class="header__block">
+                    <div class="header__block__contenttop">
+                        <a class="nav__link" href="#" id="catalog">каталог</a>
+                    </div>
+                    <div class="header__block__contentdown">
+                        <a class="nav__link" href="#">блог</a>
+                    </div>
+                </div>
+                <div class="header__block">
+                    <div class="header__block__contenttop">
+                        <a class="nav__link" href="#">контакты</a>
+                    </div>
+                    <div class="header__block__contentdown">
+                        <a class="nav__link" href="#">помощь</a>
+                    </div>
+                </div>
+                <div class="header__search">
+                    <div class="search">
+                        <div class="search__block">
+
+                        </div>
+                        <div class="search__img">
+                            <a class="nav__link" href="#">
+                                <img src="@/assets/images/search.jpg" alt="">
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div class="header__contacts">
+                    <div class="header__contacts__imgtop">
+                        <a class="nav__link" href="#">
+                            <img src="@/assets/images/tell.jpg" alt="">
+                        </a>
+                    </div>
+                    <div class="header__contacts__img">
+                        <router-link to="/auth" class="nav__link" href="#" id="user">
+                            <img src="@/assets/images/user.jpg" alt="">
+                        </router-link>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div class="intro">
+            <div class="container">
+                <div class="intro__text">
+                    <div class="intro__title">
+                        <h1 class="newhome">Нашли вам новый дом</h1>
+                    </div>
+                    <div class="intro__subtitle">
+                        <h5 class="title">по самой низкой цене</h5>
+                    </div>
+                </div>
+            </div>
+            <div class="intro_footer">
+                <div class="intro__odnushka">
+                    <a class="odnushka" href="#">Однушка на Елизаровых, 44</a>
+                    <a class="odnushka__price" href="#">1 580 000₽</a>
+                </div>
+                <div class="intro__btn">
+                    <a class="intro__button" href="#">посмотреть</a>
+                </div>
+            </div>
+    </div>
+
+    <section class="about">
+        <div class="about__title">
+            <h1 class="about__title">О метре</h1>
+        </div>
+        <div class="video">
+            <a class="video" href="#"></a>
+        </div>
+        <div class="about__us">
+            <h3 class="about__us">Мы - агентство недвижимости.</h3>
+            <h3 class="about__us">Подберем подходящее жилье для вас.</h3>
+        </div>
+    </section>
+    
+    <section class="suggestions">
+        <div class="suggestions__title">
+            <h3 class="newhome">Интересные предложения</h3>
+        </div>
+        <div class="suggestions__images">
+            <div class="podlozhka">
+                <div class="sugg__img"><a class="gradient" href="#"><img src="@/assets/images/1.jpg" alt=""></a></div>
+                <div class="sugg__text"><p>Студия на Кирова, 12</p><h2>1298000₽</h2></div>
+            </div>
+            <div class="podlozhka">
+                <div class="sugg__img"><a class="gradient" href="#"><img src="@/assets/images/1.jpg" alt=""></a></div>
+                <div class="sugg__text"><p>Студия на Кирова, 12</p><h2>1298000₽</h2></div>
+            </div>
+            <div class="podlozhka">
+                <div class="sugg__img"><a class="gradient" href="#"><img src="@/assets/images/3.jpg" alt=""></a></div>
+                <div class="sugg__text"><p>Студия на Кирова, 12</p><h2>1298000₽</h2></div>
+            </div>
+            <div class="podlozhka">
+                <div class="sugg__img"><a class="gradient" href="#"><img src="@/assets/images/4.jpg" alt=""></a></div>
+                <div class="sugg__text"><p>Студия на Кирова, 12</p><h2>1298000₽</h2></div>
+            </div>
+            <div class="podlozhka">
+                <div class="sugg__img"><a class="gradient" href="#"><img src="@/assets/images/6.jpg" alt=""></a></div>
+                <div class="sugg__text"><p>Студия на Кирова, 12</p><h2>1298000₽</h2></div>
+            </div>
+            <div class="podlozhka">
+                <div class="sugg__img"><a class="gradient" href="#"><img src="@/assets/images/6.jpg" alt=""></a></div>
+                <div class="sugg__text"><p>Студия на Кирова, 12</p><h2>1298000₽</h2></div>
+            </div>
+        </div>
+        <div class="afterword">
+            <p class="afterword">Это подборка лучших вариантов, найденных</p>
+            <p class="afterword">нашими сотрудниками.</p>
+            <p class="after__afterword">Вдруг ваше будущее жилье здесь?</p>
+        </div>
+    </section>
+
+    <footer class="footer">
+        <div class="header__table">
+            <div class="header__image">
+            </div>
+            <div class="header__block">
+                <div class="header__block__content">
+                    <img src="assets/images/location.png" alt="">
+                    <a class="nav__link_tomsk" href="#">Томск</a>
+                </div>
+            </div>
+            <div class="header__block">
+                <div class="header__block__contenttop">
+                    <a class="nav__link" href="#">вконтакте</a>
+                </div>
+                <div class="header__block__contentbott">
+                    <a class="nav__link" href="#">инстаграм</a>
+                </div>
+            </div>
+            <div class="header__block">
+                <div class="header__block__contenttop">
+                    <a class="nav__link" href="#">фэйсбук</a>
+                </div>
+                <div class="header__block__contentdown">
+                    <a class="nav__link" href="#">твиттер</a>
+                </div>
+            </div>
+            <div class="footer__search">
+            
+            </div>
+            <div class="footer__contacts">
+                <div class="footer__contacts__imgtop">
+                    <a class="nav__link" href="#">+7-495-291-32-01</a>
+                </div>
+                <div class="footer__contacts__img">
+                    <a class="nav__link" href="#">вконтакте</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+    
+</template>
+
+<style scoped>
+    @import url("@/assets/css/main.css");
+</style>
+
+    
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -0,0 +1,14 @@
+import { fileURLToPath, URL } from 'url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+})
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69" xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>`