Merge pull request #143 from Web-Dev-Path/feature/still-got-questions

Add Still got questions section to about page

Author: mariana-caldas

.github/ISSUE_TEMPLATE/web-dev-path-issue.md

@@ -4,7 +4,6 @@ about: Describe this issue template's purpose here.
 title: ''
 labels: help wanted
 assignees: ''
-
 ---
 
 **What do we need to build or fix?**
@@ -20,8 +19,9 @@ A clear and concise description of any alternative solutions or features you've
 Please keep in mind that once you assign this task to yourself, you'll need to complete it in 10 days.
 
 **Acceptance criteria**
+
 - Test the section and components in many screen sizes, you can use the Inspect tool for that.
 - Please test if the new changes added to the components do not affect the other instances.
 - Test the feature in many browsers, such as Chrome, Firefox, Edge, and Safari (MAC).
-- If there are any build problems when submitting your PR, run yarn build locally to solve the issues and commit the changes.
+- If there are any build problems when submitting your PR, run `yarn build` locally to solve the issues and commit the changes.
 - Update the CHANGELOG.md file.

pull_request_template.md renamed to .github/pull_request_template.md

@@ -51,7 +51,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - .prettierignore file
 - husky, lint-staged to auto format with prettier on git commit
 - lint and format script to run prettier check and write on all files respectively
-- who we are components
+- who we are section to about page
+- still got questions section to about page
 
 ### Fixed
 

CHANGELOG.md

@@ -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'

components/containers/Member.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:hello@webdevpath.co'
-          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>
   );
 }

pages/about.js

@@ -59,6 +59,7 @@
     }
 
     // Homepage
+
     &.get-involved {
       @include desktop-breakpoint-minus {
         padding-bottom: 0;
@@ -73,60 +74,59 @@
       }
     }
 
-    //About us
-    &.our-background {
-      .inner__image {
-        height: 14rem;
+    // end Homepage
 
-        @include desktop {
-          height: 18rem;
-        }
+    //About page
 
+    &.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 +136,11 @@
         margin: 0;
       }
 
-      .inner__content {
-        flex-basis: 70%;
-      }
-
       .inner__image {
         height: 10rem;
-        flex-basis: 30%;
 
         @include desktop {
-          height: 20rem;
+          height: 15rem;
         }
 
         .img {
@@ -209,9 +204,10 @@
       }
     }
 
-    &.get-started {
+    &.get-started,
+    &.questions {
       padding-bottom: 0px;
-      .inner__image{
+      .inner__image {
         display: none;
 
         @include desktop {
@@ -222,11 +218,10 @@
       @include desktop {
         padding-bottom: 5rem;
       }
-
-
-
     }
 
+    // end About page
+
     @include desktop {
       display: flex;
       align-items: center;
@@ -236,8 +231,6 @@
   }
 }
 
-
-
 //Exports
 :export {
   white: $white;

public/images/svg/hashtag.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,
   },