BlackFriday2024

radzenhq · Nov 18, 2024 · c3bbc7e · c3bbc7e
1 parent 5d5565b
commit c3bbc7e
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 2 deletions.
diff --git a/RadzenBlazorDemos/Pages/Index.razor b/RadzenBlazorDemos/Pages/Index.razor
@@ -104,8 +104,15 @@
 
     <RadzenRow ID="components" Gap="1rem">
       <RadzenColumn Size="12">
-        <RadzenAlert AlertStyle="AlertStyle.Info" AllowClose="false" Size="AlertSize.Large" Variant="Variant.Flat" Shade="Shade.Lighter" class="rz-my-lg-12">
-          <strong>Radzen Blazor Components v5.0 is here!</strong> RTL support, new themes and more... <RadzenLink Path="https://www.radzen.com/blog/radzen-blazor-components-v5-rtl-support-new-themes-and-more/" target="_blank">Read the blog post ↗</RadzenLink>
+        <RadzenAlert AlertStyle="AlertStyle.Dark" Icon="percent" 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>Save $100 with our Black Friday deals!</strong></RadzenText>
+          <RadzenText TextStyle="TextStyle.Body1" class="rz-mb-0 rz-color-on-base-darker">Upgrade your development experience with Radzen Blazor Studio today!</RadzenText>
+          <RadzenText TextStyle="TextStyle.Body1" class="rz-color-on-base-darker">
+            Get $100 OFF with promo code <RadzenLink Path="https://www.radzen.com/pricing" target="_blank" Style="color: #FF504D !important;"><strong>BLACKFRIDAY2024</strong></RadzenLink> at checkout until November 30. 
+          </RadzenText>
+          <RadzenText TextStyle="TextStyle.Body1" class="rz-mb-0 rz-color-on-base-darker">
+            <RadzenLink Path="https://www.radzen.com/pricing" target="_blank" Style="color: #FF504D !important;"><strong>See Pricing ↗</strong></RadzenLink>
+          </RadzenText>
         </RadzenAlert>
       </RadzenColumn>
       <RadzenColumn Size="12">

diff --git a/RadzenBlazorDemos/Shared/MainLayout.razor b/RadzenBlazorDemos/Shared/MainLayout.razor
@@ -42,6 +42,16 @@
                 <RadzenColumn Size="12">
                     <RadzenRow class="rz-mx-auto" Style="max-width: 1600px;">
                         <RadzenColumn Size="12">
+                            <RadzenAlert AlertStyle="AlertStyle.Dark" Icon="percent" Size="AlertSize.Large" Variant="Variant.Flat" class="rz-mb-lg-8 promo-alert">
+                                <RadzenText TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-mb-3 rz-color-on-base-darker"><strong>Save $100 with our Black Friday deals!</strong></RadzenText>
+                                <RadzenText TextStyle="TextStyle.Body1" class="rz-mb-0 rz-color-on-base-darker">Upgrade your development experience with Radzen Blazor Studio today!</RadzenText>
+                                <RadzenText TextStyle="TextStyle.Body1" class="rz-color-on-base-darker">
+                                    Get $100 OFF with promo code <RadzenLink Path="https://www.radzen.com/pricing" target="_blank" Style="color: #FF504D !important;"><strong>BLACKFRIDAY2024</strong></RadzenLink> at checkout until November 30. 
+                                </RadzenText>
+                                <RadzenText TextStyle="TextStyle.Body1" class="rz-mb-0 rz-color-on-base-darker">
+                                    <RadzenLink Path="https://www.radzen.com/pricing" target="_blank" Style="color: #FF504D !important;"><strong>See Pricing ↗</strong></RadzenLink>
+                                </RadzenText>
+                            </RadzenAlert>
                             @Body
                             <RadzenCard class="rz-mt-12 rz-display-block rz-p-12">
                                 <RadzenRow AlignItems="AlignItems.Center" Gap="0px">

diff --git a/RadzenBlazorDemos/wwwroot/css/site.css b/RadzenBlazorDemos/wwwroot/css/site.css
@@ -459,6 +459,12 @@ svg.illustration {
     border-inline-start-color: var(--rz-tabs-tab-hover-color);
 }
 
+/* Promo */
+
+.promo-alert {
+    background: linear-gradient(110deg, rgba(0,0,0,0.4) 100%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.4) 100%),linear-gradient(110deg, #000 20%, #AA01E4 75%, #534EEB 100%);
+}
+
 /* Responsive */
 
 @media (max-width: 1024px) {