add footer navigation bar with icon

components/footer.js

@@ -19,17 +19,31 @@ class CustomFooter extends HTMLElement {
         }
         .links {
           display: flex;
-          gap: 1.5rem;
+          gap: 1rem;
           margin-bottom: 1rem;
+          justify-content: center;
+          width: 100%;
         }
-        a {
+a {
           color: #a0aec0;
           text-decoration: none;
-          transition: color 0.2s;
-          font-size: 0.875rem;
+          transition: all 0.2s;
+          font-size: 0.75rem;
+          width: 60px;
+          text-align: center;
         }
         a:hover {
           color: white;
+          transform: translateY(-2px);
+        }
+        a i {
+          transition: all 0.2s;
+        }
+        a:hover i {
+          transform: scale(1.1);
+        }
+a:hover {
+          color: white;
         }
         .copyright {
           color: #718096;
@@ -44,12 +58,24 @@ class CustomFooter extends HTMLElement {
       <footer>
         <div class="container">
           <div class="links">
-            <a href="/about">About</a>
-            <a href="/docs">Documentation</a>
-            <a href="/privacy">Privacy</a>
-            <a href="/contact">Contact</a>
+            <a href="/about" class="flex flex-col items-center">
+              <i data-feather="info" class="w-5 h-5 mb-1"></i>
+              <span>About</span>
+            </a>
+            <a href="/docs" class="flex flex-col items-center">
+              <i data-feather="book" class="w-5 h-5 mb-1"></i>
+              <span>Docs</span>
+            </a>
+            <a href="/privacy" class="flex flex-col items-center">
+              <i data-feather="shield" class="w-5 h-5 mb-1"></i>
+              <span>Privacy</span>
+            </a>
+            <a href="/contact" class="flex flex-col items-center">
+              <i data-feather="mail" class="w-5 h-5 mb-1"></i>
+              <span>Contact</span>
+            </a>
           </div>
-          <p class="copyright">&copy; ${new Date().getFullYear()} ESP32 Command Center. All rights reserved.</p>
+<p class="copyright">&copy; ${new Date().getFullYear()} ESP32 Command Center. All rights reserved.</p>
           <p class="version">Firmware v2.1.4 | Dashboard v1.0.0</p>
         </div>
       </footer>

index.html

@@ -180,10 +180,11 @@
     </main>
 
     <custom-footer></custom-footer>
-
     <script src="components/navbar.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="components/footer.js"></script>
-    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="script.js"></script>
     <script>
         feather.replace();
         

settings.html

@@ -135,10 +135,11 @@
     </main>
 
     <custom-footer></custom-footer>
-
     <script src="components/navbar.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="components/footer.js"></script>
-    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="script.js"></script>
     <script>feather.replace();</script>
 </body>
 </html>