Merge pull request #225 from Context-Engine-AI/feature/login-signup-nav

feat: add prominent Login/Sign Up button to navigation bar

Author: m1rl0k

.env.example

@@ -590,3 +590,6 @@ OPENLIT_ENVIRONMENT=development
 # End of Auth & Bridge Configuration
 # ---------------------------------------------------------------------------
 
+
+# Landing page login URL (used by SvelteKit frontend)
+# VITE_CTX_LOGIN_URL=https://dev.context-engine.ai/login

.github/workflows/deploy.yml

@@ -42,6 +42,7 @@ jobs:
         env:
           NODE_ENV: production
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          VITE_CTX_LOGIN_URL: ${{ secrets.VITE_CTX_LOGIN_URL }}
         run: npm run build
 
       - name: Upload artifact

src/app.scss

@@ -234,6 +234,54 @@ body::before {
   font-size: 15px;
 }
 
+/* Login / Sign Up - attention-grabbing */
+.btn-login {
+  background: transparent;
+  color: #00ffcc;
+  border: 2px solid #00ffcc;
+  padding: 8px 20px;
+  font-weight: 600;
+  font-size: 14px;
+  letter-spacing: 0.02em;
+  box-shadow: 0 0 12px rgba(0, 255, 204, 0.3), inset 0 0 12px rgba(0, 255, 204, 0.06);
+  animation: loginGlow 2s ease-in-out infinite alternate;
+  position: relative;
+}
+
+.btn-login:hover {
+  background: rgba(0, 255, 204, 0.12);
+  box-shadow: 0 0 24px rgba(0, 255, 204, 0.5), inset 0 0 16px rgba(0, 255, 204, 0.1);
+  transform: translateY(-1px);
+  color: #fff;
+  border-color: #00ffcc;
+}
+
+@keyframes loginGlow {
+  0% { box-shadow: 0 0 10px rgba(0, 255, 204, 0.25), inset 0 0 10px rgba(0, 255, 204, 0.04); }
+  100% { box-shadow: 0 0 20px rgba(0, 255, 204, 0.45), inset 0 0 14px rgba(0, 255, 204, 0.08); }
+}
+
+[data-theme="light"] .btn-login {
+  color: #00896b;
+  border-color: #00896b;
+  box-shadow: 0 0 12px rgba(0, 137, 107, 0.25), inset 0 0 10px rgba(0, 137, 107, 0.05);
+}
+
+[data-theme="light"] .btn-login:hover {
+  background: rgba(0, 137, 107, 0.1);
+  box-shadow: 0 0 22px rgba(0, 137, 107, 0.4), inset 0 0 14px rgba(0, 137, 107, 0.08);
+  color: #005d49;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .btn-login {
+    animation: none;
+  }
+  .btn-login:hover {
+    transform: none;
+  }
+}
+
 .icon-btn {
   display: flex;
   align-items: center;
@@ -939,6 +987,29 @@ body::before {
     color: var(--text-primary);
   }
 
+  .mobile-login-link {
+    color: #00ffcc !important;
+    font-weight: 600;
+    border: 1px solid rgba(0, 255, 204, 0.3);
+    background: rgba(0, 255, 204, 0.06);
+  }
+
+  .mobile-login-link:hover {
+    background: rgba(0, 255, 204, 0.12) !important;
+    color: #fff !important;
+  }
+
+  [data-theme="light"] .mobile-login-link {
+    color: #00896b !important;
+    border-color: rgba(0, 137, 107, 0.35);
+    background: rgba(0, 137, 107, 0.06);
+  }
+
+  [data-theme="light"] .mobile-login-link:hover {
+    background: rgba(0, 137, 107, 0.12) !important;
+    color: #005d49 !important;
+  }
+
   .mobile-menu-cta {
     margin-top: auto;
     padding-top: 24px;

src/routes/+layout.svelte

@@ -3,7 +3,9 @@
 	import { onMount } from 'svelte';
 	import { page } from '$app/stores';
 	import { base } from '$app/paths';
-	import { Sun, Moon, Mail, Github, Layers, Menu, X, Key } from 'lucide-svelte';
+	import { Sun, Moon, Mail, Github, Layers, Menu, X, Key, LogIn } from 'lucide-svelte';
+
+	const loginUrl = import.meta.env.VITE_CTX_LOGIN_URL || `${base}/login`;
 
 	let { children } = $props();
 
@@ -117,6 +119,10 @@
 			{/if}
 		</button>
 		<a href="#demo" class="btn btn-primary desktop-only">Request Demo</a>
+		<a href={loginUrl} class="btn btn-login desktop-only">
+			<LogIn size={16} />
+			Login / Sign Up
+		</a>
 		<button
 			class="icon-btn mobile-menu-btn"
 			onclick={toggleMobileMenu}
@@ -179,6 +185,10 @@
 			<Mail size={20} />
 			Support
 		</a>
+		<a href={loginUrl} class="mobile-nav-link mobile-login-link" onclick={closeMobileMenu}>
+			<LogIn size={20} />
+			Login / Sign Up
+		</a>
 		<div class="mobile-menu-cta">
 			<a href="#demo" class="btn btn-primary btn-lg" onclick={closeMobileMenu}>Request Demo</a>
 		</div>