Add polished login landing page with feature highlights
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:
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user