Skip to content

Commit 5af971b

Browse files
sathviknallamallisathviknallamalli
committed
faq page
1 parent d381aeb commit 5af971b

5 files changed

Lines changed: 138 additions & 69 deletions

File tree

‎src/js/content.json‎

Lines changed: 23 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"ended_cutoff": "2022-02-21T08:00:00.000Z",
33
"live_cutoff": "2022-02-08T08:00:00.000Z",
4-
"home": [
4+
"home": [
55
"you love to learn",
66
"you want to dance with the Stanford band",
77
"you hack on hardware",
@@ -13,19 +13,13 @@
1313
],
1414
"deadlines": [
1515
{
16-
"title": "Non-Stanford Students",
17-
"date": "2021-12-26T23:59:59-08:00",
18-
"sub": "left to apply"
19-
},
20-
{
21-
"title": "Stanford Students",
22-
"date": "2022-01-30T23:59:59-08:00",
23-
"sub": "left to register*"
16+
"title": "Hacker Applications Open",
17+
"date": "2022-11-15T12:00:01+0000",
18+
"sub": "until Hacker applications open"
2419
}
2520
],
2621
"challenges_intro": "TreeHacks 2022 will be the 8th-ever iteration of TreeHacks. Our theme is hacking for the future: addressing deeply impactful problems and building creative, unique solutions. We’ve identified five global and technological challenges that we think have tons of potential for innovation. Across each of these challenges, we’ve scaffolded resources like potential project ideas, data sets, APIs and toolkits, and more to help get you get started. There isn't a strict guideline for what you should work on, but here are some of our focus areas:",
2722
"challenges": [
28-
2923
{
3024
"name": "privacy, security, & safety",
3125
"logo": "images/challenges/security.png",
@@ -45,71 +39,70 @@
4539
"name": "web 3.0",
4640
"logo": "images/challenges/web3.png",
4741
"description": "We are in the midst of an exciting transition to a more open and fair way of participating in activities on the internet. The Web 3.0 challenge asks hackers to think about how decentralization fits into their thesis of the future and how we can leverage technology to move towards systems in which we don’t concentrate power in the hands of a few."
48-
},
49-
{
50-
"name": "accessibility",
51-
"logo": "images/challenges/community.png",
52-
"description": "Technology is growing at an exponential rate, but is it empowering every person in the same capacity? The accessibility challenge encourages hackers to develop new ways to enable all people, regardless of background or ability, to fully interact with modern technologies. This helps ensure that technology is lifting society as a whole rather than widening existing disparities."
5342
}
54-
5543
],
5644
"about_intro": "Join us to build apps, hardware, and community!",
57-
"about_body": "TreeHacks is Stanford University’s premier and largest hackathon. We bring together over 1000 students to Stanford every February to build the future. Sure, you’ll be hacking for 36 hours straight. But there will be yoga breaks. And laser tag. Lightsaber battles? Maybe even puppies. Whether you’re a seasoned veteran or just getting started, we’ve got your back every step of the way. \n *Stanford students are automatically accepted but need to RSVP",
45+
"about_body": "TreeHacks is Stanford University’s premier and largest hackathon. We bring together over 2000 students to Stanford every February to build the future. Sure, you’ll be hacking for 36 hours straight. But there will be yoga breaks. And laser tag. Lightsaber battles? Maybe even puppies. Whether you’re a seasoned veteran or just getting started, we’ve got your back every step of the way. \n *Stanford students are automatically accepted but need to RSVP",
46+
"project_body": "The amazing projects that have come out of TreeHacks are from all kinds of domains blah blahing together over 2000 students to Stanford every February to build the future. Sure, you’ll be hacking for 36 hours straight. But there will be yoga breaks. And laser tag. Lightsaber battles? Maybe even puppies. Whether you’re a seasoned veteran or just getting started, we’ve got your back every step of the way. \n *Stanford students are automatically accepted but need to RSVP",
47+
5848
"projects": [
5949
{
6050
"title": "Catiator",
61-
"path": "images/projects/ultimate_water_heater.png",
51+
"award": "Moonshot Prize TreeHacks 2021",
52+
"path": "art/projects/ultimate_water_heater.png",
6253
"url": "https://devpost.com/software/catiator",
6354
"description": "Nancy, Olivia, Mitchell, and Ryan created an educational VR game that lets players battle gladiator cats by learning and practicing American Sign Language. This team won our Moonshot Prize at TreeHacks 2021."
6455
},
6556
{
6657
"title": "Computertop Desk",
67-
"path": "images/projects/computertop_desktop.png",
58+
"award": "Best Hardware Hack TreeHacks 2018",
59+
"path": "../../art/projects/computertop_desk.png",
6860
"url": "https://devpost.com/software/computertop-desk",
6961
"description": "Omar combined a webcam and projector mounted above a desk, along with a splash of OpenCV to locate all the pieces of paper and the keyboard, allowing users to set any piece of paper as a window for the computer. Omar won Most Creative Hack and Best Hardware Hack at TreeHacks 2018."
7062
},
7163
{
7264
"title": "NeuralHash",
65+
"award": "Security Grand Prize TreeHacks 2018",
7366
"path": "images/projects/neural_hash.png",
7467
"url": "https://devpost.com/software/neuralhash",
7568
"description": "Isaac, Nikhil, Evani, and Rohan used machine learning to develop a decoder model that acts as a cryptographically-secure, transformation-invariant hash function to identify image ownership. This team won the Security Grand Prize and Most Technically Complex Hack at TreeHacks 2018."
7669
},
7770
{
7871
"title": "#PowerHouse",
72+
"award": "First Time Hackers",
7973
"path": "images/projects/power_house.png",
8074
"url": "https://devpost.com/software/energy-awareness-app",
8175
"description": "Nadya, Lucy, and Diane learned React Native and honed their UI skills while developing an app that informs users about the energy saving costs of various appliances and helps a user select all desired appliances for a home. TreeHacks 2018 was their first hackathon."
8276
},
8377
{
8478
"title": "Docodial",
79+
"award": "Best User Interface and Live Video App TreeHacks 2018",
8580
"path": "images/projects/docodial.png",
8681
"url": "https://devpost.com/software/docodial",
8782
"description": "Jenny and Aidan developed a live-streaming web app that allows doctors to communicate with interpreters, empowering non-native speakers to get the health coverage they need. They won Best User Interface and Best Live Video App at TreeHacks 2018."
8883
},
8984
{
9085
"title": "Marvel Medical Dictionary",
86+
"award": "Best Mobile AR Hack TreeHacks 2018",
9187
"path": "images/projects/marvel_medical_dictionary.png",
9288
"url": "https://devpost.com/software/marvel-medical-dictionary",
9389
"description": "Jomo, Kaleb, Ryan, and Khalid built a mobile, augmented reality experience that allows children to learn about health topics from a superhero related to the searched topic. Imagine Spider-Man teaching about spider bites! They won Best Mobile AR Hack at TreeHacks 2018."
9490
},
9591
{
9692
"title": "AEye",
93+
"award": "Best Public Health Hack TreeHacks 2019",
9794
"path": "images/projects/docodial.png",
9895
"url": "https://devpost.com/software/aeye-p4rkim",
9996
"description": "Vamshi, Dhanush, AJ and Aria built a mobile app that lets you take a picture of a patch of skin and analyzes it for potential skin diseases. Their model was trained on hundreds of models from the ISIC public skin database, and upon identification sends the result to a doctor for verification. They won Best Public Health Hack at TreeHacks 2019."
10097
},
101-
{
102-
"title": "Soteria",
103-
"path": "images/projects/marvel_medical_dictionary.png",
104-
"url": "https://devpost.com/software/soteria-403mgo",
105-
"description": "Kevin, Lindsey, Arihant and Christina created a web app designed to help inform travellers by visually providing safety information. They used open source data from the CDC, earning them the Best Hack to Make the World More Informed at TreeHacks 2019."
106-
},
98+
10799
{
108100
"title": "Lucid Drums",
101+
"award": "Most Creative Hack TreeHacks 2019",
109102
"description": "Lillian, Kevin, Laura, and Juhi built an interactive VR Oculus Quest game to improve coordination through rhythm for those suffering from motor impairment. They won the Most Creative Hack prize at TreeHacks 2020."
110103
}
111104
],
112-
"faq": [
105+
"faq1": [
113106
{
114107
"q": "What is a hackathon?",
115108
"a": "A hackathon is where you turn your crazy ideas into real projects. We provide hardware, mentors, fun activities, speakers, workshops, food, friends, and so much more. You take care of hacking; we’ll take care of you."
@@ -129,7 +122,9 @@
129122
{
130123
"q": "What if I don’t have a team or idea?",
131124
"a": "Not a problem! We’ll have team-forming activities to help you find teammates and idea brainstorming sessions for all our challenges. Some of our best hacks have been from teams that met and formed an idea on the spot!"
132-
},
125+
}
126+
],
127+
"faq2": [
133128
{
134129
"q": "What can I build?",
135130
"a": "Anything your heart desires! Hardware, web, mobile, gaming, VR...you name it, we’ll support it. We have five challenges that will have extra resources, sponsored challenges, and other events to inspire you."
@@ -147,7 +142,7 @@
147142
},
148143
{
149144
"link": "mailto:hello@treehacks.com",
150-
"q": "I have some other question!",
145+
"q": "I have another question not answered here!",
151146
"textBefore": "Email us at ",
152147
"textIn": "hello@treehacks.com",
153148
"textAfter": ". We gotchu."

‎src/js/faq.jsx‎

Lines changed: 56 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,82 @@
11
import React from "react";
2-
import { faq } from "./content.json";
2+
import { faq1 } from "./content.json";
3+
import { faq2 } from "./content.json";
4+
import Collapsible from "react-collapsible";
5+
import { GreenLeave } from "./new_images/greenleave";
36

47
const plusList = [
58
require("../svg/maingreen.svg"),
6-
// require("../svg/darkgreen.svg"),
9+
//require("../svg/darkgreen.svg"),
710
];
811

912
const FAQItem = ({ q, a, link, textBefore, textIn, textAfter, i }) => {
1013
return (
11-
<div className="faq-item" key={q + a}>
12-
<h2
13-
className="section-subheading faq-question"
14-
>
15-
<img className="faq-plus" src={plusList[i % plusList.length]} style={{ height: 30}}/>
16-
{q}
17-
</h2>
18-
<p
19-
className="faq-answer"
20-
>
14+
<Collapsible
15+
style={{ width: "50%" }}
16+
trigger={
17+
<h2
18+
class="section-subheading faq-question"
19+
style={{ textTransform: "none" }}
20+
>
21+
<img src={plusList} style={{ height: 30, marginRight: "20px" }} />
22+
23+
{q}
24+
</h2>
25+
}
26+
>
27+
<p className="faq-answer" style={{ marginLeft: "50px" }}>
2128
{link ? (
2229
<>
2330
{textBefore}
24-
<a href={link}>{textIn}</a>
31+
<a href={link} style={{ color: "white" }}>
32+
{textIn}
33+
</a>
2534
{textAfter}
2635
</>
2736
) : (
2837
a
2938
)}
3039
</p>
31-
</div>
40+
</Collapsible>
3241
);
3342
};
3443

3544
const FAQ = () => {
3645
return (
3746
<div id="faq">
38-
<h1 className="section-heading">Any Questions?</h1>
39-
<div className="faq-container">
40-
{faq.map((item, i) => (
41-
<FAQItem {...item} i={i} />
42-
))}
47+
<h1 className="section-heading">frequently asked questions</h1>
48+
<p className="body">
49+
{
50+
"If you have a question that is listed here, please email hello@treehacks.com"
51+
}
52+
</p>
53+
<div
54+
style={{
55+
display: "flex",
56+
flexDirection: "row",
57+
marginTop: "40px",
58+
marginRight: "5%",
59+
justifyContent: "space-between",
60+
marginLeft: "5%",
61+
gap: "8%",
62+
marginBottom: "100px",
63+
}}
64+
>
65+
<div style={{ width: "47%" }}>
66+
<div className="faq-container">
67+
{faq1.map((item, i) => (
68+
<FAQItem {...item} i={i} />
69+
))}
70+
</div>
71+
</div>
72+
73+
<div style={{ width: "45%" }}>
74+
<div className="faq-container">
75+
{faq2.map((item, i) => (
76+
<FAQItem {...item} i={i} />
77+
))}
78+
</div>
79+
</div>
4380
</div>
4481
</div>
4582
);

‎src/js/new_images/greenleave.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from "react";
2+
3+
export const GreenLeave = () => {
4+
return (
5+
<svg
6+
width="77"
7+
height="111"
8+
viewBox="0 0 77 111"
9+
fill="none"
10+
xmlns="http://www.w3.org/2000/svg"
11+
style={{ width: "50px", height: "50px" }}
12+
>
13+
<path
14+
d="M3.85337 110.65C-1.95929 88.7709 -2.22691 61.8132 12.8168 40.3167C28.8309 17.4337 47.3713 7.62771 75.8878 0.615988C77.794 34.4734 75.2372 44.9415 60.2967 70.129C43.7971 93.7057 24.0859 103.046 3.85337 110.65Z"
15+
fill="#10c695"
16+
/>
17+
</svg>
18+
);
19+
};

‎src/sass/faq.scss‎

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,21 @@
11
#faq {
22
position: relative;
33
margin: $large-space $small-space;
4-
width: 70vw;
4+
width: 100vw;
5+
//background: #2a2e35;
6+
background: $dark-mode;
57
margin: auto;
68
font-size: 1.1rem;
7-
padding-top: $small-space * 2;
8-
9+
display: flex;
10+
padding-top: $small-space * 4;
11+
flex-direction: column;
12+
align-content: center;
913

1014
.section-heading {
1115
margin-bottom: $small-space;
16+
margin-right: 10px;
17+
margin-left: 10px;
18+
color: white;
1219
}
1320

1421
.faq-plus {
@@ -22,36 +29,47 @@
2229
// cursor: pointer;
2330
}
2431

25-
.faq-question, .faq-answer {
32+
.faq-question,
33+
.faq-answer {
34+
color: white;
2635
text-align: left;
2736
}
2837

2938
.faq-question {
3039
display: flex;
40+
@media screen and (max-width: 750px) {
41+
font-size: 4vw;
42+
}
3143
margin-bottom: 10px;
3244
align-items: center;
3345
}
3446

3547
.faq-answer {
3648
margin-bottom: 15px;
37-
color: $light-gray;
38-
transition: max-height .5s ease-in-out;
49+
transition: max-height 0.5s ease-in-out;
3950
overflow: hidden;
4051
}
4152

4253
.faq-container {
43-
margin: -$small-space/1.25;
4454
display: flex;
45-
flex-wrap: wrap;
46-
align-items: flex-start;
55+
gap: 10px;
56+
flex-direction: column;
4757
}
4858

4959
.faq-item {
5060
padding: $small-space/1.25;
51-
flex-basis: 50%;
5261

5362
@media screen and (max-width: 1023px) {
5463
flex-basis: 100%;
5564
}
5665
}
66+
67+
.body {
68+
margin: $medium-space 0;
69+
font-size: $medium-font-size + 4;
70+
text-align: center;
71+
margin-left: 10px;
72+
margin-right: 10px;
73+
color: white;
74+
}
5775
}

‎src/sass/global.scss‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,32 +4,33 @@ $light-gray: #696e76;
44
$green: #00e174;
55
$white: #ffffff;
66

7+
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");
8+
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Poppins:wght@400;600&display=swap");
9+
710
$background-color: hsl(339, 77%, 99%);
811
$transparent-background-color: hsla(339, 77%, 99%, 0.65);
912
$text-color: black;
1013
$blue: #a7dde8;
1114
$pink: #e51b5d;
1215
$orange: #f46e20;
13-
$amaranth: #EF3E65;
16+
$amaranth: #ef3e65;
1417
$offwhite: #edf5ee;
1518
$red: #dd3b3b;
1619
$yellow: #ffc623;
1720

18-
1921
/* Color Palette 2022 */
20-
$lighter-green: #E5FFEA;
21-
$light-green: #A4ECD2;
22-
$main-green: #51E1AD;
23-
$dark-green: #0CB08A;
24-
$darker-green: #15766A;
25-
26-
22+
$lighter-green: #e5ffea;
23+
$light-green: #a4ecd2;
24+
$main-green: #51e1ad;
25+
$dark-green: #0cb08a;
26+
$darker-green: #15766a;
27+
$dark-mode: #111827;
2728

2829
//$background-color: #edf5ee;
2930

3031
/* Font Styles */
31-
$base-font-family: 'Avenir', proxima-nova, sans-serif;
32-
$base-font-size: 16px;
32+
$base-font-family: "Poppins", proxima-nova, sans-serif;
33+
$base-font-size: 15px;
3334
$heavy-font-weight: 700;
3435
$medium-font-size: $base-font-size + 2;
3536
$heading-font-size: $base-font-size * 4;
@@ -52,7 +53,6 @@ $max-width: 960px;
5253

5354
.logo-text-tree {
5455
font-family: $base-font-family;
55-
margin-left: -200;
5656
}
5757

5858
.logo-text-hacks {

0 commit comments

Comments
 (0)