Standardize vertical alignment on the About page

Vizzuality · Nov 29, 2023 · d4cf895 · d4cf895
1 parent 8d99249
commit d4cf895
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git 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
@@ -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>