From e2f60f601d4559fbda5d7fff2786955164a0ab66 Mon Sep 17 00:00:00 2001
From: HagerDakroury <hagerdakroury@gmail.com>
Date: Wed, 15 May 2024 18:15:59 +0300
Subject: [PATCH] refactor: refactor containment

Co-authored-by: Mattia Simonato <mattiasimonato.w@gmail.com>
---
 .../ui/src/components/Atoms/Container.css     |   6 +-
 .../src/components/Molecules/Breadcrumbs.tsx  |  76 +++---
 .../ui/src/components/Organisms/Footer.tsx    |   8 +-
 .../ui/src/components/Organisms/Header.tsx    | 256 +++++++++---------
 .../Organisms/PageContent/BlockCta.tsx        |  35 ++-
 .../Organisms/PageContent/BlockForm.tsx       |  38 +--
 .../PageContent/BlockHorizontalSeparator.tsx  |   8 +-
 .../Organisms/PageContent/BlockMarkup.tsx     | 114 ++++----
 .../Organisms/PageContent/BlockMedia.tsx      |  18 +-
 .../Organisms/PageContent/BlockQuote.tsx      |  82 +++---
 .../src/components/Organisms/PageDisplay.tsx  | 104 ++++---
 .../ui/src/components/Organisms/PageHero.tsx  |  10 +-
 12 files changed, 396 insertions(+), 359 deletions(-)

