●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Hero section with call-to-action buttons and an illustrative image.
- Feature grid (cards) highlighting product capabilities.
- Quick stats row and customer testimonials.
- Pricing cards with plan-specific CTA handlers.
- Sign-up overlay implemented as a conditional Razor modal containing an EditForm with client-side validation.
- Form validation using DataAnnotationsValidator and ValidationMessage components.
## Key components
- EditForm, DataAnnotationsValidator, ValidationMessage
- InputText, InputSelect, InputCheckbox with @bind-Value
- Razor event handlers: @onclick methods and OnValidSubmit
- Bootstrap layout: container, row, col-*, card, btn, form-control, form-select
- Manual modal/backdrop markup (modal-backdrop and positioned card)
## How it works
- A SignUpModel class uses DataAnnotations to declare validation rules (Required, EmailAddress, StringLength, Range).
- The page toggles the sign-up overlay with showSignUp and methods OpenSignUp / OpenSignUpWithPlan / CloseSignUp.
- EditForm binds to signUpModel; OnValidSubmit calls HandleValidSubmit which simulates processing and shows a success message before closing the overlay.
- Inputs use @bind-Value for two-way binding; ValidationMessage components render model errors next to fields.
- Pricing buttons call OpenSignUpWithPlan to pre-select a plan, demonstrating simple event-driven UI wiring.
## Styling
- Uses Bootstrap utility and layout classes (container, row, col-*, btn, card, shadow, form-control, form-select).
- FontAwesome icon classes are used for visual affordances (fa-*, fab-*).
- Modal is implemented with a backdrop and positioned card; accessibility and focus management are not implemented by Bootstrap JS in this markup.
- Responsive behavior relies on Bootstrap grid (col-12, col-md-*, col-lg-*).
## Reuse steps
1. Add the Razor file and SignUpModel to an existing Blazor project (Server or WASM). No extra NuGet required for basic Blazor forms.
2. Include Bootstrap CSS and FontAwesome in index.html/_Host.cshtml (or use the project template that already includes Bootstrap).
3. Import namespaces if needed: using System.ComponentModel.DataAnnotations; ensure SignUpModel is reachable by the page.
4. Wire real services: replace the simulated HandleValidSubmit logic with an injected API/service to create accounts and handle errors.
5. Improve modal behavior: add focus trap, ARIA roles, and keyboard handling or switch to Bootstrap JS modal for full accessibility.
## Limitations & next steps
- This is a single-page UI example generated by Instruct UI; it contains no server-side signup, persistence, or authentication.
- Modal focus management, server validation, anti-bot measures, and secure password handling must be added before production use.
- Replace placeholder image and wire pricing CTA to a billing service or checkout flow.
- Add integration tests and API error handling for robust signup flows.