new dev ui section

add dev ui to the homepage

add styling for section to the main.scss file

images for section and potentially new page

fix wording on single card and adjust card styling in general

get the html to look somewhat decent. not done but its good enough for now

new bare bone html page (nothing in it)

dev ui page and its sections

add border top to the section

add new sections to the dev ui  (config, kubernetes yaml, visualize endpoints)

consolidate styling for new and existing sections

_includes/dev-ui-build-container-image.html

@@ -0,0 +1,11 @@
+<section class="dev-ui-section">
+  <div class="section-content">
+    <h3>Build Container Image</h3>
+    <p>Create production-ready container images directly from the Dev UI. The interface simplifies the process, allowing you to customize build configurations and monitor the progress effortlessly.</p>
+
+    <div class="image-container">
+      <img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/build-container-image-dev-ui-light.png" alt="Build Container Image Light">
+      <img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/build-container-image-dev-ui-dark.png" alt="Build Container Image Dark">
+    </div>
+  </div>
+</section>

_includes/dev-ui-configuration.html

@@ -0,0 +1,26 @@
+<section class="dev-ui-section">
+    <div class="section-content">
+
+        <h3>Configuration Management</h3>
+        <p>Manage application settings and configurations through an intuitive interface. Modify the configuration file
+            directly in the UI, or use the form editor UI to achieve the same goal. The form editor UI also provides
+            visibility into all available configuration options, ensuring you don't miss anything.</p>
+
+        <div class="image-container">
+            <img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/configuration-source-editor-dev-ui-light.png"
+                alt="Configuration Source Editor Light">
+            <img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/configuration-source-editor-dev-ui-dark.png"
+                alt="Configuration Source Editor Dark">
+        </div>
+
+        <p>The form editor offers a user-friendly way to adjust settings while providing a comprehensive list of
+            configuration options available in your application.</p>
+
+        <div class="image-container">
+            <img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/configuration-dev-ui-light.png"
+                alt="Configuration Management Light">
+            <img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/configuration-dev-ui-dark.png"
+                alt="Configuration Management Dark">
+        </div>
+    </div>
+</section>

_includes/dev-ui-continuous-testing.html

@@ -0,0 +1,11 @@
+<section class="dev-ui-section">
+  <div class="section-content">
+    <h3>Continuous Testing</h3>
+    <p>Run continuous tests directly in the Dev UI to ensure code quality and catch regressions early. The intuitive interface provides instant feedback and allows you to monitor test results in real-time, streamlining the development process.</p>
+
+    <div class="image-container">
+      <img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/continuous-testing-dev-ui-light.png" alt="Continuous Testing Light">
+      <img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/continuous-testing-dev-ui-dark.png" alt="Continuous Testing Dark">
+    </div>
+  </div>
+</section>

_includes/dev-ui-db-schema-generation.html

@@ -0,0 +1,11 @@
+<section class="dev-ui-section">
+  <div class="section-content">
+    <h3>DB Schema Generation</h3>
+    <p>Automatically generate database schemas and SQL scripts for faster development. The Quarkus Dev UI simplifies database integration, ensuring your application's data structure is always up to date with minimal effort. For developers familiar with their database of choice, the Dev UI makes it clear what Hibernate and Panache are doing under the hood, providing transparency and confidence in the generated database operations.</p>
+
+    <div class="image-container">
+      <img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/create-sql-script-dev-ui-light.png" alt="DB Schema Generation Light">
+      <img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/create-sql-script-dev-ui-dark.png" alt="DB Schema Generation Dark">
+    </div>
+  </div>
+</section>

_includes/dev-ui-dependency-visualization.html

@@ -0,0 +1,11 @@
+<section class="dev-ui-section">
+  <div class="section-content">
+    <h3>Dependency Visualization</h3>
+    <p>Visualize your application dependencies to optimize and debug relationships. The Quarkus Dev UI provides a clear and interactive graph of your application's modules and their dependencies, helping you quickly identify potential issues or inefficiencies.</p>
+
+    <div class="image-container">
+      <img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/dependency-graph-dev-ui-light.png" alt="Dependency Visualization Light">
+      <img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/dependency-graph-dev-ui-dark.png" alt="Dependency Visualization Dark">
+    </div>
+  </div>
+</section>

_includes/dev-ui-features.html

@@ -0,0 +1,15 @@
+<section class="dev-ui-features">
+    <h2>Dev UI Features</h2>
+    <p>Enhance your development workflow with these powerful features:</p>
+    <ul>
+        <li>Configuration Management</li>
+        <li>Visualize Endpoints</li>
+        <li>DB Schema Generation</li>
+        <li>Dependency Visualization</li>
+        <li>Continuous Testing</li>
+        <li>Build Container Image</li>
+        <li>Manage Dev Services</li>
+        <li>Keycloak Integration</li>
+        <li>Kafka UI Integration</li>
+    </ul>
+</section>

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

@@ -0,0 +1,8 @@
+<section class="dev-ui-generate-kubernetes">
+  <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>
+
+  </div>
+</section>

_includes/dev-ui-hero.html

@@ -0,0 +1,4 @@
+<section class="dev-ui-hero">
+    <h1>Dev UI</h1>
+    <p>Explore the comprehensive features of the Quarkus Dev UI to supercharge your development experience.</p>
+</section>

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

@@ -0,0 +1,4 @@
+<section class="dev-ui-kafka-ui-integration">
+    <h3>Kafka UI Integration</h3>
+    <p>Visualize and interact with Kafka topics, consumer groups, and nodes through the Dev UI.</p>
+</section>

