Merge pull request #685 from 0xProject/feature/website/jobs-page

Jobs page

1 files changed, 56 insertions, 0 deletions

diff --git a/packages/website/ts/pages/jobs/mission.tsx b/packages/website/ts/pages/jobs/mission.tsx
new file mode 100644
index 000000000..f7f874e04
--- /dev/null
+++ b/packages/website/ts/pages/jobs/mission.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react';
+
+import { colors } from 'ts/style/colors';
+import { ScreenWidths } from 'ts/types';
+
+export interface MissionProps {
+    screenWidth: ScreenWidths;
+}
+export const Mission = (props: MissionProps) => {
+    const isSmallScreen = props.screenWidth === ScreenWidths.Sm;
+    const image = (
+        <div className="col lg-col-6 md-col-6 col-12 sm-py2 px2 center">
+            <img src="/images/jobs/map.png" style={{ width: '100%' }} />
+        </div>
+    );
+    const missionStatementStyle = !isSmallScreen ? { height: 364, lineHeight: '364px' } : undefined;
+    const missionStatement = (
+        <div className="col lg-col-6 md-col-6 col-12 center" style={missionStatementStyle}>
+            <div
+                className="mx-auto inline-block align-middle"
+                style={{ maxWidth: 385, lineHeight: '44px', textAlign: 'center' }}
+            >
+                <div className="h2 sm-center sm-pt3" style={{ fontFamily: 'Roboto Mono' }}>
+                    Our Mission
+                </div>
+                <div
+                    className="pb2 lg-pt2 md-pt2 sm-pt3 sm-px3 h4 sm-center"
+                    style={{ fontFamily: 'Roboto', lineHeight: 2, maxWidth: 537 }}
+                >
+                    We believe a system can exist in which all world value is accessible to anyone, anywhere, regardless
+                    of where you happen to be born.
+                </div>
+            </div>
+        </div>
+    );
+    return (
+        <div
+            className="container lg-py4 md-py4"
+            style={{ backgroundColor: colors.jobsPageBackground, color: colors.black }}
+        >
+            <div className="mx-auto clearfix sm-py4">
+                {isSmallScreen ? (
+                    <div>
+                        {missionStatement}
+                        {image}
+                    </div>
+                ) : (
+                    <div>
+                        {image}
+                        {missionStatement}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};