From 7cfb1d17b167c7cd7c2e6716aca7a02ec21558fe Mon Sep 17 00:00:00 2001
From: lukicenturi <lukicenturi@gmail.com>
Date: Thu, 20 Jul 2023 14:42:26 +0700
Subject: [PATCH] feat: updates jobs section design

Co-authored-by: Konstantinos Paparas <kelsos86@gmail.com>
---
 .../account/home/AccountInformation.vue       |  4 +-
 components/account/home/ChangePassword.vue    | 12 +--
 components/account/home/DangerZone.vue        |  4 +-
 components/content/ProseA.vue                 |  2 +-
 components/content/ProseH2.vue                |  2 +-
 components/content/ProseH5.vue                |  5 ++
 components/content/ProseH6.vue                |  5 ++
 components/content/ProseHr.vue                |  3 +
 components/content/ProseLi.vue                | 16 ++++
 components/content/ProseP.vue                 | 35 +-------
 components/content/ProseUl.vue                | 35 +-------
 components/header/PageHeader.vue              |  2 +-
 components/jobs/JobDescription.vue            | 25 ++++++
 components/jobs/JobTag.vue                    | 32 +++++++
 composables/markdown.ts                       | 56 +++++++-----
 content/jobs/1.backend.md                     | 40 +++++----
 content/jobs/2.frontend.md                    | 38 ++++++---
 content/jobs/3.ui-ux.md                       | 30 ++++---
 layouts/jobs.vue                              | 68 ++++++---------
 locales/en.json                               |  7 ++
 middleware/redirects.ts                       | 11 ---
 modules/ui-library/runtime/plugin.ts          |  8 ++
 nuxt.config.ts                                |  7 +-
 pages/impressum.vue                           | 11 +--
 pages/jobs/[id].vue                           | 85 ++++++++++++++++++-
 pages/jobs/index.vue                          | 53 ++++++++++--
 pages/privacy-policy.vue                      | 10 ++-
 pages/tos.vue                                 | 10 ++-
 server/api/_sitemap-urls.ts                   | 13 +--
 utils/constants.ts                            |  7 ++
 30 files changed, 416 insertions(+), 220 deletions(-)
 create mode 100644 components/content/ProseH5.vue
 create mode 100644 components/content/ProseH6.vue
 create mode 100644 components/content/ProseHr.vue
 create mode 100644 components/content/ProseLi.vue
 create mode 100644 components/jobs/JobDescription.vue
 create mode 100644 components/jobs/JobTag.vue
 delete mode 100644 middleware/redirects.ts

diff --git a/components/account/home/AccountInformation.vue b/components/account/home/AccountInformation.vue
index c7577313..b86bcca4 100644
--- a/components/account/home/AccountInformation.vue
+++ b/components/account/home/AccountInformation.vue
@@ -203,7 +203,9 @@ const css = useCssModule();
       @blur="v$.country.$touch()"
     />
 
-    <div class="mt-8">
+    <div class="my-5 border-t border-grey-50" />
+
+    <div class="flex justify-end mt-8">
       <RuiButton size="lg" :loading="loading" color="primary" @click="update()">
         Update
       </RuiButton>
diff --git a/components/account/home/ChangePassword.vue b/components/account/home/ChangePassword.vue
index 0c27907e..80d0bfb8 100644
--- a/components/account/home/ChangePassword.vue
+++ b/components/account/home/ChangePassword.vue
@@ -112,7 +112,12 @@ const css = useCssModule();
       autocomplete="new-password"
     />
 
-    <div :class="css.row" class="mt-8">
+    <div class="my-5 border-t border-grey-50" />
+
+    <div class="flex justify-end mt-8">
+      <span v-if="success" :class="css.success">
+        <CheckMarkIcon /> Your password has been changed.
+      </span>
       <RuiButton
         :disabled="v$.$invalid"
         size="lg"
@@ -122,9 +127,6 @@ const css = useCssModule();
       >
         Change Password
       </RuiButton>
-      <span v-if="success" :class="css.success">
-        <CheckMarkIcon /> Your password has been changed.
-      </span>
     </div>
   </CardContainer>
 </template>
@@ -135,6 +137,6 @@ const css = useCssModule();
 }
 
 .success {
-  @apply flex flex-row ml-4 mt-6 text-rui-grey-800 transition duration-300 ease-in-out;
+  @apply flex flex-row mr-4 mt-6 text-rui-grey-800 transition duration-300 ease-in-out;
 }
 </style>
diff --git a/components/account/home/DangerZone.vue b/components/account/home/DangerZone.vue
index c59320be..0728c334 100644
--- a/components/account/home/DangerZone.vue
+++ b/components/account/home/DangerZone.vue
@@ -34,11 +34,11 @@ const css = useCssModule();
 
 <template>
   <CardContainer warning>
-    <TextHeading>
+    <TextHeading class="mt-4" no-margin>
       <div class="text-rui-error">Delete account</div>
     </TextHeading>
 
-    <p class="text-rui-text-secondary">
+    <p class="text-rui-text-secondary mt-1">
       Proceeding will completely delete your account data. If you proceed you
       will not be able to recover your account!
     </p>
