Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
msynk merged 1 commit into from
Dec 2, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
313 changes: 217 additions & 96 deletions src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/OverviewPage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,131 +1,252 @@
@page "/overview"
@page "/overview"
@page "/components"

<PageOutlet Url="overview"
Title="Overview"
Description="overview of the bit blazorui components" />
Description="discover bit BlazorUI at a glance, explore component categories, and jump-start a project." />

<section class="page-container">
<BitText Typography="BitTypography.H3" Class="title">bit BlazorUI</BitText>
<section class="page-section">
<BitText Typography="BitTypography.Body1">
bit BlazorUI components are native, easy-to-customize, and work seamlessly in all interactive Blazor modes (WASM, Server, Hybrid, pre-rendering), saving you time and making development enjoyable.
<BitText Typography="BitTypography.H3" Gutter>bit BlazorUI</BitText>

<br />

<BitCard Background="BitColorKind.Primary" FullWidth>
<BitText Typography="BitTypography.Body1" Gutter>
Production-ready and Fluent-inspired components for Blazor that stay native, flexible,
and fast across all interactive Blazor modes (WASM, Server, Hybrid, and pre-rendering).
</BitText>
<BitText Typography="BitTypography.Body1" Gutter>
Build accessible experiences with built-in theme and RTL support, and consistent APIs that fit modern scenarios.
</BitText>
<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>
</section>

<div class="card-container">
<a class="card input-card" href="/components/button">
<div class="card-img buttons"></div>
Buttons
</a>
<a class="card input-card" href="/components/checkbox">
<div class="card-img basic-inputs"></div>
Basic Inputs
</a>
<a class="card picker-card" href="/components/calendar">
<div class="card-img galleries-pickers"></div>
Galleries & Pickers
</a>
<a class="card list-card" href="/components/basiclist">
<div class="card-img items-lists"></div>
Items & Lists
</a>
<a class="card nav-card" href="/components/breadcrumb">
<div class="card-img menus-navs"></div>
Menus & Navs
</a>
<a class="card notification-card" href="/components/message">
<div class="card-img notification"></div>
Message
</a>
<a class="card progress-card" href="/components/progressbar">
<div class="card-img progress"></div>
Progress
</a>
<a class="card surface-card" href="/components/accordion">
<div class="card-img surfaces"></div>
Surfaces
</a>
</div>

<section class="page-section">
<BitText Typography="BitTypography.H4" Class="subtitle">Project template</BitText>
</BitCard>

<br />

<BitCard Background="BitColorKind.Primary" FullWidth>
<BitText Typography="BitTypography.H4" Gutter>Explore components</BitText>
<br />
<BitText Typography="BitTypography.Body1" Gutter>
Choose a category to jump into usage guidance and live examples.
</BitText>
<br />
<BitStack Gap="1rem" Horizontal Wrap Alignment="BitAlignment.SpaceBetween">
<BitLink Href="/components/button" Class="card" NoUnderline>
<BitCard FullSize>
<BitStack Alignment="BitAlignment.Center">
<BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/input-icon.svg" />
<BitText>Buttons</BitText>
</BitStack>
</BitCard>
</BitLink>

<BitLink Href="/components/checkbox" Class="card" NoUnderline>
<BitCard FullSize>
<BitStack Alignment="BitAlignment.Center">
<BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/input-icon.svg" />
<BitText>Inputs</BitText>
</BitStack>
</BitCard>
</BitLink>

<BitLink Href="/components/circulartimepicker" Class="card" NoUnderline>
<BitCard FullSize>
<BitStack Alignment="BitAlignment.Center">
<BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/input-icon.svg" />
<BitText>Pickers</BitText>
</BitStack>
</BitCard>
</BitLink>

<BitLink Href="/components/footer" Class="card" NoUnderline>
<BitCard FullSize>
<BitStack Alignment="BitAlignment.Center">
<BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/input-icon.svg" />
<BitText>Layouts</BitText>
</BitStack>
</BitCard>
</BitLink>

