Add polished login landing page with feature highlights
All checks were successful
CI / Format (push) Successful in 2s
CI / Clippy (push) Successful in 3m25s
CI / Security Audit (push) Successful in 1m38s
CI / Tests (push) Successful in 4m41s

Dark-themed login page with shield logo, feature grid, gradient
sign-in button, subtle grid background, and glow effect.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Sharang Parnerkar
2026-03-08 17:51:41 +01:00
parent b95ce44fb9
commit d490359591
2 changed files with 203 additions and 8 deletions

View File

@@ -44,14 +44,67 @@ pub fn AppShell() -> Element {
#[component]
fn LoginPage() -> Element {
rsx! {
div { class: "flex items-center justify-center h-screen bg-gray-950",
div { class: "text-center",
h1 { class: "text-3xl font-bold text-white mb-4", "Compliance Scanner" }
p { class: "text-gray-400 mb-8", "Sign in to access the dashboard" }
a {
href: "/auth",
class: "px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-500 transition-colors font-medium",
"Sign in with Keycloak"
div { class: "login-page",
div { class: "login-bg-grid" }
div { class: "login-bg-glow" }
div { class: "login-container",
div { class: "login-card",
div { class: "login-logo",
svg {
width: "48",
height: "48",
view_box: "0 0 24 24",
fill: "none",
stroke: "currentColor",
stroke_width: "1.5",
stroke_linecap: "round",
stroke_linejoin: "round",
path { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }
path { d: "M9 12l2 2 4-4" }
}
}
h1 { class: "login-title", "Compliance Scanner" }
p { class: "login-subtitle",
"AI-powered security scanning, SBOM analysis, and compliance monitoring"
}
div { class: "login-features",
div { class: "login-feature",
span { class: "login-feature-icon", "\u{25C6}" }
span { "SAST & CVE Detection" }
}
div { class: "login-feature",
span { class: "login-feature-icon", "\u{25C6}" }
span { "SBOM & License Compliance" }
}
div { class: "login-feature",
span { class: "login-feature-icon", "\u{25C6}" }
span { "Code Knowledge Graph" }
}
div { class: "login-feature",
span { class: "login-feature-icon", "\u{25C6}" }
span { "DAST & Impact Analysis" }
}
}
a {
href: "/auth",
class: "login-button",
svg {
width: "20",
height: "20",
view_box: "0 0 24 24",
fill: "none",
stroke: "currentColor",
stroke_width: "2",
stroke_linecap: "round",
stroke_linejoin: "round",
rect { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }
path { d: "M7 11V7a5 5 0 0 1 10 0v4" }
}
span { "Sign in to continue" }
}
p { class: "login-footer",
"Secured with single sign-on"
}
}
}
}