From d6ee6be558c5f3968d4549b30eac0b137be418d1 Mon Sep 17 00:00:00 2001
From: Nubenetes Bot <bot@nubenetes.com>
Date: Wed, 27 May 2026 22:53:09 +0200
Subject: [PATCH] feat: optimize V2 index header cards responsiveness, links,
 and animations

---
 CHANGELOG.md             |  5 +++++
 docs/static/v2_elite.css | 23 +++++++++++++----------
 v2-docs/index.md         |  4 ++--
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ea7e08a7..7a58cfa3 100644
--- a/CHANGELOG.md
+++ b/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.17]](https://github.com/nubenetes/awesome-kubernetes/releases/tag/v2.3.17) - 2026-05-27
+
+### Changed
+- **V2 Header Cards Optimization**: Fixed broken `.md` targets in raw HTML header cards by pointing them to compiled `.html` pages. Upgraded card sizing to use a responsive flex layout (`flex: 1; max-width: 280px; min-width: 200px;`) with increased padding and added visual hover highlight states on card icons matching the mosaic aesthetics.
+
 ## [[2.3.16]](https://github.com/nubenetes/awesome-kubernetes/releases/tag/v2.3.16) - 2026-05-27
 
 ### Changed
diff --git a/docs/static/v2_elite.css b/docs/static/v2_elite.css
index 93e721ae..350ada94 100644
--- a/docs/static/v2_elite.css
+++ b/docs/static/v2_elite.css
@@ -196,10 +196,12 @@ a {
 
 /* V2 Homepage Hero Dashboard Cards */
 .hero-badge-card {
+  flex: 1;
+  max-width: 280px;
+  min-width: 200px;
   border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 12px;
-  padding: 16px;
-  width: 180px;
+  border-radius: 16px;
+  padding: 24px 16px;
   text-align: center;
   background: rgba(255, 255, 255, 0.015);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -209,11 +211,11 @@ a {
 }
 
 .hero-badge-card img {
-  width: 80px;
-  height: 80px;
+  width: 100px;
+  height: 100px;
   object-fit: contain;
-  margin-bottom: 8px;
-  transition: transform 0.3s ease;
+  margin-bottom: 12px;
+  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), filter 0.25s ease;
 }
 
 .hero-badge-card:hover {
@@ -224,17 +226,18 @@ a {
 }
 
 .hero-badge-card:hover img {
-  transform: scale(1.1);
+  transform: scale(1.15);
+  filter: brightness(1.25);
 }
 
 .hero-badge-title {
   font-weight: bold;
-  font-size: 0.9rem;
+  font-size: 0.95rem;
   color: var(--md-primary-fg-color);
 }
 
 .hero-badge-subtitle {
-  font-size: 0.75rem;
+  font-size: 0.78rem;
   color: var(--md-primary-fg-color--dark);
   margin-top: 4px;
 }
diff --git a/v2-docs/index.md b/v2-docs/index.md
index 7538d745..869edc84 100644
--- a/v2-docs/index.md
+++ b/v2-docs/index.md
@@ -1,14 +1,14 @@
 # Nubenetes Elite Portal (V2) | Awesome Kubernetes & Cloud [![Awesome](https://cdn.jsdelivr.net/gh/sindresorhus/awesome@d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)
 
 <div style="display: flex; justify-content: center; gap: 24px; margin: 16px 0; flex-wrap: wrap;">
-  <a href="./kubernetes.md" style="text-decoration: none; color: inherit; display: block;">
+  <a href="./kubernetes.html" style="text-decoration: none; color: inherit; display: block;">
     <div class="hero-badge-card">
       <img src="images/kubernetes_logo.png" alt="Kubernetes"/>
       <div class="hero-badge-title">Ecosystem Core</div>
       <div class="hero-badge-subtitle">Explore Kubernetes</div>
     </div>
   </a>
-  <a href="./introduction.md" style="text-decoration: none; color: inherit; display: block;">
+  <a href="./introduction.html" style="text-decoration: none; color: inherit; display: block;">
     <div class="hero-badge-card">
       <img src="images/hero-car.png" alt="Nubenetes Car"/>
       <div class="hero-badge-title">Get Started</div>