Skip to content

Commit 9b8b8f0

Browse files
yordanovyordanov
committedMar 18, 2025·
Add App Templates
·
v6.3.4v6.3.0
1 parent aea7fb8 commit 9b8b8f0

File tree

5 files changed

+241
-9
lines changed

5 files changed

+241
-9
lines changed
 

‎RadzenBlazorDemos/Pages/TemplatesHealthcarePage.razor

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
@page "/templates-healthcare"
2+
3+
<PageTitle>Healthcare Blazor Website | Premium App Templates by Radzen</PageTitle>
4+
<HeadContent>
5+
<meta name="description" content="A modern, responsive auto repair shop blazor website template with easy booking and service details.">
6+
</HeadContent>
7+
<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8 rz-mb-12">
8+
Healthcare Blazor Website Template
9+
</RadzenText>
10+
11+
<RadzenCard Variant="Variant.Outlined">
12+
<RadzenRow class="rz-w-100 rz-mx-auto" Gap="2rem">
13+
<RadzenColumn Size="12">
14+
<RadzenLink Style="--rz-link-hover-text-decoration: none" Path="https://healthcare.radzen.com/" title="Open in a new tab" target="_blank">
15+
<RadzenImage class="rz-w-100 rz-h-100" Path="images/templates-healthcare.jpg"></RadzenImage>
16+
</RadzenLink>
17+
</RadzenColumn>
18+
</RadzenRow>
19+
<RadzenRow class="rz-w-100 rz-mx-auto rz-px-6 rz-px-sm-12 rz-pt-6 rz-pt-sm-12" Gap="3rem">
20+
<RadzenColumn Size="12" SizeMD="12" SizeLG="6" class="rz-pb-6 rz-pb-sm-12">
21+
<RadzenStack Gap="0" class="rz-h-100">
22+
<RadzenText Text="Overview" TextStyle="Radzen.Blazor.TextStyle.Overline" Style="max-width: 800px; font-size: 1rem" class="rz-color-primary" />
23+
<RadzenText Text="A modern, responsive healthcare blazor website template designed to showcase medical services, telehealth solutions, and AI-driven innovations with a sleek, user-friendly interface." TextStyle="Radzen.Blazor.TextStyle.H5" TagName="Radzen.Blazor.TagName.P" Style="max-width: 800px; line-height: 1.5" />
24+
<RadzenText Text="Perfect for" TextStyle="Radzen.Blazor.TextStyle.Overline" Style="max-width: 800px; font-size: 1rem" class="rz-color-primary rz-mt-6 rz-mb-4" />
25+
<RadzenText Text="Medical providers, health tech companies, telemedicine services, and digital health startups looking for a professional online presence." TextStyle="Radzen.Blazor.TextStyle.Body1" class="rz-m-0" />
26+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="1rem" Wrap="Radzen.FlexWrap.Wrap" class="rz-mt-12">
27+
<RadzenLink Text="Live Preview" Icon="open_in_new" class="rz-button rz-button-lg rz-variant-flat rz-text-align-center rz-primary rz-shade-default" Style="--rz-link-hover-text-decoration: none" Path="https://healthcare.radzen.com/" title="Open in a new tab" target="_blank" />
28+
<RadzenLink class="rz-button rz-button-lg rz-variant-text rz-base rz-text-align-center rz-shade-darker" Style="--rz-link-hover-text-decoration: none" Path="https://www.radzen.com/pricing/" title="See Radzen Pricing" target="_blank">
29+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.25rem">
30+
<RadzenIcon Icon="arrow_right_alt" Style="font-size: 1.5rem" /> Get Template
31+
</RadzenStack>
32+
</RadzenLink>
33+
</RadzenStack>
34+
</RadzenStack>
35+
</RadzenColumn>
36+
<RadzenColumn Size="12" SizeMD="6" class="rz-pb-6 rz-pb-sm-12">
37+
<RadzenStack Gap="1rem" class="rz-h-100">
38+
<RadzenText Text="What pages are included?" TextStyle="Radzen.Blazor.TextStyle.Overline" Style="max-width: 800px; font-size: 1rem" class="rz-color-primary" />
39+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" AlignItems="Radzen.AlignItems.Center">
40+
<RadzenIcon Icon="check_circle" IconStyle="Radzen.IconStyle.Primary"></RadzenIcon>
41+
<RadzenText Text="Home page with engaging Hero section" TextStyle="Radzen.Blazor.TextStyle.Body1" class="rz-m-0" />
42+
</RadzenStack>
43+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" AlignItems="Radzen.AlignItems.Center">
44+
<RadzenIcon Icon="check_circle" IconStyle="Radzen.IconStyle.Primary"></RadzenIcon>
45+
<RadzenText Text="Services and Solution pages to highlight offerings" TextStyle="Radzen.Blazor.TextStyle.Body1" class="rz-m-0" />
46+
</RadzenStack>
47+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" AlignItems="Radzen.AlignItems.Center">
48+
<RadzenIcon Icon="check_circle" IconStyle="Radzen.IconStyle.Primary"></RadzenIcon>
49+
<RadzenText Text="About us page with a timeline" TextStyle="Radzen.Blazor.TextStyle.Body1" class="rz-m-0" />
50+
</RadzenStack>
51+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" AlignItems="Radzen.AlignItems.Center">
52+
<RadzenIcon Icon="check_circle" IconStyle="Radzen.IconStyle.Primary"></RadzenIcon>
53+
<RadzenText Text="Contact us page" TextStyle="Radzen.Blazor.TextStyle.Body1" class="rz-m-0" />
54+
</RadzenStack>
55+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" AlignItems="Radzen.AlignItems.Center">
56+
<RadzenIcon Icon="check_circle" IconStyle="Radzen.IconStyle.Primary"></RadzenIcon>
57+
<RadzenText Text="Book a demo page" TextStyle="Radzen.Blazor.TextStyle.Body1" class="rz-m-0" />
58+
</RadzenStack>
59+
</RadzenStack>
60+
</RadzenColumn>
61+
<RadzenColumn Size="12" SizeMD="6" class="rz-pb-6 rz-pb-sm-12">
62+
<RadzenStack Gap="1rem" class="rz-h-100">
63+
<RadzenText Text="How to use?" TextStyle="Radzen.Blazor.TextStyle.Overline" Style="max-width: 800px; font-size: 1rem" class="rz-color-primary" />
64+
<RadzenText TextStyle="Radzen.Blazor.TextStyle.Body1">
65+
This template is exclusively available with an active <RadzenLink Text="Radzen Professional or Enterprise subscription" Path="https://www.radzen.com/pricing/" title="See Radzen Pricing" target="_blank" />.
66+
</RadzenText>
67+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem">
68+
<RadzenIcon Icon="arrow_right_alt" IconStyle="Radzen.IconStyle.Primary"></RadzenIcon>
69+
<RadzenText TextStyle="Radzen.Blazor.TextStyle.Body1" class="rz-m-0" >
70+
In <RadzenLink Path="https://www.radzen.com/blazor-studio/download/" target="_blank" title="Get Radzen Blazor Studio">Radzen Blazor Studio</RadzenLink> click the <strong>‘+’</strong> button in the bottom left corner to start the New application wizard.
71+
</RadzenText>
72+
</RadzenStack>
73+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem">
74+
<RadzenIcon Icon="arrow_right_alt" IconStyle="Radzen.IconStyle.Primary"></RadzenIcon>
75+
<RadzenText TextStyle="Radzen.Blazor.TextStyle.Body1" class="rz-m-0">
76+
Select <strong>Healthcare Blazor Website</strong> and enter a name for your app.
77+
</RadzenText>
78+
</RadzenStack>
79+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem">
80+
<RadzenIcon Icon="arrow_right_alt" IconStyle="Radzen.IconStyle.Primary"></RadzenIcon>
81+
<RadzenText TextStyle="Radzen.Blazor.TextStyle.Body1" class="rz-m-0">
82+
Pick a rendering mode. All interactive rendering modes are supported - Server, WebAssembly and Auto. Interactivity is enabled globally.
83+
</RadzenText>
84+
</RadzenStack>
85+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem">
86+
<RadzenIcon Icon="arrow_right_alt" IconStyle="Radzen.IconStyle.Primary"></RadzenIcon>
87+
<RadzenText TextStyle="Radzen.Blazor.TextStyle.Body1" class="rz-m-0">
88+
Choose a directory where the application will exist and click <strong>Finish</strong>.
89+
</RadzenText>
90+
</RadzenStack>
91+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem">
92+
<RadzenIcon Icon="arrow_right_alt" IconStyle="Radzen.IconStyle.Primary"></RadzenIcon>
93+
<RadzenText TextStyle="Radzen.Blazor.TextStyle.Body1" class="rz-m-0">
94+
Run the application to see the final result in your browser.
95+
</RadzenText>
96+
</RadzenStack>
97+
</RadzenStack>
98+
</RadzenColumn>
99+
</RadzenRow>
100+
</RadzenCard>