_includes/dev-ui-keycloak-integration.html

@@ -0,0 +1,7 @@
+<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>

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

@@ -0,0 +1,4 @@
+<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>

_includes/dev-ui-visualize-endpoints.html

@@ -0,0 +1,18 @@
+<section class="dev-ui-section">
+  <div class="section-content">
+    <h3>Visualize Endpoints</h3>
+    <p>Interact effortlessly with your application's endpoints using the built-in Quarkus Dev UI. Quickly navigate to any of the endpoints of your Quarkus application with ease.</p>
+
+    <div class="image-container">
+      <img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/endpoints-dev-ui-light.png" alt="Quarkus Dev UI Endpoints Light">
+      <img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/endpoints-dev-ui-dark.png" alt="Quarkus Dev UI Endpoints Dark">
+    </div>
+
+    <p>If you prefer Swagger UI, you can access it directly through the Swagger Dev UI by adding the <code>smallrye-openapi</code> extension to your project. This enables an intuitive way to explore and test your APIs.</p>
+
+    <div class="image-container">
+      <img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/swagger-ui-dev-ui-light.png" alt="Swagger UI Light">
+      <img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/swagger-ui-dark.png" alt="Swagger UI Dark">
+    </div>
+  </div>
+</section>

_includes/homepage-dev-ui-band.html

@@ -0,0 +1,88 @@
+<div class="component homepage-dev-ui-band full-width-bg text-centered">
+  <div class="grid-wrapper">
+    <div class="width-12-12">
+      <h2>Dev UI Features</h2>
+      <p>Explore the powerful built-in features of the Quarkus Dev UI that enhance productivity and streamline
+        development.</p>
+    </div>
+  </div>
+  <div class="grid-container">
+    <div class="contrib-block">
+      <div class="image-container">
+        <img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/configuration-dev-ui-light.png"
+          alt="Configuration Management Light">
+        <img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/configuration-dev-ui-dark.png"
+          alt="Configuration Management Dark">
+      </div>
+      <div class="content">
+        <h3>Configuration Management</h3>
+        <p>Seamlessly manage and modify application settings using Quarkus's unified configuration framework.</p>
+      </div>
+    </div>
+    <div class="contrib-block">
+      <div class="image-container">
+        <img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/endpoints-dev-ui-light.png"
+          alt="Visualize Endpoints Light">
+        <img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/endpoints-dev-ui-dark.png"
+          alt="Visualize Endpoints Dark">
+      </div>
+      <div class="content">
+        <h3>Visualize Endpoints</h3>
+        <p>Interact with application endpoints effortlessly.</p>
+      </div>
+    </div>
+    <div class="contrib-block">
+      <div class="image-container">
+        <img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/create-sql-script-dev-ui-light.png"
+          alt="DB Schema Generation Light">
+        <img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/create-sql-script-dev-ui-dark.png"
+          alt="DB Schema Generation Dark">
+      </div>
+      <div class="content">
+        <h3>DB Schema Generation</h3>
+        <p>Automatically create database schemas and SQL scripts for tables, reducing manual effort.</p>
+      </div>
+    </div>
+    <div class="contrib-block">
+      <div class="image-container">
+        <img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/dependency-graph-dev-ui-light.png"
+          alt="Dependency Visualization Light">
+        <img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/dependency-graph-dev-ui-dark.png"
+          alt="Dependency Visualization Dark">
+      </div>
+      <div class="content">
+        <h3>Dependency Visualization</h3>
+        <p>Get a comprehensive view of your application's dependencies to optimize and debug relationships.</p>
+      </div>
+    </div>
+    <div class="contrib-block">
+      <div class="image-container">
+        <img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/continuous-testing-dev-ui-light.png"
+          alt="Continuous Testing Light">
+        <img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/continuous-testing-dev-ui-dark.png"
+          alt="Continuous Testing Dark">
+      </div>
+      <div class="content">
+        <h3>Continuous Testing</h3>
+        <p>Run tests continuously to ensure code quality and prevent regressions.</p>
+      </div>
+    </div>
+    <div class="contrib-block">
+      <div class="image-container">
+        <img class="light-only" src="{{site.baseurl}}/assets/images/dev-ui/build-container-image-dev-ui-light.png"
+          alt="Build Container Image Light">
+        <img class="dark-only" src="{{site.baseurl}}/assets/images/dev-ui/build-container-image-dev-ui-dark.png"
+          alt="Build Container Image Dark">
+      </div>
+      <div class="content">
+        <h3>Build Container Image</h3>
+        <p>Create lightweight, production-ready container images directly from the Dev UI.</p>
+      </div>
+    </div>
+
+
+  </div>
+  <div class="button-container">
+    <button onclick="window.location.href='{{site.baseurl}}/dev-ui'">Go to Dev UI Page</button>
+  </div>
+</div>

_layouts/dev-ui.html

@@ -0,0 +1,17 @@
+---
+layout: base
+---
+<div class="quarkus-dev-ui-page">
+  {% include dev-ui-hero.html %}
+  {% include dev-ui-features.html %}
+  {% include dev-ui-configuration.html %}
+  {% include dev-ui-visualize-endpoints.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>

_layouts/index.html

@@ -4,6 +4,7 @@
 <div class="quarkus-homepage">
   {% include homepage-hero-band-ssjprime.html %}
   {% include homepage-features-icon-band.html %}
+  {% include homepage-dev-ui-band.html %}
   {% include homepage-userstory-callout.html %}
   {% include homepage-performance-band.html %}
   {% include recent-posts-band.html %}