From a7a903132092f53ca1c52ba431fadd8e37d323aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20Can=20Karag=C3=B6z?= Date: Wed, 4 Nov 2026 22:53:42 +0300 Subject: [PATCH] feat(docs): showcase Identity Lab and enhance landing page experience --- .../Program.cs | 3 +- .../Layout/MainLayout.razor | 20 +- .../Pages/Home.razor | 142 +++++++++++ .../Pages/Home.razor.css | 221 ++++++++++++++++++ .../Pages/Samples.razor | 6 +- .../wwwroot/app.css | 38 ++- 6 files changed, 414 insertions(+), 16 deletions(-) create mode 100644 docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Pages/Home.razor.css diff --git a/apps/identity-lab/CodeBeam.UltimateAuth.IdentityLab/Program.cs b/apps/identity-lab/CodeBeam.UltimateAuth.IdentityLab/Program.cs index 73d5b374..2a34f7a9 100644 --- a/apps/identity-lab/CodeBeam.UltimateAuth.IdentityLab/Program.cs +++ b/apps/identity-lab/CodeBeam.UltimateAuth.IdentityLab/Program.cs @@ -142,6 +142,8 @@ var app = builder.Build(); +app.UseForwardedHeaders(); + activityEventBridge.Initialize(app.Services); // Configure the HTTP request pipeline. @@ -152,7 +154,6 @@ app.UseHsts(); } app.UseStatusCodePagesWithReExecute("/not-found", createScopeForStatusCodePages: true); -app.UseForwardedHeaders(); app.UseHttpsRedirection(); app.UseUltimateAuthWithAspNetCore(); diff --git a/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Layout/MainLayout.razor b/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Layout/MainLayout.razor index 6301b33e..852c35a8 100644 --- a/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Layout/MainLayout.razor +++ b/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Layout/MainLayout.razor @@ -25,6 +25,10 @@
Docs Samples + + Identity Lab + Donate
@@ -68,6 +72,7 @@ Samples + Identity Lab Donate @@ -79,9 +84,7 @@ - + @@ -89,17 +92,14 @@ - - UltimateAuth - - - Open-source unified Auth for modern .NET. - + UltimateAuth + Open-source unified Auth for modern .NET. Docs Samples + Identity Lab GitHub Discord @@ -124,7 +124,7 @@ -
+
An unhandled error has occurred. diff --git a/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Pages/Home.razor b/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Pages/Home.razor index e00fb76c..65b41518 100644 --- a/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Pages/Home.razor +++ b/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Pages/Home.razor @@ -90,6 +90,148 @@ +
+ + + +
+ + +
+ +
+
+ +
+ +
+ +
+ + LIVE INTERACTIVE SANDBOX +
+ + + Meet Identity Lab. + Authentication, experienced. + + + + Go beyond documentation and code samples. + Explore UltimateAuth inside a real, + interactive Blazor application. + + + + Create your own sandbox, manage identities, + inspect sessions, experiment with credentials + and explore authorization — all powered by + UltimateAuth. + + +
+ + + + +
+ +
+ Identity Management +
+
+ Explore users, profiles and identifiers. +
+
+ + + +
+ +
+ Session Lifecycle +
+
+ Discover device-aware sessions and + session lineage. +
+
+ + + +
+ +
+ Credentials +
+
+ Experience credential management + and account security. +
+
+ + + +
+ +
+ Authorization +
+
+ Explore roles, permissions and + policy-driven access. +
+
+ + + + +
+ + + Launch Identity Lab + + + + Explore Documentation + + +
+ +
+ + + Identity Lab is a demonstration environment. + Use test data only. Sandbox data may be reset. + +
+ +
+
+ + +
+
diff --git a/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Pages/Home.razor.css b/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Pages/Home.razor.css new file mode 100644 index 00000000..d556ad95 --- /dev/null +++ b/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Pages/Home.razor.css @@ -0,0 +1,221 @@ +.ua-lab-section { + position: relative; + padding: 96px 0; +} + +.ua-lab-showcase { + position: relative; + overflow: hidden; + isolation: isolate; + border-radius: 28px; + border: 1px solid rgba(130, 155, 255, 0.22); + background: radial-gradient( ellipse at 80% 0%, rgba(88, 91, 240, 0.22), transparent 55% ), linear-gradient( 145deg, #10182d 0%, #0b1120 55%, #111a30 100% ); + color: #f5f7ff; + box-shadow: 0 28px 90px rgba(5, 12, 30, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08); +} + +.ua-lab-content { + position: relative; + z-index: 1; + padding: clamp(32px, 6vw, 80px); +} + +.ua-lab-ambient { + position: absolute; + z-index: 0; + pointer-events: none; + border-radius: 50%; + filter: blur(70px); +} + +.ua-lab-ambient-one { + width: 360px; + height: 360px; + top: -180px; + right: -100px; + background: rgba(110, 97, 255, 0.18); +} + +.ua-lab-ambient-two { + width: 280px; + height: 280px; + bottom: -160px; + left: -90px; + background: rgba(42, 170, 220, 0.12); +} + +.ua-lab-heading { + max-width: 820px; +} + +.ua-lab-eyebrow { + display: inline-flex; + align-items: center; + gap: 10px; + padding: 8px 14px; + border: 1px solid rgba(155, 174, 255, 0.25); + border-radius: 100px; + background: rgba(255, 255, 255, 0.045); + color: #aebfff; + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.13em; + margin-bottom: 28px; +} + +.ua-lab-status-dot { + width: 8px; + height: 8px; + border-radius: 50%; + background: #57e4ae; + box-shadow: 0 0 12px rgba(87, 228, 174, 0.6); +} + +.ua-lab-title { + font-weight: 800 !important; + letter-spacing: -0.045em !important; + line-height: 1.12 !important; + color: #fff !important; + margin-bottom: 28px !important; + overflow-wrap: break-word; + min-width: 0; +} + + .ua-lab-title span { + display: block; + background: linear-gradient( 90deg, #b5c3ff, #8ee5ff, #c5b6ff ); + background-clip: text; + -webkit-background-clip: text; + color: transparent; + } + +.ua-lab-description { + max-width: 690px; + color: #b6c2d9 !important; + line-height: 1.85 !important; + margin-bottom: 14px !important; +} + +.ua-lab-features { + margin-top: 44px; +} + +.ua-lab-feature { + height: 100%; + min-height: 185px; + padding: 24px 20px; + border-radius: 16px; + border: 1px solid rgba(175, 190, 255, 0.14); + background: rgba(255, 255, 255, 0.035); + transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; +} + + .ua-lab-feature:hover { + transform: translateY(-3px); + border-color: rgba(155, 180, 255, 0.38); + background: rgba(255, 255, 255, 0.065); + } + + .ua-lab-feature .mud-icon-root { + color: #a9baff; + margin-bottom: 18px; + } + +.ua-lab-feature-title { + font-size: 0.95rem; + font-weight: 700; + color: #f7f9ff; + margin-bottom: 10px; +} + +.ua-lab-feature-text { + color: #aab8d1; + font-size: 0.85rem; + line-height: 1.65; +} + +.ua-lab-actions { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 16px; + margin-top: 44px; +} + +.ua-lab-primary-button { + border-radius: 12px !important; + padding: 12px 26px !important; + font-weight: 700 !important; + box-shadow: 0 8px 28px rgba(100, 110, 255, 0.2); +} + +.ua-lab-secondary-button { + color: #dbe4ff !important; +} + +.ua-lab-footnote { + display: flex; + align-items: flex-start; + gap: 10px; + margin-top: 34px; + color: #91a0bd; + font-size: 0.78rem; + line-height: 1.6; +} + + .ua-lab-footnote .mud-icon-root { + flex-shrink: 0; + font-size: 17px; + } + +@media (max-width: 600px) { + .ua-lab-section { + padding: 52px 0; + } + + .ua-lab-showcase { + border-radius: 20px; + } + + .ua-lab-title { + font-size: clamp(1.75rem, 7vw, 2.5rem) !important; + line-height: 1.18 !important; + letter-spacing: -0.035em !important; + } + + .ua-lab-title span { + font-size: 0.9em; + overflow-wrap: anywhere; + } + + .ua-lab-features { + margin-top: 24px; + } + + .ua-lab-feature { + min-height: auto; + } + + .ua-lab-actions { + align-items: stretch; + flex-direction: column; + } + + .ua-lab-actions .mud-button-root { + width: 100%; + } + + .ua-lab-content { + padding: 32px 24px; + } +} + +@media (prefers-reduced-motion: reduce) { + .ua-lab-feature { + transition: none; + } + + .ua-lab-feature:hover { + transform: none; + } +} diff --git a/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Pages/Samples.razor b/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Pages/Samples.razor index dee6fad4..e69e4bc9 100644 --- a/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Pages/Samples.razor +++ b/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm.Client/Pages/Samples.razor @@ -94,7 +94,7 @@ Follow the project combinations below to run them locally. - + Blazor Server @@ -108,7 +108,7 @@ - + Blazor Standalone WASM @@ -127,7 +127,7 @@ - + Blazor Interactive WASM diff --git a/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm/wwwroot/app.css b/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm/wwwroot/app.css index f03bac21..a699d2cd 100644 --- a/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm/wwwroot/app.css +++ b/docs/website/CodeBeam.UltimateAuth.Docs.Wasm/CodeBeam.UltimateAuth.Docs.Wasm/wwwroot/app.css @@ -183,20 +183,54 @@ h1:focus { transform: scale(1.15); } +/* Vision spotlight — Light theme */ .ua-global-overlay { position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: 0; - transition: opacity 0.35s ease; - background: radial-gradient( circle at 50% 40%, transparent 90px, rgba(0, 0, 0, 0.99) 600px ); + transition: opacity 0.65s ease; + background: radial-gradient( ellipse at 50% 50%, rgba(12, 18, 38, 0.08) 0%, rgba(12, 18, 38, 0.32) 48%, rgba(12, 18, 38, 0.72) 100% ); } + /* Vision spotlight — Dark theme */ + .ua-global-overlay.ua-overlay-dark { + background: radial-gradient( ellipse at 50% 43%, rgba(120, 140, 255, 0.18) 0%, rgba(85, 95, 210, 0.13) 35%, transparent 72% ), radial-gradient( ellipse at 50% 50%, transparent 15%, rgba(5, 9, 25, 0.16) 65%, rgba(5, 9, 25, 0.42) 100% ); + } + + /* Activate overlay */ .ua-global-overlay.active { opacity: 1; } +/* Vision content stays above the overlay */ +.ua-vision { + position: relative; + z-index: 9999; +} + +/* Bulb glow */ +.ua-vision-icon-wrapper { + position: relative; + z-index: 1; + border-radius: 50%; + transition: transform 0.5s ease, filter 0.5s ease; +} + + .ua-vision-icon-wrapper:hover { + transform: scale(1.18); + filter: drop-shadow(0 0 14px rgba(125, 165, 255, 0.8)) drop-shadow(0 0 42px rgba(125, 165, 255, 0.35)); + } + +/* Accessibility */ +@media (prefers-reduced-motion: reduce) { + .ua-global-overlay, + .ua-vision-icon-wrapper { + transition: none; + } +} + .ua-vision { position: relative; z-index: 9999;