Skip to content

Commit 8675739

Browse files
timmyichentimmyichen
committed
create landing page and basic coloring
1 parent 5e751ac commit 8675739

File tree

11 files changed

+180
-18
lines changed

11 files changed

+180
-18
lines changed

‎client/Header.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,9 @@ function Header({ isAuthed }: { isAuthed: boolean }) {
6262
.header {
6363
display: flex;
6464
height: 40px;
65-
border-bottom: 1px solid #ccc;
6665
justify-content: space-between;
66+
z-index: 10;
67+
background-color: #d6f6dd;
6768
}
6869
.route-group {
6970
display: flex;
@@ -75,7 +76,7 @@ function Header({ isAuthed }: { isAuthed: boolean }) {
7576
align-items: center;
7677
justify-content: center;
7778
padding: 0 20px;
78-
color: black;
79+
color: #0e4d45;
7980
cursor: pointer;
8081
text-decoration: none;
8182
}

‎pages/_app.tsx

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,18 @@ class MyApp extends App {
4848
/>
4949
</Head>
5050
<Header isAuthed={!!user} />
51-
<Component {...pageProps} />
51+
<div className="component-wrapper">
52+
<Component {...pageProps} />
53+
<style jsx>{`
54+
.component-wrapper {
55+
background-image: linear-gradient(#d6f6dd, #b0cab5);
56+
min-height: 100vh;
57+
}
58+
:global(body) {
59+
color: #4e5a51;
60+
}
61+
`}</style>
62+
</div>
5263
</Provider>
5364
</Container>
5465
);

‎pages/about.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,8 @@ export default () => {
3232
<style jsx>{`
3333
.about-page {
3434
max-width: 400px;
35-
margin: 50px auto;
35+
margin: 0 auto;
36+
padding-top: 50px;
3637
}
3738
`}</style>
3839
</div>

‎pages/account.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,8 @@ export default () => {
3636
<style jsx>{`
3737
.account-page {
3838
max-width: 400px;
39-
margin: 50px auto;
39+
margin: 0 auto;
40+
padding-top: 50px;
4041
}
4142
.delete-wrapper {
4243
text-align: center;

‎pages/create.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ export default () => {
88
<style jsx>{`
99
.create-event-page {
1010
max-width: 400px;
11-
margin: 50px auto;
11+
margin: 0 auto;
12+
padding-top: 50px;
1213
}
1314
.create-event-page :global(.alert-danger) {
1415
margin-top: 10px;

‎pages/event.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,8 @@ function EventPage({ event: incomingEvent }: Props) {
4242
{content}
4343
<style jsx>{`
4444
.event-page {
45-
margin: 50px auto;
45+
margin: 0 auto;
46+
padding-top: 50px;
4647
}
4748
`}</style>
4849
</div>

‎pages/index.tsx

Lines changed: 153 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,164 @@
11
import * as React from 'react';
22
import Link from 'next/link';
3+
import { Button } from 'react-bootstrap';
34

45
export default () => {
56
return (
67
<div className="landing-page">
7-
<p>
8-
Hey, and welcome to Help-A-Hacker. Navigate pages above or visit the{' '}
9-
<Link href="/about">
10-
<a>About Page</a>
11-
</Link>{' '}
12-
to learn some more.
13-
</p>
8+
<div className="section hero">
9+
<h1>Help a Hacker</h1>
10+
<h2>Facilitate mentorship during Hackathons</h2>
11+
<Link href="/join">
12+
<a>
13+
<Button size="lg" variant="primary">
14+
Try it out
15+
</Button>
16+
</a>
17+
</Link>
18+
</div>
19+
<div className="section features">
20+
<div className="text">
21+
<h3>How it works:</h3>
22+
<ul>
23+
<li>
24+
<span className="em">Create an event</span> for your
25+
hackathon/event/classroom.
26+
</li>
27+
<li>
28+
Mentors and attendees{' '}
29+
<span className="em">join with unique invite codes</span>.
30+
</li>
31+
<li>
32+
<span className="em">Attendees</span> create requests for help.
33+
</li>
34+
<li>
35+
<span className="em">Mentors</span> get a feed of who needs help
36+
and can claim/resolve them.
37+
</li>
38+
</ul>
39+
</div>
40+
<div className="image">
41+
<img src="/img/students-working.jpg" />
42+
<div className="img-attribution">
43+
Photo by{' '}
44+
<a href="https://unsplash.com/@priscilladupreez" target="_blank">
45+
Priscilla Du Preez
46+
</a>{' '}
47+
on Unsplash
48+
</div>
49+
</div>
50+
</div>
51+
<div className="section privacy">
52+
<div className="image">
53+
<img src="/img/lock.jpg" />
54+
<div className="img-attribution">
55+
Photo by{' '}
56+
<a href="https://unsplash.com/@jsalvino" target="_blank">
57+
John Salvino
58+
</a>{' '}
59+
on Unsplash
60+
</div>
61+
</div>
62+
<div className="text">
63+
<h3>Be confident that you are in control of your data.</h3>
64+
<p>
65+
Your privacy is our priority, and your data is yours. Events are
66+
automatically deleted a week after the end of an event, and user
67+
accounts are automatically deleted when they don't belong to an
68+
event. Events and users can be deleted at any time.
69+
</p>
70+
</div>
71+
</div>
72+
<div className="section open-source">
73+
<p>
74+
Fancy a bit of TypeScript, React, Node, and MongoDB? This web app is
75+
open-source on{' '}
76+
<a href="https://github.com/timmyichen/help-a-hacker" target="_blank">
77+
GitHub
78+
</a>{' '}
79+
and is always accepting contributions!
80+
</p>
81+
</div>
1482
<style jsx>{`
15-
.landing-page {
16-
margin: 50px auto;
83+
.landing-page > .section {
84+
min-height: 700px;
85+
padding: 0 5%;
86+
}
87+
.hero {
88+
display: flex;
89+
align-items: center;
90+
justify-content: center;
91+
flex-direction: column;
92+
background-image: linear-gradient(#d6f6dd, #b0cab5);
93+
color: #4e5a51;
94+
}
95+
.hero h1 {
96+
font-size: 60px;
97+
}
98+
.hero h2 {
99+
margin-top: 10px;
100+
font-size: 24px;
101+
}
102+
.hero :global(button) {
103+
margin-top: 20px;
104+
}
105+
.features {
106+
display: flex;
107+
align-items: center;
108+
justify-content: space-around;
109+
background-image: linear-gradient(#b0cab5, #758779);
110+
}
111+
.text {
112+
max-width: 40%;
113+
font-size: 20px;
114+
color: #3b443d;
115+
}
116+
.features h3 {
117+
font-size: 36px;
118+
}
119+
.features li {
120+
margin-top: 10px;
121+
}
122+
.features .em {
123+
font-weight: bold;
124+
color: #0e4d45;
125+
}
126+
.image img {
127+
max-width: 400px;
128+
border-radius: 100%;
129+
}
130+
.img-attribution {
131+
display: block;
132+
margin-top: 10px;
133+
text-align: center;
134+
font-size: 12px;
135+
}
136+
a {
137+
color: #0e4d45;
138+
}
139+
.privacy {
140+
display: flex;
141+
align-items: center;
142+
justify-content: space-around;
143+
background-image: linear-gradient(#758779, #b0cab5);
144+
}
145+
.privacy h3 {
146+
font-size: 30px;
147+
margin-bottom: 20px;
148+
}
149+
.open-source {
150+
display: flex;
151+
align-items: center;
152+
justify-content: center;
153+
background-image: linear-gradient(#b0cab5, #ccddcf);
154+
}
155+
.open-source p {
17156
max-width: 600px;
157+
font-size: 20px;
158+
text-align: center;
159+
}
160+
.open-source a {
161+
font-weight: bold;
18162
}
19163
`}</style>
20164
</div>

‎pages/join.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,8 @@ export default () => {
130130
<style jsx>{`
131131
.join-page :global(form) {
132132
max-width: 400px;
133-
margin: 50px auto;
133+
margin: 0 auto;
134+
padding-top: 50px;
134135
}
135136
`}</style>
136137
</div>

‎pages/login.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,8 @@ export default () => {
7676
<style jsx>{`
7777
.join-page :global(form) {
7878
max-width: 400px;
79-
margin: 50px auto;
79+
margin: 0 auto;
80+
padding-top: 50px;
8081
}
8182
`}</style>
8283
</div>

‎public/img/lock.jpg

130 KB
Loading

‎public/img/students-working.jpg

126 KB
Loading

0 commit comments

Comments
 (0)