add a nav bar

components/navbar.js

@@ -4,8 +4,9 @@ class CustomNavbar extends HTMLElement {
     this.shadowRoot.innerHTML = `
       <style>
         nav {
-          background: rgba(255, 255, 255, 0.95);
-          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+          background: rgba(255, 255, 255, 0.98);
+          backdrop-filter: blur(10px);
+          box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
           position: fixed;
           top: 0;
           left: 0;
@@ -15,8 +16,9 @@ class CustomNavbar extends HTMLElement {
           display: flex;
           justify-content: space-between;
           align-items: center;
+          transition: all 0.3s ease;
         }
-        .logo {
+.logo {
           color: #ec4899;
           font-weight: bold;
           font-size: 1.5rem;
@@ -33,11 +35,12 @@ class CustomNavbar extends HTMLElement {
         .desktop-menu a {
           color: #4b5563;
           text-decoration: none;
-          font-weight: 500;
-          transition: color 0.3s;
+          font-weight: 600;
+          transition: all 0.3s;
           position: relative;
+          padding: 0.5rem 0;
         }
-        .desktop-menu a:hover {
+.desktop-menu a:hover {
           color: #ec4899;
         }
         .desktop-menu a::after {
@@ -57,9 +60,13 @@ class CustomNavbar extends HTMLElement {
           display: none;
           background: none;
           border: none;
-          color: #4b5563;
+          color: #ec4899;
           font-size: 1.5rem;
           cursor: pointer;
+          transition: transform 0.3s;
+        }
+        .mobile-menu-button:hover {
+          transform: scale(1.1);
         }
         .mobile-menu {
           display: none;
@@ -68,10 +75,21 @@ class CustomNavbar extends HTMLElement {
           left: 0;
           right: 0;
           background: white;
-          padding: 1rem;
-          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+          padding: 1rem 2rem;
+          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+          animation: slideDown 0.3s ease-out;
         }
-        .mobile-menu ul {
+        @keyframes slideDown {
+          from {
+            opacity: 0;
+            transform: translateY(-10px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+.mobile-menu ul {
           list-style: none;
           padding: 0;
           margin: 0;
@@ -79,14 +97,19 @@ class CustomNavbar extends HTMLElement {
         .mobile-menu li {
           padding: 0.75rem 0;
           border-bottom: 1px solid #f3f4f6;
+          transition: all 0.3s;
+        }
+        .mobile-menu li:hover {
+          background: #fdf2f8;
         }
         .mobile-menu a {
           color: #4b5563;
           text-decoration: none;
-          font-weight: 500;
+          font-weight: 600;
           display: block;
+          padding: 0.5rem 0;
         }
-        .mobile-menu a:hover {
+.mobile-menu a:hover {
           color: #ec4899;
         }
         @media (max-width: 768px) {

index.html

@@ -176,6 +176,5 @@
             zoom: 0.85
         });
     </script>
-<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>