complete basic layout

Author: cherylli

components/containers/TwoColumn.js

@@ -15,6 +15,7 @@ export default function TwoColumn({
   customInnerClass,
   customBtnClass,
   linkText = 'Learn more',
+  secondTextColumn
 }) {
   // Add rowOrder="row-reverse" prop to the component to reverse its order on desktop
 
@@ -48,7 +49,8 @@ export default function TwoColumn({
             </ButtonLink>
           )}
         </div>
-        {image && (
+        {secondTextColumn && secondTextColumn}
+        {!secondTextColumn && image && (
           <div className={styles.inner__image}>
             <Image
               src={image}

pages/about.js

@@ -1,6 +1,6 @@
 import RevealContentContainer from '@/components/containers/RevealContentContainer';
 import TwoColumn from '@/components/containers/TwoColumn';
-import { white, primary, primaryAccent } from '@/styles/TwoColumn.module.scss';
+import { white, primary, primaryAccent, lightBgColor } from '@/styles/TwoColumn.module.scss';
 import CardsColumns from '@/components/containers/CardsColumns';
 import Title from '@/components/snippets/Title';
 import Container from '@/components/containers/Container';
@@ -127,6 +127,50 @@ export default function AboutUs() {
           customInnerClass='our-purpose'
         />
       </RevealContentContainer>
+      <RevealContentContainer>
+        <TwoColumn
+          title='Wanna learn more?'
+          content={''}
+          rowOrder='row'
+          image='/images/svg/semi-colon.svg'
+          color={primary}
+          bgColor={lightBgColor}
+          customInnerClass='our-purpose'
+        />
+        <TwoColumn
+          title={<div>Junior <br/> Developers</div>}
+          content={
+            'If you are a junior web developer looking for some guidance and mentoring, ' +
+            'we invite you to join us and start coding our platform. ' +
+            'You will learn how to code in a team environment by following issue\'s ' +
+            'instructions and submitting your code to our repository through a ' +
+            'PR while guided throughout the entire process.\n'
+        }
+          rowOrder='row'
+          linkText='Our Wiki'
+          link='https://github.com/Web-Dev-Path/web-dev-path/wiki'
+          customBtnClass='inverted-grey'
+          color={primary}
+          bgColor={lightBgColor}
+          customInnerClass='two-text-columns'
+          secondTextColumn=
+            <TwoColumn
+              title='Experienced Developers'
+              content={'If you are an experienced and patient-loving developer, ' +
+                'a true rockstar who wants to mentor juniors, ' +
+                'it will be wonderful to have your help to review those PR\'s, ' +
+                'write detailed issues and guide the developers when necessary.\n'
+            }
+              rowOrder='row'
+              linkText='Our Wiki'
+              link='https://github.com/Web-Dev-Path/web-dev-path/wiki'
+          customBtnClass='inverted-grey'
+              color={primary}
+              bgColor={lightBgColor}
+              customInnerClass='second-text-column'
+            />
+        />
+      </RevealContentContainer>
     </div>
   );
 }

styles/TwoColumn.module.scss

@@ -2,6 +2,7 @@
 @use './mixins' as *;
 
 .wrapper {
+  align-self: stretch;
   .inner {
     padding: 5rem 0;
     margin: 0 auto;
@@ -113,6 +114,51 @@
       }
     }
 
+    &.two-text-columns {
+      justify-content: center;
+      gap: 170px;
+
+
+      .inner{
+        padding: 0px;
+        margin: 0px;
+
+      }
+
+      .inner__content{
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: stretch;
+      }
+
+      h2{
+        font-size: 2rem;
+        line-height: 2.5rem;
+      }
+
+      .inner__content{
+        width: 400px;
+        flex-basis: unset;
+      }
+
+      a{
+        margin-top: auto;
+      }
+    }
+
+    &.second-text-column {
+      height: 100%;
+      .inner{
+
+        height: 100%;
+      }
+
+      .inner__content{
+        height: 100%;
+      }
+    }
+
     @include desktop {
       display: flex;
       align-items: center;