Add new open positions page

site/package.json

@@ -12,28 +12,37 @@
   },
   "dependencies": {
     "@hotjar/browser": "^1.0.9",
+    "@nilfoundation/ui-kit": "^2.2.11",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "axios": "^1.4.0",
+    "baseui": "^13.0.0",
     "classnames": "^2.3.2",
     "dayjs": "^1.11.9",
-    "fs": "^0.0.1-security",
     "gsap": "^3.12.1",
+    "html-to-text": "^9.0.5",
     "lodash.debounce": "^4.0.8",
     "lodash.flatten": "^4.4.0",
+    "lodash.uniq": "^4.5.0",
     "lottie-web": "^5.12.2",
     "next": "^13.4.7",
     "prop-types": "^15.8.1",
     "qs": "^6.11.2",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "sanitize-html": "^2.11.0",
+    "styletron-engine-atomic": "^1.6.2",
+    "styletron-react": "^6.1.1"
   },
   "devDependencies": {
     "@biomejs/biome": "1.2.2",
+    "@types/html-to-text": "^9.0.4",
     "@types/lodash.debounce": "^4.0.7",
     "@types/lodash.flatten": "^4.4.7",
+    "@types/lodash.uniq": "^4.5.9",
     "@types/node": "^20.5.7",
     "@types/qs": "^6.9.7",
+    "@types/sanitize-html": "^2.9.5",
     "@types/showdown": "^2.0.1",
     "eslint": "8.16.0",
     "eslint-config-airbnb": "^19.0.4",

site/src/components/common/Button/Button.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps, ElementType, ReactNode, forwardRef, useMemo } from 'react'
+import { ComponentProps, ComponentPropsWithoutRef, ElementType, ReactNode, forwardRef, useMemo } from 'react'
 import Link from 'next/link'
 import cx from 'classnames'
 
