Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
m1rl0k merged 8 commits into from
Feb 19, 2026
Merged

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

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
94e5540
feat: add prominent Login/Sign Up button to navigation bar
chris-stinemetz Feb 19, 2026
fdbbd23
fix: disable login button glow animation for prefers-reduced-motion
chris-stinemetz Feb 19, 2026
5601224
fix: make login URL configurable via VITE_CTX_LOGIN_URL env var
chris-stinemetz Feb 19, 2026
6ee067e
fix: use light-theme-safe colors for mobile login link
chris-stinemetz Feb 19, 2026
46e2853
fix: default login URL to relative /login path
chris-stinemetz Feb 19, 2026
2ac69d7
docs: add VITE_CTX_LOGIN_URL to .env.example
chris-stinemetz Feb 19, 2026
832bc9d
ci: pass VITE_CTX_LOGIN_URL secret to landing page build
chris-stinemetz Feb 19, 2026
78f6d58
fix: make login URL fallback base-path-aware
chris-stinemetz Feb 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 60 additions & 0 deletions src/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Comment thread
chris-stinemetz marked this conversation as resolved.
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;
Expand Down Expand Up @@ -939,6 +987,18 @@ body::before {
color: var(--text-primary);
}

.mobile-login-link {
color: #00ffcc !important;
Comment thread
chris-stinemetz marked this conversation as resolved.
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;
}

.mobile-menu-cta {
margin-top: auto;
padding-top: 24px;
Expand Down
14 changes: 13 additions & 1 deletion src/routes/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
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';

let { children } = $props();

Expand Down Expand Up @@ -117,6 +117,10 @@
{/if}
</button>
<a href="#demo" class="btn btn-primary desktop-only">Request Demo</a>
<a href="https://dev.context-engine.ai/login" class="btn btn-login desktop-only">
Comment thread
chris-stinemetz marked this conversation as resolved.
Outdated
<LogIn size={16} />
Login / Sign Up
</a>
<button
class="icon-btn mobile-menu-btn"
onclick={toggleMobileMenu}
Expand Down Expand Up @@ -179,6 +183,14 @@
<Mail size={20} />
Support
</a>
<a
href="https://dev.context-engine.ai/login"
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>
Expand Down