diff --git a/components/content/ProseA.vue b/components/content/ProseA.vue
index b9e696ba..aefd5d3c 100644
--- a/components/content/ProseA.vue
+++ b/components/content/ProseA.vue
@@ -23,6 +23,6 @@ const css = useCssModule();
 
 <style module lang="scss">
 .link {
-  @apply hover:text-rui-text-secondary text-rui-primary;
+  @apply text-rui-primary hover:text-rui-primary-darker font-medium;
 }
 </style>
diff --git a/components/content/ProseH2.vue b/components/content/ProseH2.vue
index 89d7e420..ecaaae81 100644
--- a/components/content/ProseH2.vue
+++ b/components/content/ProseH2.vue
@@ -28,7 +28,7 @@ const css = useCssModule();
 
 <style lang="scss" module>
 .heading {
-  @apply text-rui-text font-bold mt-6;
+  @apply text-rui-text font-bold mt-8 mb-6;
   @apply text-[1.05rem] sm:text-[1.2rem] md:text-[1.35rem] 2xl:text-[1.5rem];
   @apply leading-[1.4rem] sm:leading-[1.6rem] md:leading-[1.8rem] 2xl:leading-[2.2rem];
 }
diff --git a/components/content/ProseH5.vue b/components/content/ProseH5.vue
new file mode 100644
index 00000000..cb06e81e
--- /dev/null
+++ b/components/content/ProseH5.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="text-h5 my-6">
+    <slot />
+  </div>
+</template>
diff --git a/components/content/ProseH6.vue b/components/content/ProseH6.vue
new file mode 100644
index 00000000..8d163771
--- /dev/null
+++ b/components/content/ProseH6.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="text-h6 my-4 font-medium">
+    <slot />
+  </div>
+</template>
diff --git a/components/content/ProseHr.vue b/components/content/ProseHr.vue
new file mode 100644
index 00000000..182681b5
--- /dev/null
+++ b/components/content/ProseHr.vue
@@ -0,0 +1,3 @@
+<template>
+  <div class="border-t border-black/[0.12] my-6" />
+</template>
diff --git a/components/content/ProseLi.vue b/components/content/ProseLi.vue
new file mode 100644
index 00000000..f95bfe93
--- /dev/null
+++ b/components/content/ProseLi.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { RuiIcon } from '@rotki/ui-library';
+</script>
+
+<template>
+  <li class="py-1 inline-flex w-full">
+    <RuiIcon
+      name="arrow-drop-right-line"
+      class="mr-2 text-rui-text-secondary min-w-[1.5rem]"
+      size="24"
+    />
+    <span class="py-0.5">
+      <slot />
+    </span>
+  </li>
+</template>
diff --git a/components/content/ProseP.vue b/components/content/ProseP.vue
index 35f6ba27..5820fc4e 100644
--- a/components/content/ProseP.vue
+++ b/components/content/ProseP.vue
@@ -1,38 +1,5 @@
-<script setup lang="ts">
-withDefaults(
-  defineProps<{
-    small?: boolean;
-  }>(),
-  {
-    small: false,
-  },
-);
-
-const css = useCssModule();
-</script>
-
 <template>
-  <p
-    :class="[
-      css.text,
-      {
-        [css.small]: small,
-      },
-    ]"
-  >
+  <p class="text-rui-text-secondary text-body-1 mb-4">
     <slot />
   </p>
 </template>
-
-<style lang="scss" module>
-.text {
-  @apply text-rui-grey-800 text-justify mt-4;
-  @apply text-[0.7875rem] sm:text-[0.9rem] md:text-[1.0125rem] 2xl:text-[1.2375rem];
-  @apply leading-[1.1375rem] sm:leading-[1.3rem] md:leading-[1.4625rem] 2xl:leading-[1.7875rem];
-}
-
-.small {
-  @apply text-[0.6125rem] sm:text-[0.7rem] md:text-[0.7875rem] 2xl:text-[0.9625rem];
-  @apply leading-[0.875rem] sm:leading-4 md:leading-[1.125rem] 2xl:leading-[1.375rem];
-}
-</style>
diff --git a/components/content/ProseUl.vue b/components/content/ProseUl.vue
index 1f68f431..24123381 100644
--- a/components/content/ProseUl.vue
+++ b/components/content/ProseUl.vue
@@ -1,38 +1,5 @@
-<script setup lang="ts">
-withDefaults(
-  defineProps<{
-    small?: boolean;
-  }>(),
-  {
-    small: false,
-  },
-);
-
-const css = useCssModule();
-</script>
-
 <template>
-  <ul
-    :class="[
-      css.list,
-      {
-        [css.small]: small,
-      },
-    ]"
-  >
+  <ul class="leading-5 text-body-2">
     <slot />
   </ul>
 </template>