<BitLink Href="/components/basiclist" Class="card" NoUnderline>
<BitCard FullSize>
<BitStack Alignment="BitAlignment.Center">
<BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/input-icon.svg" />
<BitText>Lists</BitText>
</BitStack>
</BitCard>
</BitLink>

<BitLink Href="/components/breadcrumb" Class="card" NoUnderline>
<BitCard FullSize>
<BitStack Alignment="BitAlignment.Center">
<BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/input-icon.svg" />
<BitText>Navs</BitText>
</BitStack>
</BitCard>
</BitLink>

<BitLink Href="/components/badge" Class="card" NoUnderline>
<BitCard FullSize>
<BitStack Alignment="BitAlignment.Center">
<BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/input-icon.svg" />
<BitText>Notifications</BitText>
</BitStack>
</BitCard>
</BitLink>

<BitLink Href="/components/progressbar" Class="card" NoUnderline>
<BitCard FullSize>
<BitStack Alignment="BitAlignment.Center">
<BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/input-icon.svg" />
<BitText>Progress</BitText>
</BitStack>
</BitCard>
</BitLink>

<BitLink Href="/components/accordion" Class="card" NoUnderline>
<BitCard FullSize>
<BitStack Alignment="BitAlignment.Center">
<BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/input-icon.svg" />
<BitText>Surfaces</BitText>
</BitStack>
</BitCard>
</BitLink>

<BitLink Href="/components/element" Class="card" NoUnderline>
<BitCard FullSize>
<BitStack Alignment="BitAlignment.Center">
<BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/input-icon.svg" />
<BitText>Utilities</BitText>
</BitStack>
</BitCard>
</BitLink>

<BitLink Href="/components/appshell" Class="card" NoUnderline>
<BitCard FullSize>
<BitStack Alignment="BitAlignment.Center">
<BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/input-icon.svg" />
<BitText>Extras</BitText>
</BitStack>
</BitCard>
</BitLink>

<BitLink Href="/iconography" Class="card" NoUnderline>
<BitCard FullSize>
<BitStack Alignment="BitAlignment.Center">
<BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/input-icon.svg" />
<BitText>Icons</BitText>
</BitStack>
</BitCard>
</BitLink>
</BitStack>
</BitCard>

<br />

<BitCard Background="BitColorKind.Primary" FullWidth>
<BitText Typography="BitTypography.H4" Gutter>Start with the project template</BitText>
<br />
<BitText Typography="BitTypography.Body1" Gutter>
You can use our BlazorEmpty (bit-empty) project template to get started quickly with a predefined solution
which is compatible with the new approach introduced in .NET 8.
Spin up a clean bit BlazorUI solution that matches the .NET 8.0+ hosting model, preconfigured for theming, SSR, and responsive layouts.
</BitText>

<br />

<BitText Typography="BitTypography.Body1" Gutter>
To use this project template, you first need to install it using the following command:
Install the template once:
</BitText>

<CodeBox>dotnet new install Bit.BlazorEmpty</CodeBox>

<br />

<BitText Typography="BitTypography.Body1" Gutter>
Then you can create a new project using this command:
Create your app with the default setup:
</BitText>

<CodeBox>dotnet new bit-empty -n MyBitBlazorEmptyApp</CodeBox>
</section>

<section class="page-section">
<BitText Typography="BitTypography.H4" Class="subtitle">Supported browsers</BitText>
<div class="section-card-txt">
<ul>
<li>
<BitText Typography="BitTypography.Body1" Gutter>
Blazor is supported in the browsers shown in the following list on both mobile and desktop platforms.
</BitText>
<ul dir="auto">
<li>Apple Safari (Current† version)</li>
<li>Google Chrome (Current† version)</li>
<li>Microsoft Edge (Current† version)</li>
<li>Mozilla Firefox (Current† version)</li>
</ul>
</li>

<BitLink Target="_blank" Href="https://bitplatform.dev/templates/overview">
View template details
<BitIcon IconName="@BitIconName.ChevronRight" Style="font-size:12px;font-weight:bold" />
</BitLink>
</BitCard>

