●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## Overview
Blazor Website RTL landing demo with Bootstrap layout, services cards and a contact EditForm using DataAnnotations validation.
## What's implemented
- Hero section with image, primary and secondary CTA buttons.
- Services grid rendered from a ServiceModel list with Font Awesome icons.
- Contact form implemented with EditForm, DataAnnotationsValidator and ValidationMessage components.
- Responsive Bootstrap navbar and footer with social links.
## Key components
- EditForm, DataAnnotationsValidator, ValidationMessage
- InputText, InputSelect, InputTextArea
- @bind-Value bindings and OnValidSubmit
- foreach rendering of ServiceModel into Bootstrap cards
- Bootstrap classes: navbar, container, row, col-*, btn, card; Font Awesome icon classes
## How it works
- Models: ContactFormModel uses DataAnnotations (Required, EmailAddress, StringLength) for validation; ServiceModel holds icon/title/description.
- Data binding: form fields use @bind-Value; ValidationMessage shows model errors; OnValidSubmit calls HandleContactSubmit.
- Initialization: services list is populated in OnInitialized; CTA handlers are empty stubs for integration.
## Styling
- Layout relies on Bootstrap component and utility classes for grid and responsive behavior.
- RTL support applied via dir="rtl" at the page root and Arabic text content throughout.
- Icons use Font Awesome CSS classes concatenated in ServiceModel.Icon.
## Reuse steps
1. Create or open a Blazor project and include Bootstrap and Font Awesome CSS in index.html or _Host.cshtml.
2. Add ContactFormModel and ServiceModel classes and import their namespaces in the Razor file.
3. Copy the Razor page, ensure dir="rtl" is set if needed, and adjust translations.
4. Implement backend wiring: inject a service or HttpClient and replace HandleContactSubmit with submission logic.
5. Optionally add client-side notifications, server-side validation endpoints, and localization resources.
## Limitations & next steps
- This is a single page demo generated by Instruct UI; submission handlers are placeholders and require service/API wiring.
- No authentication, persistence, or email sending implemented.
- Consider adding success/error UI, anti-spam (CAPTCHA/rate limiting), and richer accessibility checks.