From 7b51a1ee3e841a87ac3cf484ef9c39db6cec60d3 Mon Sep 17 00:00:00 2001 From: Yun Kai Peng Date: Fri, 27 Nov 2020 11:05:32 -0500 Subject: [PATCH 1/2] Update: FAQ page --- src/assets/images/designs/robot.svg | 72 ++++++++++++++++ src/components/FAQ/Container.jsx | 20 ++++- src/components/FAQ/FAQ.jsx | 116 +++++++++++++++----------- src/components/FAQ/QuestionBox.jsx | 55 ++++++++++++ src/components/FAQ/QuestionColumn.jsx | 11 +++ src/components/Logos/Container.jsx | 1 + 6 files changed, 225 insertions(+), 50 deletions(-) create mode 100644 src/assets/images/designs/robot.svg create mode 100644 src/components/FAQ/QuestionBox.jsx create mode 100644 src/components/FAQ/QuestionColumn.jsx diff --git a/src/assets/images/designs/robot.svg b/src/assets/images/designs/robot.svg new file mode 100644 index 0000000..cb464dc --- /dev/null +++ b/src/assets/images/designs/robot.svg @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/FAQ/Container.jsx b/src/components/FAQ/Container.jsx index a637c2d..2dc59c4 100644 --- a/src/components/FAQ/Container.jsx +++ b/src/components/FAQ/Container.jsx @@ -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; diff --git a/src/components/FAQ/FAQ.jsx b/src/components/FAQ/FAQ.jsx index 7202f7c..43635ed 100644 --- a/src/components/FAQ/FAQ.jsx +++ b/src/components/FAQ/FAQ.jsx @@ -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 }) => (

Frequently Asked Questions

+ +
+ + + A hackathon is a social coding event where programmers, designers, + and developers collaborate to solve a problem. + - - A hackathon is a social coding event where programmers, designers, and developers collaborate to solve a problem. - - - - 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. - - - - 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. - - - - Students from all backgrounds and skill levels are welcome at McHacks. - - - - 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. - - - - 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. - - - - Teams can be up to four people. - - - - Nothing! Thanks to our amazing sponsors, McHacks is completely free for all - our hackers. - - - - Yes! Prizes will be announced closer to McHacks. - - - - We have answers! Feel free to send us a DM on Facebook, Instagram, or Twitter, - or email us at contact@mchacks.ca if you have any questions or concerns. - + + 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. + + + + 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. + + + + Students from all backgrounds and skill levels are welcome at + McHacks. + + + + + 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. + + + + 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. + + + + Teams can be up to four people. + + + + Nothing! Thanks to our amazing sponsors, McHacks is completely free + for all our hackers. + + + + Yes! Prizes will be announced closer to McHacks. + + + + We have answers! Feel free to send us a DM on Facebook, Instagram, + or Twitter, or email us at{" "} + contact@mchacks.ca if you + have any questions or concerns. + + +
+ + robotImage ) diff --git a/src/components/FAQ/QuestionBox.jsx b/src/components/FAQ/QuestionBox.jsx new file mode 100644 index 0000000..66043ca --- /dev/null +++ b/src/components/FAQ/QuestionBox.jsx @@ -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 diff --git a/src/components/FAQ/QuestionColumn.jsx b/src/components/FAQ/QuestionColumn.jsx new file mode 100644 index 0000000..b9274fe --- /dev/null +++ b/src/components/FAQ/QuestionColumn.jsx @@ -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 diff --git a/src/components/Logos/Container.jsx b/src/components/Logos/Container.jsx index acbd8f3..fc585a1 100644 --- a/src/components/Logos/Container.jsx +++ b/src/components/Logos/Container.jsx @@ -1,6 +1,7 @@ import styled from "styled-components" export const Container = styled.section` + margin-top 240px; margin-bottom: 12rem; ` From 2b3e4fe080656327ce005128882865341e708b14 Mon Sep 17 00:00:00 2001 From: Yun Kai Peng Date: Fri, 27 Nov 2020 11:08:53 -0500 Subject: [PATCH 2/2] fix: yarn format --- src/components/About/About.jsx | 17 ++-- src/components/About/Image.jsx | 2 - src/components/Hero/Buildings.jsx | 2 +- src/components/Hero/FloatingStyles.jsx | 12 +-- src/components/Hero/Hero.jsx | 13 +++- src/components/Hero/HeroStyles.jsx | 6 +- src/components/Nav/Container.jsx | 1 - src/components/Nav/Nav.jsx | 6 +- .../SocialMedia/ScoialMediaBarContainer.jsx | 34 ++++---- src/components/SocialMedia/SocialMediaBar.jsx | 78 +++++++++++-------- src/components/Sponsor/Image.jsx | 6 +- src/components/Sponsor/Sponsor.jsx | 14 ++-- 12 files changed, 105 insertions(+), 86 deletions(-) diff --git a/src/components/About/About.jsx b/src/components/About/About.jsx index 742a39a..7cb55ca 100644 --- a/src/components/About/About.jsx +++ b/src/components/About/About.jsx @@ -14,16 +14,17 @@ const About = ({ scrollRef }) => (

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.

- 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!

diff --git a/src/components/About/Image.jsx b/src/components/About/Image.jsx index aa67e69..e609c54 100644 --- a/src/components/About/Image.jsx +++ b/src/components/About/Image.jsx @@ -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; diff --git a/src/components/Hero/Buildings.jsx b/src/components/Hero/Buildings.jsx index 972c9de..6a59be4 100644 --- a/src/components/Hero/Buildings.jsx +++ b/src/components/Hero/Buildings.jsx @@ -1,7 +1,7 @@ import styled from "styled-components" export const Buildings = styled.img` - margin: 0; + margin: 0; height: auto; width: 100%; ` diff --git a/src/components/Hero/FloatingStyles.jsx b/src/components/Hero/FloatingStyles.jsx index 98cc0c1..4393b50 100644 --- a/src/components/Hero/FloatingStyles.jsx +++ b/src/components/Hero/FloatingStyles.jsx @@ -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; -} -` \ No newline at end of file + @media only screen and (max-width: 1077px) { + display: none; + } +` diff --git a/src/components/Hero/Hero.jsx b/src/components/Hero/Hero.jsx index e54513f..bbc1ccc 100644 --- a/src/components/Hero/Hero.jsx +++ b/src/components/Hero/Hero.jsx @@ -24,13 +24,16 @@ const Hero = () => (

Hack from home at

-

McHacks

+

+ McHacks +

McGill University · Jan 29-31, 2021

{/* @@ -39,7 +42,11 @@ const Hero = () => ( - Background + Background ) diff --git a/src/components/Hero/HeroStyles.jsx b/src/components/Hero/HeroStyles.jsx index 198213a..f484680 100644 --- a/src/components/Hero/HeroStyles.jsx +++ b/src/components/Hero/HeroStyles.jsx @@ -37,7 +37,7 @@ export const HeroStyles = styled.section` color: ${styleVars.hackBlack60}; margin-top: 1rem; margin-bottom: 0; - font-family: 'Brown', san-serif; + font-family: "Brown", san-serif; } .hero__cta { @@ -53,7 +53,7 @@ export const HeroStyles = styled.section` margin-top: 4.8rem; display: block; color: ${styleVars.hackBlack60}; - font-family: 'Brown', san-serif; + font-family: "Brown", san-serif; font-size: 1.4rem; } @@ -74,7 +74,7 @@ export const HeroStyles = styled.section` .hero__cta { font-size: 1.4rem; } - + .hero__illustrations { width: 880px; top: 50px; diff --git a/src/components/Nav/Container.jsx b/src/components/Nav/Container.jsx index 1b85e1f..705d76e 100644 --- a/src/components/Nav/Container.jsx +++ b/src/components/Nav/Container.jsx @@ -1,6 +1,5 @@ import styled from "styled-components" - export const Container = styled.nav` z-index: 2; height: 9rem; diff --git a/src/components/Nav/Nav.jsx b/src/components/Nav/Nav.jsx index 5c2dae6..2cb6c4a 100644 --- a/src/components/Nav/Nav.jsx +++ b/src/components/Nav/Nav.jsx @@ -25,8 +25,8 @@ const Nav = ({ useEffect(() => { handleScroll() - document.addEventListener('scroll', handleScroll) - return () => document.removeEventListener('scroll', handleScroll) + document.addEventListener("scroll", handleScroll) + return () => document.removeEventListener("scroll", handleScroll) }, []) const NavItems = () => ( @@ -37,7 +37,7 @@ const Nav = ({ ) return ( - +
diff --git a/src/components/SocialMedia/ScoialMediaBarContainer.jsx b/src/components/SocialMedia/ScoialMediaBarContainer.jsx index 298d536..280f371 100644 --- a/src/components/SocialMedia/ScoialMediaBarContainer.jsx +++ b/src/components/SocialMedia/ScoialMediaBarContainer.jsx @@ -3,25 +3,27 @@ import styled from "styled-components" export const Container = styled.div` display: flex; - .SocialMediaBar__icon { - margin-left: 14px; - transition: filter 0.2s ease-in; - filter: invert(7%) sepia(4%) saturate(14%) hue-rotate(314deg) brightness(89%) contrast(86%); + .SocialMediaBar__icon { + margin-left: 14px; + transition: filter 0.2s ease-in; + filter: invert(7%) sepia(4%) saturate(14%) hue-rotate(314deg) + brightness(89%) contrast(86%); - &:hover { - filter: invert(41%) sepia(9%) saturate(3131%) hue-rotate(197deg) brightness(92%) contrast(84%); - } + &:hover { + filter: invert(41%) sepia(9%) saturate(3131%) hue-rotate(197deg) + brightness(92%) contrast(84%); + } - > a { - display: flex; - padding: 5px; - } + > a { + display: flex; + padding: 5px; + } - img { - height: 20px; - width: auto; - } + img { + height: 20px; + width: auto; } + } ` -export default Container \ No newline at end of file +export default Container diff --git a/src/components/SocialMedia/SocialMediaBar.jsx b/src/components/SocialMedia/SocialMediaBar.jsx index 7dcaaa9..ec93cb9 100644 --- a/src/components/SocialMedia/SocialMediaBar.jsx +++ b/src/components/SocialMedia/SocialMediaBar.jsx @@ -1,41 +1,53 @@ -import React from 'react'; -import Container from './ScoialMediaBarContainer'; +import React from "react" +import Container from "./ScoialMediaBarContainer" -import Facebook from '../../assets/images/logos/fb-logo.svg'; -import Instagram from '../../assets/images/logos/ig-logo.svg'; -import Twitter from '../../assets/images/logos/twitter-logo.svg'; -import GitHub from '../../assets/images/logos/github-logo.svg'; +import Facebook from "../../assets/images/logos/fb-logo.svg" +import Instagram from "../../assets/images/logos/ig-logo.svg" +import Twitter from "../../assets/images/logos/twitter-logo.svg" +import GitHub from "../../assets/images/logos/github-logo.svg" const SocialMediaBar = () => ( - -
- - Facebook - -
+ +
+ + Facebook + +
-
- - Instagram - -
+
+ + Instagram + +
-
- - twitter - -
+
+ + twitter + +
-
- - GitHub - -
- +
+ + GitHub + +
+ ) -export default SocialMediaBar \ No newline at end of file +export default SocialMediaBar diff --git a/src/components/Sponsor/Image.jsx b/src/components/Sponsor/Image.jsx index b829b29..72716a0 100644 --- a/src/components/Sponsor/Image.jsx +++ b/src/components/Sponsor/Image.jsx @@ -7,13 +7,13 @@ export const Image = styled.img` left: -120px; width: 558px; height: auto; - + @media only screen and (max-width: 1345px) { width: 418px; } - @media only screen and (max-width: 1118px) {\ - display: none; + @media only screen and (max-width: 1118px) { + \display: none; } ` diff --git a/src/components/Sponsor/Sponsor.jsx b/src/components/Sponsor/Sponsor.jsx index 86e6a31..8fcb521 100644 --- a/src/components/Sponsor/Sponsor.jsx +++ b/src/components/Sponsor/Sponsor.jsx @@ -19,15 +19,15 @@ const Sponsor = ({ scrollRef }) => (

Interested in sponsoring McHacks?

- This winter, the best and brightest students from around the - world will connect remotely for 36 hours to shake the world - of technology. We want you to be a part of this incredible - experience, and we need your help to bring it to life! + This winter, the best and brightest students from around the world + will connect remotely for 36 hours to shake the world of technology. + We want you to be a part of this incredible experience, and we need + your help to bring it to life!

- Spend a weekend with McHacks and witness tomorrow’s leaders - using your technologies to solve real problems from the ground - up. We've got a virtual table with your name on it! + Spend a weekend with McHacks and witness tomorrow’s leaders using your + technologies to solve real problems from the ground up. We've got a + virtual table with your name on it!