blob: 28546f9853381bea3db39badf1e9acf92002d597 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
import * as React from 'react';
import { Container } from 'ts/components/ui/container';
import { Image } from 'ts/components/ui/image';
import { Text } from 'ts/components/ui/text';
import { colors } from 'ts/style/colors';
import { ScreenWidths } from 'ts/types';
export interface MissionProps {
screenWidth: ScreenWidths;
}
export const Mission = (props: MissionProps) => {
const shouldShowImage = props.screenWidth === ScreenWidths.Lg;
const image = <Image src="/images/jobs/world-map.svg" maxWidth="500px" maxHeight="280px" />;
const missionStatementClassName = !shouldShowImage ? 'center' : undefined;
const missionStatement = (
<Container className={missionStatementClassName} maxWidth="388px">
<Text fontFamily="Roboto Mono" fontSize="22px" lineHeight="31px">
Powered by a Diverse<br />Worldwide Community
</Text>
<Container marginTop="32px">
<Text fontSize="14px" lineHeight="2em">
We're a highly technical team with varied backgrounds in engineering, science, business, finance,
and research. While the core team is headquartered in San Francisco, there are 30+ teams building on
0x and hundreds of thousands of participants behind our efforts globally. We're passionate about
open-source software and decentralized technology's potential to act as an equalizing force in the
world.
</Text>
</Container>
</Container>
);
return (
<div
className="flex flex-column items-center py4 px3"
style={{ backgroundColor: colors.jobsPageBackground, color: colors.black }}
>
{shouldShowImage ? (
<Container className="flex items-center" maxWidth="1200px">
{image}
<Container marginLeft="115px">{missionStatement}</Container>
</Container>
) : (
<Container className="flex flex-column items-center">{missionStatement}</Container>
)}
</div>
);
};
|
