●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Hero section with large headline, subtitle, CTA buttons and a readonly rating.
- Responsive content area using MudGrid/MudItem that displays a set of stat cards.
- Decorative MudIconButton icons positioned absolutely and hidden on small screens via media queries.
- Reusable stat card model rendered inside MudPaper with support for icon, value, title, subtitle, and contextual menu.
## Key components
- MudLayout, MudAppBar, MudMainContent
- MudContainer, MudStack, MudText, MudButton, MudIconButton, MudIcon
- MudRating, MudGrid, MudItem, MudPaper, MudImage, MudSpacer
- C# model: StatCardModel and OnInitialized lifecycle
## How it works
- The page initializes a List<StatCardModel> in OnInitialized and iterates with a foreach to render cards.
- MudGrid/MudItem provide responsive columns (xs/sm/md breakpoints) while MudStack arranges vertical and horizontal content.
- No form binding or EditForm is present; interaction is limited to buttons and icon buttons (no click handlers wired).
- Decorative icons use absolute positioning and a CSS media query to hide them under 960px, preserving mobile layout.
## Styling
- Uses MudBlazor component library for structure and theme-aware styling.
- Custom CSS classes (.pill-button, .dark-card, .white-card, .light-green-card, .rounded-xl) define visual variants and rounded corners.
- Responsive behavior relies on MudGrid breakpoints and a @media (min-width: 960px) rule for decorative icons.
## Reuse steps
1. Add MudBlazor NuGet package and register services in Program.cs (builder.Services.AddMudServices()).
2. Import MudBlazor namespace in _Imports.razor and include MudBlazor CSS and chosen fonts in index.html/_Host.cshtml.
3. Copy MainLayout.razor, Home.razor, StatCardModel.cs and app.css into the project and update route/layout as needed.
4. Replace placeholder image URLs and populate stat card data from real services or APIs.
5. Wire click handlers, navigation, and DI services (e.g., IProjectService) for dynamic data and authentication.
## Limitations & next steps
- This is a single-page UI scaffold generated by Instruct UI; no backend services, API calls, or authentication are included.
- Buttons and icon actions have no event handlers; add @onclick or navigate via NavigationManager to enable behavior.
- Replace placeholder image URLs with CMS or protected assets and move inline styles into theme variables if needed.
- Consider adding accessibility attributes, keyboard handlers for interactive icons, and unit/UI tests when integrating.