From f672f5210109b62dfb258a2c78a7a3db1cfaa25a Mon Sep 17 00:00:00 2001
From: Ogheneochuko Pedro <ogheneochuko.pedro@canonical.com>
Date: Mon, 6 Jan 2025 10:20:58 +0100
Subject: [PATCH] fix: implement design review suggestions

---
 templates/data/streaming.html | 31 +++++++++++++++++++++----------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/templates/data/streaming.html b/templates/data/streaming.html
index 04b9dd4c9..4d7ba2db9 100644
--- a/templates/data/streaming.html
+++ b/templates/data/streaming.html
@@ -35,7 +35,7 @@ <h1>What is Data streaming?</h1>
         </p>
       </div>
       <div class="p-image-container--cinematic is-highlighted u-hide--small">
-				{{ image(url="https://assets.ubuntu.com/v1/ff630c7a-hero-img.png",
+				{{ image(url="https://assets.ubuntu.com/v1/bca3146e-hero-img-updated.png",
 										alt="",
 										width="2464",
 										height="1027",
@@ -131,7 +131,7 @@ <h2>Batch processing <br>versus data streaming</h2>
     </div>
   </section>
 
-	<section class="p-section">
+	<section class="p-section--shallow">
     <div class="row--50-50">
       <hr class="p-rule" />
       <div class="col">
@@ -149,14 +149,17 @@ <h2>Streaming use cases</h2>
                   referrerpolicy="strict-origin-when-cross-origin"
                   allowfullscreen></iframe>
         </div>
-				<p>
-					Data streaming is widely used wherever immediate actions or insights are needed. Use cases are often found in online retail, financial fraud analysis, advertising and investment.
-				</p>
+        <p>
+          Data streaming is widely used wherever immediate actions or insights are needed. Use cases are often found in online retail, financial fraud analysis, advertising and investment.
+        </p>
       </div>
     </div>
-		<hr class="p-rule" />
+  </section>
+
+  <section class="p-section">
 		<div class="p-section--shallow">
 			<div class="grid-row">
+        <hr class="p-rule--muted" />
 				<div class="grid-col-2 grid-col-medium-2 grid-col-small-2">
 					<div class="p-image-container is-highlighted">
 						{{ image(url="https://assets.ubuntu.com/v1/27734e9c-rt-advertising-auctions.png",
@@ -285,7 +288,7 @@ <h2>Canonical solutions for data streaming</h2>
 			</div>
 		</div>
     <div class="row--50-50">
-			<div class="col">
+			<div class="col grid-col--shallow-mobile">
 				<hr class="p-rule--highlight u-no-margin--bottom" />
 				<div	class="p-card--overlay u-no-padding--top" 
 							style="height: 100%;
@@ -372,17 +375,17 @@ <h3 class="p-heading--5">Whitepapers</h3>
             <p>
               <a href="https://ubuntu.com/engage/migrate-kafka-workloads-from-rhel-to-ubuntu">Migrating enterprise Kafka workloads from RHEL to the Ubuntu Platform</a>
             </p>
-						<hr class="p-rule" />
+						<hr class="p-rule--muted" />
             <p>
               <a href="https://ubuntu.com/engage/open-source-big-data-ai">Make better decisions with open source Big Data and AI solutions</a>
             </p>
-						<hr class="p-rule" />
+						<hr class="p-rule--muted" />
             <p>
               <a href="https://ubuntu.com/engage/enterprise-data-management-big-data">Using Enterprise Data Management: Big Data</a>
             </p>
           </div>
         </div>
-				<hr class="p-rule" />
+				<hr class="p-rule--muted" />
 				<div class="row--25-75">
           <div class="col">
             <h3 class="p-heading--5">Webinar</h3>
@@ -411,6 +414,14 @@ <h3 class="p-heading--5">Webinar</h3>
     </div>
   </section>
 
+  <style>
+    @media screen and (max-width: 619px) {
+      .grid-col--shallow-mobile {
+        margin-bottom: 1.5rem;
+      }
+    }
+  </style>
+
   <script defer src="{{ versioned_static('js/modals.js') }}"></script>
 
 	{% include "/shared/forms/form-template.html" %}