Merge pull request #124 from Web-Dev-Path/feature/our-goals-purpose

Adding Our Goals  & Purpose section to About Us

Author: klezi10

CHANGELOG.md

@@ -57,3 +57,4 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - footer styling update + social media icons
 - improved LightHouse scores by optmizing images, creating a robots.txt file and adding proper alt tags
 - updated 'about us' first section (our background, peer reviews, version control)
+- updated 'about us' section (our goals, our purpose)

components/containers/Card.js

@@ -9,22 +9,30 @@ export default function Card({
   content,
   link,
   linkText,
+  customClass,
 }) {
   return (
-    <div className={styles.card}>
-      <div className={styles.card__image}>
-        <Image
-          src={image}
-          alt={altTag}
-          className={styles.img}
-          layout='fill'
-          objectFit='cover'
-        />
-      </div>
+    <div
+      className={
+        customClass ? `${styles.card} ${styles[customClass]}` : styles.card
+      }
+    >
+      {image && (
+        <div className={styles.card__image}>
+          <Image
+            src={image}
+            alt={altTag}
+            className={styles.img}
+            layout='fill'
+            objectFit='cover'
+          />
+        </div>
+      )}
+
       <h2 className={styles.title}>{title}</h2>
       <div className={styles.content}>
         <p>
-          {content} <Link href={link}>{linkText}</Link>
+          {content} {link && <Link href={link}>{linkText}</Link>}
         </p>
       </div>
     </div>

components/containers/CardsColumns.js

@@ -14,6 +14,7 @@ export default function CardsColumns({
   content,
   links,
   linkText,
+  customClass,
 }) {
   return (
     <Container>
@@ -31,23 +32,33 @@ export default function CardsColumns({
             spaceBetween: 20,
           },
           1334: {
-            slidesPerView: 3,
-            spaceBetween: 20,
+            slidesPerView: titles.length,
+            spaceBetween: titles.length < 3 ? 75 : 20,
           },
         }}
       >
         {titles.map((title, index) => (
           <SwiperSlide key={index} className={styles.swiperSlide}>
             <div className={styles.inner__content}>
-              <Card
-                title={title}
-                image={images[index]}
-                altTag={altTags[index]}
-                content={content[index]}
-                link={links[index]}
-                linkText={linkText[index]}
-                key={index}
-              />
+              {images && links && linkText ? (
+                <Card
+                  key={index}
+                  title={title}
+                  image={images[index]}
+                  altTag={altTags[index]}
+                  content={content[index]}
+                  link={links[index]}
+                  linkText={linkText[index]}
+                  customClass={customClass}
+                />
+              ) : (
+                <Card
+                  key={index}
+                  title={title}
+                  content={content[index]}
+                  customClass={customClass}
+                />
+              )}
             </div>
           </SwiperSlide>
         ))}

components/snippets/Title.js

@@ -0,0 +1,5 @@
+const Title = ({ title }) => {
+  return <h2>{title}</h2>;
+};
+
+export default Title;

pages/about.js

@@ -1,6 +1,9 @@
 import RevealContentContainer from '@/components/containers/RevealContentContainer';
 import TwoColumn from '@/components/containers/TwoColumn';
 import { white, primary, primaryAccent } from '@/styles/TwoColumn.module.scss';
+import CardsColumns from '@/components/containers/CardsColumns';
+import Title from '@/components/snippets/Title';
+import Container from '@/components/containers/Container';
 
 export default function AboutUs() {
   return (
@@ -88,6 +91,42 @@ export default function AboutUs() {
           customInnerClass='about-content'
         />
       </RevealContentContainer>
+      <RevealContentContainer>
+        <Container>
+          <Title title='Our goals' />
+        </Container>
+        <CardsColumns
+          titles={['1', '2']}
+          content={[
+            'To provide a safe space for juniors to learn how to communicate in a simulated professional environment.',
+            'To offer more detailed tasks (GitHub issues) and help the developer assimilate the logical mindset required in a structured project, under guidance following the industry’s best practices throughout the entire process.',
+          ]}
+          customClass='our-goals'
+        />
+      </RevealContentContainer>
+      <RevealContentContainer>
+        <TwoColumn
+          title='Our purpose'
+          content={
+            <div>
+              To do so, we're coding this platform in Next.js. In the short
+              term, we intend to have a blog where the participants can post
+              anything related to the web development world.
+              <br />
+              <br />
+              The ultimate purpose though is to make this platform a portal
+              where Non-Profit Organizations can find support for their web
+              products. That way, new graduates can gain some experience while
+              helping a good cause.
+            </div>
+          }
+          rowOrder='row-reverse'
+          image='/images/svg/semi-colon.svg'
+          color={primary}
+          bgColor={white}
+          customInnerClass='our-purpose'
+        />
+      </RevealContentContainer>
     </div>
   );
 }

public/images/svg/semi-colon.svg

@@ -2,18 +2,27 @@
 @use './mixins' as *;
 
 .card {
-  margin: 1rem 1rem 0 .5rem;
+  margin: 1rem 1rem 0 0.5rem;
   padding: 1.5rem;
   border-radius: 1.5rem;
   box-shadow: $box-shadow;
   min-width: 32%;
   height: 37rem;
 
+  @include small-mobile {
+    height: 42rem;
+  }
+
+  @include tablet {
+    height: 42rem;
+  }
+
   @include desktop {
+    height: 37rem;
     margin: 1.5rem 1.5rem 0 1.5rem;
     &:first-child,
     &:last-child {
-      margin: 1.5rem .5rem 0 .5rem;
+      margin: 1.5rem 0.5rem 0 0.5rem;
     }
   }
 
@@ -22,8 +31,7 @@
     font-weight: bold;
     font-size: 1.75rem;
     color: $primary-content-color;
-    margin: 0;
-    margin-top: 1rem;
+    margin: 1rem 0 0 0;
     line-height: unset;
 
     @include tablet {
@@ -55,4 +63,29 @@
       border-radius: 0.25rem;
     }
   }
+
+  //About Us
+  &.our-goals {
+    background-color: $primary-accent-color;
+    max-height: 35rem;
+
+    .title {
+      font-size: 3.5rem;
+      text-align: center;
+    }
+
+    @include desktop {
+      max-height: 37rem;
+      .title {
+        font-size: 5rem;
+      }
+
+      .content {
+        p {
+          font-size: 1.8rem;
+          line-height: 2.2rem;
+        }
+      }
+    }
+  }
 }

styles/Card.module.scss

@@ -13,6 +13,7 @@
 
 .swiper {
   margin-bottom: 5rem;
+  padding: 0 1rem;
 
   :global(.swiper-pagination-bullet-active) {
     background-color: $dark-bg-color;
@@ -21,3 +22,5 @@
 }
 
 
+
+

styles/CardsColumns.module.scss

@@ -5,3 +5,4 @@
   width: 90%;
   max-width: $large-desktop-breakpoint;
 }
+

styles/Container.module.scss

@@ -99,6 +99,20 @@
       }
     }
 
+    &.our-purpose {
+      .inner__image {
+        height: 10rem;
+
+        @include desktop {
+          height: 22rem;
+        }
+
+        .img {
+          object-fit: contain;
+        }
+      }
+    }
+
     @include desktop {
       display: flex;
       align-items: center;