added decorations to homepage

Author: vmcodes

components/YellowBracket.js renamed to components/Bracket.js

@@ -1,4 +1,4 @@
-export default function YellowBracket(props) {
+export default function Bracket(props) {
   const { className, fill = '#FFCC4C' } = props;
 
   return (

components/BlueStick.js renamed to components/Stick.js

@@ -1,4 +1,4 @@
-export default function BlueStick(props) {
+export default function Stick(props) {
   const { className, fill = '#19AAD1' } = props;
 
   return (

components/TwoColumn.js

@@ -38,13 +38,15 @@ export default function TwoColumn(props) {
             {title}
           </h2>
           <p className={styles.content}>{content}</p>
-          <ButtonLink
-            link={link}
-            className={buttonStyles.btn}
-            styles={styleProps.btn}
-          >
-            {linkText}
-          </ButtonLink>
+          {link && (
+            <ButtonLink
+              link={link}
+              className={buttonStyles.btn}
+              styles={styleProps.btn}
+            >
+              {linkText}
+            </ButtonLink>
+          )}
         </div>
         {image && (
           <div className={styles.inner__image}>

pages/index.js

@@ -1,4 +1,6 @@
 import Link from 'next/link';
+import Bracket from '../components/Bracket';
+import Stick from '../components/Stick';
 import TwoColumn from '../components/TwoColumn';
 import styles from '../styles/Home.module.scss';
 import { white, primary } from '../styles/TwoColumn.module.scss';
@@ -22,6 +24,18 @@ export default function Home() {
         link="/about-us"
       />
 
+      <Bracket className={styles.bracket} />
+
+      <TwoColumn
+        title="Get involved."
+        content="Web Dev Path runs on volunteers. Here are the ways you can get involved with us:"
+        rowOrder="row-reverse"
+        color={primary}
+        bgColor={white}
+      />
+
+      <Stick className={styles.stick} />
+
       <TwoColumn
         title="Nonprofit?"
         content="Web Dev Path can help your nonprofit with web projects of various sizes. Connect with us to find out how."

styles/Home.module.scss

@@ -105,6 +105,28 @@ hr {
   .title {
     font-size: 4rem;
   }
+
+  .bracket {
+    left: 0;
+    position: absolute;
+    transform: translate(20rem, -5rem);
+  }
+
+  .stick {
+    right: 0;
+    position: absolute;
+    transform: translate(-20rem, -5rem);
+  }
+}
+
+@media (max-width: $desktop-breakpoint) {
+  .bracket {
+    display: none;
+  }
+
+  .stick {
+    display: none;
+  }
 }
 
 @media (max-width: $tablet-breakpoint) {