48 lines
2.1 KiB
TypeScript
48 lines
2.1 KiB
TypeScript
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>
|
|
);
|
|
};
|