<br />

<BitCard Background="BitColorKind.Primary" FullWidth>
<BitText Typography="BitTypography.H4" Gutter>Supported browsers</BitText>
<br />
<BitText Typography="BitTypography.Body1" Gutter>
Verified on current versions for both desktop and mobile:
</BitText>
<BitText Typography="BitTypography.Body1" Gutter>
<ul dir="auto">
<li>Apple Safari (current+ version)</li>
<li>Google Chrome (current+ version)</li>
<li>Microsoft Edge (current+ version)</li>
<li>Mozilla Firefox (current+ version)</li>
</ul>
</div>
</section>

<section class="page-section">
<BitText Typography="BitTypography.H4" Class="subtitle">Supported platforms</BitText>
<div class="section-card-txt">
<ul>
<li>
<BitText Typography="BitTypography.Body1" Gutter>
Blazor Hybrid apps have the following additional platform requirements:
</BitText>
<ul dir="auto">
<li>Android 7.1 (API Level 24) or higher</li>
<li>iOS 15 or higher</li>
<li>macOS 12 (Monterey) or higher</li>
<li>Windows 7 SP1 or higher</li>
</ul>
</li>
</BitText>
</BitCard>

<br />

<BitCard Background="BitColorKind.Primary" FullWidth>
<BitText Typography="BitTypography.H4" Gutter>Supported platforms</BitText>
<br />
<BitText Typography="BitTypography.Body1" Gutter>
Blazor Hybrid apps require:
</BitText>
<BitText Typography="BitTypography.Body1" Gutter>
<ul dir="auto">
<li>Android 7.1 (API Level 24) or higher</li>
<li>iOS 15 or higher</li>
<li>macOS 12 (Monterey) or higher</li>
<li>Windows 7 SP1 or higher</li>
</ul>
</div>
</section>

<section class="page-section">
<div class="github-codespaces-section">
<div class="github-codespaces-icon"></div>
<BitText Typography="BitTypography.H4" Class="subtitle">Play on GitHub Codespaces</BitText>
</div>
</BitText>
</BitCard>

<br />

<BitCard Background="BitColorKind.Primary" FullWidth>
<BitText Typography="BitTypography.H4">Play on the GitHub Codespaces</BitText>
<br />
<BitText Typography="BitTypography.Body1" Gutter>
With GitHub Codespaces, you can access the ultimate online development platform, right in your browser - no downloads or installations required.
Launch a ready-to-use playground in the browser with all the requirements preinstalled - no local setup needed.
</BitText>
<BitText Typography="BitTypography.Body1" Gutter>
Experience lightning-fast speeds and seamless integration as you dive into the world of bit BlazorUI, and elevate your web development game to new heights.
Test bit BlazorUI quickly, prototype a page, or reproduce an issue before opening a PR.
</BitText>
<br />
<BitLink Target="_blank" Href="https://codespaces.new/bitfoundation/bit-blazorui-playground/tree/dev">
Open bit BlazorUI playground
<BitIcon IconName="@BitIconName.ChevronRight" Style="font-size:12px;font-weight:bold" />
</BitLink>
</section>
</BitCard>

<br />

<BitCard Background="BitColorKind.Primary" FullWidth>
<BitText Typography="BitTypography.H4" Gutter>Resources</BitText>
<br />
<BitText Typography="BitTypography.Body1" Gutter>
<ul dir="auto">
<li><BitLink Target="_blank" Href="https://blazorui.bitplatform.dev">Component docs</BitLink> - API reference and guidance.</li>
<li><BitLink Target="_blank" Href="https://github.com/bitfoundation/bitplatform">GitHub repository</BitLink> - source, issues, and roadmap.</li>
<li><BitLink Target="_blank" Href="https://wiki.bitplatform.dev">DeepWiki</BitLink> - AI oriented wiki.</li>
</ul>
</BitText>
</BitCard>

<br />

<FeedbackSection Url="OverviewPage.razor" />
</section>
</section>
Loading
Loading