Hub basics and primary works on ModelS

src/App.vue

@@ -1,18 +1,15 @@
 <script setup>
 // This starter template is using Vue 3 <script setup> SFCs
 // Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
-import Header from './components/Header.vue';
+import TeslaMode from "./pages/TeslaMode.vue"
-import HelloWorld from './components/HelloWorld.vue';
+import hub from "./pages/hub.vue"
-import Footer from './components/Footer.vue'
+import CyberTrack from "./pages/CyberTrack.vue"
 </script>
 
 <template lang="pug">
-Header/
+hub(v-if="curPage === 1" @switch="curPage=$event")/
-
+TeslaMode(v-else-if="curPage === 2")/
-.content
+CyberTrack(v-else)/
-  img(alt="Vue logo" src="./assets/logo.png")/
-  HelloWorld(msg="Hello Vue 3 + Vite")/
-  Footer/
 </template>
 
 <style>
@@ -22,3 +19,13 @@ Header/
   margin-top: 60px;
 }
 </style>
+<script>
+export default {
+     name: "App",
+     data () {
+         return{
+             curPage: 1
+         }
+     }
+ }
+</script>

src/components/Button.vue

@@ -0,0 +1,4 @@
+<template lang="pug">
+button.button
+    slot
+</template>

src/components/Footer.vue

@@ -1,4 +1,42 @@
 <template lang="pug">
 footer.footer
-    span copyright2022
+    .container
+        .footer__copyright Tesla &copy; {{ year }}
+
+        nav.footer-nav
+            a(href="#") Privacy & Legal
+            a(href="#") Contact
+            a(href="#") Careers
+            a(href="#") Get Newsletter
+            a(href="#") Locations
 </template>
+
+<style lang="scss">
+.footer{
+    background: #f0f0f0;
+    height: 115px;
+    display: flex;
+    align-items: center;
+
+    .container{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    &-nav{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+}
+</style>
+
+<script>
+export default {
+    name: 'Footer',
+    setup() {
+        return { year: new Date().getFullYear() };
+    },
+};
+</script>

src/components/Header.vue

@@ -1,17 +1,40 @@
 <template lang="pug">
-header.header
+header.header.container
-  span.header__logo logo
+    h1
-  nav.header__nav
+        img.logo__image(src="../assets/images/logo.png" alt="Tesla")
-    a(href="#") link
+    nav.header-nav
+        a.header-nav__item(href="#") Test Drive
+        a.header-nav__item(href="#") Contacts
+        a.header-nav__item(href="#") Shop
 </template>
+<style scoped lang="scss">
+ .header{
+     display: flex;
+     align-items: center;
+     justify-content: space-between;
+     .logo{
+         &__image{
+             height: 20px;
+         }
+     }
+     .header-nav{
+        &__item {
+            margin: 0 8px;
+            text-transform: uppercase;
+            font-family: 'Montserrat';
+            font-style: normal;
+            font-weight: 500;
+            font-size: 22px;
+            line-height: 27px;
+            text-decoration: none;
+            letter-spacing: 0.025em;
+            border-bottom: 2px solid transparent;
+            color: #000000;
 
-<style lang="scss">
+            &:hover{
-.header {
+                border-color: black;
-  background-color: $primary-color;
+            }
-
+        }
-  &__nav {
+     }
-    display: inline-block;
-    float: right;
  }
-}
 </style>

src/components/HelloWorld.vue

@@ -1,35 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-defineProps({
-  msg: String
-})
-
-const count = ref(0)
-</script>
-
-<template lang="pug">
-h1 {{ msg }}
-
-p
-  | Recommended IDE setup:
-  a(href="https://code.visualstudio.com/" target="_blank") VS Code
-  | +
-  a(href="https://github.com/johnsoncodehk/volar" target="_blank") Volar
-
-p
-  a(href="https://vitejs.dev/guide/features.html" target="_blank")
-  | Vite Documentation
-  | |
-  |
-  a(href="https://v3.vuejs.org/" target="_blank") Vue 3 Documentation
-
-button(type="button" @click="count++") count is: {{ count }}
-p Edit #[code components/HelloWorld.vue] to test hot module replacement.
-</template>
-
-<style lang="scss" scoped>
-a {
-  color: #42b983;
-}
-</style>

src/pages/CyberTrack.vue

@@ -0,0 +1,3 @@
+<template lang="pug">
+h1 cyber
+</template>

src/pages/TeslaMode.vue

@@ -0,0 +1,34 @@
+<template lang="pug">
+.tesla-mode
+    Header.tesla-mode__header/
+    .intro
+    Footer/
+h1 modelS
+</template>
+<script>
+import Header from "../components/Header.vue"
+import Footer from "../components/Footer.vue"
+
+export default {
+    name: "TeslaMode",
+    components: {
+        Header,
+        Footer,
+    }
+}
+</script>
+<style lang="scss">
+ .tesla-mode{
+     &__header{
+         position: absolute;
+         top: 0;
+         left: 0;
+         right: 0;
+         width: 100%;
+     }
+     .intro{
+         background: wheat;
+         min-height: 100vh;
+     }
+ }
+</style>

src/pages/hub.vue

@@ -0,0 +1,23 @@
+<template lang="pug">
+.hub
+    Button.hub__button(@click="openPage(2)") models
+    Button.hub__button(@click="openPage(3)") cyber
+</template>
+
+<style>
+
+</style>
+<script setup>
+import Button from "../components/Button.vue"
+</script>
+<script>
+export default {
+     name: "hub",
+     emits: ["switch"],
+     methods: {
+         openPage(num) {
+             this.$emit("switch", num)
+         }
+     }
+ }
+</script>

src/scss/main.scss

@@ -2,3 +2,8 @@ body {
     font-family: $main-font;
     background-color: $bg-color;
 }
+.container{
+    width: 100%;
+    max-width: 1020px;
+    margin: 0 auto;
+}