Merge pull request #480 from linuxfoundation/issue-#4791-add-kubecon-banner

feat(banner): add KubeCon banner component

Author: ahmedomosanya

src/app/app.component.html

@@ -2,6 +2,9 @@
  SPDX-License-Identifier: MIT -->
 <app-loader></app-loader>
 
+<!-- KubeCon Banner -->
+<app-kubecon-banner></app-kubecon-banner>
+
 <div class="fix-header-margin">
   <app-alert></app-alert>
   <router-outlet></router-outlet>

src/app/shared/components/kubecon-banner/kubecon-banner.component.html

@@ -0,0 +1,9 @@
+<!-- Copyright The Linux Foundation and each contributor to CommunityBridge.
+ SPDX-License-Identifier: MIT -->
+
+<div class="kubecon-banner">
+  Meet us in Atlanta for KubeCon + CloudNativeCon North America · Nov 10-13 ·
+  <a [href]="registrationUrl" target="_blank" rel="noopener">
+    REGISTER TODAY
+  </a>
+</div>

src/app/shared/components/kubecon-banner/kubecon-banner.component.scss

@@ -0,0 +1,28 @@
+// Copyright The Linux Foundation and each contributor to CommunityBridge.
+// SPDX-License-Identifier: MIT
+
+.kubecon-banner {
+  display: block;
+  background-color: rgb(0, 148, 255);
+  color: white;
+  text-align: center;
+  height: 3.5rem;
+  font-size: 0.875rem;
+  line-height: 1.75rem;
+  margin-top: 60px;
+
+  a {
+    color: white;
+    text-decoration: underline;
+    white-space: nowrap;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  // Responsive styles
+  @media (min-width: 640px) {
+    height: 1.75rem;
+  }
+}

src/app/shared/components/kubecon-banner/kubecon-banner.component.ts

@@ -0,0 +1,17 @@
+// Copyright The Linux Foundation and each contributor to CommunityBridge.
+// SPDX-License-Identifier: MIT
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-kubecon-banner',
+  templateUrl: './kubecon-banner.component.html',
+  styleUrls: ['./kubecon-banner.component.scss']
+})
+export class KubeconBannerComponent {
+  private utmSource = 'CLA-Contributor-Console';
+
+  get registrationUrl(): string {
+    return `https://events.linuxfoundation.org/kubecon-cloudnativecon-north-america/register/?utm_source=${this.utmSource}&utm_medium=banner&utm_campaign=KubeCon-NA-2025&utm_content=hero`;
+  }
+}

src/app/shared/shared.module.ts

@@ -19,6 +19,7 @@ import { FooterComponent } from './components/footer/footer.component';
 import { ConsentComponent } from './components/consent/consent.component';
 import { CommonModule } from '@angular/common';
 import { TrackEventDirective } from './directives/track-event.directive';
+import { KubeconBannerComponent } from './components/kubecon-banner/kubecon-banner.component';
 
 @NgModule({
     declarations: [
@@ -33,7 +34,8 @@ import { TrackEventDirective } from './directives/track-event.directive';
         CheckboxComponent,
         FooterComponent,
         ConsentComponent,
-        TrackEventDirective
+        TrackEventDirective,
+        KubeconBannerComponent
     ],
     imports: [
         CommonModule
@@ -50,7 +52,8 @@ import { TrackEventDirective } from './directives/track-event.directive';
         CheckboxComponent,
         FooterComponent,
         ConsentComponent,
-        TrackEventDirective
+        TrackEventDirective,
+        KubeconBannerComponent
     ],
     providers: [StorageService, AuthService, LfxHeaderService, InterceptorService]
 })