From c3bbc7e31c39b490e3a0af4d611114ed8e297689 Mon Sep 17 00:00:00 2001
From: yordanov <vasil@yordanov.info>
Date: Mon, 18 Nov 2024 12:42:56 +0200
Subject: [PATCH] BlackFriday2024

---
 RadzenBlazorDemos/Pages/Index.razor       | 11 +++++++++--
 RadzenBlazorDemos/Shared/MainLayout.razor | 10 ++++++++++
 RadzenBlazorDemos/wwwroot/css/site.css    |  6 ++++++
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/RadzenBlazorDemos/Pages/Index.razor b/RadzenBlazorDemos/Pages/Index.razor
index bf37eeef5b4..83e870903ab 100644
--- 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
index 0d68e46af4e..2c8cf1ed536 100644
--- 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
index efbda84e7ba..322aee2207d 100644
--- 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) {