change CardColumn so image is optional. change card background color

Author: cherylli

components/containers/Card.js

@@ -12,15 +12,18 @@ export default function Card({
 }) {
   return (
     <div className={styles.card}>
-      <div className={styles.card__image}>
-        <Image
-          src={image}
-          alt={altTag}
-          className={styles.img}
-          layout='fill'
-          objectFit='cover'
-        />
-      </div>
+      {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>

components/containers/CardsColumns.js

@@ -41,8 +41,8 @@ export default function CardsColumns({
             <div className={styles.inner__content}>
               <Card
                 title={title}
-                image={images[index]}
-                altTag={altTags[index]}
+                image={images?images[index]:undefined}
+                altTag={altTags?altTags[index]:undefined}
                 content={content[index]}
                 link={links[index]}
                 linkText={linkText[index]}

pages/about.js

@@ -97,8 +97,6 @@ export default function AboutUs() {
         </Container>
         <CardsColumns
           titles={['1', '2']}
-          images={['/images/join-us.webp', '/images/volunteer.webp']}
-          altTags={['Join the project', 'Volunteer to learn together']}
           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.',

styles/Card.module.scss

@@ -8,6 +8,7 @@
   box-shadow: $box-shadow;
   min-width: 32%;
   height: 37rem;
+  background-color: $primary-accent-color;
 
   @include desktop {
     margin: 1.5rem 1.5rem 0 1.5rem;
@@ -22,8 +23,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 {