Add buttons, text input, vehicle image components.

Test for usability.

src/App.vue

@@ -1,26 +1,25 @@
 <template>
-  <HeaderNav/>
+  <buttonPrimary/>
-  <div class="container">
+  <buttonSecondary/>
-    <div class="row">
+  <buttonFunnel/>
-      <div class="col">
+  <textInput/>
-        <HelloWorld msg="VueJS with Bootstrap"/>
+  <vehicleImage/>
-      </div>
-    </div>
-  </div>
-  <Colors/>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue';
+import buttonPrimary from './components/buttons/buttonPrimary';
-import HeaderNav from './components/HeaderNav';
+import buttonSecondary from './components/buttons/buttonSecondary';
-import Colors from './components/Colors';
+import buttonFunnel from './components/buttons/buttonFunnel';
-
+import textInput from './components/forms/textInput';
+import vehicleImage from './components/vehicleImage';
 export default {
   name: 'App',
   components: {
-    HelloWorld,
+    buttonPrimary,
-    HeaderNav,
+    buttonSecondary,
-    Colors
+    buttonFunnel,
+    textInput,
+    vehicleImage
   }
 }
 </script>

src/assets/scss/components/_buttons.scss

@@ -1,3 +1,4 @@
+//Custom button styles
 .btn {
   &.btn-secondary {
     position: relative;//Required for :after pseduo to position correctly

src/assets/scss/components/_vehicle-image.scss

@@ -0,0 +1,6 @@
+.vehicle-image {
+  padding: 6px;
+  &.blur {
+    filter: blur(6px);
+  }
+}

src/assets/scss/custom.scss

@@ -19,3 +19,4 @@
 //Custom Components CSS
 @import "./components/_navbar";
 @import "./components/_buttons";
+@import "./components/_vehicle-image";

src/components/buttons/buttonFunnel.vue

@@ -0,0 +1,3 @@
+<template>
+  <button type="button" class="btn btn-funnel border rounded w-100 text-start">2021</button>
+</template>

src/components/buttons/buttonPrimary.vue

@@ -0,0 +1,3 @@
+<template>
+  <button type="button" class="btn btn-primary">Primary</button>
+</template>

src/components/buttons/buttonSecondary.vue

@@ -0,0 +1,3 @@
+<template>
+  <button type="button" class="btn btn-secondary">Secondary</button>
+</template>

src/components/forms/textInput.vue

@@ -0,0 +1,7 @@
+<template>
+  <div><!-- Add helper classes to wrapper div if margin is needed -->
+    <!-- Hide label but still accessible to screen reader with .visually-hidden -->
+    <label for="exampleFormControlInput1" class="form-label visually-hidden">Email address</label>
+    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
+  </div>
+</template>

src/components/vehicleImage.vue

@@ -0,0 +1,3 @@
+<template>
+  <img class="vehicle-image blur img-fluid" src="https://placekitten.com/600/300" />
+</template>