‎RadzenBlazorDemos/Pages/TemplatesRepairShopPage.razor

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
@page "/templates-repairshop"
2+
3+
<PageTitle>Repair Workshop Blazor Website | Premium App Templates by Radzen</PageTitle>
4+
<HeadContent>
5+
<meta name="description" content="A modern, responsive auto repair shop blazor website template with easy booking and service details.">
6+
</HeadContent>
7+
<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8 rz-mb-12">
8+
Repair Workshop Blazor Website Template
9+
</RadzenText>
10+
11+
<RadzenCard Variant="Variant.Outlined">
12+
<RadzenRow class="rz-w-100 rz-mx-auto" >
13+
<RadzenColumn Size="12">
14+
<RadzenLink Style="--rz-link-hover-text-decoration: none" Path="https://repairshop.radzen.com/" title="Open in a new tab" target="_blank">
15+
<RadzenImage class="rz-w-100 rz-h-100" Path="images/templates-repairshop.jpg"></RadzenImage>
16+
</RadzenLink>
17+
</RadzenColumn>
18+
</RadzenRow>
19+
<RadzenRow class="rz-w-100 rz-mx-auto rz-px-6 rz-px-sm-12 rz-pt-6 rz-pt-sm-12" Gap="3rem">
20+
<RadzenColumn Size="12" SizeMD="12" SizeLG="6" class="rz-pb-6 rz-pb-sm-12">
21+
<RadzenStack Gap="0" class="rz-h-100">
22+
<RadzenText Text="Overview" TextStyle="Radzen.Blazor.TextStyle.Overline" Style="max-width: 800px; font-size: 1rem" class="rz-color-primary" />
23+
<RadzenText Text="This blazor website template is a modern, responsive, and user-friendly one-page design tailored for auto repair workshops, mechanics, and car service centers. It offers a clean, professional layout with simple navigation, making it easy for customers to learn about services, book appointments, and contact the shop." TextStyle="Radzen.Blazor.TextStyle.H5" TagName="Radzen.Blazor.TagName.P" Style="max-width: 800px; line-height: 1.5" />
24+
<RadzenText Text="Perfect for" TextStyle="Radzen.Blazor.TextStyle.Overline" Style="max-width: 800px; font-size: 1rem" class="rz-color-primary rz-mt-6 rz-mb-4" />
25+
<RadzenText Text="Small to medium-sized auto repair businesses. The template ensures a professional online presence and boosts customer engagement." TextStyle="Radzen.Blazor.TextStyle.Body1" class="rz-m-0" />
26+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="1rem" Wrap="Radzen.FlexWrap.Wrap" class="rz-mt-12">
27+
<RadzenLink Text="Live Preview" Icon="open_in_new" class="rz-button rz-button-lg rz-variant-flat rz-text-align-center rz-primary rz-shade-default" Style="--rz-link-hover-text-decoration: none" Path="https://repairshop.radzen.com/" title="Open in a new tab" target="_blank" />
28+
<RadzenLink class="rz-button rz-button-lg rz-variant-text rz-base rz-text-align-center rz-shade-darker" Style="--rz-link-hover-text-decoration: none" Path="https://www.radzen.com/pricing/" title="See Radzen Pricing" target="_blank">
29+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.25rem">
30+
<RadzenIcon Icon="arrow_right_alt" Style="font-size: 1.5rem" /> Get Template
31+
</RadzenStack>
32+
</RadzenLink>
33+
</RadzenStack>
34+
</RadzenStack>
35+
</RadzenColumn>
36+
<RadzenColumn Size="12" SizeMD="6" class="rz-pb-6 rz-pb-sm-12">
37+
<RadzenStack Gap="1rem" class="rz-h-100">
38+
<RadzenText Text="Key Features" TextStyle="Radzen.Blazor.TextStyle.Overline" Style="max-width: 800px; font-size: 1rem" class="rz-color-primary" />
39+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" AlignItems="Radzen.AlignItems.Center">
40+
<RadzenIcon Icon="check_circle" IconStyle="Radzen.IconStyle.Primary"></RadzenIcon>
41+
<RadzenText Text="Engaging Hero section – Eye-catching banner with a call-to-action for quick bookings." TextStyle="Radzen.Blazor.TextStyle.Subtitle2" class="rz-m-0" />
42+
</RadzenStack>
43+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" AlignItems="Radzen.AlignItems.Center">
44+
<RadzenIcon Icon="check_circle" IconStyle="Radzen.IconStyle.Primary"></RadzenIcon>
45+
<RadzenText Text="Service Showcase – Clearly outlined auto repair services with icons and descriptions." TextStyle="Radzen.Blazor.TextStyle.Subtitle2" class="rz-m-0" />
46+
</RadzenStack>
47+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" AlignItems="Radzen.AlignItems.Center">
48+
<RadzenIcon Icon="check_circle" IconStyle="Radzen.IconStyle.Primary"></RadzenIcon>
49+
<RadzenText Text="Customer Reviews – Testimonial section to build trust and credibility." TextStyle="Radzen.Blazor.TextStyle.Subtitle2" class="rz-m-0" />
50+
</RadzenStack>
51+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" AlignItems="Radzen.AlignItems.Center">
52+
<RadzenIcon Icon="check_circle" IconStyle="Radzen.IconStyle.Primary"></RadzenIcon>
53+
<RadzenText Text="Easy Appointment Booking – A sleek contact form for scheduling repairs." TextStyle="Radzen.Blazor.TextStyle.Subtitle2" class="rz-m-0" />
54+
</RadzenStack>
55+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" AlignItems="Radzen.AlignItems.Center">
56+
<RadzenIcon Icon="check_circle" IconStyle="Radzen.IconStyle.Primary"></RadzenIcon>
57+
<RadzenText Text="SEO-friendly & Mobile-optimized." TextStyle="Radzen.Blazor.TextStyle.Subtitle2" class="rz-m-0" />
58+
</RadzenStack>
59+
</RadzenStack>
60+
</RadzenColumn>
61+
<RadzenColumn Size="12" SizeMD="6" class="rz-pb-6 rz-pb-sm-12">
62+
<RadzenStack Gap="1rem" class="rz-h-100">
63+
<RadzenText Text="How to use?" TextStyle="Radzen.Blazor.TextStyle.Overline" Style="max-width: 800px; font-size: 1rem" class="rz-color-primary" />
64+
<RadzenText TextStyle="Radzen.Blazor.TextStyle.Body1">
65+
This template is exclusively available with an active <RadzenLink Text="Radzen Professional or Enterprise subscription" Path="https://www.radzen.com/pricing/" title="See Radzen Pricing" target="_blank" />.
66+
</RadzenText>
67+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem">
68+
<RadzenIcon Icon="arrow_right_alt" IconStyle="Radzen.IconStyle.Primary"></RadzenIcon>
69+
<RadzenText TextStyle="Radzen.Blazor.TextStyle.Body1" class="rz-m-0" >
70+
In <RadzenLink Path="https://www.radzen.com/blazor-studio/download/" target="_blank" title="Get Radzen Blazor Studio">Radzen Blazor Studio</RadzenLink> click the <strong>‘+’</strong> button in the bottom left corner to start the New application wizard.
71+
</RadzenText>
72+
</RadzenStack>
73+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem">
74+
<RadzenIcon Icon="arrow_right_alt" IconStyle="Radzen.IconStyle.Primary"></RadzenIcon>
75+
<RadzenText TextStyle="Radzen.Blazor.TextStyle.Body1" class="rz-m-0">
76+
Select <strong>Repair Shop Blazor Website</strong> and enter a name for your app.
77+
</RadzenText>
78+
</RadzenStack>
79+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem">
80+
<RadzenIcon Icon="arrow_right_alt" IconStyle="Radzen.IconStyle.Primary"></RadzenIcon>
81+
<RadzenText TextStyle="Radzen.Blazor.TextStyle.Body1" class="rz-m-0">
82+
Pick a rendering mode. All interactive rendering modes are supported - Server, WebAssembly and Auto. Interactivity is enabled globally.
83+
</RadzenText>
84+
</RadzenStack>
85+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem">
86+
<RadzenIcon Icon="arrow_right_alt" IconStyle="Radzen.IconStyle.Primary"></RadzenIcon>
87+
<RadzenText TextStyle="Radzen.Blazor.TextStyle.Body1" class="rz-m-0">
88+
Choose a directory where the application will exist and click <strong>Finish</strong>.
89+
</RadzenText>
90+
</RadzenStack>
91+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem">
92+
<RadzenIcon Icon="arrow_right_alt" IconStyle="Radzen.IconStyle.Primary"></RadzenIcon>
93+
<RadzenText TextStyle="Radzen.Blazor.TextStyle.Body1" class="rz-m-0">
94+
Run the application to see the final result in your browser.
95+
</RadzenText>
96+
</RadzenStack>
97+
</RadzenStack>
98+
</RadzenColumn>
99+
</RadzenRow>
100+
</RadzenCard>

