Add about page

spa/src/components/AboutC.vue

@@ -0,0 +1,39 @@
+<template>
+    <section class="about">
+      <h1>О нас</h1>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu mi ut erat rhoncus sollicitudin. Sed vel nunc quis ante malesuada finibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec tincidunt sapien vitae risus placerat, eget blandit lectus dignissim. Suspendisse potenti. Maecenas ultricies purus non dui volutpat pharetra. Nulla facilisi. Etiam at justo sed augue rutrum sodales.
+      </p>
+      
+      <h2>Наши сотрудники</h2>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam convallis arcu non quam bibendum, nec mollis magna feugiat. Phasellus porttitor felis at neque commodo, in tempus tellus aliquet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean laoreet enim ut massa viverra dictum. Aliquam cursus lacinia lorem, non scelerisque nisl fringilla ut. Fusce varius libero ut odio mattis fermentum. Ut pretium diam ac metus semper, sit amet porta leo vulputate.
+      </p>
+      
+      <h2>Чем мы занимаемся</h2>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare nulla eget ex pellentesque, at congue est accumsan. Duis gravida pulvinar hendrerit. Mauris maximus eros ut tempor lobortis. Morbi euismod interdum nisi, eu condimentum mauris molestie vitae. Praesent venenatis consequat tortor, eu iaculis nunc suscipit id. Curabitur in nibh in odio imperdiet ultrices. Vivamus ut vestibulum nisi. Integer quis augue a ligula porta vehicula. In hac habitasse platea dictumst.
+      </p>
+    </section>
+  </template>
+  
+  <script>
+  export default {
+    name: 'About'
+  };
+  </script>
+  
+  <style scoped>
+  .about {
+    padding: 20px;
+    text-align: justify;
+  }
+  
+  h1, h2 {
+    margin-top: 30px;
+  }
+  
+  p {
+    line-height: 1.6;
+  }
+  </style>

spa/src/components/Header.vue

@@ -11,7 +11,7 @@
         
         <ul v-show="isOpen" class="menu-list">
           <li v-for="item in menuItems" :key="item.id">
-            <a href="#">{{ item.title }}</a>
+            <router-link :to="item.tooo">{{ item.id }} - {{ item.title }}</router-link>
           </li>
         </ul>
       </div>
@@ -25,11 +25,12 @@
       return {
         isOpen: false,
         menuItems: [
-          { id: 1, title: 'Главная' },
+          { id: 1, title: 'Главная', tooo: 'home' },
-          { id: 2, title: 'О нас' },
+          { id: 2, title: 'О нас', tooo: 'about' },
-          { id: 3, title: 'Услуги' },
+          { id: 3, title: 'Услуги', tooo: 'home' },
-          { id: 4, title: 'Контакты' },
+          { id: 4, title: 'Контакты', tooo: 'home' },
-          { id: 5, title: 'Блог' }
+          { id: 5, title: 'Блог', tooo: 'home' },
+          { id: 6, title: 'SignUp', tooo: 'signup' }
         ]
       };
     }

spa/src/router/index.js

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import SignUpView from '../views/SingUpV.vue'
+import About from '../views/AboutV.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -15,6 +16,11 @@ const router = createRouter({
       name: 'home',
       component: HomeView,
     },
+    {
+      path: '/about',
+      name: 'about',
+      component: About
+    },
   ],
 });
 

spa/src/views/AboutV.vue

@@ -0,0 +1,8 @@
+<script setup>
+import About from '../components/AboutC.vue'
+</script>
+
+<template>
+  <About />
+</template>
+