Upload folder using huggingface_hub

.gitattributes

@@ -44,3 +44,4 @@ client/public/fonts/Invasible[[:space:]]Normal.ttf filter=lfs diff=lfs merge=lfs
 client/public/fonts/Champion.otf filter=lfs diff=lfs merge=lfs -text
 client/public/fonts/Exo2.ttf filter=lfs diff=lfs merge=lfs -text
 client/public/favicon-512x512.png filter=lfs diff=lfs merge=lfs -text
+client/public/fonts/SmileySans-Oblique.otf filter=lfs diff=lfs merge=lfs -text

client/public/fonts/SmileySans-Oblique.otf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:139b5dcbe70d6d52de85a62d148784c6af4bd161e38fdb62ba0c1e7e5065fca6
+size 2003884

client/public/index.html

@@ -49,6 +49,13 @@
         font-style: normal;
         font-display: swap;
       }
+      @font-face {
+        font-family: 'SmileySans';
+        src: url('%PUBLIC_URL%/fonts/SmileySans-Oblique.otf') format('opentype');
+        font-weight: 400;
+        font-style: oblique;
+        font-display: swap;
+      }
     </style>
     <title>TransHub</title>
   </head>

client/src/components/Layout.tsx

@@ -160,7 +160,10 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
       {/* Top Bar */}
       <header className="sticky top-0 z-40 bg-ui-panel/80 backdrop-blur border-b border-ui-border">
         <div className="px-4 sm:px-6 lg:px-8 h-14 flex items-center justify-between">
-          <Link to="/dashboard" className="text-lg font-bold text-ui-neonBlue">TransHub</Link>
+          <Link to="/dashboard" className="text-2xl font-bold text-ui-neonBlue flex items-center" style={{ fontFamily: 'SmileySans, Inter, system-ui, sans-serif' }}>
+            <img src="/favicon.ico" alt="logo" className="h-6 w-6 mr-2" />
+            TransHub
+          </Link>
           <div />
         </div>
       </header>
@@ -180,7 +183,7 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
                     isActive ? 'text-ui-text' : 'text-ui-text/80 hover:text-ui-text'
                   }`}
                 >
-                  <item.icon className="h-5 w-5 mr-3 text-current" />
+                  <img src={`/icons/${item.name.toLowerCase()}.svg`} alt="" className="h-6 w-6 mr-3" />
                   <span>{item.name}</span>
                 </Link>
               );

client/src/index.css

@@ -40,11 +40,11 @@
     @apply text-ui-neonBlue hover:text-ui-neonPink;
   }
   .btn-primary {
-    @apply bg-ui-neonBlue hover:bg-ui-neonBlue/90 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200 shadow-[0_0_10px_rgba(14,165,233,0.55)];
+    @apply bg-ui-neonBlue hover:bg-ui-neonBlue/90 text-white font-semibold py-2 px-4 rounded-2xl transition-colors duration-200 shadow-[0_4px_0_rgba(0,0,0,0.15)];
   }
   
   .btn-secondary {
-    @apply bg-ui-panel hover:bg-ui-panel/80 text-ui-text font-medium py-2 px-4 rounded-lg border border-ui-border transition-colors duration-200;
+    @apply bg-ui-panel hover:bg-ui-panel/80 text-ui-text font-medium py-2 px-4 rounded-2xl border border-ui-border transition-colors duration-200;
   }
   
   .btn-danger {
@@ -56,7 +56,7 @@
   }
   
   .card {
-    @apply bg-ui-panel rounded-xl shadow-sm border border-ui-border p-6;
+    @apply bg-ui-panel rounded-3xl shadow-sm border border-ui-border p-6;
   }
   
   .highlight-cultural {

client/src/pages/Dashboard.tsx

@@ -140,7 +140,7 @@ const Dashboard: React.FC = () => {
                 className="bg-ui-panel rounded-xl shadow-sm border border-ui-border p-6 hover:shadow-md transition neon-border"
               >
                 <div className="flex items-center">
-                  <div className={`p-3 rounded-lg bg-ui-neonPink animate-pulse-glow`}>
+                  <div className={`p-3 rounded-2xl bg-ui-neonBlue/15 hover:animate-pulse-glow`}>
                     <action.icon className="h-6 w-6 text-ui-bg" />
                   </div>
                   <div className="ml-4">