consolidate styling for new and existing sections

Author: josephaw1022

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

@@ -1,4 +1,11 @@
-<section class="dev-ui-build-container-image">
+<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.</p>
-</section>
+    <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

@@ -1,4 +1,4 @@
-<section class="dev-ui-configuration">
+<section class="dev-ui-section">
     <div class="section-content">
 
         <h3>Configuration Management</h3>

_includes/dev-ui-continuous-testing.html

@@ -1,4 +1,11 @@
-<section class="dev-ui-continuous-testing">
+<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.</p>
-</section>
+    <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

@@ -1,4 +1,11 @@
-<section class="dev-ui-db-schema-generation">
+<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.</p>
-</section>
+    <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

@@ -1,4 +1,11 @@
-<section class="dev-ui-dependency-visualization">
+<section class="dev-ui-section">
+  <div class="section-content">
     <h3>Dependency Visualization</h3>
-    <p>Visualize your application dependencies to optimize and debug relationships.</p>
-</section>
+    <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-visualize-endpoints.html

@@ -1,4 +1,4 @@
-<section class="dev-ui-visualize-endpoints">
+<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>

_sass/layouts/dev-ui.scss

@@ -1,6 +1,4 @@
-
-
-.dev-ui-configuration {
+.dev-ui-section {
   padding: 2rem 1rem;
 
   h3 {
@@ -18,7 +16,6 @@
     text-align: left;
   }
 
-
   .image-container {
     display: flex;
     justify-content: center;
@@ -30,60 +27,6 @@
       border: 1px solid var(--card-outline);
       border-radius: 5px;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-      transition: transform 0.3s ease;
-
-
-    }
-  }
-
-  @media screen and (max-width: 768px) {
-    h3 {
-      font-size: 1.5rem;
-    }
-
-    p {
-      font-size: 0.9rem;
-    }
-
-    .image-container img {
-      max-width: 100%;
-    }
-  }
-}
-
-
-.dev-ui-visualize-endpoints {
-  padding: 2rem 1rem;
-
-  h3 {
-    font-size: 1.8rem;
-    color: var(--heading-color);
-    margin-bottom: 1rem;
-    text-align: left;
-  }
-
-  p {
-    font-size: 1rem;
-    color: var(--main-text-color);
-    line-height: 1.5;
-    margin: 3rem 0;
-    text-align: left;
-  }
-
-
-  .image-container {
-    display: flex;
-    justify-content: center;
-    margin: 1rem 0;
-
-    img {
-      max-width: 80%;
-      height: auto;
-      border: 1px solid var(--card-outline);
-      border-radius: 5px;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-      transition: transform 0.3s ease;
-
     }
   }