Add FAQ page

apps/dotcom/src/app/App.tsx

@@ -10,6 +10,7 @@ import ApplyDeveloper from './pages/apply/developer/ApplyDeveloper';
 import ApplyProductDesigner from './pages/apply/product-designer/ApplyProductDesigner';
 import ApplyProductManager from './pages/apply/product-manager/ApplyProductManager';
 import Events from './pages/events/Events';
+import FAQ from './pages/faq/FAQ';
 import Home from './pages/home/Home';
 import NotFound from './pages/notfound/NotFound';
 import People from './pages/people/People';
@@ -43,6 +44,7 @@ const App: React.FC = () => {
           <Route path="/apply/brand-designer" Component={ApplyBrandDesigner} />
           <Route path="/projects" Component={Projects} />
           <Route path="/people" Component={People} />
+          {/* <Route path="/faq" Component={FAQ} /> */}
           <Route path="*" Component={NotFound} />
         </Routes>
         <Footer />

apps/dotcom/src/app/pages/faq/Accordion.tsx

@@ -0,0 +1,66 @@
+// Mostly copied from src/app/components/Accordion.tsx
+
+import React, { useState } from 'react';
+import {
+  Accordion as MuiAccordion,
+  AccordionDetails,
+  AccordionSummary,
+  Typography,
+  Fade,
+} from '@material-ui/core';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { makeStyles } from '@material-ui/core/styles';
+
+interface AccordionProps {
+  sections: any[];
+}
+
+const useStyles = makeStyles({
+  title: {
+    fontWeight: 500,
+  },
+});
+
+const Accordion: React.FC<AccordionProps> = (props: any) => {
+  const classes = useStyles();
+  const [showHiddenQuestions, setShowHiddenQuestions] = useState(false);
+
+  return (
+    <>
+      {props.sections.map((section: any, index: any) => (
+        <Fade in timeout={1000 + 200 * index}>
+          <MuiAccordion>
+            <AccordionSummary
+              expandIcon={<ExpandMoreIcon />}
+              onClick={() => {
+                console.log('onClick called');
+                setShowHiddenQuestions(true);
+              }}
+              id="panel1a-header"
+            >
+              <Typography
+                variant="body1"
+                className={classes.title}
+                color="primary"
+              >
+                {section.title}
+              </Typography>
+            </AccordionSummary>
+            <AccordionDetails>
+              <Typography variant="body2">{section.body}</Typography>
+            </AccordionDetails>
+          </MuiAccordion>
+        </Fade>
+      ))}
+      {showHiddenQuestions && (
+        <React.Fragment>
+          {props.hiddenQuestions.map((question: string) => (
+            <>{question}</>
+          ))}
+        </React.Fragment>
+      )}
+    </>
+  );
+};
+
+export default Accordion;

apps/dotcom/src/app/pages/faq/FAQ.tsx

@@ -0,0 +1,72 @@
+import React, {
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+} from 'react';
+import { Helmet } from 'react-helmet';
+import { Container, Box, Link } from '@material-ui/core';
+import Hero from '../../components/Hero';
+import { ReactComponent as SVG } from './faq.svg';
+import { Link as RouterLink } from 'react-router-dom';
+import Accordion from './Accordion';
+
+export default function FAQ() {
+  // this is the list of FAQs
+  const frequently_asked_questions = [
+    {
+      title: 'What does C4C stand for?',
+      body: 'C4C stands for Code4Community!',
+    },
+    {
+      title: 'How does the application process work?',
+      // TODO figure out how to link to the apply page from here
+      body: "Visit the apply page and submit your application. We'll reach out to schedule an interview with 1-2 members of our team.",
+    },
+    {
+      title: 'Who do we work with?',
+      body: 'We work with nonprofits in the Greater Boston area that strive to improve the community we live in. We look for organizations that have a need for a software solution, but lack the resources to pursue typical development channels.',
+    },
+    {
+      title: 'How often does C4C meet?',
+      body: 'Product team members meet once a week.',
+    },
+    {
+      title: 'What is the product team structure?',
+      body: 'Teams are structured around a single project that everyone works on together. Each team is made up of: a project lead, 1-2 designers, and several software developers.',
+    },
+    {
+      title:
+        'How many people are in C4C? How many people are on a product team?',
+      body: 'Depending on how many partners and projects we are taking on in a semester, our organization size may vary. However, our product teams are usually around 8 members each.',
+    },
+    {
+      title: 'What have you worked on in the past?',
+      body: (
+        <>
+          Check out our past projects on our{' '}
+          <Link href="https://github.com/Code-4-Community">Github</Link>!
+        </>
+      ),
+    },
+  ];
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
+  return (
+    <Container maxWidth="lg">
+      <Hero
+        title="FAQs"
+        subtitle="Everything you need to know about our product teams."
+        SvgNode={SVG}
+      />
+      <Container maxWidth="xs">
+        <Box py="5vh">
+          <Accordion sections={frequently_asked_questions} />
+        </Box>
+      </Container>
+    </Container>
+  );
+}