Merge branch 'main' into feature/husky-precommit

Author: cherylli

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

@@ -0,0 +1,26 @@
+---
+name: Web Dev Path issue
+about: Describe this issue template's purpose here.
+title: ''
+labels: help wanted
+assignees: ''
+
+---
+
+**What do we need to build or fix?**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Technical details**
+A clear and concise description of what you want to happen.
+
+**Approach suggestions**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Deadline**
+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).
+- Update the CHANGELOG.md file.

CHANGELOG.md

@@ -46,6 +46,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 - Made the site a Progressive Web App (PWA)
 - About page content (first section)
+- About page "Wanna Learn More" and "How to get started?" section
+- An optional second column to TwoColumn instead of the image
 - .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
@@ -63,4 +65,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - updated 'about us' first section (our background, peer reviews, version control)
 - updated 'about us' section (our goals, our purpose)
 - updated mobile nav to automatically close when page route change is completed
-- prettierrc "end of line" to auto
+- adjust flex-basis of a few sections in the about page to better match the design file
+- prettierrc "end of line" to auto
+
+
+

components/buttons/ButtonLink.js

@@ -1,20 +1,24 @@
-import Link from 'next/link';
 import btnStyles from '@/styles/ButtonLink.module.scss';
 
+/*  The component supports the use of target with the property "openNewTab" to open the
+ link in a new tab.*/
+
 export default function ButtonLink({
   customClassName,
   link,
   children,
   styles,
+  openNewTab,
 }) {
   return (
-    <Link href={link}>
-      <a
-        className={`${btnStyles.btn} ${btnStyles[customClassName]}`}
-        style={styles}
-      >
-        {children}
-      </a>
-    </Link>
+    <a
+      href={link}
+      className={customClassName?`${btnStyles.btn} ${btnStyles[customClassName]}`:btnStyles.btn}
+      style={styles}
+      target={openNewTab ? '_blank' : undefined}
+      rel='noopener noreferrer'
+    >
+      {children}
+    </a>
   );
 }

components/containers/TwoColumn.js

@@ -15,6 +15,8 @@ export default function TwoColumn({
   customInnerClass,
   customBtnClass,
   linkText = 'Learn more',
+  secondTextColumn,
+  openNewTab,
 }) {
   // Add rowOrder="row-reverse" prop to the component to reverse its order on desktop
 
@@ -43,19 +45,23 @@ export default function TwoColumn({
           )}
           <div className={styles.content}>{content}</div>
           {link && (
-            <ButtonLink link={link} customClassName={customBtnClass}>
+            <ButtonLink
+              link={link}
+              customClassName={customBtnClass}
+              openNewTab={openNewTab}
+            >
               {linkText}
             </ButtonLink>
           )}
         </div>
-        {image && (
+        {secondTextColumn && secondTextColumn}
+        {!secondTextColumn && image && (
           <div className={styles.inner__image}>
             <Image
               src={image}
               alt={altTag}
               className={styles.img}
               layout='fill'
-              priority
             />
           </div>
         )}

pages/about.js

@@ -1,6 +1,11 @@
 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 +132,78 @@ export default function AboutUs() {
           customInnerClass='our-purpose'
         />
       </RevealContentContainer>
+      <RevealContentContainer>
+        <TwoColumn
+          title='Wanna learn more?'
+          content={''}
+          image='/images/svg/close-curly-bracket.svg'
+          color={primary}
+          bgColor={lightBgColor}
+          customInnerClass='wanna-learn-more'
+        />
+        <TwoColumn
+          title="Junior Developers"
+          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'
+          }
+          linkText='Our wiki'
+          openNewTab
+          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'
+              }
+              linkText='Contact us'
+              link='/contact'
+              customBtnClass='inverted-grey'
+              color={primary}
+              bgColor={lightBgColor}
+              customInnerClass='second-text-column'
+            />
+          }
+        />
+      </RevealContentContainer>
+      <RevealContentContainer>
+        <TwoColumn
+          title='How to get started?'
+          content={
+            <div>
+              After taking a look at our project&nbsp;
+              <a  target='_blank'
+                  href='https://github.com/Web-Dev-Path/web-dev-path#readme'
+                  rel='noopener noreferrer' >README</a> and&nbsp;
+              <a  target='_blank'
+                  href='https://github.com/Web-Dev-Path/web-dev-path/wiki'
+                  rel='noopener noreferrer' >wiki</a>,
+              just send us an email sharing with us about your journey in tech and
+              why you’re interested in joining us.
+              <br/>
+              We've got you!
+            </div>
+          }
+          rowOrder='row-reverse'
+          image='/images/svg/slash.svg'
+          color={primary}
+          bgColor={white}
+          customInnerClass='get-started'
+          link="mailto:hello@webdevpath.co"
+          linkText="Ping Us"
+          customBtnClass='inverted-grey'
+        />
+      </RevealContentContainer>
     </div>
   );
 }

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

@@ -2,6 +2,8 @@
 @use './mixins' as *;
 
 .wrapper {
+  align-self: stretch;
+
   .inner {
     padding: 5rem 0;
     margin: 0 auto;
@@ -20,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;
@@ -84,9 +88,18 @@
       }
     }
 
-    &.about-content {
+    &.about-content, &.get-started {
+      .content{
+        max-width: 49rem;
+      }
+
+      .inner__content{
+        flex-basis: 65%;
+      }
+
       .inner__image {
         height: 10rem;
+        flex-basis: 25%;
 
         @include desktop {
           height: 15rem;
@@ -100,8 +113,13 @@
     }
 
     &.our-purpose {
+      .inner__content{
+        flex-basis: 65%;
+      }
+
       .inner__image {
         height: 10rem;
+        flex-basis: 25%;
 
         @include desktop {
           height: 22rem;
@@ -113,6 +131,102 @@
       }
     }
 
+    &.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: space-evenly;
+
+      .inner {
+        padding: 0px;
+        margin: 0px;
+      }
+
+      .inner__content {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+      }
+
+      h2 {
+        font-size: 2rem;
+        line-height: 2.5rem;
+      }
+
+      .inner {
+        margin: 0px;
+        padding: 0px;
+      }
+
+      .inner__content {
+        flex-basis: unset;
+
+        @include desktop {
+          width: 25rem;
+        }
+      }
+
+      a {
+        margin-top: auto;
+        color: $light-bg-color;
+      }
+
+      a:hover {
+        color: $primary-content-color;
+      }
+    }
+
+    &.second-text-column {
+      height: 100%;
+      width: 100%;
+
+      .inner {
+        height: 100%;
+      }
+
+      .inner__content {
+        height: 100%;
+      }
+    }
+
+    &.get-started {
+      padding-bottom: 0px;
+      .inner__image{
+        display: none;
+
+        @include desktop {
+          display: unset;
+        }
+      }
+
+      @include desktop {
+        padding-bottom: 5rem;
+      }
+
+
+
+    }
+
     @include desktop {
       display: flex;
       align-items: center;
@@ -122,6 +236,8 @@
   }
 }
 
+
+
 //Exports
 :export {
   white: $white;