feat: add styles to home page

Author: Abhijna-Raghavendra

src/frontend/src/components/Home.vue

@@ -8,15 +8,22 @@ const maps = await getMaps(user);
 </script>
 
 <template>
-  <div id="navbar">
-    <h5>Hey {{ user }} !</h5>
-  </div>
+  <header>
+    <nav>
+      <div class="nav-wrapper">
+        <p class="brand">Domain Forge</p>
+        <ul class="nav-links">
+          <li><a href="https://github.com/mdgspace/domain-forge/blob/master/docs/users/README.md">Docs</a></li>
+        </ul>
+      </div>
+    </nav>
+  </header>
   <div id="home-container">
     <div id="home-heading">
-      <h3>Your subdomains: </h3>
+      <h3>{{ user }}'s subdomains: </h3>
     </div>
     <br>
-    <table id="tableComponent" style="display:table; width:100%;">
+    <table id="tableComponent" style="display:table; width:100%; padding: 0px 30px">
       <thead>
         <tr>
           <th v-for="field in fields" style="padding:5px;background-color: #ffffff; color: #121212;border-bottom: 1px solid #121212; border-top:1px solid #121212;font-weight: 900;">
@@ -44,11 +51,13 @@ const maps = await getMaps(user);
     <modal v-show="showModal" @close-modal="showModal = false" />
     <div style="text-align: center;"><button @click="showModal = true">+ Add</button></div>
   </div>
+  <footer>
+    <p>Made with ❤️ by MDG Space</p>
+  </footer>
 </template>
 <script>
 import modal from './modal.vue'
 import deletemodal from './deletemodal.vue'
-import { deleteSubDomain } from '../utils/delete.ts'
 export default {
   components: { modal,deletemodal },
   data() {
@@ -60,3 +69,61 @@ export default {
   },
 }
 </script>
+<style scoped>
+
+nav {
+  width: 100%; 
+  position: fixed; 
+  top: 0;
+}
+
+header {
+  margin-bottom: 20px;
+}
+.nav-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px; 
+}
+
+.brand {
+  margin: 0;
+  font-size: 24px;
+}
+
+.nav-links {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+}
+
+.nav-links li {
+  margin-right: 20px;
+}
+
+.nav-links li:last-child {
+  margin-right: 0;
+}
+
+.nav-links a {
+  text-decoration: none;
+  color: #333;
+  font-weight: bold;
+  padding: 10px; 
+}
+footer {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  background-color: #ffffff;
+  padding: 20px 0;
+}
+
+footer p {
+  margin: 0;
+  text-align: center;
+}
+</style>

src/frontend/src/style.css

@@ -22,6 +22,8 @@
 
 body {
   display: inline;
+  overflow: hidden; 
+  margin: 0; 
 }
 
 #app {
@@ -51,6 +53,7 @@ body {
   display:flex;
   flex-direction: column;
   width:40rem;
+  margin-top: 30px;
 }
 #home-container{
   display:flex;