Merge pull request #82 from Web-Dev-Path/feature/add-nonprofit-homepage

Updated TwoColumn.js (Nonprofit homepage)

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,58 @@ 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,
+    altTag,
+    title,
+    content,
+    rowOrder,
+    color,
+    bgColor,
+    btnColor,
+    btnBg,
+    link,
+    linkText = 'Learn more',
+  } = 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}>
-            Learn more
+          <ButtonLink
+            link={link}
+            className={buttonStyles.btn}
+            styles={styleProps.btn}
+          >
+            {linkText}
           </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={altTag}
+              className={styles.img}
+              layout="fill"
+              objectFit="cover"
+            />
+          </div>
+        )}
       </div>
     </section>
   );

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,6 +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={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;
+}