●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Marketing landing page with a hero section, feature cards, pricing plans, contact panel and footer.
- Interactive contact form (MudForm) with MudTextField bindings and a mock submit handler.
- Reusable UI pieces: feature cards, pricing cards with popular highlight, icon lists and action buttons.
## Key components
- MudAppBar, MudContainer, MudGrid, MudItem
- MudText, MudIcon, MudButton, MudSpacer
- MudCard, MudCardContent, MudPaper
- MudList, MudListItem, MudChip
- MudForm, MudTextField
## How it works
- Data is initialized in OnInitialized with lists of FeatureModel and PricingPlanModel.
- Contact form uses a ContactFormModel decorated with DataAnnotations ([Required], [EmailAddress]) and @bind-Value on MudTextField controls.
- SubmitContactForm is an async event handler that performs a mocked submission (Task.Delay), resets the model and calls StateHasChanged.
- Layout relies on MudGrid/MudItem for responsive columns, and MudCard/MudPaper for visual grouping.
## Styling
- Uses MudBlazor components and a small custom stylesheet (app.css) for the hero gradient, pricing background and responsive tweaks.
- CSS targets include .hero-section (gradient), .pricing-section (light background), .popular-plan (border/scale) and .footer-section (dark theme).
- Responsive behavior is handled by MudGrid breakpoints and media queries in app.css.
## Reuse steps
1. Add the MudBlazor NuGet package and register MudBlazor services and theme in Program.cs (builder.Services.AddMudServices()).
2. Import MudBlazor namespaces in _Imports.razor and add app.css to the app _Host.cshtml or index.html.
3. Copy models (FeatureModel, PricingPlanModel, ContactFormModel) and component markup (HomePage.razor) into the project.
4. Replace placeholder image and mock SubmitContactForm with a real API call (HttpClient) or server endpoint and implement server-side validation.
5. Adjust theming or CSS variables to match the application theme and register any required services (logging, telemetry, authentication).
## Limitations & next steps
- This is a single-page UI demo generated by Instruct UI; it contains mocked submission logic (Task.Delay) and placeholder media.
- No server API, persistence, authentication, or email/scheduling integration is included; wiring HttpClient or backend endpoints is required for production flows.
- Consider adding MudForm validation state checks, proper success/error feedback, accessibility attributes, and unit tests for form behavior.