●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- RTL top bar with logo, search input, wishlist/compare/cart icons and cart total
- Responsive Bootstrap navbar with menu iteration and login/register button
- Carousel slider with indicators, captions and previous/next controls
- Product card grid with images, names, and currency formatting
- Scoped CSS for purple theme, RTL tweaks, responsive adjustments and hover effects
## Key components
- Razor markup: @code block, foreach and for loops, component invocation (<ShopHeader />), HeadContent
- Bootstrap elements: navbar, carousel, container, row/col, card, badges, buttons, input-group
- Blazor constructs: component file (ShopHeader.razor), scoped stylesheet (ShopHeader.razor.css), Demo.razor example
- System.Globalization: CultureInfo used for currency formatting
## How it works
- Static lists (menuItems, sliderItems, products) live in the @code block and render with foreach/for loops.
- Carousel uses index-based logic to apply the "active" class and to render indicators.
- Currency values are formatted inline using CultureInfo("ar-AE").
- Icons use Font Awesome included via HeadContent in Demo.razor; Bootstrap JS is required for the navbar toggler and carousel behavior.
## Styling
- Primary styling relies on Bootstrap utility classes (container, row, col-*, navbar, btn, card) and responsive breakpoints.
- ShopHeader.razor.css applies scoped purple theme accents, RTL positioning for carousel controls, search input adjustments, and product-card hover transform.
- Layout is responsive via the Bootstrap grid; CSS media queries tweak column ordering and text alignment for narrow viewports.
## Reuse steps
1. Add Bootstrap CSS/JS and Font Awesome to the app (index.html, _Host.cshtml, or Layout) so toggler and carousel work.
2. Copy ShopHeader.razor and ShopHeader.razor.css into a Shared or Pages folder; invoke the component (Demo.razor shows usage and HeadContent).
3. Replace the in-file sample lists with injected services or API calls and bind to real models.
4. Add localization/culture services if currency formatting must change at runtime.
5. Wire cart, wishlist, compare, and authentication services for real interactions and navigation.
## Limitations & next steps
- The component uses static demo data; back-end data loading, paging, and state management are not implemented.
- Bootstrap JavaScript must be included for interactivity (navbar collapse and carousel). Demo includes Font Awesome via HeadContent.
- Accessibility improvements (aria roles, keyboard support for carousel, image lazy-loading) and add-to-cart actions are recommended when integrating into a full app.