‎RadzenBlazorDemos/Services/ExampleService.cs

+41-9
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,6 @@ public class ExampleService
1919
Icon = "&#xe88a"
2020
},
2121
new Example
22-
{
23-
Name = "Dashboard",
24-
Path = "/dashboard",
25-
Updated = true,
26-
Title = "Sample Dashboard | Free UI Components by Radzen",
27-
Description = "Rich dashboard created with the Radzen Blazor Components library.",
28-
Icon = "&#xe868"
29-
},
30-
new Example
3122
{
3223
Name = "Get Started",
3324
Path = "/get-started",
@@ -311,6 +302,47 @@ public class ExampleService
311302
}
312303
},
313304

305+
new Example
306+
{
307+
Name = "App Templates",
308+
New = true,
309+
Title = "Blazor App Templates",
310+
Description = "Ready to use Blazor application and website templates",
311+
Icon = "&#xe5c3",
312+
Children = new[] {
313+
new Example
314+
{
315+
Name = "Issues Dashboard",
316+
Path = "/dashboard",
317+
Title = "Sample Dashboard | Free UI Components by Radzen",
318+
Description = "Rich dashboard created with the Radzen Blazor Components library.",
319+
Icon = "&#xe868"
320+
},
321+
new Example
322+
{
323+
Name = "Healthcare",
324+
New = true,
325+
Pro = true,
326+
Title = "Healthcare Blazor Website | Premium App Templates by Radzen",
327+
Icon = "&#xeb4c",
328+
Description = "A modern, responsive healthcare blazor website template.",
329+
Path = "templates-healthcare",
330+
Tags = new [] { "template", "health", "healthcare", "website", "app", "application", "page", "landing" }
331+
},
332+
new Example
333+
{
334+
Name = "Repair Workshop",
335+
New = true,
336+
Pro = true,
337+
Title = "Repair Workshop Blazor Website | Premium App Templates by Radzen",
338+
Icon = "&#xf56c",
339+
Description = "A modern, responsive auto repair blazor website template.",
340+
Path = "templates-repairshop",
341+
Tags = new [] { "template", "repair", "workshop", "website", "app", "application", "page", "landing" }
342+
}
343+
}
344+
},
345+
314346
new Example
315347
{
316348
Name = "DataGrid",

‎RadzenBlazorDemos/wwwroot/images/templates-healthcare.jpg

204 KB
Loading

‎RadzenBlazorDemos/wwwroot/images/templates-repairshop.jpg

180 KB
Loading

0 commit comments

Comments
 (0)
Please sign in to comment.