imporve footer and navbar

Author: mateumiralles

welcome_website/components/Footer.tsx

@@ -17,17 +17,33 @@ const footerLinks = [
 
 export default function Footer() {
   return (
-    <div className="h-full bg-gradient-to-t from-(--footer-background) flex justify-center items-center gap-8">
-      {footerLinks.map((link) => (
-        <a
-          key={link.name}
-          target="_blank noopener noreferrer"
-          href={link.url}
-          className="text-(--dappnode-primary) text-lg font-bold hover:underline"
-        >
-          {link.name}
-        </a>
-      ))}
-    </div>
+    <footer className="h-full border-t bg-muted/30">
+      <div className="h-full flex items-center justify-center gap-8 px-6">
+        {footerLinks.map((link) => (
+          <a
+            key={link.name}
+            target="_blank"
+            rel="noopener noreferrer"
+            href={link.url}
+            className="text-sm font-medium text-foreground/70 hover:text-(--dappnode-purple) transition-colors inline-flex items-center gap-1.5"
+          >
+            {link.name}
+            <svg
+              className="w-3 h-3"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+              />
+            </svg>
+          </a>
+        ))}
+      </div>
+    </footer>
   );
 }

welcome_website/components/Layout.tsx

@@ -5,7 +5,7 @@ import Navbar from "./Navbar";
 export default function Layout({ children }) {
   return (
     <div className="min-h-screen flex flex-col">
-      <header className="w-full">
+      <header className="h-28 w-full">
         <Navbar />
       </header>
       <main className="flex-1 w-full">{children}</main>

welcome_website/components/Navbar.tsx

@@ -2,36 +2,46 @@ import React from "react";
 import Link from "next/link";
 import { params } from "../utils/params";
 
+const navLinks = [
+  { name: "Wi-Fi", href: "/wifi" },
+  { name: "VPN", href: "/vpn" },
+  { name: "Local", href: "/local" },
+];
+
 export default function Navbar() {
   return (
-    <nav className="h-full bg-gradient-to-b from-(--navbar-background) text-center overflow-hidden z-99">
-      <div className="absolute mt-4 ml-5">
-        <img
-          className="w-14 h-14"
-          src={params.basePath + "/dappnode-logo.png"}
-          alt="Dappnode Logo"
-        />
-      </div>
-      <div>
-        <div className="mt-5 flex justify-center">
-          <h1 className="text-4xl font-bold mb-4">
-            Welcome to{" "}
-            <span className="text-(--dappnode-primary)">Dappnode</span>!
-          </h1>
-        </div>
-        <div className="flex justify-center gap-3 mt-2">
-          <Link href="/" className="text-(--link-color) hover:underline">
-            Home
-          </Link>
-          <Link href="/wifi" className="text-(--link-color) hover:underline">
-            Wi-Fi
-          </Link>
-          <Link href="/local" className="text-(--link-color) hover:underline">
-            Local
-          </Link>
-          <Link href="/vpn" className="text-(--link-color) hover:underline">
-            Vpn
-          </Link>
+    <nav className="h-full border-b bg-muted/30 backdrop-blur ">
+      <div className="h-full flex flex-col items-center justify-evenly px-6 max-w-7xl mx-auto gap-2 mt-3">
+        {/* Logo and Brand */}
+        <Link
+          href="/"
+          className="flex items-center gap-3 hover:opacity-80 transition-opacity"
+        >
+          <img
+            className="w-12 h-12"
+            src={params.basePath + "/dappnode-logo.png"}
+            alt="Dappnode Logo"
+          />
+          <div className="flex flex-col">
+            <span className="font-bold text-3xl leading-none text-(--dappnode-purple)">
+              Dappnode
+            </span>
+            <span className="text-sm text-muted-foreground">Setup Guide</span>
+          </div>
+        </Link>
+
+        {/* Navigation Links */}
+        <div className="flex items-center gap-14">
+          {navLinks.map((link) => (
+            <Link
+              key={link.name}
+              href={link.href}
+              className="text-sm font-medium text-foreground/80 hover:text-(--dappnode-purple) transition-colors relative group"
+            >
+              {link.name}
+              <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-(--dappnode-purple) group-hover:w-full transition-all duration-300"></span>
+            </Link>
+          ))}
         </div>
       </div>
     </nav>

welcome_website/styles/globals.css

@@ -50,7 +50,6 @@
   /* Dappnode Brand Colors */
   --dappnode-primary: #c013e9;
   --dappnode-purple: #612dcb;
-  --dappnode-purple-rgb: 97, 45, 203; /* RGB values for opacity usage */
   --dappnode-dark: #393e46;
   --dappnode-light: #eee;
   --dappnode-blue: #082c41;
@@ -87,10 +86,6 @@
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
-
-  --navbar-background: rgba(var(--dappnode-purple-rgb), 0.4);
-  --footer-background: rgba(var(--dappnode-purple-rgb), 0.4);
-  --link-color: var(--dappnode-purple);
 }
 
 .dark {