Changing component name, adjusting styles

Author: mariana-caldas

components/Card.js

@@ -2,9 +2,14 @@ import Image from 'next/image';
 import Link from 'next/link';
 import styles from '../styles/Card.module.scss';
 
-export default function Card(props) {
-  const { image, altTag, title, content, link, linkText } = props;
-
+export default function Card({
+  image,
+  altTag,
+  title,
+  content,
+  link,
+  linkText,
+}) {
   return (
     <div className={styles.card}>
       <div className={styles.card__image}>

components/ThreeColumn.js renamed to components/CardsColumns.js

@@ -1,9 +1,14 @@
 import Card from './Card';
-import styles from '../styles/ThreeColumn.module.scss';
-
-export default function ThreeColumn(props) {
-  const { images, altTags, titles, content, links, linkText } = props;
+import styles from '../styles/CardsColumns.module.scss';
 
+export default function CardsColumns({
+  images,
+  altTags,
+  titles,
+  content,
+  links,
+  linkText,
+}) {
   return (
     <section className={styles.container}>
       <div className={styles.inner__content}>

components/Layout.js

@@ -1,16 +1,13 @@
 import Nav from './Nav';
 import Meta from './Meta';
-import styles from '../styles/Layout.module.scss';
 import Footer from './Footer';
 
 export default function Layout({ children }) {
   return (
     <>
       <Meta />
       <Nav />
-      <div className={styles.container}>
-        <main className={styles.main}>{children}</main>
-      </div>
+      <main>{children}</main>
       <Footer />
     </>
   );

components/TwoColumn.js

@@ -3,21 +3,21 @@ import ButtonLink from './ButtonLink';
 import styles from '../styles/TwoColumn.module.scss';
 import buttonStyles from '../styles/ButtonLink.module.scss';
 
-export default function TwoColumn(props) {
+export default function TwoColumn({
+  image,
+  altTag,
+  title,
+  content,
+  rowOrder,
+  color,
+  bgColor,
+  btnColor,
+  btnBg,
+  link,
+  customInnerClass,
+  linkText = 'Learn more',
+}) {
   // Add rowOrder="row-reverse" prop to the component to reverse its order on desktop
-  const {
-    image,
-    altTag,
-    title,
-    content,
-    rowOrder,
-    color,
-    bgColor,
-    btnColor,
-    btnBg,
-    link,
-    linkText = 'Learn more',
-  } = props;
 
   const styleProps = {
     btn: {
@@ -32,7 +32,10 @@ export default function TwoColumn(props) {
 
   return (
     <section className={styles.container} style={styleProps.container}>
-      <div className={styles.inner} style={{ flexDirection: rowOrder }}>
+      <div
+        className={`${styles.inner} ${styles[customInnerClass]}`}
+        style={{ flexDirection: rowOrder }}
+      >
         <div className={styles.inner__content}>
           <h2 className={styles.title} style={{ color: color }}>
             {title}

pages/index.js

@@ -2,7 +2,7 @@ import Link from 'next/link';
 import Bracket from '../components/Bracket';
 import Stick from '../components/Stick';
 import TwoColumn from '../components/TwoColumn';
-import ThreeColumn from '../components/ThreeColumn';
+import CardsColumns from '../components/CardsColumns';
 import styles from '../styles/Home.module.scss';
 import { white, primary } from '../styles/TwoColumn.module.scss';
 
@@ -32,11 +32,12 @@ export default function Home() {
           title="Get involved."
           content="Web Dev Path runs on volunteers. Here are the ways you can get involved with us:"
           rowOrder="row-reverse"
+          customInnerClass="get-involved"
           color={primary}
           bgColor={white}
         />
 
-        <ThreeColumn
+        <CardsColumns
           titles={['Join us', 'Volunteer', 'Become a mentor']}
           images={[
             '/images/join-us.jpg',
@@ -49,8 +50,8 @@ export default function Home() {
             'Would you like to volunteer? For roles other than mentor/mentee, please get in touch.',
             'Are you an experienced web dev who wants to become a mentor? Welcome!',
           ]}
-          links={['/about-us', '/about-us', '/about-us']}
-          linkText={['Learn more', 'Contact us', 'Contact us']}
+          links={['/about-us', '/contact-us', '/about-us']}
+          linkText={['Learn more', 'Contact us', 'Learn more']}
         />
 
         <Stick className={styles.stick} />
@@ -63,40 +64,8 @@ export default function Home() {
           btnColor={primary}
           btnBg={white}
           link="/about-us"
+          customInnerClass="non-profit"
         />
-
-        <hr className={styles.divider} />
-        <h2 className={styles.centerText}>
-          Would you answer "yes" to any of these questions?
-        </h2>
-        <div className={styles.grid}>
-          <div className={styles.card}>
-            <p>Are you learning web development and need mentorship?</p>
-          </div>
-          <div className={styles.card}>
-            <p>Are you an experienced web dev who wants to become a mentor?</p>
-          </div>
-          <div className={styles.card}>
-            <p>
-              Are you a non-profit organization who needs help with a web
-              project?
-            </p>
-          </div>
-          <div className={styles.card}>
-            <p>
-              Are you a web dev looking for help or a code buddy for a project?
-            </p>
-          </div>
-        </div>
-        <div className={`${styles.learn_more} ${styles.centerText}`}>
-          <h3>
-            If so, you are probably in the right place and should learn more
-            about us
-          </h3>
-          <button className={styles.button}>
-            <Link href="/about-us">Learn More</Link>
-          </button>
-        </div>
       </div>
     </section>
   );

styles/ThreeColumn.module.scss renamed to styles/CardsColumns.module.scss

@@ -12,5 +12,9 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
+
+    @include desktop-breakpoint-minus {
+      padding-bottom: 5rem;
+    }
   }
 }

styles/Home.module.scss

@@ -113,21 +113,23 @@ hr {
   transform: translate(-10rem, -5rem);
 }
 
-@media (min-width: $desktop-breakpoint-large) {
+@include desktop-breakpoint-plus {
   .title {
     font-size: 4rem;
   }
 
   .bracket {
-    transform: translate(20rem, -5rem);
+    transform: translate(50%, -5rem);
+    width: 30%;
   }
 
   .stick {
-    transform: translate(-20rem, -5rem);
+    transform: translate(-50%, -5rem);
+    width: 30%;
   }
 }
 
-@media (max-width: $desktop-breakpoint-small) {
+@include desktop-breakpoint-minus {
   .bracket {
     display: none;
   }
@@ -136,18 +138,3 @@ hr {
     display: none;
   }
 }
-
-@media (max-width: $tablet-breakpoint) {
-  .grid {
-    width: 100%;
-    flex-direction: column;
-    margin: 3rem 0;
-  }
-
-  .card {
-    max-width: none;
-    margin: 0.5rem;
-    width: 90%;
-    min-height: 7rem;
-  }
-}

styles/Layout.module.scss

@@ -10,8 +10,23 @@
     width: 90%;
     max-width: $large-desktop-breakpoint;
 
+    &.get-involved {
+      @include desktop-breakpoint-minus {
+        padding-bottom: 0;
+      }
+    }
+
+    &.non-profit {
+      @include desktop-breakpoint-minus {
+        .inner__content {
+          margin-bottom: 0;
+        }
+      }
+    }
+
     .inner__content {
       margin-bottom: 5rem;
+
       @include desktop {
         flex-basis: 50%;
         margin-bottom: 0;

styles/TwoColumn.module.scss

@@ -21,12 +21,24 @@
   }
 }
 
+@mixin desktop-breakpoint-plus {
+  @media (min-width: $desktop-breakpoint-plus) {
+    @content;
+  }
+}
+
 @mixin large-desktop {
   @media (min-width: $large-desktop-breakpoint) {
     @content;
   }
 }
 
+@mixin desktop-breakpoint-minus {
+  @media (max-width: $desktop-breakpoint-minus) {
+    @content;
+  }
+}
+
 @mixin mobile {
   @media (max-width: $lg-mobile-breakpoint) {
     @content;