Skip to content

Commit e05ddd5

Browse files
adriandelisleadriandelisle
authored
73 add our software engineers section (#87)
1 parent ae9a3bc commit e05ddd5

File tree

19 files changed

+303
-152
lines changed

19 files changed

+303
-152
lines changed

‎.eslintrc.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@ const rules = {
1616
pattern: 'components',
1717
group: 'internal',
1818
},
19+
{
20+
pattern: 'components/**',
21+
group: 'internal',
22+
},
1923
{
2024
pattern: 'pages/**',
2125
group: 'internal',

‎components/apply-link/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { rem } from 'polished'
22
import styled from 'styled-components'
33

4+
import { MOBILE_SIZE } from 'styles/constants'
5+
46
const StyledLink = styled.a`
57
display: block;
68
background: #ff68ba;
@@ -24,7 +26,7 @@ const StyledLink = styled.a`
2426
outline: none;
2527
}
2628
27-
@media only screen and (max-width: 413px) {
29+
@media only screen and (max-width: ${MOBILE_SIZE}) {
2830
font-size: ${rem('18px')};
2931
line-height: ${rem('22px')};
3032
padding: ${rem('16px')};

‎components/article-preview/index.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { string } from 'prop-types'
22
import styled from 'styled-components'
33

44
import { Heading, Text } from 'components'
5+
import { TABLET_SIZE, MOBILE_SIZE } from 'styles/constants'
56

67
const Root = styled.div`
78
grid-column: span 4;
@@ -36,7 +37,7 @@ const Root = styled.div`
3637
margin: 0;
3738
}
3839
39-
@media only screen and (max-width: 767px) {
40+
@media only screen and (max-width: ${TABLET_SIZE}) {
4041
margin-bottom: 4.5rem;
4142
4243
&:last-of-type {
@@ -45,7 +46,7 @@ const Root = styled.div`
4546
}
4647
}
4748
48-
@media only screen and (max-width: 413px) {
49+
@media only screen and (max-width: ${MOBILE_SIZE}) {
4950
grid-column: 1 / span 1;
5051
5152
&:last-of-type {

‎components/button/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { rem } from 'polished'
22
import styled from 'styled-components'
33

4+
import { MOBILE_SIZE } from 'styles/constants'
5+
46
const Button = (props) => <StyledButton {...props} />
57

68
const StyledButton = styled.button`
@@ -25,7 +27,7 @@ const StyledButton = styled.button`
2527
outline: none;
2628
}
2729
28-
@media only screen and (max-width: 413px) {
30+
@media only screen and (max-width: ${MOBILE_SIZE}) {
2931
font-size: ${rem('18px')};
3032
line-height: ${rem('22px')};
3133
}

‎components/company-logo/index.js‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import React from 'react'
2+
3+
import { oneOf, string } from 'prop-types'
4+
import styled from 'styled-components'
5+
6+
import { DESKTOP_SIZE, TABLET_SIZE, MOBILE_SIZE } from 'styles/constants'
7+
8+
const SIZE = Object.freeze({
9+
small: 'small',
10+
large: 'large',
11+
})
12+
13+
const getSize = (variant) => {
14+
switch (variant) {
15+
case SIZE.large:
16+
return '256px'
17+
case SIZE.small:
18+
return '220px'
19+
default:
20+
return '256px'
21+
}
22+
}
23+
24+
const Anchor = styled.a`
25+
display: flex;
26+
justify-content: center;
27+
align-items: center;
28+
`
29+
30+
const StyledImg = styled.img`
31+
padding: 24px;
32+
min-width: 180px;
33+
width: 30%;
34+
max-width: ${(props) => getSize(props.size)};
35+
margin: 24px 0px;
36+
opacity: 0.5;
37+
:hover {
38+
opacity: 0.75;
39+
}
40+
41+
@media only screen and (max-width: ${DESKTOP_SIZE}) {
42+
margin: 0;
43+
}
44+
45+
@media only screen and (max-width: ${TABLET_SIZE}) {
46+
padding: 12px;
47+
}
48+
49+
@media only screen and (max-width: ${MOBILE_SIZE}) {
50+
padding: 0;
51+
min-width: 125px;
52+
width: 48%;
53+
max-width: 150px;
54+
}
55+
`
56+
57+
const CompanyLogo = ({ url, logoSrc, alt, size }) => (
58+
<Anchor href={url} rel="noopener noreferrer">
59+
<StyledImg alt={alt} src={logoSrc} size={size} />
60+
</Anchor>
61+
)
62+
63+
CompanyLogo.defaultProps = {
64+
size: SIZE.large,
65+
}
66+
67+
CompanyLogo.propTypes = {
68+
url: string.isRequired,
69+
logoSrc: string.isRequired,
70+
alt: string.isRequired,
71+
size: oneOf(Object.values(SIZE)),
72+
}
73+
74+
CompanyLogo.SIZE = SIZE
75+
76+
export default CompanyLogo

‎components/footer/index.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import styled from 'styled-components'
22

33
import { Text, ApplyLink } from 'components'
4+
import { DESKTOP_SIZE, MOBILE_SIZE } from 'styles/constants'
45

56
const FooterContainer = styled.footer`
67
padding: 150px 0 40px;
78
color: #ffffff;
89
background: #000000;
910
background: linear-gradient(68.66deg, #0f1011 0%, #010242 100%);
1011
11-
@media only screen and (max-width: 413px) {
12+
@media only screen and (max-width: ${MOBILE_SIZE}) {
1213
padding: 98px 0px 68px;
1314
background: #000000;
1415
}
@@ -22,7 +23,7 @@ const FooterContainer = styled.footer`
2223
text-align: center;
2324
margin-bottom: 4rem;
2425
25-
@media only screen and (max-width: 413px) {
26+
@media only screen and (max-width: ${MOBILE_SIZE}) {
2627
margin-bottom: 3rem;
2728
}
2829
}
@@ -45,12 +46,12 @@ const FlexSection = styled.div`
4546
max-width: 1240px;
4647
margin: 0 auto;
4748
48-
@media only screen and (max-width: 1023px) {
49+
@media only screen and (max-width: ${DESKTOP_SIZE}) {
4950
max-width: none;
5051
margin: 0 20px;
5152
}
5253
53-
@media only screen and (max-width: 413px) {
54+
@media only screen and (max-width: ${MOBILE_SIZE}) {
5455
max-width: none;
5556
margin: 0 36px;
5657
}

‎components/form/index.js‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,8 @@ import { CheckCircle } from 'phosphor-react'
44
import { rem } from 'polished'
55
import styled from 'styled-components'
66

7-
import Button from '../button'
8-
import Input from '../input'
9-
import Text from '../text'
10-
import TextArea from '../textarea'
7+
import { Button, Input, Text, TextArea } from 'components'
8+
import { TABLET_SIZE } from 'styles/constants'
119

1210
const SuccessHeader = styled.h2`
1311
font-family: Montserrat;
@@ -17,7 +15,7 @@ const SuccessHeader = styled.h2`
1715
margin-left: ${rem('60px')};
1816
margin-top: ${rem('-40px')};
1917
20-
@media only screen and (max-width: 767px) {
18+
@media only screen and (max-width: ${TABLET_SIZE}) {
2119
margin: 0;
2220
}
2321
`

‎components/heading/index.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import { rem } from 'polished'
22
import { string } from 'prop-types'
33
import styled from 'styled-components'
44

5+
import { DESKTOP_SIZE, MOBILE_SIZE } from 'styles/constants'
6+
57
const VARIANT = Object.freeze({
68
h2: 'h2',
79
h3: 'h3',
@@ -32,12 +34,12 @@ const StyledHeading1 = styled.h1`
3234
letter-spacing: 0rem;
3335
margin: 0;
3436
35-
@media only screen and (max-width: 1023px) {
37+
@media only screen and (max-width: ${DESKTOP_SIZE}) {
3638
font-size: ${rem('48px')};
3739
line-height: ${rem('60px')};
3840
}
3941
40-
@media only screen and (max-width: 413px) {
42+
@media only screen and (max-width: ${MOBILE_SIZE}) {
4143
font-size: ${rem('32px')};
4244
line-height: ${rem('40px')};
4345
}
@@ -52,7 +54,7 @@ const StyledHeading2 = styled.h2`
5254
text-transform: uppercase;
5355
margin: 0;
5456
55-
@media only screen and (max-width: 413px) {
57+
@media only screen and (max-width: ${MOBILE_SIZE}) {
5658
font-size: ${rem('28px')};
5759
line-height: ${rem('34px')};
5860
text-align: center;
@@ -66,7 +68,7 @@ const StyledHeading3 = styled.h3`
6668
line-height: ${rem('24px')};
6769
margin: 0;
6870
69-
@media only screen and (max-width: 413px) {
71+
@media only screen and (max-width: ${MOBILE_SIZE}) {
7072
text-align: center;
7173
}
7274
`

‎components/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
export { default as ApplyLink } from './apply-link'
22
export { default as ArticlePreview } from './article-preview'
33
export { default as Button } from './button'
4+
export { default as CompanyLogo } from './company-logo'
45
export { default as Footer } from './footer'
56
export { default as Form } from './form'
67
export { default as Heading } from './heading'
78
export { default as Input } from './input'
9+
export { default as LogoSection } from './logo-section'
810
export { default as SiteHeader } from './site-header'
911
export { default as Testimonials } from './testimonials'
1012
export { default as Text } from './text'

‎components/layout/flex-section.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import styled from 'styled-components'
2+
3+
const FlexSectionContents = styled.div`
4+
max-width: 1240px;
5+
margin: 0 auto;
6+
`
7+
8+
export default FlexSectionContents

0 commit comments

Comments
 (0)