diff --git a/src/App.vue b/src/App.vue
index 554e13a..5d3a4c4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,18 +1,15 @@
-Header/
-
-.content
- img(alt="Vue logo" src="./assets/logo.png")/
- HelloWorld(msg="Hello Vue 3 + Vite")/
- Footer/
+hub(v-if="curPage === 1" @switch="curPage=$event")/
+TeslaMode(v-else-if="curPage === 2")/
+CyberTrack(v-else)/
+
diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png
new file mode 100644
index 0000000..0a20a7e
Binary files /dev/null and b/src/assets/images/logo.png differ
diff --git a/src/assets/logo.png b/src/assets/logo.png
deleted file mode 100644
index f3d2503..0000000
Binary files a/src/assets/logo.png and /dev/null differ
diff --git a/src/components/Button.vue b/src/components/Button.vue
new file mode 100644
index 0000000..e96fad6
--- /dev/null
+++ b/src/components/Button.vue
@@ -0,0 +1,4 @@
+
+button.button
+ slot
+
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 8089c3b..20fe0ba 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,4 +1,42 @@
footer.footer
- span copyright2022
+ .container
+ .footer__copyright Tesla © {{ year }}
+
+ nav.footer-nav
+ a(href="#") Privacy & Legal
+ a(href="#") Contact
+ a(href="#") Careers
+ a(href="#") Get Newsletter
+ a(href="#") Locations
+
+
+
+
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 8ba7599..3cf3c4e 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,17 +1,40 @@
-header.header
- span.header__logo logo
- nav.header__nav
- a(href="#") link
+header.header.container
+ h1
+ img.logo__image(src="../assets/images/logo.png" alt="Tesla")
+ nav.header-nav
+ a.header-nav__item(href="#") Test Drive
+ a.header-nav__item(href="#") Contacts
+ a.header-nav__item(href="#") Shop
+
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index a6adf81..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-
-
-
-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.
-
-
-
diff --git a/src/pages/CyberTrack.vue b/src/pages/CyberTrack.vue
new file mode 100644
index 0000000..d713c61
--- /dev/null
+++ b/src/pages/CyberTrack.vue
@@ -0,0 +1,3 @@
+
+h1 cyber
+
diff --git a/src/pages/TeslaMode.vue b/src/pages/TeslaMode.vue
new file mode 100644
index 0000000..dc0dad9
--- /dev/null
+++ b/src/pages/TeslaMode.vue
@@ -0,0 +1,34 @@
+
+.tesla-mode
+ Header.tesla-mode__header/
+ .intro
+ Footer/
+h1 modelS
+
+
+
diff --git a/src/pages/hub.vue b/src/pages/hub.vue
new file mode 100644
index 0000000..15943c9
--- /dev/null
+++ b/src/pages/hub.vue
@@ -0,0 +1,23 @@
+
+.hub
+ Button.hub__button(@click="openPage(2)") models
+ Button.hub__button(@click="openPage(3)") cyber
+
+
+
+
+
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 418183a..ec8c868 100644
--- a/src/scss/main.scss
+++ b/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;
+}