Update colors for the buttons and sync menu

data/mainMenu.yml

@@ -1,6 +1,6 @@
 items:
   - title: Products
-    url: /products/kubermatic-kubernetes-platform/
+    url: /#products
     class: menu-groups menu-groups--products
     sections:
       - title: Products
@@ -109,14 +109,33 @@ items:
                       url: /products/kubermatic-kubeone/cloud/#digitalocean
                     - title: Equinix Metal
                       url: /products/kubermatic-kubeone/cloud/#equinix-metal
-          - title: Kubermatic KubeLB
+          - title: Kubermatic Load Balancer
             url: /products/kubelb/
             text: Cloud Native Multi-Tenant Load Balancing
             noArrowIcon: true
             panel:
+              summary: Welcome to Kubermatic Load Balancer, the next-generation application delivery platform designed for cloud-native architectures. As cloud-native have evolved, Kubermatic Load Balancer offers a multi-tenancy approach to load balancing, providing seamless scalability, security, and management for distributed applications and teams.
               image: /img/menu/kubelb.jpg
               columns:
                 - column:
+          - title: Kubermatic Virtualization
+            url: /products/kubermatic-virtualization/
+            text: Seamlessly build your private cloud entirely with Kubernetes
+            noArrowIcon: true
+            panel:
+              summary: Simplify your operations and streamline your infrastructure with a platform that integrates Kubernetes and virtualized workloads. Enjoy enhanced networking and storage capabilities to fully support your organization's cloud needs.
+              image: /img/menu/kubermatic-virtualization.jpg
+              columns:
+                - column:
+          - title: Kubermatic Developer Platform
+            url: /products/kubermatic-developer-platform/
+            text: Empower Developers and Accelerate Innovation
+            noArrowIcon: true
+            panel:
+              summary: Maximize developer productivity and accelerate innovation with Kubermatic Developer Platform (KDP). Powered by Kubernetes API and based on [CNCF Sandbox project kcp](https://www.cncf.io/projects/kcp/), our cutting-edge internal developer platform enables the seamless creation and management of services backed by a centralized catalog.
+              image: /img/menu/kubermatic-developer-platform.jpg
+              columns:
+                - column:
           - title: Kubermatic Kubernetes Subscription
             url: /products/kubermatic-kubernetes-subscription/
             text: Upstream Kubernetes support
@@ -233,6 +252,10 @@ items:
           - title: Kubernetes for 5G
             url: /solutions/5g/
             text: Run 5G from the data center to the cloud to the edge
+          - title: AI infrastructure platform
+            url: /products/kubermatic-kubernetes-platform/ai-native-infrastructure-platform-by-kkp/
+          - title: Application backups
+            url: /products/kubermatic-kubernetes-platform/backups/
   - title: Services
     url: /services/
     footer: false

data/mobileMenu.yml

@@ -13,8 +13,12 @@ items:
         url: /products/kubermatic-kubernetes-platform/why-kubermatic/#integrations
     - title: Kubermatic KubeOne
       url: /products/kubermatic-kubeone/
-    - title: Kubermatic KubeLB
+    - title: Kubermatic Load Balancer
       url: /products/kubelb/
+    - title: Kubermatic Virtualization
+      url: /products/kubermatic-virtualization/
+    - title: Kubermatic Developer Platform
+      url: /products/kubermatic-developer-platform/
     - title: Kubermatic Kubernetes Subscription
       url: /products/kubermatic-kubernetes-subscription/
     - title: Managed Kubermatic Kubernetes Platform

themes/kubermatic-docs/assets/scss/_home.scss

@@ -70,8 +70,9 @@
   border-radius: 3px;
   &:hover {
     .tile-btn {
-      background-color: var(--MAIN-ACCENT-HOVER-color);
+      background-color: var(--MAIN-ACCENT-color);
       color: var(--WHITE-color);
+      border-color: var(--MAIN-ACCENT-color);
     }
   }
 }
@@ -106,10 +107,11 @@
   box-sizing: border-box;
   display: inline-block;
   padding: 6px 11px;
-  border: 2px solid var(--MAIN-ACCENT-HOVER-color);
+  background-color: var(--GOLD-color);
+  border: 2px solid var(--GOLD-color);
   border-radius: 3px;
   text-align: center;
-  color: var(--MAIN-TEXT-color);
+  color: var(--MAIN-HEADER-color);
   transition: .3s ease;
   text-decoration: none;
 }

themes/kubermatic-docs/assets/scss/_main-header.scss

