feat: add static top banner for new ebook edition promotion (#405)

Author: dokolyski

libs/blog/ad-banner/ui/src/index.ts

@@ -1,3 +1,4 @@
 export * from './lib/ad-image-banner/ad-image-banner.component';
 export * from './lib/ad-image-banner/ad-image-banner-data.interface';
 export * from './lib/banner-carousel/al-banner-carousel.component';
+export * from './lib/top-banner.component';

libs/blog/ad-banner/ui/src/lib/top-banner.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'al-top-banner',
+  template: `
+    <a
+      class="flex w-full flex-wrap justify-center gap-[5px] px-[10px] py-3 text-[18px] font-medium text-white"
+      style="background-image: linear-gradient(0.25turn, #fe5758, #8d52fe)"
+      href="https://houseofangular.io/the-ultimate-guide-to-angular-evolution/?utm_source=www-al&utm_medium=baner&utm_campaign=angular19-evolution"
+    >
+      <span>Enhance Your Project with</span>
+      <span class="rounded-[4px] bg-white px-[6px] text-[#f9506a]">
+        Angular 19
+      </span>
+      <span class="underline">Download a free ebook!</span>
+    </a>
+  `,
+})
+export class TopBannerComponent {}

libs/blog/shell/feature-shell-web/src/lib/root-shell.component.ts

@@ -16,12 +16,14 @@ import { SearchComponent } from '@angular-love/blog/search/feature-search';
 import {
   AdImageBanner,
   AlBannerCarouselComponent,
+  TopBannerComponent,
 } from '@angular-love/blog/shared/ad-banner';
 
 @Component({
   selector: 'al-root-shell',
   template: `
-    <div class="fixed top-0 z-10 w-full">
+    <al-top-banner #topBanner />
+    <div class="sticky top-0 z-10 w-full">
       <al-header
         class="block w-full"
         [language]="language()"
@@ -30,7 +32,7 @@ import {
         <al-search />
       </al-header>
     </div>
-    <al-layout class="mt-20" [ngClass]="{ 'mt-40': adBannerVisible() }">
+    <al-layout class="mt-0" [ngClass]="{ 'mt-20': adBannerVisible() }">
       @if (slides()?.length && slides(); as slides) {
         <al-banner-carousel
           class="mb-4 inline-block"
@@ -50,6 +52,7 @@ import {
     SearchComponent,
     NgClass,
     AlBannerCarouselComponent,
+    TopBannerComponent,
   ],
 })
 export class RootShellComponent {