●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Top navigation header with search input and cart indicator
- Horizontal category scroller (carousel-like) using Bootstrap overflow
- Responsive product grid of ProductCard components with image, rating, price, original price, and Prime badge
- Reusable ProductCard Razor component for each product
## Key components
- Razor page: AmazonHome.razor
- Reusable component: ProductCard.razor
- Models: ProductModel, CategoryModel
- HTML input bound with @bind-value and @bind-value:event="oninput"
- Bootstrap layout classes (container-fluid, row, col-*) and Font Awesome icons
## How it works
- Data lives in-page as lists of ProductModel and CategoryModel and is rendered via foreach loops.
- ProductCard receives a ProductModel via [Parameter] and renders image, truncated title, repeated star icons for rating, price display logic, and conditional Prime badge.
- Search input uses @bind-value with oninput to update searchQuery as the user types (no filtering logic implemented in the snippet).
- Layout relies on Bootstrap grid (col-6 col-md-3 col-lg-2) to create a responsive product card grid.
## Styling
- Styling uses Bootstrap utility and grid classes and a component-scoped CSS file (AmazonHome.razor.css) for custom rules: hover effects, cart badge positioning, category overflow behavior, and card lift shadow.
- Font Awesome supplies iconography (stars, cart, Amazon logo). Responsiveness is driven by Bootstrap breakpoints; category scroller uses overflow-auto for touch scrolling.
## Reuse steps
1. Add the Razor files (AmazonHome.razor, ProductCard.razor) and models to a Blazor project.
2. Ensure Bootstrap and Font Awesome are included in index.html/_Host.cshtml (CSS links) or via npm/build.
3. Place AmazonHome.razor.css next to the page to scope styles, or adapt to global CSS.
4. Replace in-page sample data with a service or API client; implement filtering and paging on the product list.
5. Wire state (cart, auth) and backend services (DI in Program.cs) as needed.
## Limitations & next steps
- No data service, paging, or server-side filtering is implemented; products are static in the page.
- No accessibility attributes (alt text is present but ARIA/keyboard focus improvements are needed) and no image lazy-loading.
- No cart, product details modal, or routing to product pages; add navigation and state management for a complete storefront.
- Consider adding debounce for search binding, virtualization or server paging for large catalogs, and unit tests for components.
Generated by Instruct UI; code is editable and intended as a starting UI example for Blazor + Bootstrap projects.