updated TwoColumn.js

Author: vmcodes

CHANGELOG.md

@@ -16,10 +16,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Added
 
-- add TwoColumn.js component
 - add new footer and newsletter components styling
 
 ### Fixed
 
 - updated Next.js from 10.0.0 to 12.0.10
 - fixed scroll-x added by the layout container, adjust README
+- updated TwoColumn.js component with style props

components/ButtonLink.js

@@ -1,10 +1,12 @@
 import Link from 'next/link';
 
 export default function ButtonLink(props) {
-  const { className, link, children } = props;
+  const { className, link, children, styles } = props;
   return (
     <Link href={link}>
-      <a className={className}>{children}</a>
+      <a className={className} style={styles}>
+        {children}
+      </a>
     </Link>
   );
 }

components/TwoColumn.js

@@ -5,26 +5,47 @@ 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 } = props;
+  const { image, title, content, rowOrder, color, bgColor, btnColor, btnBg } =
+    props;
+
+  const styleProps = {
+    btn: {
+      color: btnColor,
+      backgroundColor: btnBg,
+    },
+    container: {
+      color: color,
+      backgroundColor: bgColor,
+    },
+  };
+
   return (
-    <section className={styles.container}>
+    <section className={styles.container} style={styleProps.container}>
       <div className={styles.inner} style={{ flexDirection: rowOrder }}>
         <div className={styles.inner__content}>
-          <h2 className={styles.title}>{title}</h2>
+          <h2 className={styles.title} style={{ color: color }}>
+            {title}
+          </h2>
           <p className={styles.content}>{content}</p>
-          <ButtonLink link="/about-us" className={buttonStyles.btn}>
+          <ButtonLink
+            link="/about-us"
+            className={buttonStyles.btn}
+            styles={styleProps.btn}
+          >
             Learn more
           </ButtonLink>
         </div>
-        <div className={styles.inner__image}>
-          <Image
-            src={image}
-            alt=""
-            className={styles.img}
-            layout="fill"
-            objectFit="cover"
-          />
-        </div>
+        {image && (
+          <div className={styles.inner__image}>
+            <Image
+              src={image}
+              alt=""
+              className={styles.img}
+              layout="fill"
+              objectFit="cover"
+            />
+          </div>
+        )}
       </div>
     </section>
   );

pages/index.js

@@ -20,6 +20,15 @@ export default function Home() {
         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. "
       />
 
+      <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"
+      />
+
       <hr className={styles.divider} />
       <h2 className={styles.centerText}>
         Would you answer "yes" to any of these questions?