●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- RTL e-commerce homepage skeleton: header, sub-navigation, story reel, main banners and floating action buttons.
- Search input using Blazor InputText inside a Bootstrap input-group.
- Bootstrap carousel for main banners and a promotional side card.
- Story reel implemented as a horizontal scroll list of circular story items with optional badges.
- Decorative CSS animations: rain, lightning, flying bird and running tiger overlays triggered by a timer.
- Responsive layout using Bootstrap grid and utility classes.
## Key components
- Blazor InputText (search control)
- Standard Bootstrap markup: carousel, input-group, buttons, grid (container, row, col-*)
- Razor foreach loops to render StoryItems, NavLinks and BannerSliderImages
- Model classes: StoryItemModel, NavLinkModel, BannerSliderImageModel
- System.Threading.Timer for periodic bird/tiger animation triggers
- Custom scoped CSS in OnlineShopPage.razor.css
## How it works
- Static lists (StoryItems, NavLinks, BannerSliderImages) are populated in OnInitialized and rendered with foreach.
- Raindrops are generated with randomized Left/Delay/Duration values in OnInitialized and produce repeated CSS "fall" animations.
- Bird/tiger overlays are toggled by a System.Threading.Timer started in OnAfterRender; the timer sets showBird true, awaits a delay matching the animation duration, then hides it and schedules the next run.
- Carousel uses Bootstrap's markup and relies on Bootstrap JS for slide behavior; images and captions come from BannerSliderImages.
- No EditForm or data annotation validation is present; InputText is rendered without @bind in the sample and requires wiring to capture search input.
## Styling
- Styling relies on Bootstrap 5 classes (container-fluid, row, col-*, btn, input-group, form-control) and custom CSS in OnlineShopPage.razor.css.
- RTL support is applied via dir="rtl" and CSS directional rules (margin/padding utilities and custom border radius fixes for input-group in RTL).
- Animations use pure CSS keyframes for raindrops, lightning, bird and tiger, with responsive media queries to adjust sizes on small viewports.
- FontAwesome icon classes are used for icons; the page assumes FontAwesome is available.
## Reuse steps
1. Add the model classes (StoryItemModel, NavLinkModel, BannerSliderImageModel) to the project namespace.
2. Ensure Bootstrap CSS/JS and FontAwesome are included in the host layout (wwwroot/index.html or _Host.cshtml) and that Blazor static assets are served.
3. Place OnlineShopPage.razor and OnlineShopPage.razor.css in a Razor component folder; adjust routes as needed.
4. Populate BannerSliderImages, StoryItems, and NavLinks from a backend service or API; wire InputText with @bind-Value to capture searches.
5. Dispose timers and asynchronous resources when integrating into scoped services or long-lived components to avoid leaks.
## Limitations & next steps
- The page is a single component scaffold generated by Instruct UI and is editable but not wired to backend services, authentication, or cart state.
- InputText lacks @bind-Value and search handling; wire a search handler and debounce as needed.
- Bootstrap carousel requires Bootstrap JS to be present; server-side prerendering may need JS initialization adjustments.
- Accessibility and keyboard navigation for animated overlays and story reel require further work (aria, focus management).
- Replace placeholder images and hard-coded lists with API data, add localization/culture services for Persian content and refine performance for continuous CSS animations.