{"size": 3056, "ext": "js", "max_stars_repo_path": "src/pages/about.js", "max_stars_repo_name": "Purple-Hydrangea-Project/PHP-gatsby", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/pages/about.js", "max_issues_repo_name": "Purple-Hydrangea-Project/PHP-gatsby", "max_issues_repo_issues_event_min_datetime": "2021-06-17T06:00:41.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-22T19:45:31.000Z", "max_forks_repo_path": "src/pages/about.js", "max_forks_repo_name": "Purple-Hydrangea-Project/PHP-gatsby", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 14, "max_forks_count": null, "avg_line_length": 43.0422535211, "max_line_length": 475, "alphanum_fraction": 0.5690445026}
import React from "react";
import { useStaticQuery, graphql } from "gatsby";
import "../components/main.scss";
import { Card, Navbar, TextCard, QuoteBox, Footer } from '../components';
import '../components/main.scss'

export default function About() {

  const data = useStaticQuery(
    graphql`
      query {
        allContentfulTeamMember {
          edges {
            node {
              blurb {
                blurb
              }
              name
              title
              image {
                file {
                  url
                }
              }
            }
          }
        }
      }
    `
  )

    return (
        <div className="about">
            <Navbar />
            <div className="belowNav">
            <h1 className="heading">about</h1>
            <TextCard
                alignment="left"
                heading="who we are"
                text="The Purple Hydrangea Project is a national student-run 501(c)3 nonprofit organization dedicated to promoting access to youth mental health support and education. "

            />
            <TextCard
                alignment="right"
                heading="what we do"
                text="
                Our staff team and high school chapters across the country work to achieve this mission by engaging in various community education projects. From creating online mental health education courses for students and parents, to working with school districts to improve th mental health culture at schools, to curating research infographics on less known mental health topics, we aim to  promote destigmatize conversations surrounding mental health."

            />
            </div>
            
            <div className="section row">
                <iframe width="896vw" height="504vw" src="https://www.youtube.com/embed/O_l14OpnyVU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
            <div className="section row">
                <QuoteBox text="I think that the strength that one gains from trauma and struggle doesn't come from the experience alone; the strength is gained by using the pain one went through and transforming it into healing. I knew that it was a shot in the dark to take on such a huge project about something that is still so controversial, but who has ever made a difference in the world that played it safe?" credit="Madeleine Salem, the PHP President and Founder" />
            </div>
            <div className="section">
                <h2 className="subheading">meet the team</h2>
                <div className="row members">
                    {data.allContentfulTeamMember.edges.map(edge => {
                        return (
                            <Card img={edge.node.image.file.url} title={edge.node.name} text={edge.node.blurb.blurb} />
                        )
                    })}
                </div>
            </div>
            <Footer />
        </div>
    );
}