feat: content page UI updates

components/ContentType/ContentPage/contentPage.module.css

@@ -17,21 +17,37 @@
   max-width: var(--max-width-content);
   margin: 0 auto;
 }
+
 .headerIntro {
   display: grid;
   max-width: var(--max-width-text-block);
   gap: var(--Spacing-x3);
 }
 
-.content {
-  padding: var(--Spacing-x4) var(--Spacing-x2);
-  display: grid;
-  justify-items: center;
+.heroContainer {
+  width: 100%;
+  padding-bottom: var(--Spacing-x4);
+  padding-top: var(--Spacing-x4);
+}
+
+.heroContainer img {
+  max-width: var(--max-width-content);
+  margin: 0 auto;
+  display: block;
+}
+
+.contentContainer {
+  display: flex;
+  flex-direction: column;
+  padding-top: var(--Spacing-x4);
+}
+
+.mainContent {
+  width: 100%;
 }
 
 .innerContent {
   width: 100%;
-  max-width: var(--max-width-content);
 }
 
 @media (min-width: 768px) {
@@ -39,3 +55,13 @@
     gap: var(--Spacing-x3);
   }
 }
+
+@media (min-width: 1367px) {
+  .contentContainer {
+    display: grid;
+    grid-template-columns: var(--max-width-text-block) 1fr;
+    gap: var(--Spacing-x9);
+    max-width: var(--max-width-content);
+    margin: 0 auto;
+  }
+}

components/ContentType/ContentPage/index.tsx

@@ -23,8 +23,6 @@ export default async function ContentPage() {
   return (
     <>
       <section className={styles.contentPage}>
-        {sidebar?.length ? <Sidebar blocks={sidebar} /> : null}
-
         <header className={styles.header}>
           <div className={styles.headerContent}>
             <div className={styles.headerIntro}>
@@ -37,17 +35,24 @@ export default async function ContentPage() {
           </div>
         </header>
 
-        <main className={styles.content}>
-          <div className={styles.innerContent}>
-            {hero_image ? (
-              <Hero
-                alt={hero_image.meta.alt || hero_image.meta.caption || ""}
-                src={hero_image.url}
-              />
-            ) : null}
-            {blocks ? <Blocks blocks={blocks} /> : null}
+        {hero_image && (
+          <div className={styles.heroContainer}>
+            <Hero
+              alt={hero_image.meta.alt || hero_image.meta.caption || ""}
+              src={hero_image.url}
+            />
           </div>
-        </main>
+        )}
+
+        <div className={styles.contentContainer}>
+          <main className={styles.mainContent}>
+            <div className={styles.innerContent}>
+              {blocks ? <Blocks blocks={blocks} /> : null}
+            </div>
+          </main>
+
+          {sidebar?.length ? <Sidebar blocks={sidebar} /> : null}
+        </div>
       </section>
 
       <TrackingSDK pageData={tracking} />