feat: design glassmorphic conformance footer to prevent image occlusion [skip ci]

CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [[2.3.22]](https://github.com/nubenetes/awesome-kubernetes/releases/tag/v2.3.22) - 2026-05-28
+
+### Changed
+- **Showcase Image Conformance Footer Bar**: Replaced the absolute badge overlay with an elegant, responsive glassmorphic footer bar `.hero-showcase-footer` beneath the image. This bar contains the CNCF conformance badge alongside an explanatory caption about workload portability, ensuring that no text covers any part of the main showcase image.
+
 ## [[2.3.21]](https://github.com/nubenetes/awesome-kubernetes/releases/tag/v2.3.21) - 2026-05-28
 
 ### Changed

docs/static/v2_elite.css

@@ -315,18 +315,26 @@ a {
   margin: 0 !important;
 }
 
-.hero-showcase-overlay {
-  position: absolute;
-  bottom: 12px;
-  right: 12px;
-  pointer-events: none;
+.hero-showcase-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 20px;
+  background: rgba(9, 9, 11, 0.5);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+[data-md-color-scheme="slate"] .hero-showcase-footer {
+  background: rgba(0, 0, 0, 0.6);
 }
 
 .hero-showcase-badge {
-  background: rgba(9, 9, 11, 0.8);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(34, 211, 238, 0.1);
+  border: 1px solid rgba(34, 211, 238, 0.3);
   color: var(--md-accent-fg-color);
   font-size: 0.72rem;
   font-weight: 700;
@@ -336,6 +344,17 @@ a {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
   letter-spacing: 0.05em;
   transition: all 0.3s ease;
+  white-space: nowrap;
+}
+
+.hero-showcase-caption {
+  font-size: 0.8rem;
+  color: var(--md-primary-fg-color--dark);
+  text-align: right;
+  flex: 1;
+  min-width: 250px;
+  line-height: 1.4;
+  transition: color 0.3s ease;
 }
 
 /* Hover effects */
@@ -346,16 +365,25 @@ a {
 }
 
 .hero-showcase-wrapper:hover .hero-showcase-image {
-  transform: scale(1.03);
+  transform: scale(1.02); /* slightly reduced zoom to keep it elegant */
   filter: brightness(1.05) contrast(1.02);
 }
 
+.hero-showcase-wrapper:hover .hero-showcase-footer {
+  border-top-color: rgba(34, 211, 238, 0.3);
+  background: rgba(34, 211, 238, 0.02) !important;
+}
+
 .hero-showcase-wrapper:hover .hero-showcase-badge {
   background: var(--md-accent-fg-color);
   color: #09090b;
   box-shadow: 0 0 10px var(--md-accent-fg-color);
 }
 
+.hero-showcase-wrapper:hover .hero-showcase-caption {
+  color: var(--md-primary-fg-color);
+}
+
 /* Clickable Quote Card */
 .quote-card-link {
   display: block;

src/v2_optimizer.py

@@ -750,8 +750,9 @@ class V2VisionEngine:
             "<div class=\"hero-showcase-wrapper\">\n"
             "  <a href=\"https://www.cncf.io/certification/software-conformance\" class=\"hero-showcase-link\">\n"
             "    <img src=\"images/container_with_cars_v2.png\" alt=\"container_with_cars\" class=\"hero-showcase-image\" />\n"
-            "    <div class=\"hero-showcase-overlay\">\n"
-            "      <span class=\"hero-showcase-badge\">CNCF Software Conformance</span>\n"
+            "    <div class=\"hero-showcase-footer\">\n"
+            "      <span class=\"hero-showcase-badge\">CNCF Conformance</span>\n"
+            "      <span class=\"hero-showcase-caption\">Standardized conformance guarantees seamless workload portability across the Cloud Native landscape.</span>\n"
             "    </div>\n"
             "  </a>\n"
             "</div>\n"

v2-docs/index.md

@@ -4,8 +4,9 @@
 <div class="hero-showcase-wrapper">
   <a href="https://www.cncf.io/certification/software-conformance" class="hero-showcase-link">
     <img src="images/container_with_cars_v2.png" alt="container_with_cars" class="hero-showcase-image" />
-    <div class="hero-showcase-overlay">
-      <span class="hero-showcase-badge">CNCF Software Conformance</span>
+    <div class="hero-showcase-footer">
+      <span class="hero-showcase-badge">CNCF Conformance</span>
+      <span class="hero-showcase-caption">Standardized conformance guarantees seamless workload portability across the Cloud Native landscape.</span>
     </div>
   </a>
 </div>