Skip to content
This repository was archived by the owner on Apr 18, 2024. It is now read-only.

Commit bd6a238

Browse files
prince-derivprince-deriv
authored
Merge pull request #7 from NikitK-deriv/careers
 Careers Page - Sinbad Careers Page - Sinbad
2 parents c6d057c + 75118f2 commit bd6a238

24 files changed

+616
-127
lines changed

‎src/common/components/containers/index.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
import Flex, { Box } from './flex'
2-
import { ContactUsButton, Header, Text, ImageContainer } from './main'
2+
import { ContactUsButton, SeeOurPositions, Header, Text, ImageContainer } from './main'
33

4-
export { Flex, Box, ContactUsButton, Header, Text, ImageContainer }
4+
export { Flex, Box, ContactUsButton, SeeOurPositions, Header, Text, ImageContainer }

‎src/common/components/containers/main.ts

+17-7
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import styled from 'styled-components'
2+
import SeeOurPositionsImage from 'images/common/see-our-positions-image.png'
3+
import ContactUs from 'images/common/contact-us-button.png'
24

35
type HeaderProps = {
46
font_size?: string
@@ -12,19 +14,27 @@ type TextProps = {
1214
width?: string
1315
text_align?: string
1416
padding?: string
17+
line_height?: string
1518
}
1619
type ImageProps = {
1720
width?: string
1821
height?: string
1922
}
2023

21-
export const ContactUsButton = styled.button`
22-
width: fit-content;
24+
export const ContactUsButton = styled.div`
25+
width: 90px;
2326
height: 25px;
24-
color: black;
25-
background-color: orange;
26-
border-radius: 10px;
27-
font-size: 10px;
27+
background-image: url(${ContactUs});
28+
background-repeat: no-repeat;
29+
background-size: 90px 25px;
30+
`
31+
32+
export const SeeOurPositions = styled.div`
33+
width: 150px;
34+
height: 25px;
35+
background-image: url(${SeeOurPositionsImage});
36+
background-repeat: no-repeat;
37+
background-size: 150px 25px;
2838
`
2939

3040
export const ImageContainer = styled.img<ImageProps>`
@@ -41,7 +51,7 @@ export const Header = styled.div<HeaderProps>`
4151
`
4252
export const Text = styled.div<TextProps>`
4353
font-size: ${(props) => props.font_size || '16px'};
44-
line-height: 18px;
54+
line-height: ${(props) => props.line_height || '18px'};
4555
width: ${(props) => props.width || '300px'};
4656
text-align: ${(props) => props.text_align || 'left'};
4757
padding: ${(props) => props.padding || '15px 0'};

‎src/common/components/containers/table.tsx

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import React from 'react'
2+
import styled from 'styled-components'
3+
4+
export type TermProps = {
5+
index?: number
6+
margin?: string
7+
border_left?: boolean
8+
}
9+
10+
type TermsServiceType = { header?: string; text: string; icon: string }
11+
12+
type OurServiceType = {
13+
first?: TermsServiceType
14+
other?: TermsServiceType[]
15+
}
16+
17+
type OurTermsType = {
18+
first_column?: TermsServiceType[]
19+
second_column?: TermsServiceType[]
20+
}
21+
22+
export type PBType = {
23+
our_terms?: OurTermsType
24+
}
25+
26+
type DataType = {
27+
data?: {
28+
our_service?: OurServiceType
29+
our_terms?: OurTermsType
30+
}
31+
}
32+
const TableContainer = styled.div`
33+
display: flex;
34+
flex-direction: row;
35+
padding: 15px;
36+
`
37+
38+
const TableColumn = styled.div`
39+
display: flex;
40+
flex-direction: column;
41+
`
42+
43+
const TermImage = styled.img`
44+
width: 40px;
45+
height: 40px;
46+
`
47+
const TermText = styled.div`
48+
font-size: 14px;
49+
padding-left: 20px;
50+
font-weight: normal;
51+
text-align: left;
52+
`
53+
54+
const Term = styled.div<TermProps>`
55+
display: flex;
56+
align-items: center;
57+
width: 170px;
58+
height: 70px;
59+
padding: 10px;
60+
border-top: ${(props) =>
61+
props.index === 0 ? 'unset' : props.index === 4 ? 'unset' : '1px solid gray'};
62+
border-bottom: ${(props) =>
63+
props.index === 3 ? 'unset' : props.index === 7 ? 'unset' : '1px solid gray'};
64+
border-left: ${(props) => (props.border_left ? '1px solid gray' : 'unset')};
65+
`
66+
67+
const Table = ({ data }: DataType) => {
68+
return (
69+
<TableContainer>
70+
<TableColumn>
71+
{data.our_terms.first_column.map((item, index) => (
72+
<Term key={index} index={index}>
73+
<TermImage src={item.icon} />
74+
<TermText>{item.text}</TermText>
75+
</Term>
76+
))}
77+
</TableColumn>
78+
<TableColumn>
79+
{data.our_terms.second_column.map((item, index) => (
80+
<Term key={index} index={index} border_left={true}>
81+
<TermImage src={item.icon} />
82+
<TermText>{item.text}</TermText>
83+
</Term>
84+
))}
85+
</TableColumn>
86+
</TableContainer>
87+
)
88+
}
89+
90+
export default Table

‎src/common/components/layout/footer.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const Footer = () => {
3838
<div>
3939
<StyledFooterLink to="/">Home | </StyledFooterLink>
4040
<StyledFooterLink to="/careers"> Careers | </StyledFooterLink>
41-
<StyledFooterLink to="/openpositions">Open Positions</StyledFooterLink>
41+
<StyledFooterLink to="/open-positions">Open Positions</StyledFooterLink>
4242
</div>
4343
</PagesWrapper>
4444
</DisclaimerWrapper>

‎src/common/components/layout/header.tsx

+9-5
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,12 @@ const StyledHeaderLink = styled(Link)`
3535
`
3636

3737
export const PagesWrapper = styled.div`
38+
display: flex;
39+
align-items: center;
40+
justify-content: space-between;
41+
width: 360px;
3842
color: white;
39-
padding-right: 15px;
43+
padding-right: 35px;
4044
`
4145

4246
const Header = () => {
@@ -47,10 +51,10 @@ const Header = () => {
4751
<HeaderTitle>Software</HeaderTitle>
4852
</StyledHeader>
4953
<PagesWrapper>
50-
<StyledHeaderLink to="/">Home | </StyledHeaderLink>
51-
<StyledHeaderLink to="/careers"> Careers | </StyledHeaderLink>
52-
<StyledHeaderLink to="/openpositions"> Open Positions </StyledHeaderLink>
53-
<ContactUsButton> Contact us </ContactUsButton>
54+
<StyledHeaderLink to="/">Home </StyledHeaderLink>
55+
<StyledHeaderLink to="/careers"> Careers </StyledHeaderLink>
56+
<StyledHeaderLink to="/open-positions"> Open Positions </StyledHeaderLink>
57+
<ContactUsButton />
5458
</PagesWrapper>
5559
</HeaderContainer>
5660
)

‎src/common/components/layout/layout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Footer from './footer'
33
import Header from './header'
44

55
type LayoutType = {
6-
children: React.ReactChild
6+
children: React.ReactChild | React.ReactChild[]
77
}
88

99
const Layout = ({ children }: LayoutType) => {

‎src/images/common/careers/index.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import Sinbad0 from './sinbad-0.png'
2+
import Sinbad1 from './sinbad-1.png'
3+
import Sinbad2 from './sinbad-2.png'
4+
import Sinbad3 from './sinbad-2.png'
5+
6+
export { Sinbad0, Sinbad1, Sinbad2, Sinbad3 }

‎src/images/common/careers/sinbad-0.png

1.61 MB
Loading

‎src/images/common/careers/sinbad-1.png

1.54 MB
Loading

‎src/images/common/careers/sinbad-2.png

1.46 MB
Loading

‎src/images/common/careers/word.png

185 KB
Loading

‎src/images/common/contact-us-button.png

1.74 KB
Loading

‎src/images/common/see-our-positions-image.png

2.3 KB
Loading

‎src/pages/careers/hiring-process.tsx

+131
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
import React from 'react'
2+
import styled from 'styled-components'
3+
import { Flex, Header, ImageContainer, Text } from 'common/components/containers'
4+
import Random from 'images/svg/random.svg'
5+
6+
const HiringProcessContainer = styled.div`
7+
display: flex;
8+
flex-direction: column;
9+
justify-content: center;
10+
align-items: center;
11+
padding: 50px;
12+
`
13+
14+
const StyledHeader = styled(Header)`
15+
text-transform: uppercase;
16+
padding: 0 0 30px;
17+
`
18+
19+
const StyledBorder = styled.div`
20+
border-top: 2px solid gray;
21+
width: 120px;
22+
`
23+
24+
const StyleFlex = styled(Flex)`
25+
padding: 50px 0 80px;
26+
`
27+
28+
const Card = styled(Flex)`
29+
display: flex;
30+
justify-content: space-between;
31+
max-width: 300px;
32+
height: 150px;
33+
padding: 10px 20px;
34+
box-shadow: rgba(14, 14, 14, 0.1) 0 4px 8px 0;
35+
background-color: var(--color-white);
36+
margin: 5px;
37+
border-radius: 8px;
38+
`
39+
40+
const CardInfo = styled.div`
41+
display: flex;
42+
flex-direction: column;
43+
`
44+
45+
type DataType = {
46+
number: number
47+
icon: string
48+
header: string
49+
text: string
50+
}
51+
52+
const data: DataType[] = [
53+
{
54+
number: 1,
55+
icon: Random,
56+
header: 'Send curriculum vitae (CV)',
57+
text: 'Send your CV and a cover letter to [email protected] to get started.',
58+
},
59+
{
60+
number: 2,
61+
icon: Random,
62+
header: 'Self-assessment questionnarie',
63+
text: "We'll send you a questionnaire to help us learn more about you.",
64+
},
65+
{
66+
number: 3,
67+
icon: Random,
68+
header: 'Interview with HR and Manager',
69+
text: 'An HR representative and your potential manager will interview you. They will',
70+
},
71+
{
72+
number: 4,
73+
icon: Random,
74+
header: 'Interview with COO/CTO/CEO',
75+
text: "In this round, you'll speak with our COO, CTO, CEO depending on the role.",
76+
},
77+
{
78+
number: 5,
79+
icon: Random,
80+
header: 'Background and reference check',
81+
text: 'Upon approval, our team will do a background and reference check.',
82+
},
83+
{
84+
number: 6,
85+
icon: Random,
86+
header: 'Job offer',
87+
text: "If everything goes well, you'll recieve a job offer. Be ready, as your new adventure with us is about to begin.",
88+
},
89+
{
90+
number: 7,
91+
icon: Random,
92+
header: "You're one of us",
93+
text: "Welcome to Sinbad! You'll recieve your start date and the details of your onboarding programme.",
94+
},
95+
]
96+
97+
const HiringProcess = () => {
98+
return (
99+
<HiringProcessContainer>
100+
<StyledHeader>Our hiring process</StyledHeader>
101+
<StyledBorder />
102+
<StyleFlex width="1100px" wrap="wrap" jc="flex-start">
103+
{data.map(({ icon, header, text, number }, index) => {
104+
return (
105+
<Card key={index} direction="row" ai="center">
106+
<ImageContainer src={icon} width="50px" height="50px" />
107+
<CardInfo>
108+
<Header padding="10px 10px 0" font_size="14px">
109+
{header}
110+
</Header>
111+
<Text
112+
font_size="12px"
113+
line_height="14px"
114+
padding="10px 10px"
115+
width="180px"
116+
>
117+
{text}
118+
</Text>
119+
</CardInfo>
120+
<Text padding="0 0 110px 10px" color="gray" font_size="24px">
121+
{number}
122+
</Text>
123+
</Card>
124+
)
125+
})}
126+
</StyleFlex>
127+
</HiringProcessContainer>
128+
)
129+
}
130+
131+
export default HiringProcess

‎src/pages/careers/index.tsx

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react'
2+
import WorkWithUs from './work-with-us'
3+
import PerksBenefits from './perks-benefits'
4+
import OpenPositions from './open-positions'
5+
import HiringProcess from './hiring-process'
6+
import Layout from 'common/components/layout/layout'
7+
import JoinUs from 'pages/join-us'
8+
9+
const Careers = () => {
10+
return (
11+
<Layout>
12+
<WorkWithUs />
13+
<PerksBenefits />
14+
<OpenPositions />
15+
<HiringProcess />
16+
<JoinUs active={3} />
17+
</Layout>
18+
)
19+
}
20+
21+
export default Careers

0 commit comments

Comments
 (0)