@@ -12,7 +12,7 @@ type ButtonElementProps<T extends ElementType = ElementType> = ComponentProps<T>
 type ButtonOwnProps<T extends ElementType = ElementType> = {
   as?: T
   hover?: 'underline' | 'none'
-  href?: string
+  href?: ComponentPropsWithoutRef<typeof Link>['href']
   children?: ReactNode
   className?: string
   onClick?: () => void

site/src/components/common/Card/Card.tsx

@@ -1,14 +1,15 @@
 import Button from 'components/Button'
 import Icon from 'components/Icon'
-import React from 'react'
+import React, { ComponentPropsWithoutRef } from 'react'
 
 import s from './Card.module.scss'
 
 import cx from 'classnames'
+import Link from 'next/link'
 
 type CardProps = {
   children?: React.ReactNode
-  href?: string
+  href?: ComponentPropsWithoutRef<typeof Link>['href']
   onClick?: (e: MouseEvent) => void
   className?: string
 }

site/src/components/common/Icon/icons/Upload.tsx

@@ -0,0 +1,19 @@
+import { memo } from 'react'
+import { SvgIconComponent } from '../SvgIconComponent'
+import { PRIMITIVE_COLORS } from '@nilfoundation/ui-kit'
+
+const Upload: SvgIconComponent = ({ className }) => (
+  <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <rect x="2" y="8" width="1" height="6" fill={PRIMITIVE_COLORS.gray200} />
+    <rect x="13" y="8" width="1" height="6" fill={PRIMITIVE_COLORS.gray200} />
+    <rect transform="rotate(90 14 13)" x="14" y="13" width="1" height="12" fill={PRIMITIVE_COLORS.gray200} />
+    <path
+      d="m8 10-3.3536-3.3535 0.70711-0.70711 2.1464 2.1464v-6.7929h1v6.7929l2.1464-2.1464 0.7071 0.70711-3.3535 3.3535z"
+      clip-rule="evenodd"
+      fill={PRIMITIVE_COLORS.gray200}
+      fill-rule="evenodd"
+    />
+  </svg>
+)
+
+export default memo(Upload)

site/src/components/common/Icon/utils.tsx

@@ -21,6 +21,7 @@ import Cross from './icons/Cross'
 import Squares from './icons/Squares'
 import DevPortal from './icons/DevPortal'
 import { SvgIconComponent } from './SvgIconComponent'
+import Upload from './icons/Upload'
 
 export const getIcon = (name: string): SvgIconComponent | null => {
   switch (name) {
@@ -90,6 +91,9 @@ export const getIcon = (name: string): SvgIconComponent | null => {
     case 'squares':
       return Squares
 
+    case 'upload':
+      return Upload
+
     default:
       return null
   }

site/src/components/common/StickyContainer/StickyContainer.tsx

@@ -9,14 +9,17 @@ import s from './StickyContainer.module.scss'
 type StickyContainerProps = {
   children?: React.ReactNode
   className?: string
+  showWhiteRectangle?: boolean
 }
 
-const StickyContainer = forwardRef<HTMLDivElement, StickyContainerProps>(({ className, children }, ref) => (
-  <div ref={ref} className={cx(s.root, className)}>
-    {children}
-    <WhiteRectangle className={s.whiteRectangle} />
-  </div>
-))
+const StickyContainer = forwardRef<HTMLDivElement, StickyContainerProps>(
+  ({ className, children, showWhiteRectangle = true }, ref) => (
+    <div ref={ref} className={cx(s.root, className)}>
+      {children}
+      {showWhiteRectangle && <WhiteRectangle className={s.whiteRectangle} />}
+    </div>
+  ),
+)
 
 StickyContainer.displayName = 'StickyContainer'
 

site/src/components/pages/OpenJobs/DottedSection/DottedSection.module.scss

@@ -0,0 +1,114 @@
+@import 'src/styles/typography';
+@import 'src/styles/helpers';
+@import 'src/styles/colors';
+@import 'src/styles/mixins';
+@import 'src/styles/paddings';
+
+.container {
+  background: url('/icons/dots.svg'), repeat;
+  display: grid;
+  height: size(620);
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+
+  > div:first-child {
+    grid-column: 1 / 3;
+    grid-row: 1 / 3;
+    background-color: transparent;
+    position: relative;
+  }
+
+  > div:nth-child(3) {
+    grid-column: 1 / 3;
+    grid-row: 3 / 4;
+    background-color: $gray900;
+    position: relative;
+  }
+
+  @include mobile {
+    height: size(240);
+    margin: 0 -12px;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(4, 1fr);
+
+    & > div:first-child {
+      grid-column: 1 / 2;
+      grid-row: 1 / 5;
+    }
+
+    & > div:nth-child(3) {
+      grid-column: 2 / 3;
+      grid-row: 4 / 5;
+      background-color: transparent;
+    }
+  }
+}
+
+.whiteRectBottom {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+
+.whiteRectTop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+.subgrid {
+  grid-column: 3 / 5;
+  grid-row: 2 / 4;
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-template-rows: subgrid;
+  background-color: transparent;
+
+  > div:first-child {
+    grid-column: 1 / 2;
+    grid-row: 1 / 3;
+    background-color: transparent;
+    position: relative;
+  }
+
+  > div:last-child {
+    grid-column: 2 / 3;
+    grid-row: 1 / 3;
+    background-color: $gray900;
+    margin-top: size(280);
+    position: relative;
+  }
+}
+
+.titleWrapper {
+  position: relative;
+  grid-row: 1 / 2;
+  grid-column: 3 / 5;
+  padding: size(30) size(30) size(60);
+  background-color: $gray900;
+
+  @include mobile {
+    padding: 0 size(10) size($spacing32 + 14);
+    grid-row: 1 / 4;
+    grid-column: 2 / 3;
+  }
+}
+
+.title {
+  @include heading-03;
+
+  @include mobile {
+    @include main;
+  }
+}
+
+.link {
+  text-decoration: underline;
+  transition: opacity 0.3s ease;
+
+  @include hover {
+    opacity: 0.5;
+  }
+}

site/src/components/pages/OpenJobs/DottedSection/DottedSection.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import WhiteRectangle from 'components/WhiteRectangle'
+import Button from 'components/Button/Button'
+import s from './DottedSection.module.scss'
+import { useViewport } from 'hooks/useViewport'
+
+const DottedSection = () => {
+  const { isMobile } = useViewport()
+
+  return (
+    <section className={s.container}>
+      <div>
+        <WhiteRectangle className={s.whiteRectTop} />
+        {isMobile && <WhiteRectangle className={s.whiteRectBottom} />}
+      </div>
+      <div className={s.titleWrapper}>
+        <p className={s.title}>
+          Interested in =nil; but don&apos;t&nbsp;see a&nbsp;fitting position? Contact us at{' '}
+          <Button className={s.link} href="mailto:[email protected]">
+            [email protected]
+          </Button>
+        </p>
+        <WhiteRectangle className={s.whiteRectBottom} />
+      </div>
+      <div>
+        <WhiteRectangle className={isMobile ? s.whiteRectBottom : s.whiteRectTop} />
+      </div>
+      {!isMobile && (
+        <div className={s.subgrid}>
+          <div>
+            <WhiteRectangle className={s.whiteRectBottom} />
+          </div>
+          <div>
+            <WhiteRectangle className={s.whiteRectTop} />
+          </div>
+        </div>
+      )}
+    </section>
+  )
+}
+
+export default DottedSection

site/src/components/pages/OpenJobs/Filter/Filter.module.scss

@@ -0,0 +1,35 @@
+@import 'src/styles/typography';
+@import 'src/styles/helpers';
+@import 'src/styles/colors';
+@import 'src/styles/mixins';
+@import 'src/styles/paddings';
+
+.filter {
+    display: grid;
+    gap: 32px;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+
+    @include mobile {
+        grid-template-rows: auto;
+        gap: size(16);
+        padding: size(24) 0;
+
+        & > * {
+            grid-column: span 3;
+        }
+    }
+}
+
+.remoteToggleContainer {
+    grid-column: 1 / 2;
+    grid-row: 2 / 3;
+
+    @include mobile {
+        grid-column: 1 / 4;
+    }
+}
+
+.titleTitleFilterContainer {
+    grid-column: 1 / 4;
+}