Styling adjustments

Author: mariana-caldas

components/containers/Card.js

@@ -13,7 +13,9 @@ export default function Card({
 }) {
   return (
     <div
-      className={customClass ? `${styles.card} ${customClass}` : styles.card}
+      className={
+        customClass ? `${styles.card} ${styles[customClass]}` : styles.card
+      }
     >
       {image && (
         <div className={styles.card__image}>

components/containers/CardsColumns.js

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

pages/about.js

@@ -99,9 +99,8 @@ export default function AboutUs() {
           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 (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.',
+            '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.',
           ]}
-          bgColor={primaryAccent}
           customClass='our-goals'
         />
       </RevealContentContainer>
@@ -110,7 +109,7 @@ export default function AboutUs() {
           title='Our purpose'
           content={
             <div>
-              To do so, we’re coding this platform in Next.js. In the short
+              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 />

styles/Card.module.scss

@@ -2,19 +2,18 @@
 @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;
-  background-color: $primary-accent-color;
 
   @include desktop {
     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;
     }
   }
 
@@ -55,4 +54,29 @@
       border-radius: 0.25rem;
     }
   }
+
+  //About Us
+  &.our-goals {
+    background-color: $primary-accent-color;
+    max-height: 30rem;
+
+    .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;
+        }
+      }
+    }
+  }
 }