feature: Schedule and FAQ sections

gatsby-browser.js

@@ -0,0 +1 @@
+import './src/css/global.css';

src/components/sections/faq/FAQ.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Heading2, Heading3 } from '../../styled/headings';
+
+const faq = {
+  "What is a hackathon?": "A hackathon is an event where students with common interests from all over the nation come together and collaborate on a project over a 36-hour period.",
+  "Who can come?": "All college students (both graduate and undergraduate) are welcome! No prior experience is necessary.",
+  "What can I build?": "If you can think it, you can build it. We encourage students to build technological projects, whether they be software or hardware.",
+  "What if I don't have a team or idea?": "Not a problem. There will be time at the beginning of the hackathon to find other students who don't have a team yet!",
+  "What should I bring?": "Bring your ID, computer, and sleeping bag (optional). All the necessary equipment for hardware projects will be provided. We'll also have a hardware lab with a variety of devices and parts.",
+  "How much does it cost?": "Food and admission are absolutely FREE! Buses will be provided for students traveling within California.",
+  "Is there a code of conduct?": "Please refer to the MLH code of conduct.",
+  "How will I get there?": "We will be providing buses for Californian hackers, and case-by-case flight reimbursements for out-of-state hackers. Check your email upon acceptance for more details!",
+  "Still have questions?": "Feel free to shoot us an email at [email protected] or contact us on Facebook."
+};
+
+export const FAQSection = () => (
+  <FAQSectionWrapper>
+    <div>
+      <Heading2>FAQ</Heading2>
+      <FAQItems>
+        {Object.entries(faq).map(([question, answer]) => (
+          <FAQItem question={question} answer={answer} />
+        ))}
+      </FAQItems>
+    </div>
+  </FAQSectionWrapper>
+);
+
+const FAQItem = (({question, answer}) => (
+  <FAQItemStyle>
+    <details>
+      <summary>{question}</summary>
+      <div>{answer}</div>
+    </details>
+  </FAQItemStyle>
+));
+
+const FAQSectionWrapper = styled.section`
+  display: flex;
+  justify-content: flex-end;
+
+  & > div {
+    flex: 0 30rem;
+  }
+`;
+
+const FAQItems = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const FAQItemStyle = styled.div`
+  border-top: 2px solid;
+
+  & summary {
+    padding: 1rem;
+  }
+  & summary + div {
+    padding: 0 1rem 1rem 1rem;
+  }
+`;

src/components/sections/schedule/Schedule.jsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Heading2, Heading3 } from '../../styled/headings';
+
+const schedule = {
+  "Friday 1/10": [{
+    event: "Attendee Check-in",
+    location: "MAC Lobby",
+    time: "4:00pm"
+  }, {
+    event: "Dinner",
+    location: "MAC",
+    time: "5:30pm"
+  }, {
+    event: "Opening Ceremony",
+    location: "Spanos Theater",
+    time: "6:00pm"
+  }, {
+    event: "Hacking Begins",
+    location: "MAC",
+    time: "7:30pm"
+  }, {
+    event: "Workshop 1",
+    location: "Phillips Hall",
+    time: "8:30pm"
+  }, {
+    event: "Workshop 2",
+    location: "Phillips Hall",
+    time: "9:30pm"
+  }, {
+    event: "Workshop 3",
+    location: "Phillips Hall",
+    time: "10:30pm"
+  }, {
+    event: "Late Night Snack",
+    location: "MAC",
+    time: "12:00am"
+  }],
+  "Saturday 1/11": [{
+    event: "Breakfast",
+    location: "MAC",
+    time: "8:00am"
+  }],
+  "Sunday 1/12": [{
+    event: "Breakfast",
+    location: "MAC",
+    time: "8:00am"
+  }]
+}
+
+export const ScheduleSection = () => (
+  <ScheduleSectionStyle>
+    <Heading2>Schedule</Heading2>
+    <Schedule>
+      {Object.entries(schedule).map(([day, events]) => (
+        <ScheduleDay day={day} events={events} />
+      ))}
+    </Schedule>
+  </ScheduleSectionStyle>
+);
+
+const ScheduleDay = ({day, events}) => (
+  <div>
+    <Heading3>{day}</Heading3>
+    {events.map(Event)}
+  </div>
+);
+
+const Event = (({event, location, time}) => (
+  <EventStyleWrapper>
+    <div>
+      <EventName>{event}</EventName>
+      <EventTime>{time}</EventTime>
+    </div>
+    <div>
+      <EventLocation>{location}</EventLocation>
+    </div>
+  </EventStyleWrapper>
+));
+
+const ScheduleSectionStyle = styled.section`
+
+`;
+
+const Schedule = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+  grid-gap: 2rem;
+`;
+
+/*const Schedule = styled.div`
+  display: flex;
+  margin: -1rem;
+  flex-wrap: wrap;
+
+  & > * {
+    padding: 1rem;
+    flex: 1 10rem;
+
+    display: flex;
+    flex-direction: column;
+  }
+`;*/
+
+const EventStyleWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  > * {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  > * + * {
+    margin-bottom: 0.5rem;
+  }
+`;
+
+const EventName = styled.span`
+  font-weight: 700;
+`;
+
+const EventTime = styled.span`
+  font-weight: 700;
+  opacity: 0.5;
+`;
+
+const EventLocation = styled.span`
+
+`;

src/components/styled/headings.jsx

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+export const Heading2 = styled.h2`
+  font-size: 2em;
+  font-weight: 900;
+  margin-bottom: 1.5rem;
+`;
+
+export const Heading3 = styled.h3`
+  font-size: 1.43em;
+  font-weight: 900;
+  margin-bottom: 1rem;
+`;

src/css/global.css

@@ -0,0 +1,9 @@
+@import 'https://fonts.googleapis.com/css?family=Proxima+Nova:300,400,500,600,900';
+
+* {
+  margin: 0;
+}
+:root {
+  font-family: "Proxima Nova", sans-serif;
+  color: #2A34B1;
+}

src/pages/index.jsx

@@ -1,14 +1,18 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import { ScheduleSection } from '../components/sections/schedule/Schedule';
+import { FAQSection } from '../components/sections/faq/FAQ';
+
 const IndexPage = () => (
   <WrapperContainer>
-    <h1>Hello World</h1>
+    <ScheduleSection />
+    <FAQSection />
   </WrapperContainer>
 );
 
 const WrapperContainer = styled.div`
-  color: red;
+
 `;
 
 export default IndexPage;