basic footer

docs/.vuepress/components/CustomFooter.vue

 <template>
-    My beatufiul footer
-</template>
-
-<script setup>
-</script>
\ No newline at end of file
+    <footer class="footer py-3 mt-3 bg-light text-dark">
+      <div class="container">
+        <!-- Contact Section -->
+        <div class="row mb-3 text-center">
+          <div class="col-lg-4 col-md-6 mx-auto">
+            <h4 class="mb-2">Contact</h4>
+            <div>
+              <p><strong>Location:</strong><br> 
+                <a href="https://www.google.com/maps/dir/50.839552,5.7147392/Duboisdomein+30,+6229+GT+Maastricht" class="footer-link">
+                  Duboisdomein 30, 6229 GT Maastricht
+                </a>
+              </p>
+              <p><strong>Email:</strong><br> 
+                <a href="mailto:msp-igem@maastrichtuniversity.nl" class="footer-link">
+                  msp-igem@maastrichtuniversity.nl
+                </a>
+              </p>
+            </div>
+          </div>
+        </div>
+  
+        <hr class="border-dark opacity-50">
+  
+        <!-- License and Repository Info -->
+        <div class="row text-center">
+          <div class="col">
+            <p class="mb-1">
+              <small>© 2024 - Content on this site is licensed under a 
+                <a class="footer-link" href="https://creativecommons.org/licenses/by/4.0/" rel="license">
+                  Creative Commons Attribution 4.0 International license</a>.
+              </small>
+            </p>
+            <p class="mb-1">
+              <small>
+                The repository used to create this website is available at 
+                <a href="https://gitlab.igem.org/2024/msp-maastricht" class="footer-link">
+                  gitlab.igem.org/2024/msp-maastricht</a>.
+              </small>
+            </p>
+          </div>
+        </div>
+      </div>
+    </footer>
+  </template>
+  
+  <script setup>
+  </script>
+  
+  <style scoped>
+  /* General Styling */
+  footer {
+    background-color: #eaf9f9; /* Light oceanic background */
+    color: #003d5b; /* Deep blue text for contrast */
+    padding: 1.5rem 0; /* Reduced vertical padding */
+  }
+  
+  h4 {
+    font-weight: bold;
+    color: #0073e6; /* Ocean blue for headings */
+  }
+  
+  .footer-link {
+    color: #00b4c5; /* Teal links */
+    text-decoration: none;
+    border-bottom: 1px solid transparent;
+    transition: border-bottom 0.3s ease;
+  }
+  
+  .footer-link:hover {
+    border-bottom: 1px solid #00b4c5; /* Teal underline on hover */
+  }
+  
+  hr {
+    border-color: #00b4c5; /* Teal border for separation */
+  }
+  
+  .text-center p {
+    margin-bottom: 0.75rem; /* Reduced bottom margin for tighter layout */
+  }
+  
+  .text-center small {
+    display: block;
+    text-align: center;
+  }
+  
+  .opacity-50 {
+    opacity: 0.5;
+  }
+  </style>
+  
\ No newline at end of file

docs/.vuepress/components/TeamPage.vue

 <template>
-    <div style="padding: 3rem;">
+    
 
 
 <h1><b> Meet the minds behind Natronaut! </b></h1> 
@@ -160,9 +160,6 @@
   />
 </div>
 
-
-</div>
-
 </template>