Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update: FAQ page #9

Open
wants to merge 3 commits into
base: dev
Choose a base branch
from
Open

Update: FAQ page #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7b51a1e
Update: FAQ page
pengyk Nov 27, 2020
2b3e4fe
fix: yarn format
pengyk Nov 27, 2020
d5f92ba
Merge branch 'dev' into enhancement/2-FAQ_update
pengyk Nov 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 72 additions & 0 deletions src/assets/images/designs/robot.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 9 additions & 8 deletions src/components/About/About.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,17 @@ const About = ({ scrollRef }) => (
<p>
Each year McHacks is proud to welcome a diverse group of students from
across North America to Montreal for a jam-packed weekend of hacking.
This year, McHacks is going global! For 36 hours, the best and brightest
students from around the world will connect remotely and build their dreams.
This year, McHacks is going global! For 36 hours, the best and
brightest students from around the world will connect remotely and
build their dreams.
</p>
<p>
Whether you're writing your first line of code, playing around with APIs,
or building the next blockchain, McHacks is the place for you. We offer
workshops, mentorship, and APIs to get you started, and we’re working
hard to make sure everything you need for your next big hack is accessible
from home. We hope you’ll join us remotely this winter for an exciting
eighth edition of Canada’s favorite hackathon!
Whether you're writing your first line of code, playing around with
APIs, or building the next blockchain, McHacks is the place for you.
We offer workshops, mentorship, and APIs to get you started, and we’re
working hard to make sure everything you need for your next big hack
is accessible from home. We hope you’ll join us remotely this winter
for an exciting eighth edition of Canada’s favorite hackathon!
</p>
</Text>
<Image src={AboutImg} />
Expand Down
2 changes: 0 additions & 2 deletions src/components/About/Image.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,11 @@ export const Image = styled.img`
top: 30px;
width: 671px;
height: auto;


@media only screen and (max-width: 1345px) {
width: 471px;
}


@media only screen and (max-width: 1118px) {
max-width: 80%;
margin: 0 auto;
Expand Down
20 changes: 19 additions & 1 deletion src/components/FAQ/Container.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,29 @@ import styled from "styled-components"
import * as styleVars from "../variable"

export const Container = styled.div`
max-width: 720px;
max-width: 1440px;
text-align: center;
margin: auto;
margin-bottom: 100px;
margin-top: 100px;
height: 100%;
.robot {
height: 234px;
width: 181px;
position: absolute;
left: 50%;
margin-left: 23%;

@media only screen and (min-width: ${styleVars.lgUp}) {
margin-left: 460px;
}

@media only screen and (max-width: ${styleVars.smUp}) {
left: auto;
margin-left: 0;
right: 20px;
}
}

&.hidden {
display: none !important;
Expand Down
116 changes: 67 additions & 49 deletions src/components/FAQ/FAQ.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,60 +2,78 @@ import React from "react"

import Container from "./Container"
import Question from "./Question"
import QuestionColumn from "./QuestionColumn"
import QuestionBox from "./QuestionBox"
import RobotImg from "../../assets/images/designs/robot.svg"

const FAQ = ({ scrollRef }) => (
<Container ref={scrollRef}>
<h2>Frequently Asked Questions</h2>
<QuestionBox>
<div className="box bubble">
<QuestionColumn>
<Question question="What is a hackathon?">
A hackathon is a social coding event where programmers, designers,
and developers collaborate to solve a problem.
</Question>

<Question question="What is a hackathon?">
A hackathon is a social coding event where programmers, designers, and developers collaborate to solve a problem.
</Question>

<Question question="When is McHacks?">
This year, we'll be extending McHacks from 24 to 36 hours! It will start on Friday at 1pm
and end on Sunday at 1pm Eastern time on the weekend of January 29-31.
</Question>

<Question question="How can I participate in McHacks?">
This year McHacks is taking place virtually and we’ll be using platforms
like Discord and Zoom to connect hackers around the world. We’ll provide more
details on how to participate as we get closer to McHacks, but right now all you need to do is apply.
</Question>

<Question question="Who can participate? ">
Students from all backgrounds and skill levels are welcome at McHacks.
</Question>

<Question question="What skills do I need to participate?">
We welcome students with a variety of skill sets! While experience coding
and programming is a plus, we offer beginner friendly workshops and mentorship
to get you started. Teams will also need people with strong presentation skills and brilliant ideas.
</Question>

<Question question="Do I need a team?">
While you can work alone, McHacks is a social event and working with
others is encouraged. If you don’t have one already, there are a few ways
to find a team: Ask your friends and invite them to McHacks, ask around in the
McHacks Discord server, or form a team at our team formation session at the beginning of McHacks.
</Question>

<Question question="How big can my team be?">
Teams can be up to four people.
</Question>

<Question question="How much does it cost?">
Nothing! Thanks to our amazing sponsors, McHacks is completely free for all
our hackers.
</Question>

<Question question="Will there be prizes?">
Yes! Prizes will be announced closer to McHacks.
</Question>

<Question question="I have more questions!">
We have answers! Feel free to send us a DM on Facebook, Instagram, or Twitter,
or email us at <a href="mailto:[email protected]">[email protected]</a> if you have any questions or concerns.
</Question>
<Question question="When is McHacks?">
This year, we'll be extending McHacks from 24 to 36 hours! It will
start on Friday at 1pm and end on Sunday at 1pm Eastern time on the
weekend of January 29-31.
</Question>

<Question question="How can I participate in McHacks?">
This year McHacks is taking place virtually and we’ll be using
platforms like Discord and Zoom to connect hackers around the world.
We’ll provide more details on how to participate as we get closer to
McHacks, but right now all you need to do is apply.
</Question>

<Question question="Who can participate? ">
Students from all backgrounds and skill levels are welcome at
McHacks.
</Question>
</QuestionColumn>
<QuestionColumn>
<Question question="What skills do I need to participate?">
We welcome students with a variety of skill sets! While experience
coding and programming is a plus, we offer beginner friendly
workshops and mentorship to get you started. Teams will also need
people with strong presentation skills and brilliant ideas.
</Question>

<Question question="Do I need a team?">
While you can work alone, McHacks is a social event and working with
others is encouraged. If you don’t have one already, there are a few
ways to find a team: Ask your friends and invite them to McHacks,
ask around in the McHacks Discord server, or form a team at our team
formation session at the beginning of McHacks.
</Question>

<Question question="How big can my team be?">
Teams can be up to four people.
</Question>

<Question question="How much does it cost?">
Nothing! Thanks to our amazing sponsors, McHacks is completely free
for all our hackers.
</Question>

<Question question="Will there be prizes?">
Yes! Prizes will be announced closer to McHacks.
</Question>

<Question question="I have more questions!">
We have answers! Feel free to send us a DM on Facebook, Instagram,
or Twitter, or email us at{" "}
<a href="mailto:[email protected]">[email protected]</a> if you
have any questions or concerns.
</Question>
</QuestionColumn>
</div>
</QuestionBox>
<img src={RobotImg} alt="robotImage" className="robot" />
</Container>
)

Expand Down
55 changes: 55 additions & 0 deletions src/components/FAQ/QuestionBox.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import styled from "styled-components"
import * as styleVars from "../variable"

export const QuestionBox = styled.div`
.box {
flex-direction: row;
display: flex;
@media only screen and (max-width: ${styleVars.smUp}) {
flex-direction: column;
}
margin: auto;
width: 90%;
border: 4px solid ${styleVars.hackBlack10};
border-radius: 75px;
padding: 20px;
text-align: center;
color: ${styleVars.hackBlack10};
position: relative;
}

.bubble:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 10px solid transparent;
border-right: 10px solid ${styleVars.hackBlack10};
border-top: 10px solid ${styleVars.hackBlack10};
border-bottom: 10px solid transparent;
right: 60px;
bottom: -23px;
}

.bubble:after {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 10px solid transparent;
border-right: 10px solid #fff;
border-top: 10px solid #fff;
border-bottom: 10px solid transparent;
right: 64px;
bottom: -13px;
}

flex-direction: row;
display: flex;
@media only screen and (max-width: ${styleVars.smUp}) {
flex-direction: column;
right-margin: 40px;
}
`

export default QuestionBox
11 changes: 11 additions & 0 deletions src/components/FAQ/QuestionColumn.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import styled from "styled-components"
import * as styleVars from "../variable"

export const QuestionColumn = styled.div`
width: 50%;
@media only screen and (max-width: ${styleVars.smUp}) {
width: 100%;
}
`

export default QuestionColumn
2 changes: 1 addition & 1 deletion src/components/Hero/Buildings.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import styled from "styled-components"

export const Buildings = styled.img`
margin: 0;
margin: 0;
height: auto;
width: 100%;
`
Expand Down
12 changes: 6 additions & 6 deletions src/components/Hero/FloatingStyles.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import styled from "styled-components"

export const ArrowStyles = styled.img`
position: relative;
left: 20px;
position: relative;
left: 20px;

@media only screen and (max-width: 1077px) {
display: none;
}
`
@media only screen and (max-width: 1077px) {
display: none;
}
`
10 changes: 8 additions & 2 deletions src/components/Hero/Hero.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,9 @@ const Hero = () => (
<HeroStyles>
<h2 class="hero__topsubheading">Hack from home at</h2>
<div class="hero-header">
<h1 class="hero__heading" style={{ display: 'inline' }}>McHacks</h1>
<h1 class="hero__heading" style={{ display: "inline" }}>
McHacks
</h1>
<ArrowStyles src={ArrowImg} />
<ArrowStyles src={ArrowImg} style={{ left: 25 }} />
</div>
Expand All @@ -39,7 +41,11 @@ const Hero = () => (
<Buildings src={BuildingImg} />
</div>
</HeroStyles>
<img src={RoadImg} style={{width: '100%', marginBottom: '-9px'}} alt="Background" />
<img
src={RoadImg}
style={{ width: "100%", marginBottom: "-9px" }}
alt="Background"
/>
</>
)

Expand Down
Loading