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

Commit b94fa08

Browse files
NikitK-derivNikitK-deriv
committed
feat: careers page skeleton
1 parent c6d057c commit b94fa08

22 files changed

+576
-112
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

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

+124
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
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+
const data = [
46+
{
47+
number: 1,
48+
icon: Random,
49+
header: 'Send curriculum vitae (CV)',
50+
text: 'Send your CV and a cover letter to [email protected] to get started.',
51+
},
52+
{
53+
number: 2,
54+
icon: Random,
55+
header: 'Self-assessment questionnarie',
56+
text: "We'll send you a questionnaire to help us learn more about you.",
57+
},
58+
{
59+
number: 3,
60+
icon: Random,
61+
header: 'Interview with HR and Manager',
62+
text: 'An HR representative and your potential manager will interview you. They will',
63+
},
64+
{
65+
number: 4,
66+
icon: Random,
67+
header: 'Interview with COO/CTO/CEO',
68+
text: "In this round, you'll speak with our COO, CTO, CEO depending on the role.",
69+
},
70+
{
71+
number: 5,
72+
icon: Random,
73+
header: 'Background and reference check',
74+
text: 'Upon approval, our team will do a background and reference check.',
75+
},
76+
{
77+
number: 6,
78+
icon: Random,
79+
header: 'Job offer',
80+
text: "If everything goes well, you'll recieve a job offer. Be ready, as your new adventure with us is about to begin.",
81+
},
82+
{
83+
number: 7,
84+
icon: Random,
85+
header: "You're one of us",
86+
text: "Welcome to Sinbad! You'll recieve your start date and the details of your onboarding programme.",
87+
},
88+
]
89+
90+
const HiringProcess = () => {
91+
return (
92+
<HiringProcessContainer>
93+
<StyledHeader>Our hiring process</StyledHeader>
94+
<StyledBorder />
95+
<StyleFlex width="1100px" wrap="wrap" jc="flex-start">
96+
{data.map(({ icon, header, text, number }, index) => {
97+
return (
98+
<Card key={index} direction="row" ai="center">
99+
<ImageContainer src={icon} width="50px" height="50px" />
100+
<CardInfo>
101+
<Header padding="10px 10px 0" font_size="14px">
102+
{header}
103+
</Header>
104+
<Text
105+
font_size="12px"
106+
line_height="14px"
107+
padding="10px 10px"
108+
width="180px"
109+
>
110+
{text}
111+
</Text>
112+
</CardInfo>
113+
<Text padding="0 0 110px 10px" color="gray" font_size="24px">
114+
{number}
115+
</Text>
116+
</Card>
117+
)
118+
})}
119+
</StyleFlex>
120+
</HiringProcessContainer>
121+
)
122+
}
123+
124+
export default HiringProcess

‎src/pages/careers/index.tsx

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
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+
<>
13+
<WorkWithUs />
14+
<PerksBenefits />
15+
<OpenPositions />
16+
<HiringProcess />
17+
<JoinUs active={3} />
18+
</>
19+
</Layout>
20+
)
21+
}
22+
23+
export default Careers

0 commit comments

Comments
 (0)