jobs page

package.json

@@ -28,6 +28,7 @@
     "next-linaria": "^0.11.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "swiper": "^11.0.7",
     "typescript": "4.9.5"
   },
   "devDependencies": {

public/css/ashby-dark.css

@@ -0,0 +1,182 @@
+@font-face {
+  font-family: 'EncodeSans';
+  src: url('https://nomic.foundation/fonts/EncodeSans-Light.woff2') format('woff2'),
+    url('https://nomic.foundation/fonts/EncodeSans-Light.woff') format('woff'),
+    url('https://nomic.foundation/fonts/EncodeSans-Light.ttf') format('ttf');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'EncodeSans';
+  src: url('https://nomic.foundation/fonts/EncodeSans.woff2') format('woff2'),
+    url('https://nomic.foundation/fonts/EncodeSans.woff') format('woff'),
+    url('https://nomic.foundation/fonts/EncodeSans.ttf') format('ttf');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'EncodeSans';
+  src: url('https://nomic.foundation/fonts/EncodeSans-Medium.woff2') format('woff2'),
+    url('https://nomic.foundation/fonts/EncodeSans-Medium.woff') format('woff'),
+    url('https://nomic.foundation/fonts/EncodeSans-Medium.ttf') format('ttf');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+body {
+  background: transparent;
+  font-family: 'EncodeSans';
+  padding: 0 10px;
+}
+[class*='_section_'],
+[class*='_container_'] {
+  max-width: none;
+}
+[class*='_titles_'] {
+  display: none;
+}
+
+[class*='_section_'] {
+  background: transparent;
+}
+
+[class*='_content_'] {
+  padding: 0;
+}
+[class*='_filters_'] {
+  column-gap: 32px;
+}
+
+[class*='_filtersContainer_'] {
+  padding-left: 0;
+  padding-right: 0;
+  background: transparent;
+}
+[class*='_filtersOpen_'] {
+  background: linear-gradient(71deg, #191b22 -21.07%, #20232a 67.73%);
+  color: #ededf0;
+  font-size: 14px;
+  font-weight: 400;
+  border-radius: 32px;
+  letter-spacing: 1.4px;
+  border: 1px solid #515259;
+  box-shadow: 0px 4px 4px 0px rgba(19, 20, 26, 0.5);
+  text-decoration: none;
+  height: 54px;
+  font-family: 'EncodeSans';
+}
+
+[class*='_filter_'] {
+  padding: 12px 30px 12px 20px;
+  background: transparent;
+  border: 1px solid #404146;
+  color: #cacad2;
+  border-radius: 8px;
+}
+[class*='_filter_']:focus-visible {
+  box-shadow: none;
+  border-color: #61626b;
+}
+[class*='_filterActive_'] {
+  box-shadow: none;
+  border-color: #61626b !important;
+  color: #cacad2 !important;
+}
+
+[class*='_filterDownIcon_'] {
+  display: none;
+}
+[class*='_filterIconContainer_'] {
+  right: 16px;
+}
+[class*='_filterIconContainer_']:before {
+  content: '';
+  width: 8px;
+  height: 8px;
+  border-bottom: 1px solid #ededf0;
+  border-right: 1px solid #ededf0;
+  transform: rotate(45deg) translate(-2px, 0);
+}
+
+[class*='_filter_'] option {
+  color: #404146;
+}
+[class*='_filtersHeader_'] {
+  margin-bottom: 9px;
+}
+[class*='_filtersHeader_'] > div {
+  font-size: 16px;
+  letter-spacing: 1.12px;
+}
+[class*='_filtersLabel_'] {
+  font-size: 16px;
+  font-weight: 500;
+  color: #888890;
+}
+
+[class*='_departmentHeading_'] {
+  color: #ededf0;
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 28px;
+  margin-top: 37px;
+  letter-spacing: 1.33px;
+  font-size: 19px;
+}
+
+[class*='_jobPosting_'] {
+  background: transparent;
+  padding: 8px 0 8px;
+  box-shadow: none;
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+  margin-top: 0;
+  margin-bottom: 19px;
+}
+[class*='_jobPosting_']:hover {
+  background: transparent;
+}
+[class*='_jobPosting_'] [class*='_title_'] {
+  color: #ededf0;
+  font-weight: 500;
+  font-size: 16px;
+  letter-spacing: 0.4px;
+}
+
+[class*='_jobPosting_'] [class*='_details_'] {
+  color: #888890;
+  margin-top: 11px;
+  font-size: 16px;
+  letter-spacing: 0.4px;
+}
+
+footer {
+  display: none !important;
+}
+
+@media screen and (max-width: 1279px) {
+  [class*='_departmentHeading_'] {
+    margin-top: 55px;
+  }
+}
+
+@media screen and (max-width: 400px) {
+  [class*='_jobPosting_'] [class*='_title_'],
+  [class*='_jobPosting_'] [class*='_details_'] {
+    font-size: 14px;
+  }
+
+  [class*='_filtersOpen_'] {
+    height: 44px;
+    font-size: 12px;
+  }
+  [class*='_departmentHeading_'] {
+    margin-top: 46px;
+    font-size: 16px;
+  }
+}

public/css/ashby.css

@@ -0,0 +1,175 @@
+@font-face {
+  font-family: 'EncodeSans';
+  src: url('https://nomic.foundation/fonts/EncodeSans-Light.woff2') format('woff2'),
+    url('https://nomic.foundation/fonts/EncodeSans-Light.woff') format('woff'),
+    url('https://nomic.foundation/fonts/EncodeSans-Light.ttf') format('ttf');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'EncodeSans';
+  src: url('https://nomic.foundation/fonts/EncodeSans.woff2') format('woff2'),
+    url('https://nomic.foundation/fonts/EncodeSans.woff') format('woff'),
+    url('https://nomic.foundation/fonts/EncodeSans.ttf') format('ttf');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'EncodeSans';
+  src: url('https://nomic.foundation/fonts/EncodeSans-Medium.woff2') format('woff2'),
+    url('https://nomic.foundation/fonts/EncodeSans-Medium.woff') format('woff'),
+    url('https://nomic.foundation/fonts/EncodeSans-Medium.ttf') format('ttf');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+body {
+  background: transparent;
+  font-family: 'EncodeSans';
+  padding: 0 10px;
+}
+[class*='_section_'],
+[class*='_container_'] {
+  max-width: none;
+}
+[class*='_titles_'] {
+  display: none;
+}
+
+[class*='_section_'] {
+  background: transparent;
+}
+[class*='_content_'] {
+  padding: 0;
+}
+[class*='_filters_'] {
+  column-gap: 32px;
+}
+[class*='_filtersContainer_'] {
+  padding-left: 0;
+  padding-right: 0;
+  background: transparent;
+}
+[class*='_filtersOpen_'] {
+  background: #ffffff;
+  color: #404146;
+  font-size: 14px;
+  font-weight: 400;
+  border-radius: 32px;
+  letter-spacing: 1.4px;
+  border: 1px solid #b0b0b8;
+  box-shadow: 0px 6px 20px 0px rgba(239, 239, 239, 0.8);
+  text-decoration: none;
+  height: 54px;
+  font-family: 'EncodeSans';
+}
+
+[class*='_filter_'] {
+  padding: 12px 30px 12px 20px;
+  background: transparent;
+  height: 48px;
+  border: 1px solid #b0b0b8;
+  color: #515259;
+  border-radius: 8px;
+}
+[class*='_filter_']:focus-visible,
+[class*='_filterActive_'] {
+  box-shadow: none;
+  border-color: #515259 !important;
+  color: #515259 !important;
+}
+[class*='_filterDownIcon_'] {
+  display: none;
+}
+[class*='_filterIconContainer_'] {
+  right: 16px;
+}
+[class*='_filterIconContainer_']:before {
+  content: '';
+  width: 8px;
+  height: 8px;
+  border-bottom: 1px solid #2b2b2f;
+  border-right: 1px solid #2b2b2f;
+  transform: rotate(45deg) translate(-2px, 0);
+}
+[class*='_filter_'] option {
+  color: #515259;
+}
+[class*='_filtersHeader_'] {
+  margin-bottom: 9px;
+}
+[class*='_filtersHeader_'] > div {
+  font-size: 16px;
+  letter-spacing: 1.12px;
+}
+
+[class*='_filtersLabel_'] {
+  font-weight: 500;
+  color: #888890;
+}
+
+[class*='_departmentHeading_'] {
+  color: #2b2b2f;
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 28px;
+  margin-top: 37px;
+  letter-spacing: 1.33px;
+  font-size: 19px;
+}
+[class*='_jobPosting_'] {
+  background: transparent;
+  padding: 8px 0 8px;
+  box-shadow: none;
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+  margin-top: 0;
+  margin-bottom: 19px;
+}
+[class*='_jobPosting_']:hover {
+  background: transparent;
+}
+[class*='_jobPosting_'] [class*='_title_'] {
+  color: #2b2b2f;
+  font-weight: 500;
+  font-size: 16px;
+  letter-spacing: 0.4px;
+}
+
+[class*='_jobPosting_'] [class*='_details_'] {
+  color: #888890;
+  margin-top: 11px;
+  font-size: 16px;
+  letter-spacing: 0.4px;
+}
+
+footer {
+  display: none !important;
+}
+
+@media screen and (max-width: 1279px) {
+  [class*='_departmentHeading_'] {
+    margin-top: 55px;
+  }
+}
+
+@media screen and (max-width: 400px) {
+  [class*='_jobPosting_'] [class*='_title_'],
+  [class*='_jobPosting_'] [class*='_details_'] {
+    font-size: 14px;
+  }
+
+  [class*='_filtersOpen_'] {
+    height: 44px;
+    font-size: 12px;
+  }
+  [class*='_departmentHeading_'] {
+    margin-top: 46px;
+    font-size: 16px;
+  }
+}