Add Still got questions section

Author: mariana-caldas

components/containers/Member.js

@@ -26,7 +26,7 @@ export default function Member({
         {linkedIn && (
           <div className={`${styles.links}`}>
             <Image
-              src='/images/svg/LinkedIn2.svg'
+              src='/images/svg/linkedin-portfolio.svg'
               alt='LinkedIn'
               height='25px'
               width='25px'

pages/about.js

@@ -77,7 +77,7 @@ export default function AboutUs() {
           image='/images/svg/open-angle-bracket.svg'
           color={primary}
           bgColor={white}
-          customInnerClass='about-content'
+          customInnerClass='our-process'
         />
         <TwoColumn
           title='Version control'
@@ -98,7 +98,7 @@ export default function AboutUs() {
           image='/images/svg/close-angle-bracket.svg'
           color={primary}
           bgColor={white}
-          customInnerClass='about-content'
+          customInnerClass='our-process'
         />
       </RevealContentContainer>
       <RevealContentContainer>
@@ -214,7 +214,7 @@ export default function AboutUs() {
           bgColor={white}
           customInnerClass='get-started'
           link='mailto:[email protected]'
-          linkText='Ping Us'
+          linkText='Ping us'
           customBtnClass='inverted-grey'
         />
       </RevealContentContainer>
@@ -241,6 +241,19 @@ export default function AboutUs() {
           </Container>
         </Wrapper>
       </RevealContentContainer>
+      <RevealContentContainer>
+        <TwoColumn
+          title='Still got questions?'
+          content='Feel free to contact us.'
+          image='/images/svg/hashtag.svg'
+          color={primary}
+          bgColor={white}
+          customInnerClass='questions'
+          link='/contact'
+          linkText='Contact us'
+          customBtnClass='inverted-grey'
+        />
+      </RevealContentContainer>
     </div>
   );
 }

public/images/svg/hashtag.svg

@@ -74,59 +74,56 @@
     }
 
     //About us
-    &.our-background {
-      .inner__image {
-        height: 14rem;
-
-        @include desktop {
-          height: 18rem;
-        }
 
+    &.our-process,
+    &.get-started,
+    &.our-purpose,
+    &.our-background,
+    &.questions {
+      .inner__image {
+        height: 10rem;
         .img {
           object-fit: contain;
         }
       }
     }
 
-    &.about-content, &.get-started {
-      .content{
-        max-width: 49rem;
-      }
-
-      .inner__content{
-        flex-basis: 65%;
-      }
-
+    &.our-background {
       .inner__image {
-        height: 10rem;
-        flex-basis: 25%;
-
         @include desktop {
           height: 15rem;
         }
+      }
+    }
 
-        .img {
-          max-width: 14rem;
-          object-fit: contain;
+    &.our-process {
+      .inner__image {
+        @include desktop {
+          height: 12rem;
         }
       }
     }
 
     &.our-purpose {
-      .inner__content{
-        flex-basis: 65%;
+      .inner__image {
+        @include desktop {
+          height: 18rem;
+        }
       }
+    }
 
+    &.get-started {
       .inner__image {
-        height: 10rem;
-        flex-basis: 25%;
-
         @include desktop {
-          height: 22rem;
+          height: 20rem;
         }
+      }
+    }
 
-        .img {
-          object-fit: contain;
+    &.questions {
+      .inner__image {
+        @include desktop {
+          height: 13rem;
         }
       }
     }
@@ -136,16 +133,11 @@
         margin: 0;
       }
 
-      .inner__content {
-        flex-basis: 70%;
-      }
-
       .inner__image {
         height: 10rem;
-        flex-basis: 30%;
 
         @include desktop {
-          height: 20rem;
+          height: 15rem;
         }
 
         .img {
@@ -209,9 +201,10 @@
       }
     }
 
-    &.get-started {
+    &.get-started,
+    &.questions {
       padding-bottom: 0px;
-      .inner__image{
+      .inner__image {
         display: none;
 
         @include desktop {
@@ -222,9 +215,6 @@
       @include desktop {
         padding-bottom: 5rem;
       }
-
-
-
     }
 
     @include desktop {
@@ -236,8 +226,6 @@
   }
 }
 
-
-
 //Exports
 :export {
   white: $white;

public/images/svg/LinkedIn2.svg renamed to public/images/svg/linkedin-portfolio.svg

@@ -9,23 +9,23 @@ export const linksSocial = [
     id: 1,
     text: 'LinkedIn',
     href: '#',
-    src: '/images/svg/LinkedIn.svg',
+    src: '/images/svg/linkedin.svg',
     alt: 'Find us on LinkedIn',
     isVisible: false,
   },
   {
     id: 2,
     text: 'YouTube',
     href: 'https://www.youtube.com/channel/UCCLwmU7r4IUWZOtH3bCEN6g',
-    src: '/images/svg/YouTube.svg',
+    src: '/images/svg/youtube.svg',
     alt: 'Find us on YouTube',
     isVisible: true,
   },
   {
     id: 3,
     text: 'GitHub',
     href: 'https://github.com/Web-Dev-Path',
-    src: '/images/svg/GitHub.svg',
+    src: '/images/svg/github.svg',
     alt: 'Find us on GitHub',
     isVisible: true,
   },