diff --git a/gatsby-browser.js b/gatsby-browser.js new file mode 100644 index 0000000..608d97e --- /dev/null +++ b/gatsby-browser.js @@ -0,0 +1 @@ +import './src/css/global.css'; \ No newline at end of file diff --git a/src/components/sections/faq/FAQ.jsx b/src/components/sections/faq/FAQ.jsx new file mode 100644 index 0000000..2fbce0e --- /dev/null +++ b/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 team@slohacks.com or contact us on Facebook." +}; + +export const FAQSection = () => ( + +
+ FAQ + + {Object.entries(faq).map(([question, answer]) => ( + + ))} + +
+ +); + +const FAQItem = (({question, answer}) => ( + +
+ {question} +
{answer}
+
+ +)); + +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; + } +`; \ No newline at end of file diff --git a/src/components/sections/schedule/Schedule.jsx b/src/components/sections/schedule/Schedule.jsx new file mode 100644 index 0000000..a8d3db9 --- /dev/null +++ b/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 = () => ( + + Schedule + + {Object.entries(schedule).map(([day, events]) => ( + + ))} + + +); + +const ScheduleDay = ({day, events}) => ( +
+ {day} + {events.map(Event)} +
+); + +const Event = (({event, location, time}) => ( + +
+ {event} + {time} +
+
+ {location} +
+ +)); + +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` + +`; diff --git a/src/components/styled/headings.jsx b/src/components/styled/headings.jsx new file mode 100644 index 0000000..42ef36a --- /dev/null +++ b/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; +`; diff --git a/src/css/global.css b/src/css/global.css new file mode 100644 index 0000000..ffa5a62 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/pages/index.jsx b/src/pages/index.jsx index abb28a0..c60fbfb 100644 --- a/src/pages/index.jsx +++ b/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 = () => ( -

Hello World

+ + ); const WrapperContainer = styled.div` - color: red; + `; export default IndexPage;