Apply some improvements to Overview page of demo website (#11787)

[msynk]

closes #11787

Summary by CodeRabbit

• New Features
  • Redesigned Overview page from text-only to richly structured card-based layout
  • Added component exploration grid with categorized navigation
  • New sections for setup instructions, browser/platform support, GitHub Codespaces integration, and external resources
  • Enhanced responsive design with improved cross-device display

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

[coderabbitai]

Walkthrough

The Overview page has been redesigned from a minimal text layout to a card-based structure with multiple BitCard sections presenting components, installation, browser/platform support, Codespaces, and resources. Supporting SCSS styles have been refactored with responsive adjustments scoped under ::deep.

Changes

Cohort / File(s)	Summary
Overview page UI redesign src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/OverviewPage.razor	Replaced minimal text-only layout with richly structured card-based design. Added multiple primary BitCard sections: hero card, "Explore components" grid, project template setup, browser/platform support, Codespaces info, and resources. Preserved FeedbackSection.
Overview page styling refactor src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/OverviewPage.razor.scss	Consolidated card styling under ::deep selector. Adjusted card width calculations (25% - 12px vs. 25% - 8px previously). Removed top-level public selectors and simplified responsive breakpoints.

Estimated code review effort

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

• Verify rendering and layout of all new BitCard sections across breakpoints
• Confirm responsive grid behavior in "Explore components" section matches design intent
• Validate external links (GitHub, docs, wiki, Codespaces) are correct and functional
• Check SCSS responsive breakpoints render correctly with adjusted width calculations
• Ensure FeedbackSection still displays properly at page end

Poem

🐰 The Overview page now blooms with care,
Cards arranged with style to spare—
Components dance in grids so fine,
Resources linked in perfect line.
From sparse to splendid, what a sight! ✨

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 title accurately describes the main change: improvements to the Overview page of the demo website, which aligns with the content reorganization and styling updates.
Linked Issues check	✅ Passed	The PR fulfills all coding requirements from issue #11787: integrates BitCard components, applies style improvements via SCSS changes, and improves content with richer card-based layout.
Out of Scope Changes check	✅ Passed	All changes are in-scope, limited to the Overview page file and its stylesheet, directly addressing the improvements requested in issue #11787.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (4)

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/OverviewPage.razor (4)

21-27: Avoid wrapping <ul> lists inside BitText to keep HTML semantics valid

Right now, unordered lists are rendered inside BitText blocks, which likely output as a paragraph or span. That’s invalid HTML and can confuse assistive tech.

Consider rendering lists outside of BitText, e.g.:

-        <BitText Typography="BitTypography.Body1" Gutter>
-            <ul dir="auto">
-                <li>Optimized for .NET 8.0+ with SSR-friendly styles and responsive layouts.</li>
-                <li>Light/dark themes and global design tokens ready for customization.</li>
-                <li>Extensive demos, docs, and source available for every component.</li>
-            </ul>
-        </BitText>
+        <BitText Typography="BitTypography.Body1" Gutter>
+            Key highlights:
+        </BitText>
+        <ul dir="auto">
+            <li>Optimized for .NET 8.0+ with SSR-friendly styles and responsive layouts.</li>
+            <li>Light/dark themes and global design tokens ready for customization.</li>
+            <li>Extensive demos, docs, and source available for every component.</li>
+        </ul>

Same pattern can be applied to the other list sections.

Also applies to: 190-196, 208-214, 241-245

---

39-47: Make BitStack boolean parameters explicit for clarity

On BitStack you’re using bare attributes:

<BitStack Gap="1rem" Horizontal Wrap Alignment="BitAlignment.SpaceBetween">

Blazor component parameters are typically set with name=value, even for bools, which keeps intent clear and avoids any ambiguity in how Razor parses them.(blog.51cto.com)

Consider:

-        <BitStack Gap="1rem" Horizontal Wrap Alignment="BitAlignment.SpaceBetween">
+        <BitStack Gap="1rem" Horizontal="true" Wrap="true" Alignment="BitAlignment.SpaceBetween">

(Same style could be applied to other boolean parameters like FullWidth, FullSize, NoShadow, NoUnderline if you want maximum consistency.)

---

40-147: Add explicit Alt text for category icons to improve accessibility

The category tiles all use BitImage without Alt, so screen readers will likely fall back to the file name or nothing useful:

<BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/input-icon.svg" />

For decorative icons, prefer an empty Alt so they’re ignored; if you want them announced, use meaningful text:

-                        <BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/input-icon.svg" />
+                        <BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/input-icon.svg" Alt="" />

You can reuse this pattern for the rest of the category cards.

---

11-12: Consider relying on SCSS spacing instead of multiple <br /> tags

There are many standalone <br /> tags used purely for vertical spacing between cards and texts. Functionally it’s fine, but spacing is usually easier to maintain via margins/padding in the .razor.scss file.

Not urgent, but over time consolidating this into SCSS (e.g., bottom margins on headings/cards) will keep the markup cleaner and easier to tweak.

Also applies to: 30-31, 150-151, 154-155, 159-160, 167-168, 181-182, 185-186, 199-200, 203-204, 217-218, 221-222, 235-236, 238-240, 249-252

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting

📥 Commits

Reviewing files that changed from the base of the PR and between 5dda6f3 and 5305aef.

📒 Files selected for processing (2)

• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/OverviewPage.razor (1 hunks)
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/OverviewPage.razor.scss (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: build Bit.BlazorUI

🔇 Additional comments (2)

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/OverviewPage.razor.scss (1)

10-12: Verify the spacing calculation for the lg breakpoint.

With BitStack Gap="1rem" (16px), the precise subtract value for 3 columns should be 10.67px (32px total gap ÷ 3 cards), but 11px is used here. This might cause minor 1px gaps or overlaps in the card layout.

Consider using a precise calculation:

         @include lg {
-            width: calc((100% / 3) - 11px);
+            width: calc((100% / 3) - calc(32px / 3));
         }

Alternatively, verify visually that the current 11px approximation is acceptable.

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/OverviewPage.razor (1)

1-31: Overview header and hero card look solid

The new PageOutlet description, top heading, and hero BitCard copy read well and align with the docs-driven story for bit BlazorUI. No functional issues spotted here.