complete styling

Author: cherylli

pages/about.js

@@ -132,10 +132,10 @@ export default function AboutUs() {
           title='Wanna learn more?'
           content={''}
           rowOrder='row'
-          image='/images/svg/semi-colon.svg'
+          image='/images/svg/close-curly-bracket.svg'
           color={primary}
           bgColor={lightBgColor}
-          customInnerClass='our-purpose'
+          customInnerClass='wanna-learn-more'
         />
         <TwoColumn
           title={<div>Junior <br/> Developers</div>}
@@ -147,24 +147,24 @@ export default function AboutUs() {
             'PR while guided throughout the entire process.\n'
         }
           rowOrder='row'
-          linkText='Our Wiki'
+          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'
+              title={<div>Experienced <br/> Developers</div>}
               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'
+              linkText='Contact us'
+              link='/contact'
+              customBtnClass='inverted-grey'
               color={primary}
               bgColor={lightBgColor}
               customInnerClass='second-text-column'

public/images/svg/close-curly-bracket.svg

@@ -3,6 +3,7 @@
 
 .wrapper {
   align-self: stretch;
+
   .inner {
     padding: 5rem 0;
     margin: 0 auto;
@@ -21,13 +22,15 @@
         color: $primary-content-color;
         margin: 0;
       }
+
       .content {
         display: flex;
         align-items: center;
         margin: 3.875rem 0 2.5rem;
         max-width: 39rem;
         font-size: 1.5rem;
         line-height: 1.938rem;
+
         a {
           text-decoration: underline;
           text-underline-offset: 2px;
@@ -114,47 +117,81 @@
       }
     }
 
+    &.wanna-learn-more {
+      .content {
+        margin: 0;
+      }
+
+      .inner__content{
+        flex-basis: 70%;
+      }
+
+      .inner__image {
+        height: 10rem;
+        flex-basis: 30%;
+
+        @include desktop {
+          height: 20rem;
+        }
+
+        .img {
+          object-fit: contain;
+        }
+      }
+    }
+
     &.two-text-columns {
       justify-content: center;
-      gap: 170px;
-
+      gap: 5rem;
 
-      .inner{
+      .inner {
         padding: 0px;
         margin: 0px;
-
       }
 
-      .inner__content{
+      .inner__content {
         display: flex;
         flex-direction: column;
         align-items: flex-start;
-        justify-content: stretch;
       }
 
-      h2{
+      h2 {
         font-size: 2rem;
         line-height: 2.5rem;
       }
 
-      .inner__content{
-        width: 400px;
+      .inner{
+        margin: 0px;
+        padding: 0px;
+      }
+
+      .inner__content {
         flex-basis: unset;
+
+        @include desktop {
+          width: 400px;
+        }
       }
 
-      a{
+      a {
         margin-top: auto;
+        color: $light-bg-color;
+      }
+
+      a:hover {
+        color: $primary-content-color;
       }
     }
 
     &.second-text-column {
       height: 100%;
-      .inner{
+      width: 100%;
 
+      .inner {
         height: 100%;
       }
 
-      .inner__content{
+      .inner__content {
         height: 100%;
       }
     }