Defined home route

src/Funnel1.vue

@@ -1,7 +1,43 @@
 <template>
 <router-view></router-view>
+<div class="container-fluid">
+    <div class="row">
+        <div class="col my-3 d-flex justify-content-center">
+            <vehicleImage />
+        </div>
+    </div>
+    <div class="row">
+        <div class="col">
+            <p class="text-center text-secondary fs-5 mb-4">Select a year to get started</p>
+            <p class="text-center fs-6 fw-bold">What year is your vehichle?</p>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col">
+            <buttonFunnel />
+            <confetti />
+        </div>
+    </div>
+    <div class="row mt-5">
+        <imageButton btnText="windshield-damage.svg" altText="Windshield" damageTitle="Windshield" ariaLabel="Windshield" />
+        <imageButton btnText="side-window-damage.svg" altText="Side Window" damageTitle="Side door" ariaLabel="Side door" />
+        <imageButton btnText="back-glass-damage.svg" altText="Back Glass" damageTitle="Back glass" ariaLabel="Back glass" />
+    </div>
+</div>
 </template>
 
 <script>
-
+import buttonFunnel from './components/buttons/buttonFunnel';
+import vehicleImage from './components/vehicleImage';
+import imageButton from './components/imageButton';
+import confetti from './components/confetti';
+export default {
+    name: 'App',
+    components: {
+        buttonFunnel,
+        vehicleImage,
+        imageButton,
+        confetti
+    }
+}
 </script>

src/router/index.js

@@ -1,6 +1,7 @@
 import { createWebHistory, createRouter } from "vue-router";
 import { getRouteData } from "@/utilities/route-compile.js";
 import NotFound from "@/layouts/NotFound.vue";
+import Home from "@/layouts/Home.vue";
 
 const routes = [
   {
@@ -8,6 +9,11 @@ const routes = [
     name: "NotFound",
     component: NotFound,
   },
+  {
+    path: "/",
+    Name: "Home",
+    component: Home
+  },
 ];
 
 const router = createRouter({