From 8d992491e6f2fa29313f309dbe4b02c803f80df5 Mon Sep 17 00:00:00 2001
From: Simao Rodrigues <arodrigues.simao@gmail.com>
Date: Wed, 29 Nov 2023 11:19:49 +0000
Subject: [PATCH 1/2] Add lateral padding to the static-pages section component
 on mobile

---
 frontend/src/components/static-pages/section/index.tsx | 2 +-
 frontend/src/layouts/static-page.tsx                   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/static-pages/section/index.tsx b/frontend/src/components/static-pages/section/index.tsx
index 5345f1fe..a6862ea3 100644
--- a/frontend/src/components/static-pages/section/index.tsx
+++ b/frontend/src/components/static-pages/section/index.tsx
@@ -29,7 +29,7 @@ export type SectionProps = PropsWithChildren<{
 const Section = forwardRef<HTMLDivElement, SectionProps>(({ borderTop = true, children }, ref) => (
   <div
     ref={ref}
-    className={cn('w-full border-black py-6 md:mx-auto md:mb-20 md:max-w-7xl', {
+    className={cn('w-full border-black py-6 px-8 md:mx-auto md:mb-20 md:max-w-7xl md:px-0', {
       'border-t': borderTop,
     })}
   >
diff --git a/frontend/src/layouts/static-page.tsx b/frontend/src/layouts/static-page.tsx
index b2da40ce..2d4bdf31 100644
--- a/frontend/src/layouts/static-page.tsx
+++ b/frontend/src/layouts/static-page.tsx
@@ -27,7 +27,7 @@ const Sidebar: React.FC<SidebarProps> = ({ sections }) => {
   };
 
   return (
-    <div className="mb-4 min-w-[200px] md:mb-0">
+    <div className="-mb-6 min-w-[200px] px-8 md:mb-0 md:px-0">
       <nav className="sticky top-10 bottom-3 my-10 flex flex-col gap-3 font-mono text-sm">
         {Object.entries(sections).map(([key, { name }]) => {
           return (

From d4cf8957eaff9e3e3cab5cfd521635a43f37f679 Mon Sep 17 00:00:00 2001
From: Simao Rodrigues <arodrigues.simao@gmail.com>
Date: Wed, 29 Nov 2023 11:30:25 +0000
Subject: [PATCH 2/2] Standardize vertical alignment on the About page

---
 frontend/src/containers/about/logos-grid/index.tsx |  5 +++--
 frontend/src/pages/about/index.tsx                 | 12 ++++++++----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/frontend/src/containers/about/logos-grid/index.tsx b/frontend/src/containers/about/logos-grid/index.tsx
index 5ec3c59d..cdcd3484 100644
--- a/frontend/src/containers/about/logos-grid/index.tsx
+++ b/frontend/src/containers/about/logos-grid/index.tsx
@@ -19,11 +19,12 @@ const logosGridVariants = cva('', {
 });
 
 type LogosGridProps = VariantProps<typeof logosGridVariants> & {
+  className?: string;
   type: 'team' | 'funders';
 };
 
-const LogosGrid: React.FC<LogosGridProps> = ({ type, columns }) => (
-  <div className={cn('grid gap-4 md:grid-cols-2', logosGridVariants({ columns }))}>
+const LogosGrid: React.FC<LogosGridProps> = ({ className, type, columns }) => (
+  <div className={cn(className, 'grid gap-4 md:grid-cols-2', logosGridVariants({ columns }))}>
     {LOGOS[type].map(({ logo, alt, link, description, width, height }) => (
       <div key={logo} className="flex flex-col gap-4 pr-4">
         <span className="flex flex-1 items-center justify-center md:justify-start">
diff --git a/frontend/src/pages/about/index.tsx b/frontend/src/pages/about/index.tsx
index 0dbf1746..f68d3645 100644
--- a/frontend/src/pages/about/index.tsx
+++ b/frontend/src/pages/about/index.tsx
@@ -126,7 +126,9 @@ const About: React.FC = () => {
             >
               <Logo logo="protectedPlanet" />
             </TwoColSubsection>
+          </SectionContent>
 
+          <SectionContent>
             <TwoColSubsection
               itemNum={2}
               itemTotal={3}
@@ -143,7 +145,9 @@ const About: React.FC = () => {
             >
               <Logo logo="marineProtectionAtlas" />
             </TwoColSubsection>
+          </SectionContent>
 
+          <SectionContent>
             <TwoColSubsection
               itemNum={3}
               itemTotal={3}
@@ -203,14 +207,14 @@ const About: React.FC = () => {
             the dedicated individuals who bring expertise and commitment to the 30x30 Project
           </SectionDescription>
 
-          <TwoColSubsection title="Team" />
           <SectionContent>
-            <LogosGrid type="team" columns={4} />
+            <TwoColSubsection title="Team" />
+            <LogosGrid className="md:mt-8" type="team" columns={4} />
           </SectionContent>
 
-          <TwoColSubsection title="Funders" />
           <SectionContent>
-            <LogosGrid type="funders" columns={2} />
+            <TwoColSubsection title="Funders" />
+            <LogosGrid className="md:mt-8" type="funders" columns={2} />
           </SectionContent>
         </Section>
       </Content>