docs: add Black Friday banner

Author: mrholek

docs/assets/scss/_banner.scss

@@ -1,40 +1,14 @@
-.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);
+.banner-black-friday {
+  padding: 2rem;
+  background: url("./../img/percents-bg.png") no-repeat, 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;
+  .black-friday-img {
     width: 100%;
-    max-width: 100%;
-    height: 100%;
-    background: url("./../img/cyber-bg.png");
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: 100%;
-  }
+    max-width: 360px;
 
-  .logo {
-    max-width: 100%;
-    max-height: 400px;
+    @include media-breakpoint-up(xxl) {
+      max-width: 160px;
+      transform: scale(1.35) translateX(-15px);
+    }
   }
 }

docs/assets/scss/docs.scss

@@ -38,6 +38,7 @@ $enable-cssgrid: true;
 // Load docs components
 @import "variables";
 @import "ads";
+@import "banner";
 @import "content";
 @import "skippy";
 @import "header";

docs/layouts/_default/docs.html

@@ -3,6 +3,7 @@
   <main class="docs-main order-1">
     <div class="docs-intro ps-lg-4">
       {{ partial "breadcrumb" . }}
+      {{ partial "banner-black-friday" . }}
       {{ partial "banner" . }}
       {{ if .Page.Params.bootstrap }}
       <div class="d-flex flex-column">

docs/layouts/partials/banner-black-friday.html

@@ -0,0 +1,28 @@
+<section class="banner-black-friday text-white border border-3 border-warning rounded px-xl-5 mb-5">
+  <div class="container">
+    <div class="row flex-column flex-md-row align-items-md-center">
+      <div class="col-12 col-xxl-auto text-center">
+        <img
+          class="black-friday-img mb-3 mb-xxl-0"
+          src="https://coreui.io/images/black-hexagon-360h.webp"
+          alt="CoreUI Neon Logo"
+        />
+      </div>
+      <div class="col">
+        <div class="fw-semibold fs-4">
+          Are you ready for Black <del>Friday</del> Month Deals?
+        </div>
+        <div>
+          Extra 25% off for all sale items + Free CoreUI Icons PRO with every order! Limited offer for the first 200 people, use code <strong>2024BWCW25</strong> during checkout.
+        </div>
+      </div>
+      <div class="col-auto">
+        <a
+          href="https://coreui.io/pricing/#pricing-table"
+          class="btn btn-warning btn-xl mt-3 mt-lg-0"
+          >Get offer!</a
+        >
+      </div>
+    </div>
+  </div>
+</section>

docs/layouts/partials/banner.html

@@ -1,10 +1,12 @@
 {{ if .Page.Params.pro_component }}
-<div class="bg-info bg-opacity-10 border border-2 border-info rounded d-flex align-items-center p-3 px-xl-4 mb-5 row flex-xl-nowrap">
-  <div class="col-xl-auto col-12 d-none d-xl-block p-0">
-    <img src="https://coreui.io/images/frameworks/core_blue_960px.png" class="img-fluid" width="160px" height="160px" alt="CoreUI PRO hexagon">
+<div class="bg-info bg-opacity-10 border border-2 border-info rounded p-3 px-xl-4 mb-5">
+  <div class="row d-flex align-items-center flex-xl-nowrap">
+    <div class="col-xl-auto col-12 d-none d-xl-block p-0">
+      <img src="https://coreui.io/images/frameworks/core_blue_960px.png" class="img-fluid" width="160px" height="160px" alt="CoreUI PRO hexagon">
+    </div>
+    <div class="col-md col-12 px-lg-4">This Component is a part of CoreUI PRO, an advanced UI library offering over 100 components designed for creating responsive, sleek, and powerful applications. Experience it yourself by signing up for a complimentary 7-day trial.</div>
+    <div class="col-md-auto col-12 mt-3 mt-lg-0"><a class="btn btn-danger text-nowrap text-white" href="https://coreui.io/trial/?src=coreui-docs&cta=pro-banner">Start Free Trial</a></div>
   </div>
-  <div class="col-md col-12 px-lg-4">This Component is a part of CoreUI PRO, an advanced UI library offering over 100 components designed for creating responsive, sleek, and powerful applications. Experience it yourself by signing up for a complimentary 7-day trial.</div>
-  <div class="col-md-auto col-12 mt-3 mt-lg-0"><a class="btn btn-danger text-nowrap text-white" href="https://coreui.io/trial/?src=coreui-docs&cta=pro-banner">Start Free Trial</a></div>
 </div>
 {{ end }}
 {{ if .Page.Params.preview_component }}