Confirm?

Are you sure you want to proceed?
D
Damian Pike

Weld Navigator Web App Mockup

Clone & Customize via AI

MudBlazor Information Portal provides a knowledge hub with a hero video placeholder, Ask Ash Q&A inputs, and a responsive MudCard grid. Uses MudTextField inputs and MudGrid for layout and responsiveness.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Hero video placeholder presented inside a MudPaper with a play icon. - "Ask Ash" conversational area using MudTextField inputs and conversation-starter links. - User avatar displayed with MudAvatar and MudIcon. - Resource card grid built from a local list of ResourceCardModel instances and rendered as MudCard items with MudCardMedia and MudCardContent. - International support list using MudList and MudListItem with MudLink entries. ## Key components - MudContainer, MudStack, MudGrid, MudItem - MudPaper, MudText, MudLink, MudIcon - MudTextField (multi-line + single-line inputs) - MudAvatar - MudCard, MudCardMedia, MudCardContent - MudList, MudListItem ## How it works - A private List<ResourceCardModel> (_resourceCards) is populated in OnInitialized and iterated in the MudGrid to render cards. - MudTextField controls are present for multi-line and single-line input but are not bound to properties or validated; input handling is not implemented. - Navigation elements use static Href values and do not invoke services; image URLs are taken from the ImageUrl property. - Layout relies on MudGrid breakpoints (xs, sm, md) and inline styles for avatar sizing. ## Styling - Uses MudBlazor component library and its CSS variables (example: var(--mud-palette-lines-default) in custom CSS). - Custom CSS class .video-placeholder controls min-height and responsive reduction via a media query. - MudGrid and MudItem provide responsive two-column card layout; inline styles on MudAvatar control explicit size. ## Reuse steps 1. Add the MudBlazor NuGet package and register services: builder.Services.AddMudServices(); 2. Import the MudBlazor namespace where needed and ensure _Imports.razor includes MudBlazor components. 3. Add the custom CSS (app.css) to the project and reference it in index.html or _Host.cshtml. 4. Copy ResourceCardModel and the razor component; adapt the _resourceCards initialization or replace OnInitialized with an async data service call. 5. Wire input bindings (add @bind-Value to MudTextField or wrap inputs in an EditForm) and implement event handlers or services for search, Q&A, and language selection. ## Limitations & next steps - No EditForm or DataAnnotationsValidator present; validation must be added for form inputs. - MudTextField controls are not bound to model properties and lack event handlers; input processing and backend integration are required. - Video placeholder is static; replace with a video player component and provide source handling. - Links use placeholder Href values and need routing or navigation logic and localization support for "Change Language". - Accessibility: add alt text for images, aria labels for interactive elements and keyboard focus handling. - Consider adding authentication, telemetry, and a backing API for searchable resources and conversational AI integration. This component is a single-page UI scaffold generated by Instruct UI and intended as an editable example rather than a full application.