adds organizers page

Author: halfghaninne

src/components/organizers/index.js

@@ -12,18 +12,6 @@ const Organizers = ({data}) => {
 
   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>
@@ -58,7 +46,6 @@ const Organizers = ({data}) => {
             </div>
           </section>
         </div>
-      </div>
     </section>
   )
 };

src/components/organizers/organizers.module.css

@@ -1,9 +1,5 @@
 .aboutUs {
-  color: var(--white);
-}
-
-.background {
-  background-color: var(--navy);
+  color: var(--navy);
 }
 
 .row {

src/pages/organizers/index.js

@@ -0,0 +1,69 @@
+import React from 'react'
+// import { Link, graphql } from 'gatsby'
+import Img from 'gatsby-image'
+import Header from '../../components/header'
+import Organizers from '../../components/Organizers'
+import Footer from '../../components/footer'
+import { SkipNavLink, SkipNavContent } from '@reach/skip-nav'
+
+
+// import HomeLayout from '../../layouts/home'
+// import SEO from '../components/seo'
+
+import styles from './index.module.css'
+
+const IndexPage = ({ data }) => (
+    <>
+    <SkipNavLink />
+    <Header />
+    <SkipNavContent>
+        <section
+      id="about-us"
+      className={[styles.photoSection, styles.oye].join(' ')}
+    >
+      <div className={styles.row}>
+        <Img
+          alt="A smiling speaker talks on stage at the 2018 conference with a microphone."
+          fluid={data.organizers.childImageSharp.fluid}
+          imgStyle={{ objectFit: 'contain', objectPosition: 'center center' }}
+          className={styles.image}
+        />
+        <div className={styles.content}>
+          {' '}
+          <h1 className="title">About Us</h1>
+          <h2 className="subtitle">
+            Meet the hard-working board, chapter leaders, and conference organizers behind Write/Speak/Code.
+          </h2>
+          <p>
+            Email us at [email protected] to learn about different ways to get involved in our community.
+          </p>
+          {/* <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://www.meetup.com/pro/writespeakcode/"
+            className="link"
+          >
+            Find events on Meetup
+          </a> */}
+        </div>
+      </div>
+    </section>
+    <Organizers/>
+    </SkipNavContent>
+    <Footer />
+    </>    
+)
+
+export default IndexPage
+
+export const pageQuery = graphql`
+  query {
+    organizers: file(relativePath: { eq: "photos/WSC-NY-577.jpg" }) {
+      childImageSharp {
+        fluid(maxWidth: 3600) {
+          ...GatsbyImageSharpFluid_tracedSVG
+        }
+      }
+    }
+  }
+`

src/pages/organizers/index.module.css

@@ -0,0 +1,64 @@
+#about-us {
+  background-color: var(--mint);
+}
+
+.section {
+  padding: 3em 0;
+  .content {
+    padding: 0 2em;
+  }
+  @media screen and (min-width: 50em) {
+    .content {
+      padding: 2em;
+    }
+  }
+  @media screen and (min-width: 80em) {
+    max-width: var(--container);
+    margin: 0 auto;
+  }
+}
+  
+.photoSection {
+  .row {
+    display: flex;
+    flex-direction: column;
+    padding: 3em 1em;
+    .content {
+      padding: 0 2em;
+    }
+    .image {
+      margin: 2em;
+    }
+  }
+  @media screen and (min-width: 50em) {
+    .row {
+      flex-direction: row;
+      justify-content: space-around;
+      .content {
+        align-self: center;
+        width: 50%;
+        max-width: 30em;
+        padding: 2em;
+      }
+      .image {
+        width: 50%;
+        max-height: none;
+        margin-left: 2em;
+      }
+    }
+    &:nth-of-type(2n) {
+      .row {
+        flex-direction: row-reverse;
+        .image {
+          margin-right: 2em;
+        }
+      }
+    }
+  }
+  @media screen and (min-width: 80em) {
+    .row {
+      max-width: var(--container);
+      margin: 0 auto;
+    }
+  }
+}