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

Commit c6d057c

Browse files
prince-derivprince-deriv
authored
Merge pull request #6 from NikitK-deriv/open-positions
Open Positions Page - Sinbad
2 parents 6293c8c + 8cc30f0 commit c6d057c

File tree

10 files changed

+352
-29
lines changed

10 files changed

+352
-29
lines changed

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

+12-12
Original file line numberDiff line numberDiff line change
@@ -54,28 +54,28 @@ const generateResponsiveStyles = (stylesGenerator) => (props) => {
5454
const responsiveStyles = generateResponsiveStyles(flexStyles)
5555

5656
export const Box = styled.div<FlexBoxProps>`
57-
width: ${(props) => (props.width ? props.width : '')};
58-
height: ${(props) => (props.height ? props.height : '')};
59-
min-height: ${(props) => (props.min_height ? props.min_height : '')};
60-
max-width: ${(props) => (props.max_width ? props.max_width : '')};
61-
position: ${(props) => (props.position ? props.position : '')};
57+
width: ${(props) => props.width || ''};
58+
height: ${(props) => props.height || ''};
59+
min-height: ${(props) => props.min_height || ''};
60+
max-width: ${(props) => props.max_width || ''};
61+
position: ${(props) => props.position || ''};
6262
background: ${(props) => (props.background || props.bg ? props.background || props.bg : '')};
6363
${responsiveStyles}
6464
`
6565

6666
const Flex = styled(Box)<FlexBoxProps>`
6767
display: flex;
68-
width: ${(props) => (props.width ? props.width : '100%')};
69-
height: ${(props) => (props.height ? props.height : '100%')};
68+
width: ${(props) => props.width || '100%'};
69+
height: ${(props) => props.height || '100%'};
7070
flex-wrap: ${(props) => (props.wrap || props.fw ? props.wrap || props.fw : '')};
71-
justify-content: ${(props) => (props.jc ? props.jc : 'center')};
72-
align-items: ${(props) => (props.ai ? props.ai : '')};
71+
justify-content: ${(props) => props.jc || 'center'};
72+
align-items: ${(props) => props.ai || ''};
7373
flex-direction: ${(props) => (props.direction || props.fd ? props.direction || props.fd : '')};
7474
7575
@media ${device.tablet} {
76-
flex-direction: ${(props) => (props.tablet_direction ? props.tablet_direction : '')};
77-
align-items: ${(props) => (props.tablet_ai ? props.tablet_ai : '')};
78-
justify-content: ${(props) => (props.tablet_jc ? props.tablet_jc : '')};
76+
flex-direction: ${(props) => props.tablet_direction || ''};
77+
align-items: ${(props) => props.tablet_ai || ''};
78+
justify-content: ${(props) => props.tablet_jc || ''};
7979
flex-wrap: ${(props) => props.tablet_fw};
8080
}
8181

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

+15-13
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ type HeaderProps = {
44
font_size?: string
55
font_weight?: string
66
color?: string
7+
text_align?: string
8+
padding?: string
79
}
810
type TextProps = {
911
font_size?: string
@@ -26,22 +28,22 @@ export const ContactUsButton = styled.button`
2628
`
2729

2830
export const ImageContainer = styled.img<ImageProps>`
29-
width: ${(props) => (props.width ? props.width : '400px')};
30-
height: ${(props) => (props.height ? props.height : '100%')};
31+
width: ${(props) => props.width || '400px'};
32+
height: ${(props) => props.height || '100%'};
3133
`
3234

3335
export const Header = styled.div<HeaderProps>`
34-
font-size: ${(props) => (props.font_size ? props.font_size : '24px')};
35-
font-weight: ${(props) => (props.font_weight ? props.font_weight : 'bold')};
36-
text-align: left;
37-
padding: 10px 40px 10px 0;
38-
color: ${(props) => (props.color ? props.color : 'black')};
36+
font-size: ${(props) => props.font_size || '24px'};
37+
font-weight: ${(props) => props.font_weight || 'bold'};
38+
text-align: ${(props) => props.text_align || 'left'};
39+
padding: ${(props) => props.padding || '10px 40px 10px 0'};
40+
color: ${(props) => props.color || 'black'};
3941
`
4042
export const Text = styled.div<TextProps>`
41-
font-size: ${(props) => (props.font_size ? props.font_size : '16px')};
42-
line-height: 22px;
43-
width: ${(props) => (props.width ? props.width : '300px')};
44-
text-align: ${(props) => (props.text_align ? props.text_align : 'left')};
45-
padding: ${(props) => (props.padding ? props.padding : '15px 0')};
46-
color: ${(props) => (props.color ? props.color : 'black')};
43+
font-size: ${(props) => props.font_size || '16px'};
44+
line-height: 18px;
45+
width: ${(props) => props.width || '300px'};
46+
text-align: ${(props) => props.text_align || 'left'};
47+
padding: ${(props) => props.padding || '15px 0'};
48+
color: ${(props) => props.color || 'black'};
4749
`

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const StyledHeader = styled.div`
2424

2525
const HeaderTitle = styled.div<HeaderProps>`
2626
color: black;
27-
font-weight: ${(props) => (props.size ? props.size : 'normal')};
27+
font-weight: ${(props) => props.size || 'normal'};
2828
font-size: 24px;
2929
padding-left: 15px;
3030
`

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

1.53 MB
Loading

‎src/images/svg/right-arrow.svg

+43
Loading

‎src/pages/home/join-us.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@ const JoinUs = ({ active }: IconProps) => {
4343
<Header color="red">Sinbad Software</Header>
4444
<Header font_size="28px">JOIN OUR TEAM!</Header>
4545
<Text>
46-
Is your dream to build great products using leading technologies? Join Sinbad
47-
Software, where creativity, talent, and a passion for challenges come together
46+
To apply for this position please send us your CV with a cover letter to
47+
[email protected]
4848
</Text>
4949
<ContactUsButton>SEE OUR OPEN POSITIONS</ContactUsButton>
5050
</JoinUsInfo>

‎src/pages/home/welcome.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const Card = styled(Flex)<StyledProps>`
4545
padding: 32px 44px 32px 32px;
4646
box-shadow: rgba(14, 14, 14, 0.1) 0 4px 8px 0;
4747
background-color: var(--color-white);
48-
margin: ${(props) => (props.margin ? props.margin : '0 40px 40px 0')};
48+
margin: ${(props) => props.margin || '0 40px 40px 0'};
4949
border-radius: 8px;
5050
justify-content: flex-end;
5151

‎src/pages/positions/index.tsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react'
2+
import OpenPositions from './open-positions'
3+
import JoinUs from './join-us'
4+
import Layout from 'common/components/layout/layout'
5+
6+
const Positions = () => {
7+
return (
8+
<Layout>
9+
<>
10+
<OpenPositions />
11+
<JoinUs />
12+
</>
13+
</Layout>
14+
)
15+
}
16+
17+
export default Positions

‎src/pages/positions/join-us.tsx

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React from 'react'
2+
import styled from 'styled-components'
3+
import Sinbad0 from 'images/common/sinbad-positions-0.png'
4+
import { Header, ImageContainer, Text } from 'common/components/containers/main'
5+
import Dashboard from 'images/common/dashboard.png'
6+
7+
const JoinUsContainer = styled.div`
8+
display: flex;
9+
justify-content: flex-start;
10+
align-items: center;
11+
width: 100%;
12+
height: 400px;
13+
background-color: #f7cd43;
14+
`
15+
16+
const JoinUsInfo = styled.div`
17+
display: flex;
18+
flex-direction: column;
19+
flex-wrap: wrap;
20+
padding-left: 240px;
21+
`
22+
23+
const TechDashboard = styled.img`
24+
width: 600px;
25+
height: 400px;
26+
padding: 20px 0;
27+
`
28+
29+
const JoinUs = () => {
30+
return (
31+
<JoinUsContainer>
32+
<>
33+
<ImageContainer src={Sinbad0} />
34+
<TechDashboard src={Dashboard} />
35+
</>
36+
<JoinUsInfo>
37+
<Header color="red" padding="5px 0">
38+
Sinbad Software
39+
</Header>
40+
41+
<Header font_size="28px">JOIN OUR TEAM!</Header>
42+
<Text padding="5px 0">
43+
To apply for this position please send us your CV with a cover letter to
44+
[email protected]
45+
</Text>
46+
</JoinUsInfo>
47+
</JoinUsContainer>
48+
)
49+
}
50+
51+
export default JoinUs

0 commit comments

Comments
 (0)