Modernize Overview page of BlazorUI demo website (#11883)

[msynk]

closes #11883

Summary by CodeRabbit

• New Features

  • Redesigned Overview page with enhanced hero section, stat cards, and new content sections including Quick start examples, Quick links, Supported browsers, and Codespaces access.
  • Improved component grid with better visual hierarchy and organization.

• Style

  • Updated styling with interactive hover effects and enhanced responsive design across all screen sizes.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai[bot]]

[!IMPORTANT]

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

The Overview page has been modernized with expanded hero content, new sections including stat cards, quick links, and a quick-start example. The component now inherits from a base class and executes JavaScript after the first render. Styling has been significantly updated to support interactive cards and responsive layouts.

Changes

Cohort / File(s)	Summary
Overview Page Markup & Lifecycle src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/OverviewPage.razor	Added component base class inheritance and OnAfterFirstRenderAsync() lifecycle hook. Expanded page with hero section, navigation actions, stat cards, multi-section layout including Why choose bit BlazorUI?, Quick start example with code blocks, Supported browsers, GitHub Codespaces integration, and redesigned Resources section as Quick links blocks. Updated component grid with category-link cards.
Overview Page Styling src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/OverviewPage.razor.scss	Replaced card styling with responsive stat-card design. Added .stat-card, .stat-icon-wrapper, .category-link, and .quick-link classes with hover transforms, transitions, shadows, and responsive breakpoints (md, sm). Enhanced interactive feedback with border color changes and Y-axis translations on hover.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20–25 minutes

Areas requiring extra attention:

• Verify responsive behavior across all breakpoints (md, sm) and viewport sizes
• Ensure the new stat cards and category-link layout render correctly with proper spacing and alignment
• Review the Quick start example code blocks for correctness and proper formatting
• Confirm the JavaScript execution in OnAfterFirstRenderAsync() behaves as intended and doesn't cause performance issues
• Validate all new link targets and navigation actions point to correct URLs

Poem

🐰 A page once plain, now gleaming bright, With stats and cards arranged just right! Hero content, quick links so clean, The finest Overview you've seen! Modern styling, responsive too— The BlazorUI demo shines anew! ✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The pull request title clearly describes the main change: modernizing the Overview page of the BlazorUI demo website, which matches the primary objective in the linked issue #11883.
Linked Issues check	✅ Passed	The pull request successfully implements the modernization objective from issue #11883, with substantial updates to the Overview page including new hero content, stat cards, sections, and improved styling.
Out of Scope Changes check	✅ Passed	All changes are focused on modernizing the Overview page components and styling, directly aligned with the linked issue objective; no out-of-scope modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}