I want to improve my website, please help me, make it more modern and beautiful

README.md

@@ -1,10 +1,13 @@
 ---
-title: Safeswitch Evolution
-emoji: 😻
-colorFrom: red
-colorTo: green
+title: SafeSwitch Evolution  🚗✨
+colorFrom: purple
+colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,4 @@
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+   <link rel="stylesheet" href="style.css">
+   <script src="components/navbar.js"></script>
+   <script src="components/footer.js"></script>

components/navbar.js

@@ -0,0 +1,120 @@
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          z-index: 1000;
+          background: rgba(255, 255, 255, 0.98);
+          backdrop-filter: blur(10px);
+          box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+          transition: all 0.3s ease;
+        }
+        
+        .navbar-container {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 20px;
+        }
+        
+        .logo {
+          height: 40px;
+        }
+        
+        .nav-links {
+          display: flex;
+          gap: 30px;
+        }
+        
+        .nav-link {
+          color: var(--dark);
+          text-decoration: none;
+          font-weight: 500;
+          transition: color 0.3s ease;
+          position: relative;
+        }
+        
+        .nav-link:hover {
+          color: var(--primary);
+        }
+        
+        .nav-link::after {
+          content: '';
+          position: absolute;
+          bottom: -5px;
+          left: 0;
+          width: 0;
+          height: 2px;
+          background: var(--primary);
+          transition: width 0.3s ease;
+        }
+        
+        .nav-link:hover::after {
+          width: 100%;
+        }
+        
+        .cta-button {
+          background: var(--primary);
+          color: white;
+          padding: 10px 20px;
+          border-radius: 50px;
+          font-weight: 600;
+          transition: all 0.3s ease;
+        }
+        
+        .cta-button:hover {
+          background: var(--primary-dark);
+          transform: translateY(-2px);
+          box-shadow: 0 4px 12px rgba(58, 90, 255, 0.25);
+        }
+        
+        .mobile-menu-button {
+          display: none;
+          background: none;
+          border: none;
+          cursor: pointer;
+        }
+        
+        @media (max-width: 768px) {
+          .nav-links {
+            display: none;
+          }
+          
+          .mobile-menu-button {
+            display: block;
+          }
+        }
+      </style>
+      
+      <div class="navbar-container">
+        <a href="/">
+          <img src="/assets/logo.svg" alt="SafeSwitch" class="logo">
+        </a>
+        
+        <div class="nav-links">
+          <a href="/#privatpersoner" class="nav-link">För privatpersoner</a>
+          <a href="/#foretag" class="nav-link">För företag</a>
+          <a href="/#about" class="nav-link">Om oss</a>
+          <a href="/#nyheter" class="nav-link">Nyheter</a>
+          <a href="/#bokademo" class="cta-button">Boka demo</a>
+        </div>
+        
+        <button class="mobile-menu-button">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+          </svg>
+        </button>
+      </div>
+    `;
+  }
+}
+
+customElements.define('custom-navbar', CustomNavbar);