Merge pull request #7 from NikitK-deriv/careers

 Careers Page - Sinbad   Careers Page - Sinbad

src/common/components/containers/index.ts

@@ -1,4 +1,4 @@
 import Flex, { Box } from './flex'
-import { ContactUsButton, Header, Text, ImageContainer } from './main'
+import { ContactUsButton, SeeOurPositions, Header, Text, ImageContainer } from './main'
 
-export { Flex, Box, ContactUsButton, Header, Text, ImageContainer }
+export { Flex, Box, ContactUsButton, SeeOurPositions, Header, Text, ImageContainer }

src/common/components/containers/main.ts

@@ -1,4 +1,6 @@
 import styled from 'styled-components'
+import SeeOurPositionsImage from 'images/common/see-our-positions-image.png'
+import ContactUs from 'images/common/contact-us-button.png'
 
 type HeaderProps = {
     font_size?: string
@@ -12,19 +14,27 @@ type TextProps = {
     width?: string
     text_align?: string
     padding?: string
+    line_height?: string
 }
 type ImageProps = {
     width?: string
     height?: string
 }
 
-export const ContactUsButton = styled.button`
-    width: fit-content;
+export const ContactUsButton = styled.div`
+    width: 90px;
     height: 25px;
-    color: black;
-    background-color: orange;
-    border-radius: 10px;
-    font-size: 10px;
+    background-image: url(${ContactUs});
+    background-repeat: no-repeat;
+    background-size: 90px 25px;
+`
+
+export const SeeOurPositions = styled.div`
+    width: 150px;
+    height: 25px;
+    background-image: url(${SeeOurPositionsImage});
+    background-repeat: no-repeat;
+    background-size: 150px 25px;
 `
 
 export const ImageContainer = styled.img<ImageProps>`
@@ -41,7 +51,7 @@ export const Header = styled.div<HeaderProps>`
 `
 export const Text = styled.div<TextProps>`
     font-size: ${(props) => props.font_size || '16px'};
-    line-height: 18px;
+    line-height: ${(props) => props.line_height || '18px'};
     width: ${(props) => props.width || '300px'};
     text-align: ${(props) => props.text_align || 'left'};
     padding: ${(props) => props.padding || '15px 0'};

src/common/components/containers/table.tsx

@@ -0,0 +1,90 @@
+import React from 'react'
+import styled from 'styled-components'
+
+export type TermProps = {
+    index?: number
+    margin?: string
+    border_left?: boolean
+}
+
+type TermsServiceType = { header?: string; text: string; icon: string }
+
+type OurServiceType = {
+    first?: TermsServiceType
+    other?: TermsServiceType[]
+}
+
+type OurTermsType = {
+    first_column?: TermsServiceType[]
+    second_column?: TermsServiceType[]
+}
+
+export type PBType = {
+    our_terms?: OurTermsType
+}
+
+type DataType = {
+    data?: {
+        our_service?: OurServiceType
+        our_terms?: OurTermsType
+    }
+}
+const TableContainer = styled.div`
+    display: flex;
+    flex-direction: row;
+    padding: 15px;
+`
+
+const TableColumn = styled.div`
+    display: flex;
+    flex-direction: column;
+`
+
+const TermImage = styled.img`
+    width: 40px;
+    height: 40px;
+`
+const TermText = styled.div`
+    font-size: 14px;
+    padding-left: 20px;
+    font-weight: normal;
+    text-align: left;
+`
+
+const Term = styled.div<TermProps>`
+    display: flex;
+    align-items: center;
+    width: 170px;
+    height: 70px;
+    padding: 10px;
+    border-top: ${(props) =>
+        props.index === 0 ? 'unset' : props.index === 4 ? 'unset' : '1px solid gray'};
+    border-bottom: ${(props) =>
+        props.index === 3 ? 'unset' : props.index === 7 ? 'unset' : '1px solid gray'};
+    border-left: ${(props) => (props.border_left ? '1px solid gray' : 'unset')};
+`
+
+const Table = ({ data }: DataType) => {
+    return (
+        <TableContainer>
+            <TableColumn>
+                {data.our_terms.first_column.map((item, index) => (
+                    <Term key={index} index={index}>
+                        <TermImage src={item.icon} />
+                        <TermText>{item.text}</TermText>
+                    </Term>
+                ))}
+            </TableColumn>
+            <TableColumn>
+                {data.our_terms.second_column.map((item, index) => (
+                    <Term key={index} index={index} border_left={true}>
+                        <TermImage src={item.icon} />
+                        <TermText>{item.text}</TermText>
+                    </Term>
+                ))}
+            </TableColumn>
+        </TableContainer>
+    )
+}
+
+export default Table

src/common/components/layout/footer.tsx

@@ -38,7 +38,7 @@ const Footer = () => {
                         <div>
                             <StyledFooterLink to="/">Home | </StyledFooterLink>
                             <StyledFooterLink to="/careers"> Careers | </StyledFooterLink>
-                            <StyledFooterLink to="/openpositions">Open Positions</StyledFooterLink>
+                            <StyledFooterLink to="/open-positions">Open Positions</StyledFooterLink>
                         </div>
                     </PagesWrapper>
                 </DisclaimerWrapper>

src/common/components/layout/header.tsx

@@ -35,8 +35,12 @@ const StyledHeaderLink = styled(Link)`
 `
 
 export const PagesWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 360px;
     color: white;
-    padding-right: 15px;
+    padding-right: 35px;
 `
 
 const Header = () => {
@@ -47,10 +51,10 @@ const Header = () => {
                 <HeaderTitle>Software</HeaderTitle>
             </StyledHeader>
             <PagesWrapper>
-                <StyledHeaderLink to="/">Home | </StyledHeaderLink>
-                <StyledHeaderLink to="/careers"> Careers | </StyledHeaderLink>
-                <StyledHeaderLink to="/openpositions"> Open Positions </StyledHeaderLink>
-                <ContactUsButton> Contact us </ContactUsButton>
+                <StyledHeaderLink to="/">Home </StyledHeaderLink>
+                <StyledHeaderLink to="/careers"> Careers </StyledHeaderLink>
+                <StyledHeaderLink to="/open-positions"> Open Positions </StyledHeaderLink>
+                <ContactUsButton />
             </PagesWrapper>
         </HeaderContainer>
     )

src/common/components/layout/layout.tsx

@@ -3,7 +3,7 @@ import Footer from './footer'
 import Header from './header'
 
 type LayoutType = {
-    children: React.ReactChild
+    children: React.ReactChild | React.ReactChild[]
 }
 
 const Layout = ({ children }: LayoutType) => {

src/images/common/careers/index.ts

@@ -0,0 +1,6 @@
+import Sinbad0 from './sinbad-0.png'
+import Sinbad1 from './sinbad-1.png'
+import Sinbad2 from './sinbad-2.png'
+import Sinbad3 from './sinbad-2.png'
+
+export { Sinbad0, Sinbad1, Sinbad2, Sinbad3 }

src/pages/careers/hiring-process.tsx

@@ -0,0 +1,131 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Flex, Header, ImageContainer, Text } from 'common/components/containers'
+import Random from 'images/svg/random.svg'
+
+const HiringProcessContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 50px;
+`
+
+const StyledHeader = styled(Header)`
+    text-transform: uppercase;
+    padding: 0 0 30px;
+`
+
+const StyledBorder = styled.div`
+    border-top: 2px solid gray;
+    width: 120px;
+`
+
+const StyleFlex = styled(Flex)`
+    padding: 50px 0 80px;
+`
+
+const Card = styled(Flex)`
+    display: flex;
+    justify-content: space-between;
+    max-width: 300px;
+    height: 150px;
+    padding: 10px 20px;
+    box-shadow: rgba(14, 14, 14, 0.1) 0 4px 8px 0;
+    background-color: var(--color-white);
+    margin: 5px;
+    border-radius: 8px;
+`
+
+const CardInfo = styled.div`
+    display: flex;
+    flex-direction: column;
+`
+
+type DataType = {
+    number: number
+    icon: string
+    header: string
+    text: string
+}
+
+const data: DataType[] = [
+    {
+        number: 1,
+        icon: Random,
+        header: 'Send curriculum vitae (CV)',
+        text: 'Send your CV and a cover letter to [email protected] to get started.',
+    },
+    {
+        number: 2,
+        icon: Random,
+        header: 'Self-assessment questionnarie',
+        text: "We'll send you a questionnaire to help us learn more about you.",
+    },
+    {
+        number: 3,
+        icon: Random,
+        header: 'Interview with HR and Manager',
+        text: 'An HR representative and your potential manager will interview you. They will',
+    },
+    {
+        number: 4,
+        icon: Random,
+        header: 'Interview with COO/CTO/CEO',
+        text: "In this round, you'll speak with our COO, CTO, CEO depending on the role.",
+    },
+    {
+        number: 5,
+        icon: Random,
+        header: 'Background and reference check',
+        text: 'Upon approval, our team will do a background and reference check.',
+    },
+    {
+        number: 6,
+        icon: Random,
+        header: 'Job offer',
+        text: "If everything goes well, you'll recieve a job offer. Be ready, as your new adventure with us is about to begin.",
+    },
+    {
+        number: 7,
+        icon: Random,
+        header: "You're one of us",
+        text: "Welcome to Sinbad! You'll recieve your start date and the details of your onboarding programme.",
+    },
+]
+
+const HiringProcess = () => {
+    return (
+        <HiringProcessContainer>
+            <StyledHeader>Our hiring process</StyledHeader>
+            <StyledBorder />
+            <StyleFlex width="1100px" wrap="wrap" jc="flex-start">
+                {data.map(({ icon, header, text, number }, index) => {
+                    return (
+                        <Card key={index} direction="row" ai="center">
+                            <ImageContainer src={icon} width="50px" height="50px" />
+                            <CardInfo>
+                                <Header padding="10px 10px 0" font_size="14px">
+                                    {header}
+                                </Header>
+                                <Text
+                                    font_size="12px"
+                                    line_height="14px"
+                                    padding="10px 10px"
+                                    width="180px"
+                                >
+                                    {text}
+                                </Text>
+                            </CardInfo>
+                            <Text padding="0 0 110px 10px" color="gray" font_size="24px">
+                                {number}
+                            </Text>
+                        </Card>
+                    )
+                })}
+            </StyleFlex>
+        </HiringProcessContainer>
+    )
+}
+
+export default HiringProcess

src/pages/careers/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import WorkWithUs from './work-with-us'
+import PerksBenefits from './perks-benefits'
+import OpenPositions from './open-positions'
+import HiringProcess from './hiring-process'
+import Layout from 'common/components/layout/layout'
+import JoinUs from 'pages/join-us'
+
+const Careers = () => {
+    return (
+        <Layout>
+            <WorkWithUs />
+            <PerksBenefits />
+            <OpenPositions />
+            <HiringProcess />
+            <JoinUs active={3} />
+        </Layout>
+    )
+}
+
+export default Careers