fill out rest of the sections for dev ui page

_includes/dev-ui-generate-kubernetes-yaml.html

@@ -1,8 +1,16 @@
-<section class="dev-ui-generate-kubernetes">
+<section class="dev-ui-section">
   <div class="section-content">
     <h3>Generate Kubernetes YAML</h3>
-    <p>Leverage the Quarkus Dev UI to easily generate Kubernetes YAML files for your application. Configure and export deployment manifests, service configurations, and ingress rules directly through the interface, ensuring seamless integration with Kubernetes environments.</p>
-    <p>The intuitive UI allows you to tailor the generated resources to match your specific requirements, whether you're deploying to a local cluster or a using the yaml files generated as a starting point.</p>
-
+    <p>Use the Quarkus Dev UI to seamlessly modify your application's configuration values and directly generate new Helm charts. The Dev UI streamlines the process, allowing you to update settings and export tailored Kubernetes resources in one integrated interface.</p>
+    <p>With the configuration editor, you can customize namespaces, labels, environment variables, volume mounts, readiness and liveness probes, RBAC resources, and more. These settings ensure your generated Kubernetes manifests align perfectly with your deployment requirements.</p>
+    <div class="image-container">
+        <img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/modify-config-for-generating-kubernetes-manifest-dev-ui-light.png" alt="Modify Config for Generating Kubernetes Manifest Light">
+        <img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/modify-config-for-generating-kubernetes-manifest-dev-ui-dark.png" alt="Modify Config for Generating Kubernetes Manifest Dark">
+    </div>
+    <p>Once the configurations are in place, you can use the Dev UI to generate the Kubernetes resources, including Helm charts. This ensures a seamless and efficient process for adapting and deploying your application.</p>
+    <div class="image-container">
+        <img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/generate-k8-yaml-dev-ui-light.png" alt="Generate Kubernetes YAML Light">
+        <img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/generate-k8-yaml-dev-ui-dark.png" alt="Generate Kubernetes YAML Dark">
+    </div>
   </div>
 </section>

_includes/dev-ui-kafka-ui-integration.html

@@ -1,4 +1,10 @@
-<section class="dev-ui-kafka-ui-integration">
+<section class="dev-ui-section">
     <h3>Kafka UI Integration</h3>
-    <p>Visualize and interact with Kafka topics, consumer groups, and nodes through the Dev UI.</p>
-</section>
+    <p>With the Kafka Dev UI, directly manage your Kafka cluster and streamline essential tasks such as listing and creating topics, visualizing records, publishing new records, and inspecting consumer groups with their consumption lag. The UI integrates seamlessly with the Kafka broker configured for your application, providing an intuitive interface for broker management.</p>
+    <div class="image-container">
+        <img src="{{site.baseurl}}/guides/images/kafka-dev-ui-link.png" alt="Kafka Dev UI link">
+    </div>
+    <div class="image-container">
+        <img src="{{site.baseurl}}/guides/images/kafka-dev-ui-records.png" alt="Kafka Dev UI records">
+    </div>
+</section>

_includes/dev-ui-keycloak-integration.html

@@ -1,7 +1,11 @@
-<section class="dev-ui-keycloak-integration">
-    <h3>Keycloak Integration</h3>
-    <p>Integrate with Keycloak to manage authentication and authorization during development.</p>
-    <p>
-        some image
-    </p>
-</section>
+<section class="dev-ui-section">
+    <div class="section-content">
+        <h3>Keycloak Integration</h3>
+        <p>The Quarkus Dev UI provides seamless integration with Keycloak, enabling developers to manage authentication and authorization configurations effortlessly. With the Keycloak integration, you can configure identity providers, client settings, and role mappings directly through the Dev UI.</p>
+        <p>Leverage the Keycloak integration to simplify securing your applications during development, ensuring a smooth transition to production-ready security configurations.</p>
+        <div class="image-container">
+            <img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/keycloak-provider-page-dev-ui-light.png" alt="Keycloak Integration Light">
+            <img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/keycloak-provider-page-dev-ui-dark.png" alt="Keycloak Integration Dark">
+        </div>
+    </div>
+</section>

_includes/dev-ui-manage-dev-services.html

@@ -1,4 +1,11 @@
-<section class="dev-ui-manage-dev-services">
-    <h3>Manage Dev Services</h3>
-    <p>Provision and manage dev services like databases and message brokers for your application.</p>
-</section>
+<section class="dev-ui-section">
+    <div class="section-content">
+        <h3>Manage Dev Services</h3>
+        <p>The Quarkus Dev UI allows developers to easily view and manage spun-up dev services, such as databases and message brokers. These services are containers automatically managed by Quarkus, reducing the overhead of manual setup.</p>
+        <p>This feature is invaluable for onboarding new team members, helping them quickly understand and interact with the application's dependencies, and reducing cognitive load for experienced developers.</p>
+        <div class="image-container">
+            <img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/dev-services-dev-ui-light.png" alt="Dev Services Integration Light">
+            <img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/dev-services-dev-ui-dark.png" alt="Dev Services Integration Dark">
+        </div>
+    </div>
+</section>

_includes/header-navigation.html

@@ -14,8 +14,8 @@
         <span href="{{site.baseurl}}/about/">Why<i class="fas fa-chevron-down"></i></span>
         <ul class="submenu">
           <li><a href="{{site.baseurl}}/about" class="{% if page.url contains '/about/' %}active{% endif %}">WHAT IS QUARKUS?</a></li>
-          <li><a href="{{site.baseurl}}/dev-ui" class="{% if page.url contains '/dev-ui/' %}active{% endif %}">DEV UI</a></li>
           <li><a href="{{site.baseurl}}/container-first" class="{% if page.url contains '/container-first/' %}active{% endif %}">CONTAINER FIRST</a></li>
+          <li><a href="{{site.baseurl}}/dev-ui" class="{% if page.url contains '/dev-ui/' %}active{% endif %}">DEV UI</a></li>
           <li><a href="{{site.baseurl}}/continuum" class="{% if page.url contains '/continuum/' %}active{% endif %}">VERSATILITY</a></li>
           <li><a href="{{site.baseurl}}/standards" class="{% if page.url contains '/standards/' %}active{% endif %}">STANDARDS</a></li>
           <li><a href="{{site.baseurl}}/kubernetes-native" class="{% if page.url contains '/kubernetes-native/' %}active{% endif %}">KUBERNETES NATIVE</a></li>

_layouts/dev-ui.html

@@ -5,12 +5,12 @@
 <div class="quarkus-dev-ui-page">
   {% include dev-ui-configuration.html %}
   {% include dev-ui-visualize-endpoints.html %}
+  {% include dev-ui-manage-dev-services.html %}
   {% include dev-ui-db-schema-generation.html %}
   {% include dev-ui-dependency-visualization.html %}
   {% include dev-ui-continuous-testing.html %}
   {% include dev-ui-build-container-image.html %}
   {% include dev-ui-generate-kubernetes-yaml.html %}
-  {% include dev-ui-manage-dev-services.html %}
   {% include dev-ui-keycloak-integration.html %}
   {% include dev-ui-kafka-ui-integration.html %}
 </div>