●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Hero carousel (MudCarousel) with slide text and a full-width image slide
- Product catalog grid using MudGrid, MudItem and MudCard with media, content and action buttons
- Responsive layout with MudAppBar, MudDrawer navigation and a main content container
- Login form using MudForm, MudTextField, MudCheckBox and MudButton with client-side validity state
## Key components
- MudLayout, MudAppBar, MudDrawer, MudNavLink
- MudCarousel, MudCarouselItem, MudImage
- MudContainer, MudGrid, MudItem, MudCard, MudCardMedia, MudCardContent, MudCardActions
- MudForm, MudTextField, MudCheckBox, MudButton, MudPaper
- MudIconButton, MudText, MudSpacer
## How it works
- Products are created in OnInitialized from a List<ProductViewModel> and rendered with a foreach to generate cards
- MudForm uses @ref and @bind-IsValid to enable/disable the Login button; MudTextField uses @bind-Value for username/password
- Drawer and theme toggles run via ToggleDrawer and ToggleDarkMode event handlers; SubmitLogin is a placeholder for authentication
- Carousel settings enable AutoCycle, ShowArrows, ShowBullets and swipe gestures; card actions (View/Add to Cart) are UI-only in this module
## Styling
- UI relies on MudBlazor components and utility classes provided by the component library (pa-6, mb-4, ml-4)
- Additional helper classes like d-flex justify-center align-center appear on slides for centering content
- MudGrid breakpoints (xs/sm/md/lg) provide responsive columns; MudContainer constrains content width for large viewports
## Reuse steps
1. Add the MudBlazor NuGet package and register services: builder.Services.AddMudServices();
2. Import MudBlazor namespace in _Imports.razor and wrap App with MudThemeProvider/MudLayout if not already present
3. Copy ProductViewModel and the Razor pages into the project, add routes and update NavMenu links
4. Implement theme switching via a theme service and persist state; wire SubmitLogin to an authentication service
5. Replace sample in-memory products with an injected data service or API and implement Add-to-cart backend calls
## Limitations & next steps
- This is a single-page module with in-memory sample data; persistence, APIs and authentication are not implemented here
- Dark mode toggle and SubmitLogin contain placeholder logic; a theme provider and auth service are required for production use
- Accessibility, server-side validation, error handling and integration with a product API or shopping cart are not included
- Consider adding paging/filtering for products, server validation for login, and tests for component interactions