aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/pages
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/pages')
-rw-r--r--packages/website/ts/pages/jobs/benefits.tsx59
-rw-r--r--packages/website/ts/pages/jobs/join_0x.tsx4
-rw-r--r--packages/website/ts/pages/jobs/mission.tsx8
3 files changed, 48 insertions, 23 deletions
diff --git a/packages/website/ts/pages/jobs/benefits.tsx b/packages/website/ts/pages/jobs/benefits.tsx
index 87412ed22..863423285 100644
--- a/packages/website/ts/pages/jobs/benefits.tsx
+++ b/packages/website/ts/pages/jobs/benefits.tsx
@@ -6,17 +6,21 @@ 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 { media } from 'ts/style/media';
+import { styled } from 'ts/style/theme';
import { ScreenWidths } from 'ts/types';
import { constants } from 'ts/utils/constants';
const BENEFITS = [
- 'Comprehensive insurance. Medical, dental, and vision coverage for you and your family.',
- 'Unlimited vacation. Three weeks per year minimum.',
- 'Flexible hours and liberal work-from-home-policy.',
- 'Relocation Assistance.',
- 'Whole team offsites and community / hackathon events (often international).',
- 'Monthly transportation and phone reimbursement.',
- 'Meals and snacks provided in-office daily.',
+ 'Comprehensive insurance (medical, dental, and vision)',
+ 'Unlimited vacation (three weeks per year minimum)',
+ 'Meals and snacks provided in-office daily',
+ 'Flexible hours and liberal work-from-home-policy',
+ 'Supportive remote working environment',
+ 'Transportation, phone, and wellness expense',
+ 'Relocation assistance',
+ 'Optional team excursions (fully paid, often international)',
+ 'Competitive salary and cryptocurrency-based compensation',
];
interface Value {
@@ -45,11 +49,11 @@ export interface BenefitsProps {
export const Benefits = (props: BenefitsProps) => {
const isSmallScreen = props.screenWidth === ScreenWidths.Sm;
return (
- <Container className="flex flex-column items-center py4 sm-px3" backgroundColor={colors.white}>
+ <Container className="flex flex-column items-center py4 px3" backgroundColor={colors.white}>
{!isSmallScreen ? (
- <Container className="flex" maxWidth="800px">
+ <Container className="flex" maxWidth="1200px">
<BenefitsList />
- <Container marginLeft="215px">
+ <Container marginLeft="120px">
<ValuesList />
</Container>
</Container>
@@ -73,14 +77,21 @@ const Header: React.StatelessComponent = ({ children }) => (
</Container>
);
-const BenefitsList = () => {
+interface BenefitsListProps {
+ className?: string;
+}
+const PlainBenefitsList: React.StatelessComponent<BenefitsListProps> = ({ className }) => {
return (
- <Container maxWidth="360px">
+ <Container className={className}>
<Header>Benefits</Header>
{_.map(BENEFITS, benefit => <BenefitItem key={benefit} description={benefit} />)}
</Container>
);
};
+const BenefitsList = styled(PlainBenefitsList)`
+ transform: translateY(30px);
+`;
+
interface BenefitItemProps {
description: string;
}
@@ -98,25 +109,39 @@ const BenefitItem: React.StatelessComponent<BenefitItemProps> = ({ description }
</Container>
);
-const ValuesList = () => {
+interface ValuesListProps {
+ className?: string;
+}
+const PlainValuesList: React.StatelessComponent<ValuesListProps> = ({ className }) => {
return (
- <Container maxWidth="360px">
+ <Container className={className} maxWidth="270px">
<Header>Our Values</Header>
{_.map(VALUES, value => <ValueItem key={value.text} {...value} />)}
<Text fontSize="14px" lineHeight="26px">
- We care deeply about our mission and encourage you to{' '}
+ We care deeply about our culture and values, and encourage you to{' '}
<a
- style={{ color: colors.mediumBlue }}
+ style={{ color: colors.mediumBlue, textDecoration: 'none' }}
target="_blank"
href={constants.URL_MISSION_AND_VALUES_BLOG_POST}
>
- read more here
+ read more on our blog
</a>.
</Text>
</Container>
);
};
+const ValuesList = styled(PlainValuesList)`
+ border-color: ${colors.beigeWhite};
+ border-radius: 7px;
+ border-width: 1px;
+ border-style: solid;
+ padding-left: 38px;
+ padding-right: 38px;
+ padding-top: 28px;
+ padding-bottom: 28px;
+`;
+
type ValueItemProps = Value;
const ValueItem: React.StatelessComponent<ValueItemProps> = ({ iconSrc, text }) => {
return (
diff --git a/packages/website/ts/pages/jobs/join_0x.tsx b/packages/website/ts/pages/jobs/join_0x.tsx
index f214f442a..6159c26a2 100644
--- a/packages/website/ts/pages/jobs/join_0x.tsx
+++ b/packages/website/ts/pages/jobs/join_0x.tsx
@@ -20,10 +20,10 @@ export const Join0x = (props: Join0xProps) => (
className="mx-auto inline-block align-middle py4"
style={{ lineHeight: '44px', textAlign: 'center', position: 'relative' }}
>
- <Container className="sm-hide xs-hide" position="absolute" left="100%" marginLeft="80px">
+ <Container className="sm-hide xs-hide md-hide" position="absolute" left="100%" marginLeft="80px">
<Image src="images/jobs/hero-dots-right.svg" width="400px" />
</Container>
- <Container className="sm-hide xs-hide" position="absolute" right="100%" marginRight="80px">
+ <Container className="sm-hide xs-hide md-hide" position="absolute" right="100%" marginRight="80px">
<Image src="images/jobs/hero-dots-left.svg" width="400px" />
</Container>
<div className="h2 sm-center sm-pt3" style={{ fontFamily: 'Roboto Mono' }}>
diff --git a/packages/website/ts/pages/jobs/mission.tsx b/packages/website/ts/pages/jobs/mission.tsx
index e1a9880d6..28546f985 100644
--- a/packages/website/ts/pages/jobs/mission.tsx
+++ b/packages/website/ts/pages/jobs/mission.tsx
@@ -10,9 +10,9 @@ export interface MissionProps {
screenWidth: ScreenWidths;
}
export const Mission = (props: MissionProps) => {
- const isSmallScreen = props.screenWidth === ScreenWidths.Sm;
+ const shouldShowImage = props.screenWidth === ScreenWidths.Lg;
const image = <Image src="/images/jobs/world-map.svg" maxWidth="500px" maxHeight="280px" />;
- const missionStatementClassName = isSmallScreen ? 'center' : undefined;
+ const missionStatementClassName = !shouldShowImage ? 'center' : undefined;
const missionStatement = (
<Container className={missionStatementClassName} maxWidth="388px">
<Text fontFamily="Roboto Mono" fontSize="22px" lineHeight="31px">
@@ -31,10 +31,10 @@ export const Mission = (props: MissionProps) => {
);
return (
<div
- className="flex flex-column items-center py4 sm-px3"
+ className="flex flex-column items-center py4 px3"
style={{ backgroundColor: colors.jobsPageBackground, color: colors.black }}
>
- {!isSmallScreen ? (
+ {shouldShowImage ? (
<Container className="flex items-center" maxWidth="1200px">
{image}
<Container marginLeft="115px">{missionStatement}</Container>