Skip to content

Commit a63e75a

Browse files
msynkmsynk
authored
feat(blazorui): apply some improvements to Overview page of demo website #11787 (#11788)
1 parent 5dda6f3 commit a63e75a

File tree

2 files changed

+233
-218
lines changed

2 files changed

+233
-218
lines changed

‎src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/OverviewPage.razor‎

Lines changed: 217 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,131 +1,252 @@
1-
@page "/overview"
1+
@page "/overview"
22
@page "/components"
33

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

88
<section class="page-container">
9-
<BitText Typography="BitTypography.H3" Class="title">bit BlazorUI</BitText>
10-
<section class="page-section">
11-
<BitText Typography="BitTypography.Body1">
12-
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.
9+
<BitText Typography="BitTypography.H3" Gutter>bit BlazorUI</BitText>
10+
11+
<br />
12+
13+
<BitCard Background="BitColorKind.Primary" FullWidth>
14+
<BitText Typography="BitTypography.Body1" Gutter>
15+
Production-ready and Fluent-inspired components for Blazor that stay native, flexible,
16+
and fast across all interactive Blazor modes (WASM, Server, Hybrid, and pre-rendering).
17+
</BitText>
18+
<BitText Typography="BitTypography.Body1" Gutter>
19+
Build accessible experiences with built-in theme and RTL support, and consistent APIs that fit modern scenarios.
20+
</BitText>
21+
<BitText Typography="BitTypography.Body1" Gutter>
22+
<ul dir="auto">
23+
<li>Optimized for .NET 8.0+ with SSR-friendly styles and responsive layouts.</li>
24+
<li>Light/dark themes and global design tokens ready for customization.</li>
25+
<li>Extensive demos, docs, and source available for every component.</li>
26+
</ul>
1327
</BitText>
14-
</section>
15-
16-
<div class="card-container">
17-
<a class="card input-card" href="/components/button">
18-
<div class="card-img buttons"></div>
19-
Buttons
20-
</a>
21-
<a class="card input-card" href="/components/checkbox">
22-
<div class="card-img basic-inputs"></div>
23-
Basic Inputs
24-
</a>
25-
<a class="card picker-card" href="/components/calendar">
26-
<div class="card-img galleries-pickers"></div>
27-
Galleries & Pickers
28-
</a>
29-
<a class="card list-card" href="/components/basiclist">
30-
<div class="card-img items-lists"></div>
31-
Items & Lists
32-
</a>
33-
<a class="card nav-card" href="/components/breadcrumb">
34-
<div class="card-img menus-navs"></div>
35-
Menus & Navs
36-
</a>
37-
<a class="card notification-card" href="/components/message">
38-
<div class="card-img notification"></div>
39-
Message
40-
</a>
41-
<a class="card progress-card" href="/components/progressbar">
42-
<div class="card-img progress"></div>
43-
Progress
44-
</a>
45-
<a class="card surface-card" href="/components/accordion">
46-
<div class="card-img surfaces"></div>
47-
Surfaces
48-
</a>
49-
</div>
50-
51-
<section class="page-section">
52-
<BitText Typography="BitTypography.H4" Class="subtitle">Project template</BitText>
28+
</BitCard>
29+
30+
<br />
31+
32+
<BitCard Background="BitColorKind.Primary" FullWidth>
33+
<BitText Typography="BitTypography.H4" Gutter>Explore components</BitText>
34+
<br />
35+
<BitText Typography="BitTypography.Body1" Gutter>
36+
Choose a category to jump into usage guidance and live examples.
37+
</BitText>
38+
<br />
39+
<BitStack Gap="1rem" Horizontal Wrap Alignment="BitAlignment.SpaceBetween">
40+
<BitLink Href="/components/button" Class="card" NoUnderline>
41+
<BitCard FullSize>
42+
<BitStack Alignment="BitAlignment.Center">
43+
<BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/input-icon.svg" />
44+
<BitText>Buttons</BitText>
45+
</BitStack>
46+
</BitCard>
47+
</BitLink>
5348

