From 7541503645d6e46d918082340b036ba63a3718da Mon Sep 17 00:00:00 2001
From: Luqmaan Essop <luqmaan.essop@amazee.com>
Date: Thu, 2 May 2024 15:53:24 +0200
Subject: [PATCH 1/3] style: add hr style

---
 .../Organisms/PageContent/BlockHorizontalSeparator.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx b/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx
index 4d5308927..6a3922e8a 100644
--- a/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx
+++ b/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
 
 export function BlockHorizontalSeparator() {
-  return <hr />;
+  return <hr className="my-8 text-gray-200" />;
 }

From a383ac85259c266367485ed1e1c60fbceb1940bb Mon Sep 17 00:00:00 2001
From: Luqmaan Essop <luqmaan.essop@amazee.com>
Date: Wed, 15 May 2024 08:35:34 +0200
Subject: [PATCH 2/3] style: adjust content width

---
 .../Organisms/PageContent/BlockHorizontalSeparator.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx b/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx
index 6a3922e8a..a4bc3311b 100644
--- a/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx
+++ b/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
 
 export function BlockHorizontalSeparator() {
-  return <hr className="my-8 text-gray-200" />;
+  return <hr className="mx-auto max-w-3xl my-8 text-gray-200" />;
 }

From 95808ccd49abb5eeef6ce52d15f028352a260250 Mon Sep 17 00:00:00 2001
From: Luqmaan Essop <luqmaan.essop@amazee.com>
Date: Wed, 15 May 2024 08:43:01 +0200
Subject: [PATCH 3/3] style(SLB-295): adjust positioning more

---
 .../ui/src/components/Organisms/PageHero.tsx  | 62 ++++++++++---------
 1 file changed, 33 insertions(+), 29 deletions(-)

diff --git a/packages/ui/src/components/Organisms/PageHero.tsx b/packages/ui/src/components/Organisms/PageHero.tsx
index 998f322c9..bb7103693 100644
--- a/packages/ui/src/components/Organisms/PageHero.tsx
+++ b/packages/ui/src/components/Organisms/PageHero.tsx
@@ -126,36 +126,40 @@ function FormHero(props: NonNullable<PageFragment['hero']>) {
 
 function NoImageHero(props: NonNullable<PageFragment['hero']>) {
   return (
-    <section className="relative isolate overflow-hidden pt-12 sm:pt-20 px-6 lg:px-8">
-      <div className="mx-auto max-w-3xl">
+    <>
+      <div className="mx-auto max-w-screen-xl px-3.5">
         <BreadCrumbs />
-        <h1 className="text-4xl font-extrabold tracking-tight leading-tight">
-          {props.headline}
-        </h1>
-        {props.lead ? (
-          <p className="mt-4 text-lg leading-8 text-gray-500">{props.lead}</p>
-        ) : null}
-        {props.ctaText && props.ctaUrl ? (
-          <Link
-            href={props.ctaUrl}
-            className="mt-5 px-5 py-2.5 text-sm font-medium text-white inline-flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-          >
-            <svg
-              className="mr-2 -ml-1 w-4 h-4"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                fillRule="evenodd"
-                d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
-                clipRule="evenodd"
-              ></path>
-            </svg>
-            {props.ctaText}
-          </Link>
-        ) : null}
       </div>
-    </section>
+      <section className="relative isolate overflow-hidden pt-12 sm:pt-20 px-6 lg:px-8">
+        <div className="mx-auto max-w-3xl">
+          <h1 className="text-4xl font-extrabold tracking-tight leading-tight">
+            {props.headline}
+          </h1>
+          {props.lead ? (
+            <p className="mt-4 text-lg leading-8 text-gray-500">{props.lead}</p>
+          ) : null}
+          {props.ctaText && props.ctaUrl ? (
+            <Link
+              href={props.ctaUrl}
+              className="mt-5 px-5 py-2.5 text-sm font-medium text-white inline-flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+            >
+              <svg
+                className="mr-2 -ml-1 w-4 h-4"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+                  clipRule="evenodd"
+                ></path>
+              </svg>
+              {props.ctaText}
+            </Link>
+          ) : null}
+        </div>
+      </section>
+    </>
   );
 }