●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Full-screen carousel banner (MudCarousel) with auto-cycle and bullets
- Responsive product cards grid (MudGrid, MudCard, MudCardMedia) for product previews
- Top app bar (MudAppBar) with conditional menu button and collapsible drawer navigation (MudDrawer, MudNavMenu)
- Reusable ProductOverview component and Footer component built from MudPaper, MudContainer and MudGrid
## Key components
- MudThemeProvider, MudLayout, MudAppBar, MudDrawer
- MudCarousel, MudCarouselItem
- MudContainer, MudGrid, MudItem
- MudCard, MudCardMedia, MudCardContent, MudCardActions
- MudText, MudButton, MudIconButton, MudNavLink, MudNavMenu, MudDivider
- ProductViewModel class and ProductOverview component with [Parameter]
## How it works
- Static sample data is stored in a private List<ProductViewModel> (_products) and passed to ProductOverview via a parameter.
- Drawer open state binds to a private field via @bind-Open and toggles with ToggleDrawer() event handler.
- Components use @bind-* patterns where applicable and MudBlazor event callbacks (OnClick) for interactions.
- Product cards are rendered with a foreach loop; images are provided via external URLs in ProductViewModel.
## Styling
- Visual styling is provided by MudBlazor components and theme (MudThemeProvider IsDarkMode="true").
- Utility classes such as d-flex, justify-center, align-center, ml-4 and mt-16 are used for spacing/layout (MudBlazor helper classes similar to Bootstrap utilities).
- Layout is responsive via MudGrid/MudItem breakpoints (xs, sm, md, lg) and Drawer variant set to Temporary for smaller screens.
## Reuse steps
1. Add the MudBlazor NuGet package and register MudBlazor services in Program.cs (builder.Services.AddMudServices()).
2. Import MudBlazor namespace in _Imports.razor and include MudBlazor CSS/JS in index.html or _Host.cshtml.
3. Copy ProductViewModel, ProductOverview.razor and Footer.razor into the project and wire routes or parent pages.
4. Replace static _products list with a service or API call and map to ProductViewModel.
5. Adjust MudThemeProvider settings or create a custom MudTheme for branding.
6. Ensure image URLs and links are updated and consider lazy-loading for large images.
## Limitations & next steps
- Page is a single static landing page sample; authentication, backend services, and data access are not implemented.
- SEO, image lazy-loading, and accessibility attributes require additional work for production readiness.
- Consider adding paging/filtering for large product sets, server-side data fetching, caching, and localized text.
- Replace placeholder images and external links with real assets and wire navigation routes for product details.