src/App.vue

@@ -1,15 +1,53 @@
 <template>
   <div id="app">
-    <router-view />
+    <Header />
+    <main>
+      <router-view />
+    </main>
   </div>
 </template>
 
+<script>
+import Header from "@/components/Header";
+
+export default {
+  name: "App",
+  components: {
+    Header
+  }
+};
+</script>
+
 <style lang="less">
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  font-family: Montserrat, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
+  color: @text-color;
-  color: #2c3e50;
+}
+
+main {
+  margin-top: 58px;
+  padding: 1rem;
+
+  h1 {
+    font-size: 28px;
+  }
+
+  h2 {
+    width: -webkit-max-content;
+    width: -moz-max-content;
+    width: max-content;
+    padding-right: 1rem;
+    font-size: 26px;
+    border-bottom: 2px solid @primary-color;
+    margin-bottom: 1.35rem;
+    text-align: left;
+  }
+
+  h3 {
+    font-size: 22px;
+    text-transform: capitalize;
+  }
 }
 </style>

src/components/Header.vue

@@ -0,0 +1,35 @@
+<template>
+  <nav class="main-nav">
+    <img src="https://www.cycloid.io/themes/cycloid/images/owl_logo.png" alt="Cycloid.io" />
+    <h1>Fruits</h1>
+  </nav>
+</template>
+
+<script>
+export default {
+  name: "Header"
+};
+</script>
+
+<style lang="less">
+nav {
+  display: flex;
+  align-items: center;
+  background-color: @secondary-color;
+  padding: 0.5rem;
+  box-shadow: 0 19px 34px -15px #d2d2f2;
+
+  &.main-nav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: calc(58px - 0.5rem * 2);
+    img {
+      width: 35px;
+      height: 35px;
+      margin-right: 1rem;
+    }
+  }
+}
+</style>