added TwoColumn component into the Homepage

Author: AMSdesigns

components/TwoColumn.js

@@ -11,7 +11,7 @@ export default function TwoColumn(props) {
           <h2 className={styles.title}>{title}</h2>
           <p className={styles.content}>{content}</p>
           <Button
-            text="Learn More"
+            text="Learn more"
             link="/about-us"
             className={buttonStyles.btn}
           />

pages/index.js

@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import TwoColumn from '../components/TwoColumn';
 import styles from '../styles/Home.module.scss';
 
 export default function Home() {
@@ -12,8 +13,14 @@ export default function Home() {
           more...
         </p>
       </div>
-      <hr className={styles.divider} />
 
+      <TwoColumn
+        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. "
+      />
+
+      <hr className={styles.divider} />
       <h2 className={styles.centerText}>
         Would you answer "yes" to any of these questions?
       </h2>

public/images/home-two-column-image.jpg

@@ -15,6 +15,7 @@
   align-items: center;
   text-align: center;
   min-width: 256px;
+  display: inline-block;
 }
 
 .btn:hover {

styles/Button.module.scss

@@ -3,6 +3,7 @@
 .container {
   width: 100vw;
   margin: 0 calc(50% - 50vw);
+  background-color: #8cd5e8;
 }
 .inner {
   padding: 80px 0;
@@ -22,6 +23,7 @@
   line-height: 80px;
   color: #292929;
   margin: 0;
+  max-width: 624px;
 }
 .itemLeft {
   width: 50%;