Updated icons and project structure

src/App.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- <router-link to="/">Home</router-link>
-    <router-link to="/about">About</router-link>
-    <router-link to="/referenceId">Reference ID Tracker</router-link> -->
+        <router-link to="/about">About</router-link>
+        <router-link to="/referenceId">Reference ID Tracker</router-link> -->
     <router-view></router-view>
 </template>

src/main.js

@@ -1,22 +1,6 @@
 import { createApp } from "vue";
-import { createRouter, createWebHashHistory } from "vue-router";
-
 import "./style.css";
 import App from "./App.vue";
-import Home from "./views/Home.vue";
-import About from "./views/About.vue";
-import ReferenceID from "./ReferenceID.vue";
-
-const routes = [
-  { path: "/", component: Home },
-  { path: "/about", component: About },
-  { path: "/referenceId/", component: ReferenceID },
-];
-
-const router = createRouter({
-  // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
-  history: createWebHashHistory(),
-  routes, // short for `routes: routes`
-});
+import router from "./router";
 
 createApp(App).use(router).mount("#app");

src/router/index.js

@@ -0,0 +1,28 @@
+import { createRouter, createWebHistory } from "vue-router";
+import Home from "../views/Home.vue";
+import ReferenceID from "../views/ReferenceID.vue";
+
+const routes = [
+  {
+    path: "/",
+    name: "home",
+    component: Home,
+  },
+  {
+    path: "/about",
+    name: "about",
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () =>
+      import(/* webpackChunkName: "about" */ "../views/About.vue"),
+  },
+  { path: "/referenceId", name: "referenceId", component: ReferenceID },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+export default router;

src/views/Home.vue

@@ -1,5 +1,12 @@
 <template>
     <div class="home">
-        <h1>Home</h1>
+        <h1>Engagement Orchestration - Microservice Examples</h1>
+        <h2>Introduction</h2>
+        <p>This site provides a set of microservices to augment Engagement Orchestration using the <a
+                href="https://em-docs.verint.com/15_3/em-integration/Content/AdaptiveFramework/Adaptive_Framework_Components.htm?Highlight=Adaptive%20Framework">Adaptive
+                Framework</a> Integration.</p>
+        <h2>Services Available</h2>
+        <h3><a href=/referenceId>Reference ID</a></h3>
+        <p>/referenceId </p>
     </div>
 </template>

src/views/ReferenceID.vue

@@ -1,9 +1,9 @@
 <script setup>
 import { ref } from 'vue'
 
-import ContactTable from './components/ContactTable.vue'
-import ContactsSummary from './components/ContactsSummary.vue';
-import Error from './components/Error.vue';
+import ContactTable from '../components/ContactTable.vue'
+import ContactsSummary from '../components/ContactsSummary.vue';
+import Error from '../components/Error.vue';
 
 const referenceId = ref('')
 const contactData = ref(null)
@@ -54,7 +54,5 @@ function fetchData() {
 
   </div>
 </template>
-<style scoped>
-
-</style>
+<style scoped></style>