●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Full company landing (hero, about, vision/mission, goals, projects, news, partners, contact/footer) in Arabic (RTL).
- Data-driven news list with expand toggle and a parameterized NewsDetail route (/news/{index:int}).
- Reusable PartnerCard component for partner logos/links.
- Responsive layout, image cards, CTA buttons, and animated hero image.
## Key components
- Razor page components: CompanyHome.razor, PartnerCard.razor, NewsDetail.razor
- Models and in-memory store: CompanyInfoModel, CompanyGoalModel, NewsItemModel, PartnerModel, NewsDataStore
- Razor constructs: @page, @foreach, @if, @onclick, [Parameter], @code block
- Reusable UI pieces: PartnerCard component, news cards, project cards, Bootstrap navbar and footer
## How it works
- Data is provided from local models and a static NewsDataStore; CompanyInfoModel and partners are instantiated in the page @code block.
- News toggling uses ToggleNews(int) which flips NewsItemModel.IsExpanded and calls StateHasChanged to refresh UI.
- NewsDetail reads the index route parameter in OnParametersSet and maps to the NewsDataStore list; ShareFake is a placeholder action.
- UI markup relies on Bootstrap classes (container, row, col-*, navbar, btn, img-fluid) and Font Awesome icons rendered in HTML.
## Styling
- Styling is implemented via a custom app.css file that defines CSS variables (--almolook-*) and component styles (cards, hero, buttons).
- Bootstrap is used for layout and responsive grid behavior; custom CSS adds gradients, shadows, RTL adjustments, and animations.
- Responsive breakpoints are present for 768px and 576px to adjust typography and spacing.
## Reuse steps
1. Copy Razor files (CompanyHome.razor, PartnerCard.razor, NewsDetail.razor), models, and app.css into a Blazor project.
2. Ensure Bootstrap and Font Awesome are referenced in index.html or _Host.cshtml and app.css is loaded after Bootstrap.
3. Register routes by keeping @page directives; add any required using statements for models or namespaces.
4. Replace NewsDataStore with an injected data service (register in Program.cs) if persistent data is needed.
5. Verify RTL and Arabic fonts; adapt content strings and images to production data.
## Limitations & next steps
- This is a single multi-section landing page generated by Instruct UI; global services (data access, logging, auth) are not included.
- NewsDataStore is in-memory demo data; replace with API or database-backed service for real data and error handling.
- ShareFake is a placeholder; implement JS interop or server-side share/email logic as needed.
- Add accessibility (aria attributes), SEO meta tags per page, and unit/feature tests for interaction logic.
- Consider localization resources for multi-language support and server-side image hosting for production.