-
-<style lang="scss" module>
-.list {
-  @apply pl-8 list-disc mt-4;
-  @apply text-[0.7875rem] sm:text-[0.9rem] md:text-[1.0125rem] 2xl:text-[1.2375rem];
-  @apply leading-[1.1375rem] sm:leading-[1.3rem] md:leading-[1.4625rem] 2xl:leading-[1.7875rem];
-}
-
-.small {
-  @apply text-[0.6125rem] sm:text-[0.7rem] md:text-[0.7875rem] 2xl:text-[0.9625rem];
-  @apply leading-[0.875rem] sm:leading-4 md:leading-[1.125rem] 2xl:leading-[1.375rem];
-}
-</style>
diff --git a/components/header/PageHeader.vue b/components/header/PageHeader.vue
index 9a743000..c9829ff5 100644
--- a/components/header/PageHeader.vue
+++ b/components/header/PageHeader.vue
@@ -23,7 +23,7 @@ const logout = async () => {
       <div>
         <NavigationMenu />
       </div>
-      <div class="flex items-center space-x-2 ml-6">
+      <div class="flex items-center space-x-2 ml-6 lg:ml-0">
         <NuxtLink to="/home">
           <RuiButton rounded color="primary">
             {{ t('page_header.manage_premium') }}
diff --git a/components/jobs/JobDescription.vue b/components/jobs/JobDescription.vue
new file mode 100644
index 00000000..c40aadd7
--- /dev/null
+++ b/components/jobs/JobDescription.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+defineProps<{
+  job: {
+    title?: string;
+    description?: string;
+    tags?: string[];
+  };
+}>();
+</script>
+
+<template>
+  <div
+    class="p-4 rounded border border-rui-grey-300 space-y-4 hover:bg-rui-grey-100"
+  >
+    <div class="text-body-1">
+      {{ job.title }}
+    </div>
+    <div class="text-body-2 text-rui-text-secondary">
+      {{ job.description }}
+    </div>
+    <div v-if="job.tags && job.tags.length > 0" class="space-x-2.5">
+      <JobTag v-for="tag in job.tags" :key="tag" :tag="tag" />
+    </div>
+  </div>
+</template>
diff --git a/components/jobs/JobTag.vue b/components/jobs/JobTag.vue
new file mode 100644
index 00000000..dcbae097
--- /dev/null
+++ b/components/jobs/JobTag.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { get } from '@vueuse/core';
+
+const props = defineProps<{
+  tag: string;
+}>();
+
+const { tag } = toRefs(props);
+
+const icon: ComputedRef<string> = computed(() => {
+  const value = get(tag);
+  return (
+    {
+      'full-time': 'timer-2-line',
+      'part-time': 'timer-2-line',
+      remote: 'user-location-line',
+    }[value] ?? ''
+  );
+});
+</script>
+
+<template>
+  <RuiChip
+    class="capitalize hover:!bg-transparent py-1 !min-h-0"
+    :label="tag"
+    variant="outlined"
+  >
+    <template v-if="icon" #prepend>
+      <RuiIcon :name="icon" class="p-0.5" />
+    </template>
+  </RuiChip>
+</template>
diff --git a/composables/markdown.ts b/composables/markdown.ts
index e04dfbae..8fa2eb12 100644
--- a/composables/markdown.ts
+++ b/composables/markdown.ts
@@ -1,13 +1,16 @@
 import { get, set } from '@vueuse/core';
+import { groupBy } from 'graphql/jsutils/groupBy';
 import type { MarkdownParsedContent } from '@nuxt/content/dist/runtime/types';
 import type { ComputedRef, Ref } from 'vue';
-import { logger } from '~/utils/logger';
 import { replacePathPrefix } from '~/utils/api';
-import { GITHUB_CONTENT_PREFIX } from '~/utils/constants';
+import { CONTENT_PREFIX, LOCAL_CONTENT_PREFIX } from '~/utils/constants';
+import { logger } from '~/utils/logger';
 
-interface JobMarkdownContent extends MarkdownParsedContent {
+export interface JobMarkdownContent extends MarkdownParsedContent {
   link?: string;
   open: boolean;
+  category: string;
+  tags: string[];
 }
 
 /**
@@ -18,6 +21,12 @@ export const useMarkdownContent = () => {
   const openJobs: ComputedRef<JobMarkdownContent[]> = computed(() =>
     get(jobs).filter((job) => job.open),
   );
+  const groupedOpenJobsByCategory: ComputedRef<
+    Record<string, readonly JobMarkdownContent[]>
+  > = computed(() =>
+    Object.fromEntries(groupBy(get(openJobs), (item) => item.category ?? '')),
+  );
+
   const firstJob: ComputedRef<JobMarkdownContent | null> = computed(
     () => get(openJobs)[0] ?? null,
   );
@@ -29,47 +38,55 @@ export const useMarkdownContent = () => {
     const path = `/jobs`;
 
     let foundJobs;
+    let prefix = CONTENT_PREFIX;
 
     try {
-      const remotePath = `${GITHUB_CONTENT_PREFIX}${path}`;
       // try to fetch from remote
-      foundJobs = await queryContent<JobMarkdownContent>(remotePath).find();
+      foundJobs = await queryContent<JobMarkdownContent>(
+        `${prefix}${path}`,
+      ).find();
     } catch (e: any) {
       logger.error(e);
+      prefix = LOCAL_CONTENT_PREFIX;
       // fallback to local if remote fails
-      foundJobs = await queryContent<JobMarkdownContent>(path).find();
+      foundJobs = await queryContent<JobMarkdownContent>(
+        `${prefix}${path}`,
+      ).find();
     }
 
     set(
       jobs,
       foundJobs?.map((job) => {
-        job.link = replacePathPrefix(GITHUB_CONTENT_PREFIX, job._path);
+        job.link = replacePathPrefix(prefix, job._path);
         return job;
       }) ?? [],
     );
   };
 
+  const queryPrefixForJob = async (
+    prefix: typeof CONTENT_PREFIX,
+    path: string,
+  ): Promise<JobMarkdownContent> => {
+    const prefixedPath = `${prefix}${path}`;
+    const data = await queryContent<JobMarkdownContent>(prefixedPath).findOne();
+    return {
+      ...data,
+      link: replacePathPrefix(prefix, data?._path),
+    };
+  };
+
   /**
    * fetches a single markdown files within the jobs directory
    */
   const loadJob = async (path: string): Promise<JobMarkdownContent> => {
     try {
-      const remotePath = `${GITHUB_CONTENT_PREFIX}${path}`;
-      // try to fetch from remote
-      const data = await queryContent<JobMarkdownContent>(remotePath).findOne();
-      return {
-        ...data,
-        link: replacePathPrefix(GITHUB_CONTENT_PREFIX, data?._path),
-      };
+      // try to fetch from prefix
+      return await queryPrefixForJob(CONTENT_PREFIX, path);
     } catch (e: any) {
       logger.error(e);
 
       // fallback to local if remote fails
-      const data = await queryContent<JobMarkdownContent>(path).findOne();
-      return {
-        ...data,
-        link: replacePathPrefix(GITHUB_CONTENT_PREFIX, data?._path),
-      };
+      return await queryPrefixForJob(LOCAL_CONTENT_PREFIX, path);
     }
   };
 
@@ -89,6 +106,7 @@ export const useMarkdownContent = () => {
   return {
     jobs,
     openJobs,
+    groupedOpenJobsByCategory,
     firstJob,
     loadJob,
     loadJobs,
diff --git a/content/jobs/1.backend.md b/content/jobs/1.backend.md
index e42e8df9..10d43b8f 100644
--- a/content/jobs/1.backend.md
+++ b/content/jobs/1.backend.md
@@ -1,12 +1,12 @@
 ---
-title: python backend developer
-description: We are looking for a UI/UX designer
+title: Python Backend Developer
+description: We’re looking for an excellent command of python engineer to join our team.
 open: true
+category: Software Development
+tags: ['full-time', 'remote']
 ---
 
-## Python Backend Developer
-
-## What is rotki?
+##### What is rotki?
 
 Rotki helps manage accounts and blockchain transactions. It’s local-first,
 privacy focused and all open source. We are long time contributors to the
@@ -14,7 +14,9 @@ Ethereum ecosystem and general crypto space. In order to support more
 blockchains (Cosmos, Roll Ups, etc.), and to continue to ship new features
 we need the help of a backend Python developer.
 
-## How your work with us will look like?
+---
+
+##### How your work with us will look like?
 
 You will be developing new features, supporting more exchanges, more
 blockchains, and more DeFi protocols. There is also always a lot of
@@ -32,11 +34,15 @@ This is an early stage open source company, so there is an opportunity to
 take on a variety of tasks beyond the app, such as the backend of the
 website, and our API.
 
-## Requirements:
+---
+
+##### Requirements:
 
 * Excellent command of python.
 
-## Bonus points:
+---
+
+##### Bonus points:
 
 * Write tests for features you code and bugs you fix. Not strict TDD,
   but we’re always looking to increase test coverage
@@ -51,14 +57,18 @@ website, and our API.
   etc.
 * Sharing our values on open source, data ownership and privacy
 
-## Non-technical bonus points:
+---
+
+##### Non-technical bonus points:
 
 * 4 hours daily overlap with European working hours 0900 CET - 1700 CET
   for smoother teamwork
 * Can work independently, but co-operates well with other team members.
 * Proactive and customer-oriented
 
-## What we offer:
+---
+
+##### What we offer:
 
 * A full-time position, but are open to part-time contributors as well.
   If located in Germany we can provide full employment with insurance
@@ -72,15 +82,15 @@ website, and our API.
   know other fascinating projects from the field (travel expenses are on
   us)
 
-## Apply
+> ###### How to apply?
 
-We are looking for both senior and junior developers, so if you are coding
+> We are looking for both senior and junior developers, so if you are coding
 in Python, don’t hesitate to apply!
 
-Send your CV, a link to your GitHub profile and a cover letter to
+> Send your CV, a link to your GitHub profile and a cover letter to
 careers@rotki.com. In the cover letter tell us what you think of rotki’s
 codebase and include a link to a project you worked on and are most proud
 about and tell us why.
 
-If you have any questions hit us up on discord:
-[https://discord.gg/aGCxHG7](https://discord.gg/aGCxHG7){target="_blank"}
+> If you have any questions hit us up on discord:
+> [https://discord.gg/aGCxHG7](https://discord.gg/aGCxHG7){target="_blank"}
diff --git a/content/jobs/2.frontend.md b/content/jobs/2.frontend.md
index 8434f628..27c4af68 100644
--- a/content/jobs/2.frontend.md
+++ b/content/jobs/2.frontend.md
@@ -1,12 +1,12 @@
 ---
-title: vue/typescript frontend developer
-description: We are looking for a passionate Vue.js developer with excellent knowledge of Typescript.
+title: Vue.js/TypeScript Developer
+description: We’re looking for a passionate Vue.js developer with excellent knowledge of Typescript.
 open: true
+category: Software Development
+tags: ['full-time', 'remote']
 ---
 
-## Vue.js/TypeScript Developer - Role requirements
-
-## What is rotki?
+##### What is rotki?
 
 Rotki helps manage accounts and blockchain transactions. It’s local-first,
 privacy focused and all open source. We are long time contributors to the
@@ -16,7 +16,9 @@ we need the help of a Vue.js/Typescript developer. Our project is open
 source, so feel free to take a look at our codebase here:
 [https://github.com/rotki/rotki](https://github.com/rotki/rotki){target="_blank"}
 
-## How your work with us will look like?
+---
+
+##### How your work with us will look like?
 
 We are looking for a passionate Vue.js developer with excellent knowledge
 of Typescript. Your primary focus will be to assist in implementing new
@@ -28,7 +30,9 @@ the best experience to our users. We are looking for candidates that share
 our values on opensource and privacy and are focused on building robust
 applications that provide value to our users.
 
-## Technical requirements:
+---
+
+##### Technical requirements:
 
 * Excellent knowledge of TypeScript.
 * Excellent knowledge of Vue.js & Vuex (or pinia)
@@ -37,12 +41,16 @@ applications that provide value to our users.
 * Any experience building modular Vue.js applications with reusable
   components
 
-## Bonus points:
+---
+
+##### Bonus points:
 
 * Python backend development experience
 * DevOps experience
 
-## Non-technical bonus points:
+---
+
+##### Non-technical bonus points:
 
 * 4 hours daily overlap with European working hours 1000 CET - 1800 CET
   for smoother teamwork
@@ -54,7 +62,9 @@ applications that provide value to our users.
 * Located in Berlin or somewhere close. 2 other full time members of
   Rotki are here and meeting face to face is valuable.
 
-## What we offer:
+---
+
+##### What we offer:
 
 * A full-time position, but are open to part-time contributors as well.
   If located in Germany we can provide full employment with insurance
@@ -68,12 +78,12 @@ applications that provide value to our users.
   know other fascinating projects from the field (travel expenses are on
   us)
 
-## Apply
+> ###### How to apply?
 
-Send your CV, a link to your GitHub profile and a cover letter to
+> Send your CV, a link to your GitHub profile and a cover letter to
 careers@rotki.com. In the cover letter tell us what you think of rotki’s
 codebase and include a link to a project you worked on and are most proud
 about and tell us why.
 
-If you have any questions hit us up on discord:
-[https://discord.gg/aGCxHG7](https://discord.gg/aGCxHG7){target="_blank"}
+> If you have any questions hit us up on discord:
+> [https://discord.gg/aGCxHG7](https://discord.gg/aGCxHG7){target="_blank"}
diff --git a/content/jobs/3.ui-ux.md b/content/jobs/3.ui-ux.md
index 13e5937c..4507291f 100644
--- a/content/jobs/3.ui-ux.md
+++ b/content/jobs/3.ui-ux.md
@@ -1,12 +1,12 @@
 ---
-title: ui/ux
-description: We are looking for a UI/UX designer
+title: UI/UX designer
+description: We’re looking for a UI/UX designer with familiarised with blockchain.
 open: true
+category: Design
+tags: ['part-time', 'remote']
 ---
 
-## UI/UX designer
-
-## What is rotki?
+##### What is rotki?
 
 Rotki helps manage accounts and blockchain transactions. It’s local-first,
 privacy focused and all open source. We are long time contributors to the
@@ -14,7 +14,9 @@ Ethereum ecosystem and general crypto space. In order to support more
 blockchains (Cosmos, Roll Ups, etc.), and to continue to ship new features
 we need the help of a backend Python developer.
 
-## What are we looking for
+---
+
+##### What are we looking for
 
 We are looking for a UI/UX designer who wants to be part of our team and 
 aligns with the open-source local-first application ethos, to help us improve
@@ -24,7 +26,9 @@ of the app that we are developing. They should also be able to use the app
 and point out the direction of changes.
 The position is fully remote and it can be either part-time or full-time.
 
-## What will working with us look like?
+---
+
+##### What will working with us look like?
 
 Your primary focus will be working with the team to improve the overall 
 application user experience. You will brainstorm, collect and evaluate 
@@ -34,7 +38,9 @@ Your secondary focus will be defining and building a brand identity around
 our current logo (european red robin), the website ux improvement and the 
 creation of promotional material, such as twitter headers and other graphics.
 
-## Responsibilities
+---
+
+##### Responsibilities
 
 * Create and define user centric design SOPs.
 * Define and create current and new Personas.
@@ -44,9 +50,13 @@ creation of promotional material, such as twitter headers and other graphics.
 * Create user flows, wireframes, prototypes and mockups
 * Creating original designs (graphics/promotional material)
 
-## Requirements
+---
+
+##### Requirements
 
 * 4 hours daily overlap with European working hours 0900 - 1800 CET for smoother teamwork
 * Understanding of blockchain in theory and practice
 
-If you're interested please send your resume and portfolio including at least 1 project in Figma to careers@rotki.com.
+> ###### How to apply?
+
+> If you're interested please send your resume and portfolio including at least 1 project in Figma to careers@rotki.com.
diff --git a/layouts/jobs.vue b/layouts/jobs.vue
index e2e17b67..1500f8a9 100644
--- a/layouts/jobs.vue
+++ b/layouts/jobs.vue
@@ -1,51 +1,33 @@
 <script lang="ts" setup>
-import { useMarkdownContent } from '~/composables/markdown';
+import Default from '~/layouts/default.vue';
 
-const css = useCssModule();
-const { openJobs, loadJobs } = useMarkdownContent();
+const slots = useSlots();
 
-await loadJobs();
+const { t } = useI18n();
 </script>
 
 <template>
-  <PageContainer>
-    <template #title> Jobs </template>
-    <div :class="css.container">
-      <TextHeading>Available Roles</TextHeading>
-      <ul v-if="openJobs.length > 0" :class="css.tabs">
-        <li v-for="tab in openJobs" :key="tab._id" :class="css.tab">
-          <NuxtLink :active-class="css.active" :class="css.link" :to="tab.link">
-            {{ tab.title }}
-          </NuxtLink>
-        </li>
-      </ul>
-      <slot />
+  <Default>
+    <div class="bg-rui-primary/[.04] py-10 lg:py-20">
+      <div class="container">
+        <div class="max-w-[768px]">
+          <div class="mb-3 text-h6 -ml-1">
+            <ButtonLink to="/jobs" color="primary" inline>
+              {{ t('jobs.title') }}
+            </ButtonLink>
+          </div>
+          <div class="text-h4">
+            <slot name="title" />
+          </div>
+          <div v-if="slots.description" class="mt-5 body-1">
+            <slot name="description" />
+          </div>
+        </div>
+      </div>
     </div>
-  </PageContainer>
+    <slot />
+    <template #footer>
+      <PageFooter landing />
+    </template>
+  </Default>
 </template>
-
-<style lang="scss" module>
-.container {
-  @apply py-16;
-}
-
-.tabs {
-  @apply flex mb-0 list-none flex-wrap pt-6 pb-6 flex-row;
-}
-
-.tab {
-  @apply -mb-px mr-2 flex-1 text-center font-sans;
-
-  &:last-child {
-    @apply mr-0;
-  }
-}
-
-.link {
-  @apply text-xs font-bold uppercase px-5 py-3 border-rui-primary border rounded block leading-normal text-rui-primary;
-}
-
-.active {
-  @apply text-white bg-rui-primary;
-}
-</style>
diff --git a/locales/en.json b/locales/en.json
index 913e95c3..e7384336 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -126,6 +126,7 @@
     }
   },
   "actions": {
+    "apply": "Apply",
     "back": "Back",
     "continue": "Continue",
     "download": "Start now for free",
@@ -319,6 +320,12 @@
   "page_header": {
     "manage_premium": "Manage Premium"
   },
+  "jobs": {
+    "title": "Careers at rotki",
+    "header": "We’re looking for talented people",
+    "description": "Our mission is to empower users to take control of their finances both in and out of crypto in a transparent and auditable way while enabling them to own their data through a self-sovereign application.",
+    "no_open_roles": "There are no open roles."
+  },
   "country_select": {
     "no_data": "No matching countries found"
   }
diff --git a/middleware/redirects.ts b/middleware/redirects.ts
deleted file mode 100644
index 3ce07a5c..00000000
--- a/middleware/redirects.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { get } from '@vueuse/core';
-
-export default defineNuxtRouteMiddleware(async (to) => {
-  if (to.name === 'jobs') {
-    const { loadJobs, firstJob } = useMarkdownContent();
-    await loadJobs();
-    if (get(firstJob)) {
-      return navigateTo(get(firstJob)?.link);
-    }
-  }
-});
diff --git a/modules/ui-library/runtime/plugin.ts b/modules/ui-library/runtime/plugin.ts
index 1ea1aa6d..4a20a9a3 100644
--- a/modules/ui-library/runtime/plugin.ts
+++ b/modules/ui-library/runtime/plugin.ts
@@ -1,14 +1,18 @@
 import {
   RiAppleLine,
+  RiArrowDropRightLine,
   RiArrowLeftLine,
   RiArrowRightLine,
   RiDiscordLine,
   RiDownloadCloud2Line,
   RiExternalLinkLine,
   RiGithubLine,
+  RiLightbulbLine,
   RiLogoutBoxRLine,
   RiMailSendLine,
+  RiTimer2Line,
   RiTwitterLine,
+  RiUserLocationLine,
   RiWindowsLine,
   RuiPlugin,
 } from '@rotki/ui-library';
@@ -20,15 +24,19 @@ export default defineNuxtPlugin((nuxtApp) => {
     mode: 'light',
     icons: [
       RiAppleLine,
+      RiArrowDropRightLine,
       RiArrowLeftLine,
       RiArrowRightLine,
       RiDiscordLine,
       RiDownloadCloud2Line,
       RiExternalLinkLine,
       RiGithubLine,
+      RiLightbulbLine,
       RiLogoutBoxRLine,
       RiMailSendLine,
+      RiTimer2Line,
       RiTwitterLine,
+      RiUserLocationLine,
       RiWindowsLine,
     ],
   });
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 24b7a26a..df757488 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,4 +1,4 @@
-import { GITHUB_CONTENT_PREFIX } from './utils/constants';
+import { GITHUB_CONTENT_PREFIX, LOCAL_CONTENT_PREFIX } from './utils/constants';
 
 const nonIndexed = [
   '/activation',
@@ -159,6 +159,11 @@ export default defineNuxtConfig({
       baseURL: '/md/_content',
     },
     sources: {
+      content: {
+        driver: 'fs',
+        prefix: LOCAL_CONTENT_PREFIX,
+        base: 'content',
+      },
       github: {
         prefix: GITHUB_CONTENT_PREFIX, // Prefix for routes used to query contents
         driver: 'github', // Driver used to fetch contents
diff --git a/pages/impressum.vue b/pages/impressum.vue
index f9bd00bf..f6b13f15 100644
--- a/pages/impressum.vue
+++ b/pages/impressum.vue
@@ -1,8 +1,9 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'landing',
+});
+</script>
+
 <template>
   <MarkdownContent path="/documents/impressum" />
 </template>
-
-<style lang="scss">
-@import '@/assets/css/media.scss';
-@import '@/assets/css/main.scss';
-</style>
diff --git a/pages/jobs/[id].vue b/pages/jobs/[id].vue
index 16f40d5c..5cdba662 100644
--- a/pages/jobs/[id].vue
+++ b/pages/jobs/[id].vue
@@ -1,6 +1,9 @@
 <script lang="ts" setup>
 import { commonAttrs, getMetadata } from '~/utils/metadata';
-import { useMarkdownContent } from '~/composables/markdown';
+import {
+  type JobMarkdownContent,
+  useMarkdownContent,
+} from '~/composables/markdown';
 
 const {
   public: { baseUrl },
@@ -9,6 +12,38 @@ const { path } = useRoute();
 const { loadJob } = useMarkdownContent();
 
 const data = await loadJob(path);
+const separatedData: ComputedRef<{
+  default: JobMarkdownContent;
+  blockquote: JobMarkdownContent;
+}> = computed(() => {
+  const regularItems = [];
+  const blockquoteItems = [];
+
+  for (const item of data.body.children) {
+    if (item.tag !== 'blockquote') {
+      regularItems.push(item);
+    } else {
+      blockquoteItems.push(item);
+    }
+  }
+
+  return {
+    default: {
+      ...data,
+      body: {
+        ...data.body,
+        children: regularItems,
+      },
+    },
+    blockquote: {
+      ...data,
+      body: {
+        ...data.body,
+        children: blockquoteItems,
+      },
+    },
+  };
+});
 
 if (!data?.open) {
   showError({ message: `Page not found: ${path}`, statusCode: 404 });
@@ -26,12 +61,54 @@ if (!data?.open) {
     ...commonAttrs(),
   });
 }
+
+definePageMeta({
+  layout: false,
+});
+
+const { t } = useI18n();
 </script>
 
 <template>
   <NuxtLayout name="jobs">
-    <ContentRenderer v-if="data" :value="data">
-      <ContentRendererMarkdown :value="data" />
-    </ContentRenderer>
+    <template #title>{{ data.title }}</template>
+    <div class="py-8 lg:py-20">
+      <div class="container flex flex-col lg:flex-row">
+        <div class="grow">
+          <ContentRenderer
+            v-if="separatedData.default"
+            :value="separatedData.default"
+          >
+            <ContentRendererMarkdown :value="separatedData.default" />
+          </ContentRenderer>
+        </div>
+        <div
+          v-if="separatedData.blockquote.body.children.length > 0"
+          class="mt-8 lg:mt-0 lg:pl-16 xl:pl-24"
+        >
+          <div class="bg-rui-primary/[.04] p-6 lg:w-[384px]">
+            <div class="flex">
+              <div class="bg-white rounded-lg p-3 text-rui-primary">
+                <RuiIcon name="lightbulb-line" />
+              </div>
+            </div>
+            <ContentRenderer
+              v-if="separatedData.blockquote"
+              :value="separatedData.blockquote"
+            >
+              <ContentRendererMarkdown :value="separatedData.blockquote" />
+            </ContentRenderer>
+            <ButtonLink
+              to="mailto:careers@rotki.com"
+              external
+              color="primary"
+              variant="default"
+            >
+              {{ t('actions.apply') }}
+            </ButtonLink>
+          </div>
+        </div>
+      </div>
+    </div>
   </NuxtLayout>
 </template>
diff --git a/pages/jobs/index.vue b/pages/jobs/index.vue
index b4bc7e4b..fe40773b 100644
--- a/pages/jobs/index.vue
+++ b/pages/jobs/index.vue
@@ -1,8 +1,13 @@
 <script lang="ts" setup>
+import JobDescription from '~/components/jobs/JobDescription.vue';
 import { commonAttrs, getMetadata } from '~/utils/metadata';
+import { useMarkdownContent } from '~/composables/markdown';
 
-const title = 'jobs';
-const description = 'Available roles and positions in the rotki team';
+const { t } = useI18n();
+
+const title = t('jobs.title');
+const header = t('jobs.header');
+const subheader = t('jobs.description');
 
 const {
   public: { baseUrl },
@@ -10,19 +15,55 @@ const {
 
 useHead({
   title,
-  meta: getMetadata(title, description, `${baseUrl}/jobs`, baseUrl),
+  meta: getMetadata(title, header, `${baseUrl}/jobs`, baseUrl),
   ...commonAttrs(),
 });
 
+const { groupedOpenJobsByCategory, loadJobs } = useMarkdownContent();
+
+await loadJobs();
+
 definePageMeta({
-  middleware: 'redirects',
+  layout: false,
 });
 </script>
 
 <template>
   <NuxtLayout name="jobs">
-    <div>
-      <TextParagraph>There are no open roles.</TextParagraph>
+    <template #title>{{ header }}</template>
+    <template #description>
+      {{ subheader }}
+    </template>
+    <div class="py-8 lg:py-20">
+      <div class="container">
+        <div
+          v-if="Object.keys(groupedOpenJobsByCategory).length > 0"
+          class="space-y-8"
+        >
+          <div
+            v-for="(jobs, category) in groupedOpenJobsByCategory"
+            :key="category"
+            class="space-y-6"
+          >
+            <div v-if="category" class="text-h6 font-medium">
+              {{ category }}
+            </div>
+            <div class="space-y-6">
+              <NuxtLink
+                v-for="job in jobs"
+                :key="job.title"
+                class="block cursor-pointer"
+                :to="job.link"
+              >
+                <JobDescription :job="job" />
+              </NuxtLink>
+            </div>
+          </div>
+        </div>
+        <div v-else>
+          <TextParagraph>{{ t('jobs.no_open_roles') }}</TextParagraph>
+        </div>
+      </div>
     </div>
   </NuxtLayout>
 </template>
diff --git a/pages/privacy-policy.vue b/pages/privacy-policy.vue
index 5ef81f7f..a373cd80 100644
--- a/pages/privacy-policy.vue
+++ b/pages/privacy-policy.vue
@@ -1,7 +1,9 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'landing',
+});
+</script>
+
 <template>
   <MarkdownContent path="/documents/privacy-policy" />
 </template>
-
-<style lang="scss">
-@import '@/assets/css/main.scss';
-</style>
diff --git a/pages/tos.vue b/pages/tos.vue
index 73617627..54440b9d 100644
--- a/pages/tos.vue
+++ b/pages/tos.vue
@@ -1,7 +1,9 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'landing',
+});
+</script>
+
 <template>
   <MarkdownContent path="/documents/terms-of-service" />
 </template>
-
-<style lang="scss">
-@import '@/assets/css/main.scss';
-</style>
diff --git a/server/api/_sitemap-urls.ts b/server/api/_sitemap-urls.ts
index 229cecd2..06471448 100644
--- a/server/api/_sitemap-urls.ts
+++ b/server/api/_sitemap-urls.ts
@@ -1,10 +1,10 @@
 import { type ParsedContent } from '@nuxt/content/dist/runtime/types';
 import { serverQueryContent } from '#content/server';
-import { GITHUB_CONTENT_PREFIX } from '~/utils/constants';
+import { CONTENT_PREFIX, LOCAL_CONTENT_PREFIX } from '~/utils/constants';
 
 const getLink = (path?: string) =>
-  path?.startsWith(GITHUB_CONTENT_PREFIX)
-    ? `${path}`.replace(GITHUB_CONTENT_PREFIX, '')
+  path?.startsWith(CONTENT_PREFIX)
+    ? `${path}`.replace(CONTENT_PREFIX, '')
     : path;
 
 export default cachedEventHandler(
@@ -15,7 +15,7 @@ export default cachedEventHandler(
       // try to fetch from remote
       jobs = await serverQueryContent(event)
         .where({
-          _path: { $contains: `${GITHUB_CONTENT_PREFIX}/${dir}` },
+          _path: { $contains: `${CONTENT_PREFIX}/${dir}` },
           open: { $eq: true },
         })
         .only('_path')
@@ -23,7 +23,10 @@ export default cachedEventHandler(
     } catch {
       // fallback to local if remote fails
       jobs = await serverQueryContent(event)
-        .where({ _dir: { $eq: dir }, open: { $eq: true } })
+        .where({
+          _dir: { $eq: `${LOCAL_CONTENT_PREFIX}/${dir}` },
+          open: { $eq: true },
+        })
         .only('_path')
         .find();
     }
diff --git a/utils/constants.ts b/utils/constants.ts
index 5e3db9df..846e5192 100644
--- a/utils/constants.ts
+++ b/utils/constants.ts
@@ -1 +1,8 @@
+export const LOCAL_CONTENT_PREFIX = '/local';
+
 export const GITHUB_CONTENT_PREFIX = '/remote';
+
+export const CONTENT_PREFIX =
+  process.env.NODE_ENV === 'development'
+    ? LOCAL_CONTENT_PREFIX
+    : GITHUB_CONTENT_PREFIX;