●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Top navigation using MudAppBar with action buttons and NavigationManager routing.
- Responsive grid-based landing pages built with MudGrid/MudItem: hero, about, supported brands, features, control systems.
- Card lists and informational cards using MudCard, MudPaper and MudIcon.
- Contact form implemented with MudForm, MudTextField, MudSelect, client-side validation and MudAlert success/error states.
- Pricing list rendered with MudTable using a PricingModel helper and formatted price display.
## Key components
- MudAppBar, MudIconButton, MudText
- MudGrid, MudItem, MudPaper, MudCard, MudCardContent
- MudForm, MudTextField, MudSelect, MudSelectItem, MudButton
- MudTable, MudTh, MudTd
- MudAlert, MudDivider, MudList, MudListItem
- NavigationManager, @bind-Value, @ref for MudForm
## How it works
- Pages are Razor components with @page routes and wrapped in a BalThermShell that provides the MudAppBar and a container for ChildContent.
- Data binding uses @bind-Value on MudTextField and MudSelect; the contact form uses a MudForm reference (@ref) with @bind-IsValid and manual Validate()/ResetAsync() calls.
- Form submission runs OnSubmit which validates the MudForm and shows a MudAlert success message; backend wiring is commented as a placeholder.
- Pricing uses a simple PricingModel class with a PriceDisplay property for locale-aware formatting and MudTable RowTemplate rendering.
## Styling
- UI styling relies on MudBlazor components and common utility classes added via the Class attribute (e.g., d-flex, ml-2, pa-4, mt-8) to control spacing and alignment.
- Layout is responsive through MudGrid/MudItem breakpoints (xs, sm, md). MudBlazor theming can be applied globally via MudTheme in Program.cs for color and typography.
## Reuse steps
1. Install MudBlazor NuGet package and add builder.Services.AddMudServices() in Program.cs.
2. Import MudBlazor namespace in _Imports.razor or individual components.
3. Add MudBlazor CSS and optionally configure a MudTheme in MainLayout or Program.cs.
4. Copy BalThermShell and page components into the project, adjust routes and the PricingModel and contact model types.
5. Wire a backend API or service to receive ContactRequestModel submissions and replace the placeholder submission in OnSubmit.
## Limitations & next steps
- This is a multi-page UI module generated by Instruct UI and does not include backend services, email delivery, or persistent storage for contact requests.
- No server-side validation or anti-spam measures are included; add server validation and rate limiting when wiring the API.
- Accessibility and localization are minimal; add aria attributes and resource strings for full production readiness.
- Extend MudTable with sorting, paging or server-side loading if the price list grows beyond static items.