docs: add black friday offer

Author: mrholek

docs/assets/scss/_banner.scss

@@ -0,0 +1,40 @@
+.black-friday-banner {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 250px;
+  margin-bottom: 50px;
+  color: rgba(255, 255, 255, .86);
+  text-decoration: none;
+  background: linear-gradient(222deg, #2c384a, #000);
+
+  &:hover {
+    color: rgba(255, 255, 255, 1);
+  }
+
+  &::before,
+  &::after {
+    position: absolute;
+    z-index: -1;
+    content: "";
+  }
+
+  &::before {
+    top: 0;
+    right: 0;
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    background: url("./../img/percents-bg.png");
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 100%;
+  }
+
+  .logo {
+    max-width: 100%;
+    max-height: 400px;
+  }
+}

docs/assets/scss/docs.scss

@@ -52,6 +52,7 @@ $enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default
 @import "colors";
 @import "clipboard-js";
 @import "placeholder-img";
+@import "banner";
 
 // Load docs dependencies
 @import "syntax";

docs/layouts/_default/docs.html

@@ -3,7 +3,22 @@
   <main class="docs-main order-1">
     <div class="docs-intro ps-lg-4">
       {{ partial "breadcrumb" . }}
-      {{ if .Page.Params.pro_component }}
+      <a class="black-friday-banner rounded" href="https://coreui.io/pricing/?framework=bootstrap&amp;docs=coreui-banner-black-friday">
+        <div class="row">
+          <div class="col-xl-7 align-self-center">
+            <div class="p-3 p-xl-5">
+              <h2>Black Friday? Black Week? <br> CoreUI makes it MONTH!</h2>
+              <div> With CoreUI you don't have to wait till Black Friday, cause we launched our Black Friday promo - right here, right now! Up to 70% discount for CoreUI PRO Admin Templates and PRO UI Components.</div>
+            </div>
+          </div>
+          <div class="col-xl-5">
+            <div class="p-2">
+              <img class="logo mx-auto" src="/assets/img/black-hexagon400h.webp" alt="CoreUI logo" loading="lazy">
+            </div>
+          </div>
+        </div>
+      </a>
+      <!-- {{ if .Page.Params.pro_component }}
       <div class="bg-danger bg-opacity-10 border-start border-start-5 border-start-danger p-4 pb-3 mb-5">
         <h3 class="mb-4">CoreUI PRO Component</h3>
         <p>
@@ -25,7 +40,7 @@ <h3 class="mb-4">Support CoreUI Development</h3>
           <li>Give us a star ⭐️ on <a href="https://github.com/coreui/coreui" target="_blank">Github</a>.</li>
         </ul>
       </div>
-      {{ end }}
+      {{ end }} -->
       <h1 class="docs-title" id="content">{{ .Title | markdownify }}</h1>
       <p class="docs-lead">{{ .Page.Params.Description | markdownify }}</p>
       {{ partial "ads" . }}