49+
<BitLink Href="/components/checkbox" Class="card" NoUnderline>
50+
<BitCard FullSize>
51+
<BitStack Alignment="BitAlignment.Center">
52+
<BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/input-icon.svg" />
53+
<BitText>Inputs</BitText>
54+
</BitStack>
55+
</BitCard>
56+
</BitLink>
57+
58+
<BitLink Href="/components/circulartimepicker" Class="card" NoUnderline>
59+
<BitCard FullSize>
60+
<BitStack Alignment="BitAlignment.Center">
61+
<BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/input-icon.svg" />
62+
<BitText>Pickers</BitText>
63+
</BitStack>
64+
</BitCard>
65+
</BitLink>
66+
67+
<BitLink Href="/components/footer" Class="card" NoUnderline>
68+
<BitCard FullSize>
69+
<BitStack Alignment="BitAlignment.Center">
70+
<BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/input-icon.svg" />
71+
<BitText>Layouts</BitText>
72+
</BitStack>
73+
</BitCard>
74+
</BitLink>
75+
76+
<BitLink Href="/components/basiclist" Class="card" NoUnderline>
77+
<BitCard FullSize>
78+
<BitStack Alignment="BitAlignment.Center">
79+
<BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/input-icon.svg" />
80+
<BitText>Lists</BitText>
81+
</BitStack>
82+
</BitCard>
83+
</BitLink>
84+
85+
<BitLink Href="/components/breadcrumb" Class="card" NoUnderline>
86+
<BitCard FullSize>
87+
<BitStack Alignment="BitAlignment.Center">
88+
<BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/input-icon.svg" />
89+
<BitText>Navs</BitText>
90+
</BitStack>
91+
</BitCard>
92+
</BitLink>
93+
94+
<BitLink Href="/components/badge" Class="card" NoUnderline>
95+
<BitCard FullSize>
96+
<BitStack Alignment="BitAlignment.Center">
97+
<BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/input-icon.svg" />
98+
<BitText>Notifications</BitText>
99+
</BitStack>
100+
</BitCard>
101+
</BitLink>
102+
103+
<BitLink Href="/components/progressbar" Class="card" NoUnderline>
104+
<BitCard FullSize>
105+
<BitStack Alignment="BitAlignment.Center">
106+
<BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/input-icon.svg" />
107+
<BitText>Progress</BitText>
108+
</BitStack>
109+
</BitCard>
110+
</BitLink>
111+
112+
<BitLink Href="/components/accordion" Class="card" NoUnderline>
113+
<BitCard FullSize>
114+
<BitStack Alignment="BitAlignment.Center">
115+
<BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/input-icon.svg" />
116+
<BitText>Surfaces</BitText>
117+
</BitStack>
118+
</BitCard>
119+
</BitLink>
120+
121+
<BitLink Href="/components/element" Class="card" NoUnderline>
122+
<BitCard FullSize>
123+
<BitStack Alignment="BitAlignment.Center">
124+
<BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/input-icon.svg" />
125+
<BitText>Utilities</BitText>
126+
</BitStack>
127+
</BitCard>
128+
</BitLink>
129+
130+
<BitLink Href="/components/appshell" Class="card" NoUnderline>
131+
<BitCard FullSize>
132+
<BitStack Alignment="BitAlignment.Center">
133+
<BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/input-icon.svg" />
134+
<BitText>Extras</BitText>
135+
</BitStack>
136+
</BitCard>
137+
</BitLink>
138+
139+
<BitLink Href="/iconography" Class="card" NoUnderline>
140+
<BitCard FullSize>
141+
<BitStack Alignment="BitAlignment.Center">
142+
<BitImage Src="_content/Bit.BlazorUI.Demo.Client.Core/images/icon/input-icon.svg" />
143+
<BitText>Icons</BitText>
144+
</BitStack>
145+
</BitCard>
146+
</BitLink>
147+
</BitStack>
148+
</BitCard>
149+
150+
<br />
151+
152+
<BitCard Background="BitColorKind.Primary" FullWidth>
153+
<BitText Typography="BitTypography.H4" Gutter>Start with the project template</BitText>
154+
<br />
54155
<BitText Typography="BitTypography.Body1" Gutter>
55-
You can use our BlazorEmpty (bit-empty) project template to get started quickly with a predefined solution
56-
which is compatible with the new approach introduced in .NET 8.
156+
Spin up a clean bit BlazorUI solution that matches the .NET 8.0+ hosting model, preconfigured for theming, SSR, and responsive layouts.
57157
</BitText>
58158

159+
<br />
160+
59161
<BitText Typography="BitTypography.Body1" Gutter>
60-
To use this project template, you first need to install it using the following command:
162+
Install the template once:
61163
</BitText>
62164

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

65167
<br />
66168

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

