Add demo video for Radzen Blazor for Visual Studio

radzenhq · Feb 6, 2025 · cb65729 · cb65729
1 parent 78e5bbb
commit cb65729
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 10 deletions.
diff --git a/RadzenBlazorDemos/Pages/Index.razor b/RadzenBlazorDemos/Pages/Index.razor
@@ -2,6 +2,7 @@
 @page "/"
 @page "/docs/"
 @inject ExampleService ExampleService
+@inject DialogService DialogService
 
 <PageTitle>@ExampleService.TitleFor(null)</PageTitle>
 <HeadContent>
@@ -106,10 +107,10 @@
       <RadzenColumn Size="12">
             <RadzenAlert AlertStyle="AlertStyle.Dark" Icon="mode_heat" Size="AlertSize.Large" Variant="Variant.Flat" class="rz-my-lg-12 promo-alert">
               <RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-mb-3 rz-color-on-base-darker"><strong>NEW: Radzen Blazor for Visual Studio</strong></RadzenText>
-              <RadzenText TextStyle="TextStyle.Body1" class="rz-color-on-base-darker">The extension brings Radzen’s rich feature set and productivity tools directly into the familiar Visual Studio 2022 environment. Connect to data, design, code seamlessly, and work faster within Visual Studio.</RadzenText>
-              <RadzenText TextStyle="TextStyle.Body1" class="rz-mb-0 rz-mt-5 rz-color-on-base-darker">
-                <RadzenLink Path="https://www.radzen.com/blazor-visual-studio" target="_blank" Style="color: #FFB9FF !important;"><strong>Learn More ↗</strong></RadzenLink>
-              </RadzenText>
+              <RadzenText TextStyle="TextStyle.Body1" class="rz-color-on-base-darker">The extension brings Radzen’s rich feature set and productivity tools directly into the familiar Visual Studio 2022 environment. Connect to data, design, code seamlessly, and work faster within Visual Studio. <RadzenLink Path="https://www.radzen.com/blazor-visual-studio" target="_blank" Style="color: #FFB9FF !important;">Learn More ↗</RadzenLink></RadzenText>
+              <RadzenStack Orientation="Orientation.Horizontal" Gap="2rem" AlignItems="AlignItems.Center" class="rz-mt-6">
+                <RadzenButton Text="See in Action" ButtonStyle="ButtonStyle.Primary" Variant="Variant.Flat" Size="ButtonSize.Medium" Click=@(args => ShowVideoDialog("https://www.youtube.com/embed/VUwy-BX3eCM?&rel=0")) />
+              </RadzenStack>
             </RadzenAlert>
             <RadzenRow class="rz-mt-8 rz-mt-sm-6 rz-pt-sm-6 rz-mt-lg-12 rz-pt-lg-12">
               <RadzenColumn Size="12" SizeMD="3" SizeLG="2" SizeXL="3">
@@ -387,4 +388,17 @@
       <Social />
     </RadzenStack>
   </RadzenStack>
-</div>
+</div>
+
+@code {
+  async Task ShowVideoDialog(string url)
+    {
+      await DialogService.OpenAsync("Create new Blazor app", ds =>
+      @<div class="embed-container">
+        <iframe src="@url" frameborder="0" allowfullscreen=""></iframe>
+      </div>, new DialogOptions() {
+          Width = "50%",
+          Resizable = true
+        });
+    }
+}
diff --git a/RadzenBlazorDemos/Shared/MainLayout.razor b/RadzenBlazorDemos/Shared/MainLayout.razor
@@ -44,10 +44,10 @@
                         <RadzenColumn Size="12">
                             <RadzenAlert AlertStyle="AlertStyle.Dark" Icon="mode_heat" Size="AlertSize.Large" Variant="Variant.Flat" class="rz-my-lg-12 promo-alert">
                                 <RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-mb-3 rz-color-on-base-darker"><strong>NEW: Radzen Blazor for Visual Studio</strong></RadzenText>
-                                <RadzenText TextStyle="TextStyle.Body1" class="rz-color-on-base-darker">The extension brings Radzen’s rich feature set and productivity tools directly into the familiar Visual Studio 2022 environment. Connect to data, design, code seamlessly, and work faster within Visual Studio.</RadzenText>
-                                <RadzenText TextStyle="TextStyle.Body1" class="rz-mb-0 rz-mt-5 rz-color-on-base-darker">
-                                    <RadzenLink Path="https://www.radzen.com/blazor-visual-studio" target="_blank" Style="color: #FFB9FF !important;"><strong>Learn More ↗</strong></RadzenLink>
-                                </RadzenText>
+                                <RadzenText TextStyle="TextStyle.Body1" class="rz-color-on-base-darker">The extension brings Radzen’s rich feature set and productivity tools directly into the familiar Visual Studio 2022 environment. Connect to data, design, code seamlessly, and work faster within Visual Studio. <RadzenLink Path="https://www.radzen.com/blazor-visual-studio" target="_blank" Style="color: #FFB9FF !important;">Learn More ↗</RadzenLink></RadzenText>
+                                <RadzenStack Orientation="Orientation.Horizontal" Gap="2rem" AlignItems="AlignItems.Center" class="rz-mt-6">
+                                    <RadzenButton Text="See in Action" ButtonStyle="ButtonStyle.Primary" Variant="Variant.Flat" Size="ButtonSize.Medium" Click=@(args => ShowVideoDialog("https://www.youtube.com/embed/VUwy-BX3eCM?&rel=0")) />
+                                </RadzenStack>
                             </RadzenAlert>
                             @Body
                             <RadzenCard class="rz-mt-12 rz-display-block rz-p-6 rz-p-md-12">
@@ -78,7 +78,7 @@
                                                 </RadzenStack>
                                                 <RadzenText TextStyle="TextStyle.Body2" TagName="TagName.P" class="rz-text-secondary-color" Style="line-height: 1.5; text-wrap: balance;">Radzen Blazor for Visual Studio extension streamlines Blazor development within the Visual Studio environment. The Blazor extension you need to boost productivity!</RadzenText>
                                                 <RadzenStack Orientation="Orientation.Horizontal" Gap="1rem" Wrap="FlexWrap.Wrap" class="rz-my-4">
-                                                    <NavLink class="rz-button rz-button-md rz-primary rz-shade-default rz-variant-flat rz-text-align-center" href="https://www.radzen.com/blazor-visual-studio/download/" target="_blank">Download</NavLink>
+                                                    <RadzenButton Text="See in Action" ButtonStyle="ButtonStyle.Primary" Variant="Variant.Flat" Size="ButtonSize.Medium" Click=@(args => ShowVideoDialog("https://www.youtube.com/embed/VUwy-BX3eCM?&rel=0")) />
                                                     <NavLink class="rz-button rz-button-md rz-base rz-shade-default rz-variant-flat rz-text-align-center" href="https://www.radzen.com/blazor-visual-studio/" target="_blank">Learn More</NavLink>
                                                 </RadzenStack>
                                             </RadzenColumn>