diff --git a/packages/ui/src/components/Atoms/Container.css b/packages/ui/src/components/Atoms/Container.css
index b30f83468..566f31114 100644
--- a/packages/ui/src/components/Atoms/Container.css
+++ b/packages/ui/src/components/Atoms/Container.css
@@ -1,13 +1,13 @@
 .container-page {
-  @apply max-w-full px-[1.25rem] md:px-[3.75rem];
+  @apply max-w-full px-[1.25rem] md:px-[3.75rem] lg:px-[5rem];
 }
 
 .container-content {
-  @apply mx-auto max-w-3xl;
+  @apply mx-auto max-w-7xl;
 }
 
 .container-text {
-  @apply max-w-[40.75rem] xl:ml-[11rem] lg:ml-[7rem];
+  @apply max-w-3xl mx-auto;
 }
 
 .nested-container .container-page {
diff --git a/packages/ui/src/components/Molecules/Breadcrumbs.tsx b/packages/ui/src/components/Molecules/Breadcrumbs.tsx
index 27232e13b..431291137 100644
--- a/packages/ui/src/components/Molecules/Breadcrumbs.tsx
+++ b/packages/ui/src/components/Molecules/Breadcrumbs.tsx
@@ -6,7 +6,7 @@ import React from 'react';
 import { isTruthy } from '../../utils/isTruthy';
 import { useBreadcrumbs } from '../Routes/Menu';
 
-export function BreadCrumbs({ className }: { className?: string }) {
+export function BreadCrumbs() {
   const breadcrumbs = useBreadcrumbs();
 
   if (!breadcrumbs.length) {
@@ -14,41 +14,43 @@ export function BreadCrumbs({ className }: { className?: string }) {
   }
 
   return (
-    <nav className={clsx('pt-5', className)} aria-label="Breadcrumb">
-      <ol className={'rounded-lg inline-block py-2.5'}>
-        {breadcrumbs?.filter(isTruthy).map(({ title, target, id }, index) => (
-          <li className="inline-flex items-center" key={id}>
-            {index > 0 ? (
-              <div aria-hidden="true">
-                <ChevronRightIcon className={'w-4 h-4 text-gray-400 mr-4'} />
-              </div>
-            ) : null}
-            <Link
-              href={target}
-              title={title}
-              className={clsx(
-                'inline-flex items-center text-sm font-medium hover:text-blue-600',
-                index === breadcrumbs?.length - 1
-                  ? 'pointer-events-none text-gray-500'
-                  : 'text-gray-700',
-              )}
-            >
-              {target === '/' && (
-                <svg
-                  className="w-4 h-4 mr-4"
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                >
-                  <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z" />
-                </svg>
-              )}
-              <span className="mr-4">{title}</span>
-            </Link>
-          </li>
-        ))}
-      </ol>
-    </nav>
+    <div className="container-page">
+      <nav className="pt-5 container-content" aria-label="Breadcrumb">
+        <ol className={'rounded-lg inline-block py-2.5'}>
+          {breadcrumbs?.filter(isTruthy).map(({ title, target, id }, index) => (
+            <li className="inline-flex items-center" key={id}>
+              {index > 0 ? (
+                <div aria-hidden="true">
+                  <ChevronRightIcon className={'w-4 h-4 text-gray-400 mr-4'} />
+                </div>
+              ) : null}
+              <Link
+                href={target}
+                title={title}
+                className={clsx(
+                  'inline-flex items-center text-sm font-medium hover:text-blue-600',
+                  index === breadcrumbs?.length - 1
+                    ? 'pointer-events-none text-gray-500'
+                    : 'text-gray-700',
+                )}
+              >
+                {target === '/' && (
+                  <svg
+                    className="w-4 h-4 mr-4"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                  >
+                    <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z" />
+                  </svg>
+                )}
+                <span className="mr-4">{title}</span>
+              </Link>
+            </li>
+          ))}
+        </ol>
+      </nav>
+    </div>
   );
 }
diff --git a/packages/ui/src/components/Organisms/Footer.tsx b/packages/ui/src/components/Organisms/Footer.tsx
index c41d751be..73dc34bdf 100644
--- a/packages/ui/src/components/Organisms/Footer.tsx
+++ b/packages/ui/src/components/Organisms/Footer.tsx
@@ -21,11 +21,13 @@ export function Footer() {
   return (
     <footer
       id="footer"
-      className={'relative z-10 bg-gray-100 text-gray-500 p-4 lg:py-16'}
+      className={
+        'container-page relative z-10 bg-gray-100 text-gray-500 py-4 lg:py-16'
+      }
     >
       <h2 className={'sr-only'}>Footer</h2>
-      <div className="container mx-auto pb-8">
-        <div className="lg:px-6 flex flex-wrap justify-between">
+      <div className="pb-8 container-content">
+        <div className="flex flex-wrap justify-between">
           <div className={'w-full mb-8 md:mb-0 md:w-1/4'}>
             <a href="/" className={'mb-4 block'}>
               <svg
diff --git a/packages/ui/src/components/Organisms/Header.tsx b/packages/ui/src/components/Organisms/Header.tsx
index d8d05907b..ba89fc7ea 100644
--- a/packages/ui/src/components/Organisms/Header.tsx
+++ b/packages/ui/src/components/Organisms/Header.tsx
@@ -34,147 +34,157 @@ export function Header() {
 
   return (
     <MobileMenuProvider>
-      <header className="max-w-screen-xl mx-auto">
-        <div className="hidden md:flex">
-          <UserActions iconWidth="16" iconHeight="16" />
-        </div>
-        <nav
-          className="border-b border-b-gray-200 z-20 relative mx-auto flex items-center justify-between py-6 px-3.5"
-          aria-label="Global"
-        >
-          <div className="flex lg:flex-1">
-            <Link href={'/' as Url} className="-ml-1 mt-1 md:-mt-2.5">
-              <span className="sr-only">
-                {intl.formatMessage({
-                  defaultMessage: 'Company name',
-                  id: 'FPGwAt',
-                })}
-              </span>
-              <SiteLogo width={213} height={59} className={'hidden lg:block'} />
-              <SiteLogo width={160} height={40} className={'block lg:hidden'} />
-            </Link>
+      <div className="container-page">
+        <header className="container-content">
+          <div className="hidden md:flex">
+            <UserActions iconWidth="16" iconHeight="16" />
           </div>
-          <div className="flex md:hidden">
-            <UserActions
-              iconWidth="23"
-              iconHeight="23"
-              showIconText={false}
-              isDesktop={false}
-            />
-            <MobileMenuButton className="inline-flex items-center justify-center rounded-md text-gray-700 ml-5 sm:ml-7 cursor-pointer"></MobileMenuButton>
-          </div>
-          <div className={'hidden md:flex'}>
-            {items.map((item, key) =>
-              item.children.length === 0 ? (
-                <Link
-                  key={key}
-                  href={item.target}
-                  className="text-base font-medium text-gray-600 ml-8 hover:text-blue-600"
-                  activeClassName={'font-bold text-blue-200'}
-                >
-                  {item.title}
-                </Link>
-              ) : (
-                <DesktopMenuDropDown title={item.title} key={item.title}>
+          <nav
+            className="border-b border-b-gray-200 z-20 relative mx-auto flex items-center justify-between py-6"
+            aria-label="Global"
+          >
+            <div className="flex lg:flex-1">
+              <Link href={'/' as Url} className="-ml-1 mt-1 md:-mt-2.5">
+                <span className="sr-only">
+                  {intl.formatMessage({
+                    defaultMessage: 'Company name',
+                    id: 'FPGwAt',
+                  })}
+                </span>
+                <SiteLogo
+                  width={213}
+                  height={59}
+                  className={'hidden lg:block'}
+                />
+                <SiteLogo
+                  width={160}
+                  height={40}
+                  className={'block lg:hidden'}
+                />
+              </Link>
+            </div>
+            <div className="flex md:hidden">
+              <UserActions
+                iconWidth="23"
+                iconHeight="23"
+                showIconText={false}
+                isDesktop={false}
+              />
+              <MobileMenuButton className="inline-flex items-center justify-center rounded-md text-gray-700 ml-5 sm:ml-7 cursor-pointer"></MobileMenuButton>
+            </div>
+            <div className={'hidden md:flex'}>
+              {items.map((item, key) =>
+                item.children.length === 0 ? (
                   <Link
-                    key={item.target}
+                    key={key}
                     href={item.target}
-                    className="m-1.5 block hover:text-blue-600 p-2 text-sm leading-[1.25rem] text-gray-900 font-bold"
+                    className="text-base font-medium text-gray-600 ml-8 hover:text-blue-600"
+                    activeClassName={'font-bold text-blue-200'}
                   >
                     {item.title}
                   </Link>
-                  {item.children.map((child) =>
-                    child.children.length === 0 ? (
-                      <Link
-                        key={child.target}
-                        href={child.target}
-                        className="m-1.5 block hover:text-blue-600 p-2 text-sm leading-[1.25rem] text-gray-500"
-                      >
-                        {child.title}
-                      </Link>
-                    ) : (
-                      <DesktopMenuDropdownDisclosure
-                        title={child.title}
-                        key={child.title}
-                      >
-                        {child.children.map((grandChild) => (
-                          <Link
-                            key={grandChild.target}
-                            href={grandChild.target}
-                            className="block p-2 pl-5 text-sm leading-[1.25rem] text-gray-500 hover:text-blue-600"
-                          >
-                            {grandChild.title}
-                          </Link>
-                        ))}
-                      </DesktopMenuDropdownDisclosure>
-                    ),
-                  )}
-                </DesktopMenuDropDown>
-              ),
-            )}
-          </div>
-        </nav>
-        <MobileMenu>
-          <div className="mt-6 flow-root">
-            <div className="-my-6 divide-y divide-gray-500/10">
-              <div>
-                {items.map((item) =>
-                  item.children.length === 0 ? (
+                ) : (
+                  <DesktopMenuDropDown title={item.title} key={item.title}>
                     <Link
-                      key={item.title}
+                      key={item.target}
                       href={item.target}
-                      className="block hover:text-blue-600 py-4 px-8 text-lg text-gray-600 border-b border-b-solid border-b-blue-100"
+                      className="m-1.5 block hover:text-blue-600 p-2 text-sm leading-[1.25rem] text-gray-900 font-bold"
                     >
                       {item.title}
                     </Link>
-                  ) : (
-                    <MobileMenuDropdown
-                      title={item.title}
-                      key={item.title}
-                      nestLevel={1}
-                    >
+                    {item.children.map((child) =>
+                      child.children.length === 0 ? (
+                        <Link
+                          key={child.target}
+                          href={child.target}
+                          className="m-1.5 block hover:text-blue-600 p-2 text-sm leading-[1.25rem] text-gray-500"
+                        >
+                          {child.title}
+                        </Link>
+                      ) : (
+                        <DesktopMenuDropdownDisclosure
+                          title={child.title}
+                          key={child.title}
+                        >
+                          {child.children.map((grandChild) => (
+                            <Link
+                              key={grandChild.target}
+                              href={grandChild.target}
+                              className="block p-2 pl-5 text-sm leading-[1.25rem] text-gray-500 hover:text-blue-600"
+                            >
+                              {grandChild.title}
+                            </Link>
+                          ))}
+                        </DesktopMenuDropdownDisclosure>
+                      ),
+                    )}
+                  </DesktopMenuDropDown>
+                ),
+              )}
+            </div>
+          </nav>
+          <MobileMenu>
+            <div className="mt-6 flow-root">
+              <div className="-my-6 divide-y divide-gray-500/10">
+                <div>
+                  {items.map((item) =>
+                    item.children.length === 0 ? (
                       <Link
-                        key={item.target}
+                        key={item.title}
                         href={item.target}
-                        title={item.title}
-                        className="block hover:text-blue-600 py-4 pr-8 pl-10 text-base text-gray-600"
+                        className="block hover:text-blue-600 py-4 px-8 text-lg text-gray-600 border-b border-b-solid border-b-blue-100"
                       >
                         {item.title}
                       </Link>
-                      {item.children.map((child) =>
-                        child.children.length === 0 ? (
-                          <Link
-                            key={child.target}
-                            href={child.target}
-                            title={child.title}
-                            className="block hover:text-blue-600 py-4 pr-8 pl-10 text-base text-gray-600"
-                          >
-                            {child.title}
-                          </Link>
-                        ) : (
-                          <MobileMenuDropdown
-                            title={child.title}
-                            key={child.title}
-                            nestLevel={2}
-                          >
-                            {child.children.map((grandChild) => (
-                              <MobileMenuLink
-                                key={grandChild.target}
-                                href={grandChild.target}
-                                title={grandChild.title}
-                              />
-                            ))}
-                          </MobileMenuDropdown>
-                        ),
-                      )}
-                    </MobileMenuDropdown>
-                  ),
-                )}
+                    ) : (
+                      <MobileMenuDropdown
+                        title={item.title}
+                        key={item.title}
+                        nestLevel={1}
+                      >
+                        <Link
+                          key={item.target}
+                          href={item.target}
+                          title={item.title}
+                          className="block hover:text-blue-600 py-4 pr-8 pl-10 text-base text-gray-600"
+                        >
+                          {item.title}
+                        </Link>
+                        {item.children.map((child) =>
+                          child.children.length === 0 ? (
+                            <Link
+                              key={child.target}
+                              href={child.target}
+                              title={child.title}
+                              className="block hover:text-blue-600 py-4 pr-8 pl-10 text-base text-gray-600"
+                            >
+                              {child.title}
+                            </Link>
+                          ) : (
+                            <MobileMenuDropdown
+                              title={child.title}
+                              key={child.title}
+                              nestLevel={2}
+                            >
+                              {child.children.map((grandChild) => (
+                                <MobileMenuLink
+                                  key={grandChild.target}
+                                  href={grandChild.target}
+                                  title={grandChild.title}
+                                />
+                              ))}
+                            </MobileMenuDropdown>
+                          ),
+                        )}
+                      </MobileMenuDropdown>
+                    ),
+                  )}
+                </div>
               </div>
             </div>
-          </div>
-        </MobileMenu>
-      </header>
+          </MobileMenu>
+        </header>
+      </div>
     </MobileMenuProvider>
   );
 }
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx b/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx
index 9a43189f9..fe4ecd64e 100644
--- a/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx
+++ b/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx
@@ -10,19 +10,28 @@ import React from 'react';
 
 export function BlockCta(props: BlockCtaFragment) {
   return (
-    <div className="container-content">
-      <Link
-        className={clsx(
-          { 'flex-row-reverse': props.iconPosition === CtaIconPosition.Before },
-          'text-blue-600 hover:text-white border border-blue-600 hover:bg-blue-600 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg  py-2 px-3 gap-2 flex flex-row items-center text-xs font-medium text-center w-fit transition-all duration-200 ease-in-out group',
-        )}
-        href={props.url ?? ('/' as Url)}
-        target={props.openInNewTab ? '_blank' : '_self'}
-        rel="noreferrer"
-      >
-        {props.text}
-        {!!props.icon && props.icon === CtaIconType.Arrow && <ArrowRightIcon />}
-      </Link>
+    <div className="container-page">
+      <div className="container-content">
+        <div className="container-text">
+          <Link
+            className={clsx(
+              {
+                'flex-row-reverse':
+                  props.iconPosition === CtaIconPosition.Before,
+              },
+              'text-blue-600 hover:text-white border border-blue-600 hover:bg-blue-600 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg  py-2 px-3 gap-2 flex flex-row items-center text-xs font-medium text-center w-fit transition-all duration-200 ease-in-out group',
+            )}
+            href={props.url ?? ('/' as Url)}
+            target={props.openInNewTab ? '_blank' : '_self'}
+            rel="noreferrer"
+          >
+            {props.text}
+            {!!props.icon && props.icon === CtaIconType.Arrow && (
+              <ArrowRightIcon />
+            )}
+          </Link>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockForm.tsx b/packages/ui/src/components/Organisms/PageContent/BlockForm.tsx
index d1a20a28e..5190988c5 100644
--- a/packages/ui/src/components/Organisms/PageContent/BlockForm.tsx
+++ b/packages/ui/src/components/Organisms/PageContent/BlockForm.tsx
@@ -19,23 +19,27 @@ export function BlockForm(
   }
 
   return (
-    <div className={clsx('container-content', props.className)}>
-      <SilverbackIframe
-        src={props.url}
-        buildMessages={buildMessages}
-        redirect={(url, messages) => {
-          if (messages) {
-            storeMessages(messages);
-          }
-          navigate(url as Url);
-        }}
-        style={{
-          width: '1px',
-          minWidth: '100%',
-        }}
-        heightCalculationMethod="lowestElement"
-        cssStylesToInject={props.cssStylesToInject}
-      />
+    <div className="container-page">
+      <div className="container-content">
+        <div className={clsx('container-text', props.className)}>
+          <SilverbackIframe
+            src={props.url}
+            buildMessages={buildMessages}
+            redirect={(url, messages) => {
+              if (messages) {
+                storeMessages(messages);
+              }
+              navigate(url as Url);
+            }}
+            style={{
+              width: '1px',
+              minWidth: '100%',
+            }}
+            heightCalculationMethod="lowestElement"
+            cssStylesToInject={props.cssStylesToInject}
+          />
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx b/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx
index a4bc3311b..271c36326 100644
--- a/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx
+++ b/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx
@@ -1,5 +1,11 @@
 import React from 'react';
 
 export function BlockHorizontalSeparator() {
-  return <hr className="mx-auto max-w-3xl my-8 text-gray-200" />;
+  return (
+    <div className="container-page">
+      <div className="container-content">
+        <hr className="container-text my-8 text-gray-200" />
+      </div>
+    </div>
+  );
 }
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx b/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx
index 1b4f20d0c..d15555626 100644
--- a/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx
+++ b/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx
@@ -14,59 +14,67 @@ const unorderedItems: Plugin<[], Element> = () => (tree) => {
 
 export function BlockMarkup(props: BlockMarkupFragment) {
   return (
-    <div
-      className={clsx([
-        'mx-auto max-w-3xl prose lg:prose-xl mt-10',
-        'marker:text-[#111928]',
-        'marker:font-bold',
-      ])}
-    >
-      <Html
-        plugins={[unorderedItems]}
-        components={{
-          li: ({
-            unordered,
-            children,
-            className,
-            ...props
-          }: PropsWithChildren<{
-            unordered?: boolean;
-            className?: string;
-          }>) => {
-            return (
-              <li
-                {...props}
-                className={clsx(className, { 'list-none relative': unordered })}
-              >
-                {unordered ? (
-                  <ArrowRightCircleIcon className="not-prose w-6 h-6 absolute mt-1.5 left-[-1.5em] text-gray-900" />
-                ) : null}
-                {children}
-              </li>
-            );
-          },
-          blockquote: ({ children }: PropsWithChildren<{}>) => {
-            return (
-              <blockquote className="border-l-0 relative pl-0">
-                <svg
-                  width="32"
-                  height="24"
-                  viewBox="0 0 32 24"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M18.6893 24V14.1453C18.6893 6.54 23.664 1.38533 30.6667 0L31.9933 2.868C28.7507 4.09066 26.6667 7.71867 26.6667 10.6667H32V24H18.6893ZM0 24V14.1453C0 6.54 4.99733 1.384 12 0L13.328 2.868C10.084 4.09066 8 7.71867 8 10.6667L13.3107 10.6667V24H0Z"
-                    fill="#9CA3AF"
-                  />
-                </svg>
-                {children}
-              </blockquote>
-            );
-          },
-        }}
-        markup={props.markup}
-      />
+    <div className="container-page">
+      <div className="container-content">
+        <div className="container-text">
+          <div
+            className={clsx([
+              'prose lg:prose-xl mt-10',
+              'marker:text-[#111928]',
+              'marker:font-bold',
+            ])}
+          >
+            <Html
+              plugins={[unorderedItems]}
+              components={{
+                li: ({
+                  unordered,
+                  children,
+                  className,
+                  ...props
+                }: PropsWithChildren<{
+                  unordered?: boolean;
+                  className?: string;
+                }>) => {
+                  return (
+                    <li
+                      {...props}
+                      className={clsx(className, {
+                        'list-none relative': unordered,
+                      })}
+                    >
+                      {unordered ? (
+                        <ArrowRightCircleIcon className="not-prose w-6 h-6 absolute mt-1.5 left-[-1.5em] text-gray-900" />
+                      ) : null}
+                      {children}
+                    </li>
+                  );
+                },
+                blockquote: ({ children }: PropsWithChildren<{}>) => {
+                  return (
+                    <blockquote className="border-l-0 relative pl-0">
+                      <svg
+                        width="32"
+                        height="24"
+                        viewBox="0 0 32 24"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M18.6893 24V14.1453C18.6893 6.54 23.664 1.38533 30.6667 0L31.9933 2.868C28.7507 4.09066 26.6667 7.71867 26.6667 10.6667H32V24H18.6893ZM0 24V14.1453C0 6.54 4.99733 1.384 12 0L13.328 2.868C10.084 4.09066 8 7.71867 8 10.6667L13.3107 10.6667V24H0Z"
+                          fill="#9CA3AF"
+                        />
+                      </svg>
+                      {children}
+                    </blockquote>
+                  );
+                },
+              }}
+              markup={props.markup}
+            />
+          </div>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockMedia.tsx b/packages/ui/src/components/Organisms/PageContent/BlockMedia.tsx
index 113c05bd4..7f180120b 100644
--- a/packages/ui/src/components/Organisms/PageContent/BlockMedia.tsx
+++ b/packages/ui/src/components/Organisms/PageContent/BlockMedia.tsx
@@ -10,14 +10,16 @@ export function BlockMedia(props: BlockMediaFragment) {
   }
   return (
     <ScrollPop>
-      <figure className="mt-16 container-content">
-        <Media {...props.media} />
-        {props.caption ? (
-          <figcaption className="mt-3 flex justify-center gap-x-2 text-sm leading-6 text-gray-500">
-            <Html markup={props.caption} />
-          </figcaption>
-        ) : null}
-      </figure>
+      <div className="container-page">
+        <figure className="mt-16 container-content">
+          <Media {...props.media} />
+          {props.caption ? (
+            <figcaption className="mt-3 flex justify-center gap-x-2 text-sm leading-6 text-gray-500">
+              <Html markup={props.caption} />
+            </figcaption>
+          ) : null}
+        </figure>
+      </div>
     </ScrollPop>
   );
 }
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx b/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx
index 6cea70774..a26e8d355 100644
--- a/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx
+++ b/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx
@@ -3,46 +3,50 @@ import React from 'react';
 
 export function BlockQuote(props: BlockQuoteFragment) {
   return (
-    <div className="container-content">
-      <div className="prose lg:prose-xl prose-p:text-xl prose-p:font-bold prose-p:leading-8 prose-p:text-[#111928]">
-        <blockquote className="border-l-0 relative pl-0 pb-8 pt-16">
-          <svg
-            width="32"
-            height="24"
-            viewBox="0 0 32 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            role="img"
-            aria-labelledby="quote-svg-title"
-          >
-            <title id="quote-svg-title">Quote Symbol</title>
-            <path
-              d="M18.6893 24V14.1453C18.6893 6.54 23.664 1.38533 30.6667 0L31.9933 2.868C28.7507 4.09066 26.6667 7.71867 26.6667 10.6667H32V24H18.6893ZM0 24V14.1453C0 6.54 4.99733 1.384 12 0L13.328 2.868C10.084 4.09066 8 7.71867 8 10.6667L13.3107 10.6667V24H0Z"
-              fill="#9CA3AF"
-            />
-          </svg>
-          <p>{props.quote && <Html markup={props.quote} />}</p>
-          <div className="flex not-prose items-center flex-wrap">
-            {props.image && (
-              <Image
-                className="w-6 h-6 rounded-full object-contain mr-3.5 "
-                source={props.image.source}
-                alt={props.image.alt || 'Author image'}
-              />
-            )}
-            <div className="not-italic text-base font-semibold">
-              {props.author && <p className="not-prose">{props.author}</p>}
-            </div>
-            {props.role && (
-              <p className="not-prose flex">
-                <span className="ml-3 text-base">/</span>
-                <span className="mt-0.5 not-italic text-gray-500 text-sm ml-3">
-                  {props.role}
-                </span>
-              </p>
-            )}
+    <div className="container-page">
+      <div className="container-content">
+        <div className="container-text">
+          <div className="prose lg:prose-xl prose-p:text-xl prose-p:font-bold prose-p:leading-8 prose-p:text-[#111928]">
+            <blockquote className="border-l-0 relative pl-0 pb-8 pt-16">
+              <svg
+                width="32"
+                height="24"
+                viewBox="0 0 32 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                role="img"
+                aria-labelledby="quote-svg-title"
+              >
+                <title id="quote-svg-title">Quote Symbol</title>
+                <path
+                  d="M18.6893 24V14.1453C18.6893 6.54 23.664 1.38533 30.6667 0L31.9933 2.868C28.7507 4.09066 26.6667 7.71867 26.6667 10.6667H32V24H18.6893ZM0 24V14.1453C0 6.54 4.99733 1.384 12 0L13.328 2.868C10.084 4.09066 8 7.71867 8 10.6667L13.3107 10.6667V24H0Z"
+                  fill="#9CA3AF"
+                />
+              </svg>
+              <p>{props.quote && <Html markup={props.quote} />}</p>
+              <div className="flex not-prose items-center flex-wrap">
+                {props.image && (
+                  <Image
+                    className="w-6 h-6 rounded-full object-contain mr-3.5 "
+                    source={props.image.source}
+                    alt={props.image.alt || 'Author image'}
+                  />
+                )}
+                <div className="not-italic text-base font-semibold">
+                  {props.author && <p className="not-prose">{props.author}</p>}
+                </div>
+                {props.role && (
+                  <p className="not-prose flex">
+                    <span className="ml-3 text-base">/</span>
+                    <span className="mt-0.5 not-italic text-gray-500 text-sm ml-3">
+                      {props.role}
+                    </span>
+                  </p>
+                )}
+              </div>
+            </blockquote>
           </div>
-        </blockquote>
+        </div>
       </div>
     </div>
   );
diff --git a/packages/ui/src/components/Organisms/PageDisplay.tsx b/packages/ui/src/components/Organisms/PageDisplay.tsx
index 57df3a91c..b29c0a92b 100644
--- a/packages/ui/src/components/Organisms/PageDisplay.tsx
+++ b/packages/ui/src/components/Organisms/PageDisplay.tsx
@@ -17,62 +17,56 @@ export function PageDisplay(page: PageFragment) {
   return (
     <PageTransition>
       <div>
-        {!page.hero && (
-          <BreadCrumbs className="pt-5 mx-auto max-w-screen-xl px-3.5" />
-        )}
+        {!page.hero && <BreadCrumbs />}
         {page.hero && <PageHero {...page.hero} />}
-        <div className="bg-white pt-5 pb-12 px-6 lg:px-8">
-          <div className="mx-auto max-w-3xl text-base leading-7 text-gray-700">
-            {page?.content?.filter(isTruthy).map((block, index) => {
-              switch (block.__typename) {
-                case 'BlockMedia':
-                  return <BlockMedia key={index} {...block} />;
-                case 'BlockMarkup':
-                  return <BlockMarkup key={index} {...block} />;
-                case 'BlockForm':
-                  return <BlockForm key={index} {...block} />;
-                case 'BlockImageTeasers':
-                  return (
-                    // TODO: Implement BlockImageTeasers
-                    <div
-                      style={{
-                        color: 'red',
-                        border: 'solid 3px red',
-                        padding: '3px',
-                        margin: '5px 0',
-                      }}
-                      // eslint-disable-next-line react/jsx-no-literals
-                    >
-                      BlockImageTeasers goes here
-                    </div>
-                  );
-                case 'BlockCta':
-                  return <BlockCta key={index} {...block} />;
-                case 'BlockImageWithText':
-                  return (
-                    // TODO: Implement BlockImageWithText
-                    <div
-                      style={{
-                        color: 'red',
-                        border: 'solid 3px red',
-                        padding: '3px',
-                        margin: '5px 0',
-                      }}
-                      // eslint-disable-next-line react/jsx-no-literals
-                    >
-                      BlockImageWithText goes here
-                    </div>
-                  );
-                case 'BlockQuote':
-                  return <BlockQuote key={index} {...block} />;
-                case 'BlockHorizontalSeparator':
-                  return <BlockHorizontalSeparator key={index} {...block} />;
-                default:
-                  throw new UnreachableCaseError(block);
-              }
-            })}
-          </div>
-        </div>
+        {page?.content?.filter(isTruthy).map((block, index) => {
+          switch (block.__typename) {
+            case 'BlockMedia':
+              return <BlockMedia key={index} {...block} />;
+            case 'BlockMarkup':
+              return <BlockMarkup key={index} {...block} />;
+            case 'BlockForm':
+              return <BlockForm key={index} {...block} />;
+            case 'BlockImageTeasers':
+              return (
+                // TODO: Implement BlockImageTeasers
+                <div
+                  style={{
+                    color: 'red',
+                    border: 'solid 3px red',
+                    padding: '3px',
+                    margin: '5px 0',
+                  }}
+                  // eslint-disable-next-line react/jsx-no-literals
+                >
+                  BlockImageTeasers goes here
+                </div>
+              );
+            case 'BlockCta':
+              return <BlockCta key={index} {...block} />;
+            case 'BlockImageWithText':
+              return (
+                // TODO: Implement BlockImageWithText
+                <div
+                  style={{
+                    color: 'red',
+                    border: 'solid 3px red',
+                    padding: '3px',
+                    margin: '5px 0',
+                  }}
+                  // eslint-disable-next-line react/jsx-no-literals
+                >
+                  BlockImageWithText goes here
+                </div>
+              );
+            case 'BlockQuote':
+              return <BlockQuote key={index} {...block} />;
+            case 'BlockHorizontalSeparator':
+              return <BlockHorizontalSeparator key={index} {...block} />;
+            default:
+              throw new UnreachableCaseError(block);
+          }
+        })}
       </div>
     </PageTransition>
   );
diff --git a/packages/ui/src/components/Organisms/PageHero.tsx b/packages/ui/src/components/Organisms/PageHero.tsx
index bb7103693..9004af958 100644
--- a/packages/ui/src/components/Organisms/PageHero.tsx
+++ b/packages/ui/src/components/Organisms/PageHero.tsx
@@ -60,9 +60,7 @@ function DefaultHero(props: NonNullable<PageFragment['hero']>) {
           </div>
         </div>
       </section>
-      <div className="mx-auto max-w-screen-xl px-3.5">
-        <BreadCrumbs />
-      </div>
+      <BreadCrumbs />
     </>
   );
 }
@@ -115,7 +113,7 @@ function FormHero(props: NonNullable<PageFragment['hero']>) {
       </div>
       {props.formUrl ? (
         <div className="px-4 mx-auto mt-[-22rem] lg:-mt-96 max-w-screen-xl lg:px-6 relative">
-          <div className="p-6 mx-auto max-w-[52rem] bg-white rounded-lg border border-gray-200 shadow-sm">
+          <div className="p-6 mx-auto max-w-[52rem] bg-white rounded-lg border border-gray-200 shadow-sm nested-container">
             <BlockForm url={props.formUrl} />
           </div>
         </div>
@@ -127,9 +125,7 @@ function FormHero(props: NonNullable<PageFragment['hero']>) {
 function NoImageHero(props: NonNullable<PageFragment['hero']>) {
   return (
     <>
-      <div className="mx-auto max-w-screen-xl px-3.5">
-        <BreadCrumbs />
-      </div>
+      <BreadCrumbs />
       <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">