Skip to content

Commit 1de7067

Browse files
jasondippeljasondippel
committed
Init launch page; Add and style hero section
1 parent 53ad2e1 commit 1de7067

File tree

3 files changed

+168
-1
lines changed

3 files changed

+168
-1
lines changed

‎pages/full.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { Button, PageHeading, SectionText, SiteHeader } from 'components'
2+
import styles from 'styles/full.module.css'
3+
4+
const Full = () => (
5+
<div className={`${styles.contentRoot}`}>
6+
<section className={styles.hero}>
7+
<SiteHeader />
8+
<div className={`${styles.sectionContent}`}>
9+
<div className={styles.heroContent}>
10+
<PageHeading className={styles.heroHeading}>
11+
We are the community for{' '}
12+
<span className={styles.highlight}>remote-first</span> Software
13+
Engineers
14+
</PageHeading>
15+
<SectionText className={styles.heroText}>
16+
Commit is designing the future of work and we're putting Engineers
17+
at the center.
18+
</SectionText>
19+
<Button className={styles.heroButton}>Apply to Join Us</Button>
20+
</div>
21+
<div className={styles.heroSvg}>
22+
<svg
23+
width="272"
24+
height="639"
25+
viewBox="0 0 272 639"
26+
fill="none"
27+
xmlns="http://www.w3.org/2000/svg"
28+
>
29+
<path
30+
d="M256.047 0.0012207H272V68.2663H256.047C235.401 68.0679 215.494 75.752 200.578 89.677C185.663 103.602 176.92 122.664 176.219 142.791C176.219 148.753 176.219 155.55 176.219 162.228C176.219 211.235 176.219 274.671 134.778 319.386C176.525 364.101 176.342 427.537 176.219 476.604C176.219 483.222 176.219 489.721 176.219 496.041C176.92 516.168 185.663 535.23 200.578 549.155C215.494 563.08 235.401 570.764 256.047 570.566H272V638.771H256.047C217.039 638.924 179.521 624.17 151.53 597.67C123.538 571.17 107.3 535.031 106.294 496.995C106.294 490.317 106.294 483.461 106.294 476.426C106.294 413.407 103.421 370.54 61.4903 349.852L0 319.386L61.4903 288.98C103.421 268.232 106.477 225.365 106.294 162.406C106.294 155.371 106.294 148.456 106.294 141.838C107.285 103.791 123.516 67.637 151.509 41.124C179.502 14.6109 217.029 -0.151428 256.047 0.0012207Z"
31+
fill="url(#paint0_linear)"
32+
fillOpacity="0.2"
33+
/>
34+
<defs>
35+
<linearGradient
36+
id="paint0_linear"
37+
x1="272"
38+
y1="319"
39+
x2="0"
40+
y2="319"
41+
gradientUnits="userSpaceOnUse"
42+
>
43+
<stop stopColor="#68B5FF" />
44+
<stop offset="1" stopColor="#54FFFF" />
45+
</linearGradient>
46+
</defs>
47+
</svg>
48+
</div>
49+
</div>
50+
</section>
51+
</div>
52+
)
53+
54+
export default Full

‎styles/full.module.css‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
/* Shared Styles */
2+
.contentRoot {
3+
display: flex;
4+
flex-direction: column;
5+
min-height: 100vh;
6+
overflow: hidden;
7+
padding: 0px;
8+
margin: 0px;
9+
}
10+
11+
.sectionContent {
12+
margin: 0 auto;
13+
padding: 0 120px;
14+
}
15+
16+
@media only screen and (max-width: 1023px) {
17+
.sectionContent {
18+
padding: 0 8%;
19+
}
20+
}
21+
22+
@media only screen and (max-width: 413px) {
23+
.sectionContent {
24+
padding: 0 36px;
25+
}
26+
}
27+
28+
/* Hero Styles */
29+
.hero {
30+
background: linear-gradient(68.66deg, #0f1011 0%, #010242 100%);
31+
color: #ffffff;
32+
overflow: hidden;
33+
min-height: 946px;
34+
}
35+
.heroSvg {
36+
position: absolute;
37+
right: 0;
38+
top: 180px;
39+
}
40+
.heroContent {
41+
max-width: 50rem;
42+
}
43+
.hero .sectionContent {
44+
display: flex;
45+
padding-right: 0px;
46+
justify-content: space-between;
47+
}
48+
h1.heroHeading {
49+
margin-top: 200px;
50+
margin-bottom: 4.5rem;
51+
text-align: left;
52+
}
53+
h1.heroHeading .highlight {
54+
color: #54ffff;
55+
}
56+
p.heroText {
57+
color: #8493b0;
58+
font-size: 1.5rem;
59+
font-weight: 600;
60+
line-height: 2.25rem;
61+
margin-bottom: 4.5rem;
62+
}
63+
button.heroButton {
64+
max-width: 380px;
65+
}
66+
67+
@media only screen and (max-width: 1023px) {
68+
.heroContent {
69+
width: 65%;
70+
}
71+
h1.heroHeading {
72+
font-size: 3rem;
73+
line-height: 3.625rem;
74+
margin-top: 180px;
75+
margin-bottom: 4.25rem;
76+
}
77+
button.heroButton {
78+
max-width: 100%;
79+
min-width: 100%;
80+
}
81+
}
82+
83+
@media only screen and (max-width: 413px) {
84+
.hero {
85+
background: #000000;
86+
min-height: 820px;
87+
}
88+
.hero .sectionContent {
89+
padding: 0 36px;
90+
}
91+
.heroContent {
92+
width: initial;
93+
}
94+
.heroSvg {
95+
display: none;
96+
}
97+
h1.heroHeading {
98+
font-size: 2rem;
99+
line-height: 2.375rem;
100+
margin-top: 140px;
101+
margin-bottom: 3rem;
102+
}
103+
p.heroText {
104+
font-size: 1.5rem;
105+
font-weight: 500;
106+
line-height: 2rem;
107+
margin-bottom: 3rem;
108+
}
109+
button.heroButton {
110+
font-size: 1.125rem;
111+
line-height: 1.375rem;
112+
}
113+
}

‎styles/globals.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Montserrat:wght@500;700&display=swap');
1+
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Montserrat:wght@500;600;700&display=swap');
22

33
html,
44
body {

0 commit comments

Comments
 (0)