feat(frontend): enhance navbar RootAccess branding

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: Uttam-Mahata

frontend/src/app/app.component.html

@@ -15,7 +15,13 @@
             <div class="relative">
               <img src="rootaccess.jpeg" alt="RootAccess Logo" class="w-10 h-10 rounded-full object-cover transition-transform duration-300 group-hover:scale-110" />
             </div>
-            <span class="text-xl font-bold bg-gradient-to-r from-red-600 via-red-500 to-red-600 dark:from-red-500 dark:via-red-400 dark:to-red-500 bg-clip-text text-transparent group-hover:from-red-700 group-hover:via-red-600 group-hover:to-red-700 dark:group-hover:from-red-400 dark:group-hover:via-red-300 dark:group-hover:to-red-400 transition-all duration-300">
+            <svg class="nav-brand-mark w-6 h-6 text-red-600 dark:text-red-400 transition-transform duration-300 group-hover:rotate-6 group-hover:scale-110" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+              <path d="M12 2L20 6.5V12.5C20 17.4 16.8 21.9 12 23C7.2 21.9 4 17.4 4 12.5V6.5L12 2Z" fill="currentColor" fill-opacity="0.14"/>
+              <path d="M12 2L20 6.5V12.5C20 17.4 16.8 21.9 12 23C7.2 21.9 4 17.4 4 12.5V6.5L12 2Z" stroke="currentColor" stroke-width="1.4"/>
+              <path d="M8.2 9.3H15.8M9.2 12H14.8M10 14.7H12.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+              <circle cx="15.8" cy="14.7" r="1.1" fill="currentColor"/>
+            </svg>
+            <span class="nav-brand-text text-xl font-bold bg-gradient-to-r from-red-600 via-red-500 to-red-600 dark:from-red-500 dark:via-red-400 dark:to-red-500 bg-clip-text text-transparent group-hover:from-red-700 group-hover:via-red-600 group-hover:to-red-700 dark:group-hover:from-red-400 dark:group-hover:via-red-300 dark:group-hover:to-red-400 transition-all duration-300">
               RootAccess
             </span>
           </a>

frontend/src/app/app.component.scss

@@ -1,2 +1,13 @@
-// Component-specific styles (if needed)
-// Most styling is now handled by Tailwind utility classes
+.nav-brand-text {
+  font-family: 'Sora', 'Space Grotesk', 'Avenir Next', 'Segoe UI', sans-serif;
+  letter-spacing: 0.03em;
+  text-shadow: 0 6px 18px rgba(239, 68, 68, 0.2);
+}
+
+.dark .nav-brand-text {
+  text-shadow: 0 8px 20px rgba(239, 68, 68, 0.28);
+}
+
+.nav-brand-mark {
+  filter: drop-shadow(0 6px 12px rgba(239, 68, 68, 0.22));
+}