71173
<CodeBox>dotnet new bit-empty -n MyBitBlazorEmptyApp</CodeBox>
72-
</section>
73-
74-
<section class="page-section">
75-
<BitText Typography="BitTypography.H4" Class="subtitle">Supported browsers</BitText>
76-
<div class="section-card-txt">
77-
<ul>
78-
<li>
79-
<BitText Typography="BitTypography.Body1" Gutter>
80-
Blazor is supported in the browsers shown in the following list on both mobile and desktop platforms.
81-
</BitText>
82-
<ul dir="auto">
83-
<li>Apple Safari (Current† version)</li>
84-
<li>Google Chrome (Current† version)</li>
85-
<li>Microsoft Edge (Current† version)</li>
86-
<li>Mozilla Firefox (Current† version)</li>
87-
</ul>
88-
</li>
174+
175+
<BitLink Target="_blank" Href="https://bitplatform.dev/templates/overview">
176+
View template details
177+
<BitIcon IconName="@BitIconName.ChevronRight" Style="font-size:12px;font-weight:bold" />
178+
</BitLink>
179+
</BitCard>
180+
181+
<br />
182+
183+
<BitCard Background="BitColorKind.Primary" FullWidth>
184+
<BitText Typography="BitTypography.H4" Gutter>Supported browsers</BitText>
185+
<br />
186+
<BitText Typography="BitTypography.Body1" Gutter>
187+
Verified on current versions for both desktop and mobile:
188+
</BitText>
189+
<BitText Typography="BitTypography.Body1" Gutter>
190+
<ul dir="auto">
191+
<li>Apple Safari (current+ version)</li>
192+
<li>Google Chrome (current+ version)</li>
193+
<li>Microsoft Edge (current+ version)</li>
194+
<li>Mozilla Firefox (current+ version)</li>
89195
</ul>
90-
</div>
91-
</section>
92-
93-
<section class="page-section">
94-
<BitText Typography="BitTypography.H4" Class="subtitle">Supported platforms</BitText>
95-
<div class="section-card-txt">
96-
<ul>
97-
<li>
98-
<BitText Typography="BitTypography.Body1" Gutter>
99-
Blazor Hybrid apps have the following additional platform requirements:
100-
</BitText>
101-
<ul dir="auto">
102-
<li>Android 7.1 (API Level 24) or higher</li>
103-
<li>iOS 15 or higher</li>
104-
<li>macOS 12 (Monterey) or higher</li>
105-
<li>Windows 7 SP1 or higher</li>
106-
</ul>
107-
</li>
196+
</BitText>
197+
</BitCard>
198+
199+
<br />
200+
201+
<BitCard Background="BitColorKind.Primary" FullWidth>
202+
<BitText Typography="BitTypography.H4" Gutter>Supported platforms</BitText>
203+
<br />
204+
<BitText Typography="BitTypography.Body1" Gutter>
205+
Blazor Hybrid apps require:
206+
</BitText>
207+
<BitText Typography="BitTypography.Body1" Gutter>
208+
<ul dir="auto">
209+
<li>Android 7.1 (API Level 24) or higher</li>
210+
<li>iOS 15 or higher</li>
211+
<li>macOS 12 (Monterey) or higher</li>
212+
<li>Windows 7 SP1 or higher</li>
108213
</ul>
109-
</div>
110-
</section>
111-
112-
<section class="page-section">
113-
<div class="github-codespaces-section">
114-
<div class="github-codespaces-icon"></div>
115-
<BitText Typography="BitTypography.H4" Class="subtitle">Play on GitHub Codespaces</BitText>
116-
</div>
214+
</BitText>
215+
</BitCard>
216+
217+
<br />
218+
219+
<BitCard Background="BitColorKind.Primary" FullWidth>
220+
<BitText Typography="BitTypography.H4">Play on the GitHub Codespaces</BitText>
221+
<br />
117222
<BitText Typography="BitTypography.Body1" Gutter>
118-
With GitHub Codespaces, you can access the ultimate online development platform, right in your browser - no downloads or installations required.
223+
Launch a ready-to-use playground in the browser with all the requirements preinstalled - no local setup needed.
119224
</BitText>
120225
<BitText Typography="BitTypography.Body1" Gutter>
121-
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.
226+
Test bit BlazorUI quickly, prototype a page, or reproduce an issue before opening a PR.
122227
</BitText>
123228
<br />
124229
<BitLink Target="_blank" Href="https://codespaces.new/bitfoundation/bit-blazorui-playground/tree/dev">
125230
Open bit BlazorUI playground
126231
<BitIcon IconName="@BitIconName.ChevronRight" Style="font-size:12px;font-weight:bold" />
127232
</BitLink>
128-
</section>
233+
</BitCard>
234+
235+
<br />
236+
237+
<BitCard Background="BitColorKind.Primary" FullWidth>
238+
<BitText Typography="BitTypography.H4" Gutter>Resources</BitText>
239+
<br />
240+
<BitText Typography="BitTypography.Body1" Gutter>
241+
<ul dir="auto">
242+
<li><BitLink Target="_blank" Href="https://blazorui.bitplatform.dev">Component docs</BitLink> - API reference and guidance.</li>
243+
<li><BitLink Target="_blank" Href="https://github.com/bitfoundation/bitplatform">GitHub repository</BitLink> - source, issues, and roadmap.</li>
244+
<li><BitLink Target="_blank" Href="https://wiki.bitplatform.dev">DeepWiki</BitLink> - AI oriented wiki.</li>
245+
</ul>
246+
</BitText>
247+
</BitCard>
248+
249+
<br />
129250

130251
<FeedbackSection Url="OverviewPage.razor" />
131-
</section>
252+
</section>

0 commit comments

Comments
 (0)