●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Navbar and hero header with primary CTAs.
- Category grid using CategoryCard components with hover elevation.
- Category detail view showing item cards with image, price and actions (Quick view, Rent).
- Popular items grid for quick discovery.
- Modal booking dialog with EditForm, DataAnnotationsValidator and ValidationMessage for inline validation.
- Simple client-side selection state and a mock booking confirmation flow.
## Key components
- EditForm, DataAnnotationsValidator, InputText, InputNumber, ValidationMessage
- CategoryCard (custom child component) with EventCallback<CategoryModel>
- Bootstrap structural components: navbar, container, row/col grid, card, buttons
- Modal implemented as conditional Razor markup controlled by isBookingOpen
## How it works
- Model and UI binding use @bind-Value on BookingModel fields and component state (selectedCategory, bookingItem, isBookingOpen).
- Category selection is handled by SelectCategory and CategoryCard.OnSelect; selectedCategory drives conditional rendering of items.
- OpenBooking/CloseBooking set bookingItem and isBookingOpen; ToggleQuickView reuses the same modal for item preview.
- EditForm.OnValidSubmit maps to SubmitBooking which fills bookingConfirmation; real integrations should call a backend service instead of the mock method.
## Styling
- Layout and responsiveness rely on Bootstrap classes (container, row, col-*, btn, form-control, card).
- LandingPage.razor.css provides a custom hero gradient with clip-path, category-card hover transform, icon circle sizing and card-img-top object-fit.
- Responsive tweaks use a small media query for mobile hero and image sizing; the grid uses Bootstrap's responsive columns.
## Reuse steps
1. Add Bootstrap CSS (and Font Awesome if needed) to the app host (index.html/_Host.cshtml) and include LandingPage.razor.css.
2. Copy LandingPage.razor, CategoryCard.razor and DataModel.cs into a Blazor project and import required namespaces.
3. Use SampleData for local preview; replace SampleData with an injected service that returns categories and items.
4. Replace SubmitBooking mock with an HTTP service or server-side handler to validate and persist bookings.
5. Improve accessibility (focus trap, ARIA) on the modal and add pagination, search, or filtering for large catalogs.
## Limitations & next steps
- Single-page demo: no backend APIs, authentication, persistence, or payment integration provided.
- Modal is implemented as conditional markup without keyboard focus management; consider an accessible dialog component.
- Add server-side validation, error handling, image loading states and optimistic UI for bookings when integrating services.