@@ -111,21 +111,24 @@
   transition: .3s ease;
 }
 .menu-item .menu-item_btn:hover {
-  background: #00D9D2;
+  background-color: #0081ae;
+  color: #fff;
+  border-color: #0081ae;
 }
 .menu-item .menu-item_btn {
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 14px;
-  border: 2px solid #00D9D2;
+  background-color: #ffad05;
+  border: 2px solid #ffad05;
   border-radius: 3px;
   height: 44px;
   font-style: normal;
   font-weight: 500;
   font-size: 16px;
-  color: #FFFFFF;
+  color: #001128;
   text-decoration: none;
   transition: .2s ease;
 }
@@ -274,16 +277,17 @@
   justify-content: center;
   border-radius: 3px;
   font-size: 20px;
-  color: #FFFFFF;
+  color: #001128;
   text-decoration: none;
   height: 50px;
   padding: 0 14px;
-  border: 2px solid #00D9D2;
-  background: rgba(0,0,0,0.2);
+  background-color: #ffad05;
+  border: 2px solid #ffad05;
   transition: .2s ease;
   &:hover {
-    background: #00D9D2;
+    background-color: #0081ae;
     color: #fff;
+    border-color: #0081ae;
   }
 }
 
@@ -441,15 +445,8 @@
     line-height: 1.125;
     z-index: 1;
     transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
-    &:before {
-      content: "";
-      display: inline-block;
-      width: 24px;
-      height: 17px;
+    svg {
       margin-right: 20px;
-      background-image: url('/img/menu/mobile-menu-arrow.svg');
-      background-repeat: no-repeat;
-      background-size: cover;
     }
     &.hide {
       opacity: 0;

themes/kubermatic-docs/assets/scss/_theme-kubermatic.scss

@@ -13,6 +13,7 @@
     --BADGE-BG-color: #d8d8db;
     --BADGE-BG-warning-color: #f7b500;
     --WHITE-color:#fff;
+    --GOLD-color:#ffad05;
 
     --MAIN-TITLES-TEXT-color: #323232; /* Color of titles h2-h3-h4-h5 */
     --MAIN-LINK-color:#1C90F3; /* Color of links */

themes/kubermatic-docs/layouts/partials/main-header.html

@@ -81,7 +81,7 @@
                   <div class="menu-panel-group">
                     {{with $title}}<span class="menu-panel-url">{{.}}</span>{{end}}
                     {{with .summary}}
-                      <p class="menu-panel-summary">{{.}}</p>
+                      <p class="menu-panel-summary">{{. | markdownify}}</p>
                     {{end}}
                     {{with .columns}}
                     <div class="menu-columns">
@@ -150,7 +150,7 @@ <h2 class="menu-banner-title">{{.}}</h2>
     {{$id := 0}}
     {{with $.Site.Data.mobileMenu.items}}
     <div id="mobile-menu" class="mobile-menu">
-      <button class="pos-rel hide menu-btn-back" aria-hidden="true">Menu items</button>
+      <button class="pos-rel hide menu-btn-back"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="17"><g fill="none" fill-rule="evenodd" stroke="#262626" stroke-linecap="round" stroke-width="2"><path stroke-linejoin="round" d="M23 8.657H3"/><path d="M9.195 1 1.866 8.33l7.33 7.327"/></g></svg>Menu items</button>
       <ul class="mobile-menu-list">
       {{range .}}
         {{template "create-mobile-menu-tree" dict "node" . "id" $id}}
@@ -266,7 +266,7 @@ <h2 class="menu-banner-title">{{.}}</h2>
           showSubMenuPanel(panelId);
           prevPanels.push([currentPanelId, menuGroupButton.textContent]);
           currentPanelId = panelId;
-          backButton.textContent = menuGroupButton.textContent;
+          backButton.lastChild.data = menuGroupButton.textContent;
           backButton.classList.remove('hide');
         });
       });
@@ -275,7 +275,7 @@ <h2 class="menu-banner-title">{{.}}</h2>
         var currentPanel = prevPanels.pop();
         hideSubMenuPanel(currentPanelId);
         currentPanelId = currentPanel[0];
-        backButton.textContent = prevPanels.length ? prevPanels[prevPanels.length - 1][1] : "Menu items";
+        backButton.lastChild.data = prevPanels.length ? prevPanels[prevPanels.length - 1][1] : "Menu items";
         if (!prevPanels.length)
           backButton.classList.add('hide');
       });