Merge pull request #490 from linuxfoundation/issue-#4888-update-kubecon-banner

feat(banner): add KubeCon Europe 2026 banner component

Author: ahmedomosanya

src/app/app.component.html

@@ -2,6 +2,13 @@
  SPDX-License-Identifier: MIT -->
 <app-loader></app-loader>
 
+<!-- KubeCon Banner -->
+<app-kubecon-banner
+  [text]="kubeconBanner.text"
+  [ctaText]="kubeconBanner.ctaText"
+  [url]="kubeconBanner.url">
+</app-kubecon-banner>
+
 <div class="fix-header-margin">
   <app-alert></app-alert>
   <router-outlet></router-outlet>

src/app/app.component.ts

@@ -16,6 +16,12 @@ export class AppComponent {
   hasExpanded: boolean;
   links: any[];
 
+  kubeconBanner = {
+    text: 'Meet us in Amsterdam for KubeCon + CloudNativeCon Europe 2026 • Mar 23–26 •',
+    ctaText: 'Register now',
+    url: 'https://events.linuxfoundation.org/kubecon-cloudnativecon-europe/register/?utm_source=cla-contributor-console&utm_medium=homepage&utm_campaign=18269725-KubeCon-EU-2026&utm_content=hero'
+  };
+
   constructor(private auth:AuthService, private route: ActivatedRoute){}
 
   onToggled() {

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

@@ -0,0 +1,10 @@
+<!-- Copyright The Linux Foundation and each contributor to CommunityBridge.
+ SPDX-License-Identifier: MIT
+ Assisted with Cursor, assisted with Claude AI -->
+
+<div class="kubecon-banner" *ngIf="text">
+  {{ text }}
+  <a *ngIf="ctaText && url" [href]="url" target="_blank" rel="noopener">
+    {{ ctaText }}
+  </a>
+</div>

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

@@ -0,0 +1,29 @@
+// Copyright The Linux Foundation and each contributor to CommunityBridge.
+// SPDX-License-Identifier: MIT
+// Assisted with Cursor, assisted with Claude AI
+
+.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,16 @@
+// Copyright The Linux Foundation and each contributor to CommunityBridge.
+// SPDX-License-Identifier: MIT
+// Assisted with Cursor, assisted with Claude AI
+
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-kubecon-banner',
+  templateUrl: './kubecon-banner.component.html',
+  styleUrls: ['./kubecon-banner.component.scss']
+})
+export class KubeconBannerComponent {
+  @Input() text?: string;
+  @Input() ctaText?: string;
+  @Input() url?: string;
+}

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]
 })