From 4c33b1020a8dd57ee155c772e368148438589566 Mon Sep 17 00:00:00 2001 From: TekH Date: Mon, 1 Jun 2026 04:39:50 +0200 Subject: [PATCH] Redesign home page layout and improve user experience Replaced the old card-based layout in `Index.razor` with a modern, visually appealing home page design. Added a hero header, content section, and call-to-action button for signing documents. Introduced new SVG icons and text elements to enhance the UI. Removed the `OnAfterRenderAsync` method and automatic redirection logic to simplify user navigation. Added a new stylesheet link for the DevExpress Blazor theme. Updated `app.css` to support the new design: - Changed `article` overflow to `overflow-y: auto`. - Added new classes for layout, buttons, and feature badges. - Styled the home page with a gradient background, rounded corners, and hover effects. These changes improve usability, responsiveness, and visual consistency. --- .../Pages/Index.razor | 92 ++++++++++++------- .../wwwroot/css/app.css | 83 ++++++++++++++++- 2 files changed, 142 insertions(+), 33 deletions(-) diff --git a/EnvelopeGenerator.ReceiverUI/Pages/Index.razor b/EnvelopeGenerator.ReceiverUI/Pages/Index.razor index 212e2d7d..94eb6276 100644 --- a/EnvelopeGenerator.ReceiverUI/Pages/Index.razor +++ b/EnvelopeGenerator.ReceiverUI/Pages/Index.razor @@ -1,40 +1,68 @@ @page "/" -@inject NavigationManager NavigationManager -
-
-
-
- + + +
+ +
+
+ + + +
+

SignFlow

+

Willkommen im eSign-Portal

-

Empfδnger-UI

-

- Sie werden zur Empfδnger-UI weitergeleitet. Bitte warten Sie einen Moment. -

- - -
- -
Weiterleitung wird vorbereitet...
-
-
+ +
+
+
+ +

+ Φffnen Sie ein Ihnen zugesandtes Dokument, indem Sie auf den Link in Ihrer E-Mail klicken + oder den Zugangscode manuell eingeben. +

+ +
+ + + + + Dokument unterzeichnen + +
+ +
+
+
+ + + + Sicherer Zugang +
+
+ + + + Digitale Unterschrift +
+
+ + + + + PDF-Export +
+
+
+ +
+
+
+
@code { - protected override async Task OnAfterRenderAsync(bool firstRender) { - if(!firstRender) - return; - - await Task.Delay(1200); - NavigationManager.NavigateTo("/receiver"); - } -} \ No newline at end of file +} diff --git a/EnvelopeGenerator.ReceiverUI/wwwroot/css/app.css b/EnvelopeGenerator.ReceiverUI/wwwroot/css/app.css index b3bb0f19..f9a4dea3 100644 --- a/EnvelopeGenerator.ReceiverUI/wwwroot/css/app.css +++ b/EnvelopeGenerator.ReceiverUI/wwwroot/css/app.css @@ -14,7 +14,7 @@ article { height: calc(100vh - 36px); display: flex; flex-direction: column; - overflow: hidden; + overflow-y: auto; padding-left: 0 !important; padding-right: 0 !important; } @@ -244,6 +244,87 @@ article { flex-wrap: wrap; } +/* ── Home page ───────────────────────────────────────────────────────────── */ +.home-page-wrapper { + display: flex; + flex-direction: column; + align-items: center; + min-height: calc(100vh - 36px); + background: linear-gradient(160deg, #1e2e3e 0%, #2c3e50 40%, #3498db 100%); + padding-bottom: 36px; +} + +.home-hero-header { + width: 100%; + padding: 48px 24px 36px; + text-align: center; +} + +.home-hero-header__inner { + display: inline-flex; + align-items: center; + gap: 20px; + color: #fff; +} + +.home-hero-header__icon { + opacity: 0.90; + flex-shrink: 0; +} + +.home-hero-header__title { + font-size: 2rem; + font-weight: 700; + margin: 0; + color: #fff; + letter-spacing: 0.02em; +} + +.home-hero-header__subtitle { + font-size: 0.92rem; + margin: 4px 0 0; + color: rgba(255,255,255,0.75); +} + +.home-content { + width: 100%; + max-width: 520px; + padding: 0 16px; +} + +.home-card { + border-radius: 12px !important; + overflow: hidden; +} + +.home-btn-primary { + background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%); + border: none; + color: #fff; + font-weight: 500; + border-radius: 8px; + transition: filter 0.15s, box-shadow 0.15s; + box-shadow: 0 2px 10px rgba(44,62,80,0.30); +} + +.home-btn-primary:hover { + filter: brightness(1.12); + box-shadow: 0 4px 16px rgba(44,62,80,0.40); + color: #fff; +} + +.home-feature-badge { + display: inline-flex; + align-items: center; + background: rgba(52,152,219,0.10); + color: #3498db; + border: 1px solid rgba(52,152,219,0.25); + border-radius: 20px; + padding: 4px 12px; + font-size: 0.75rem; + font-weight: 500; +} + /* ── Footer ──────────────────────────────────────────────────────────────── */ .receiver-footer { position: fixed;