added new props and scss exports

Author: vmcodes

components/TwoColumn.js

@@ -5,8 +5,19 @@ import buttonStyles from '../styles/ButtonLink.module.scss';
 
 export default function TwoColumn(props) {
   // Add rowOrder="row-reverse" prop to the component to reverse its order on desktop
-  const { image, title, content, rowOrder, color, bgColor, btnColor, btnBg } =
-    props;
+  const {
+    image,
+    altTag,
+    title,
+    content,
+    rowOrder,
+    color,
+    bgColor,
+    btnColor,
+    btnBg,
+    link,
+    linkText = 'Learn more',
+  } = props;
 
   const styleProps = {
     btn: {
@@ -28,18 +39,18 @@ export default function TwoColumn(props) {
           </h2>
           <p className={styles.content}>{content}</p>
           <ButtonLink
-            link="/about-us"
+            link={link}
             className={buttonStyles.btn}
             styles={styleProps.btn}
           >
-            Learn more
+            {linkText}
           </ButtonLink>
         </div>
         {image && (
           <div className={styles.inner__image}>
             <Image
               src={image}
-              alt=""
+              alt={altTag}
               className={styles.img}
               layout="fill"
               objectFit="cover"

pages/index.js

@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import TwoColumn from '../components/TwoColumn';
 import styles from '../styles/Home.module.scss';
+import { white, primary } from '../styles/TwoColumn.module.scss';
 
 export default function Home() {
   return (
@@ -18,15 +19,17 @@ export default function Home() {
         title="Let's grow together."
         image="/images/home-two-column-image.jpg"
         content="The Web Dev Path is a team of professional developers project that aims to provide a comprehensive path for people who seek to begin their web development journey. "
+        link="/about-us"
       />
 
       <TwoColumn
         title="Nonprofit?"
         content="Web Dev Path can help your nonprofit with web projects of various sizes. Connect with us to find out how."
-        color="#ffffff"
-        bgColor="#292929"
-        btnColor="#292929"
-        btnBg="#ffffff"
+        color={white}
+        bgColor={primary}
+        btnColor={primary}
+        btnBg={white}
+        link="/about-us"
       />
 
       <hr className={styles.divider} />

styles/TwoColumn.module.scss

@@ -2,7 +2,7 @@
 @use './mixins' as *;
 
 .container {
-  background-color: #8cd5e8;
+  background-color: $light-bg-color;
 
   .inner {
     padding: 5rem 0;
@@ -63,3 +63,9 @@
     }
   }
 }
+
+//Exports
+:export {
+  white: $white;
+  primary: $primary-content-color;
+}