adds organizers block to the main site page, creates sketch of importing organizer data

Author: halfghaninne

src/components/menu/index.js

@@ -46,6 +46,13 @@ const Menu = () => {
       >
         Sponsorship
       </button>
+      <button
+        onClick={() => {
+          navigate('/#about')
+        }}
+      >
+        About
+      </button>
     </nav>
   )
 

src/components/organizer/index.js

@@ -0,0 +1,66 @@
+import React from 'react'
+
+import Organizer from '../organizer'
+
+import styles from './organizers.module.css'
+
+const Organizers = ({data}) => {
+  const boardMembers = []
+  const chapterLeaders = []
+  const conferenceOrganizers = []
+  const websiteContributors = []
+
+  return (
+    <section id="about" className={styles.aboutUs}>
+      <div className={styles.background}>
+        <div className={styles.row}>
+          <div className={styles.info}>
+            <h1 className="title">About Us</h1>
+            <h2 className="subtitle">
+              Meet the hard-working organizers behind Write/Speak/Code.
+            </h2>
+            <p>
+              Contact us at [email protected] to learn how you can join our organizing team.
+            </p>
+          </div>
+        </div>
+        <div className={styles.wrap}>
+          <section>
+            <h3 className={styles.heading}>Board Members</h3>
+            <div className={styles.grid}>
+              {boardMembers.map(boardMember => (
+                <Organizer />
+              ))}
+            </div>
+          </section>
+          <section>
+            <h3 className={styles.heading}>Chapter Leaders</h3>
+            <div className={styles.grid}>
+              {chapterLeaders.map(chapterLeader => (
+                <Organizer />
+              ))}
+            </div>
+          </section>
+          <section>
+            <h3 className={styles.heading}>Conference Organizers</h3>
+            <div className={styles.grid}>
+              {conferenceOrganizers.map(conferenceOrganizer => (
+                <Organizer />
+              ))}
+            </div>
+          </section>
+          <section>
+            <h3 className={styles.heading}>Website Contributors</h3>
+            <div className={styles.grid}>
+              {websiteContributors.map(websiteContributor => (
+                <Organizer />
+              ))}
+            </div>
+          </section>
+        </div>
+      </div>
+    </section>
+  )
+};
+
+export default Organizers

src/components/organizer/organizer.module.css

@@ -0,0 +1,23 @@
+.aboutUs {
+  color: var(--white);
+}
+
+.background {
+  background-color: var(--navy);
+}
+
+.row {
+  padding: 1em 0;
+}
+  
+.info {
+  padding: 2em;
+}
+  
+.wrap {
+  margin: 0 3em;
+}
+
+.heading {
+  border-bottom: 1px solid var(--tan);
+}

src/components/organizers/index.js

@@ -5,6 +5,8 @@ import Img from 'gatsby-image'
 import HomeLayout from '../layouts/home'
 import SEO from '../components/seo'
 import Sponsors from '../components/sponsors'
+import Organizers from '../components/organizers'
+
 import styles from './index.module.css'
 
 const IndexPage = ({ data }) => (
@@ -201,6 +203,7 @@ const IndexPage = ({ data }) => (
     </section>
 
     <Sponsors />
+    <Organizers />
   </HomeLayout>
 )