●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Hero section with app bar, headline, subtitle, and CTAs.
- Feature/benefit list rendered from a Features model.
- Extension popup preview and media cards.
- Pricing section with multiple pricing cards rendered from Plans, including a highlighted "Most popular" card.
- Final CTA strip and consistent use of MudCard, MudGrid and MudContainer for layout.
## Key components
- MudAppBar, MudContainer, MudGrid, MudItem
- MudPaper, MudCard, MudCardHeader, MudCardMedia, MudCardContent, MudCardActions
- MudStack, MudText, MudButton, MudIcon, MudDivider, MudSpacer
- Foreach rendering of Lists (Features and Plans) using simple view models (EmailFeatureModel, PricingPlanModel)
## How it works
- Static lists (Features and Plans) are declared in the component @code block and rendered with foreach loops into MudStack/MudCard UI.
- MudGrid and MudItem provide responsive columns (xs/sm/md breakpoints) while MudContainer constrains width.
- Buttons and CTAs are client-side MudButton components that currently have no command bindings; pricing buttons are rendered with Variant and Color variations based on IsPopular.
- No EditForm or data annotation validation is present; file drag-and-drop is represented visually via MudCardMedia but not implemented as an input or drop handler in this page.
## Styling
- Uses MudBlazor components and theme tokens (Color.Primary, Color.Surface, typographies like Typo.h3).
- Some utility classes similar to Bootstrap appear (d-flex, flex-column, text-center, mb-*) mixed into Card Class attributes for layout tweaks.
- Design is responsive via MudGrid breakpoints; visual emphasis uses MudBlazor theme classes (mud-theme-primary) on featured cards.
## Reuse steps
1. Add the MudBlazor NuGet package and register services in Program.cs: builder.Services.AddMudServices();
2. Import MudBlazor namespace in _Imports.razor and include MudBlazor CSS/JS in host layout.
3. Copy the .razor file and the two model classes (PricingPlanModel, EmailFeatureModel) into a Pages or Components folder.
4. Replace placeholder images with project assets or remote URLs and implement file input/drag-drop handlers in the component or a service.
5. Wire click handlers for CTAs (navigation, extension install flow, or billing) and add a backend or third-party checkout integration if required.
## Limitations & next steps
- This is a single static landing page generated by Instruct UI; it lacks file handling, drag-and-drop events, and extension install logic.
- No authentication, analytics, or billing backend is implemented; pricing buttons are UI-only.
- Accessibility, keyboard focus management, and ARIA labels require review and improvement.
- Next steps: implement file reading (FileReader API via JS interop or input[type=file]), add checkout integration, and add unit/visual tests and route integration in the host app.