feat: values page

rotki · Aug 24, 2023 · 0cab4c2 · 0cab4c2
1 parent 9003cdf
commit 0cab4c2
Show file tree

Hide file tree

Showing 27 changed files with 482 additions and 112 deletions.
diff --git a/components/NavigationMenu.vue b/components/NavigationMenu.vue
@@ -1,52 +1,67 @@
 <script setup lang="ts">
 const { t } = useI18n();
 
-const buttonClasses = 'w-full justify-start';
+interface Menu {
+ label: string;
+ to: string;
+ highlightExactActive?: true;
+ highlightActive?: true;
+ external?: true;
+}
+
+const menus: Menu[] = [
+ {
+ label: t('navigation_menu.home'),
+ to: '/',
+ highlightExactActive: true,
+ },
+ {
+ label: t('navigation_menu.features'),
+ to: '/#features',
+ },
+ {
+ label: t('navigation_menu.download'),
+ to: '/download',
+ highlightExactActive: true,
+ },
+ {
+ label: t('navigation_menu.jobs'),
+ to: '/jobs',
+ highlightActive: true,
+ },
+ {
+ label: t('navigation_menu.values'),
+ to: '/values',
+ highlightActive: true,
+ },
+ {
+ label: t('navigation_menu.documentation'),
+ to: 'https://rotki.readthedocs.io/en/latest/index.html',
+ external: true,
+ },
+ {
+ label: t('navigation_menu.blog'),
+ to: 'https://blog.rotki.com',
+ external: true,
+ },
+];
 </script>
 
 <template>
  <div
  class="flex flex-wrap md:justify-center md:gap-x-1 lg:gap-x-2 xl:gap-x-4"
  >
- <ButtonLink :class="buttonClasses" size="lg" to="/" highlight-exact-active>
- {{ t('navigation_menu.home') }}
- </ButtonLink>
- <ButtonLink :class="buttonClasses" size="lg" to="/#features">
- {{ t('navigation_menu.features') }}
- </ButtonLink>
- <ButtonLink
- :class="buttonClasses"
- size="lg"
- to="/download"
- highlight-exact-active
- >
- {{ t('navigation_menu.download') }}
- </ButtonLink>
- <ButtonLink :class="buttonClasses" size="lg" to="/jobs" highlight-active>
- {{ t('navigation_menu.jobs') }}
- </ButtonLink>
- <ButtonLink v-if="false" :class="buttonClasses" size="lg" to="/values">
- {{ t('navigation_menu.values') }}
- </ButtonLink>
- <ButtonLink
- :class="buttonClasses"
- size="lg"
- to="https://rotki.readthedocs.io/en/latest/index.html"
- external
- >
- <span> {{ t('navigation_menu.documentation') }} </span>
- <template #append>
- <RuiIcon size="18" name="external-link-line" />
- </template>
- </ButtonLink>
  <ButtonLink
- :class="buttonClasses"
- size="lg"
- to="https://blog.rotki.com"
- external
+ v-for="menu in menus"
+ :key="menu.label"
+ class="w-full justify-start"
+ :highlight-active="menu.highlightActive"
+ :highlight-exact-active="menu.highlightExactActive"
+ :external="menu.external"
+ :to="menu.to"
  >
- <span> {{ t('navigation_menu.blog') }} </span>
- <template #append>
+ <span> {{ menu.label }} </span>
+ <template v-if="menu.external" #append>
  <RuiIcon size="18" name="external-link-line" />
  </template>
  </ButtonLink>

diff --git a/components/footer/FooterIconLinks.vue b/components/footer/FooterIconLinks.vue
@@ -10,7 +10,7 @@ const menus = [
  title: 'Twitter',
  showText: false,
  href: 'https://twitter.com/rotkiapp',
- icon: 'twitter-line',
+ icon: 'twitter-x-line',
  },
  {
  title: 'Discord',

diff --git a/components/values/ValueBody.vue b/components/values/ValueBody.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+const { t } = useI18n();
+</script>
+
+<template>
+ <div class="flex flex-col items-center justify-center">
+ <img src="/img/scenery.jpg" alt="Rotki values" />
+ </div>
+ <div class="py-10 md:py-20 bg-rui-primary/[0.04]">
+ <div
+ class="container grid justify-between items-center md:grid-flow-col grid-cols-1 md:grid-cols-2 md:grid-rows-[minmax(0,_1fr)_3rem_minmax(0,_1fr)] gap-y-10 md:gap-y-0 gap-x-20"
+ >
+ <div class="space-y-5 self-start">
+ <div class="text-h4">{{ t('values.values_section.title') }}</div>
+ <div>
+ {{ t('values.values_section.description') }}
+ </div>
+ </div>
+ <div class="border-t border-rui-grey-300" />
+ <div class="flex gap-5 items-start">
+ <div
+ class="border-r-[3px] border-rui-primary pb-2.5 pr-5 text-h5 text-rui-primary"
+ >
+ 01
+ </div>
+ <div class="space-y-4">
+ <div class="text-h5">
+ {{ t('values.values_section.list.1.title') }}
+ </div>
+ <div
+ class="text-rui-text-secondary text-body-1 whitespace-break-spaces"
+ >
+ {{ t('values.values_section.list.1.value') }}
+ </div>
+ </div>
+ </div>
+ <div class="flex gap-5 items-start">
+ <div
+ class="border-r-[3px] border-rui-primary pb-2.5 pr-5 text-h5 text-rui-primary"
+ >
+ 02
+ </div>
+ <div class="space-y-4">
+ <div class="text-h5">
+ {{ t('values.values_section.list.2.title') }}
+ </div>
+ <div
+ class="text-rui-text-secondary text-body-1 whitespace-break-spaces"
+ >
+ <i18n-t keypath="values.values_section.list.2.value" scope="global">
+ <template #open_source>
+ <strong>
+ {{ t('values.values_section.list.2.open_source') }}
+ </strong>
+ </template>
+ <template #local_first>
+ <strong>
+ {{ t('values.values_section.list.2.local_first') }}
+ </strong>
+ </template>
+ </i18n-t>
+ </div>
+ </div>
+ </div>
+ <div class="hidden md:block border-t border-rui-grey-300" />
+ <div class="flex gap-5 items-start">
+ <div
+ class="border-r-[3px] border-rui-primary pb-2.5 pr-5 text-h5 text-rui-primary"
+ >
+ 03
+ </div>
+ <div class="space-y-4">
+ <div class="text-h5">
+ {{ t('values.values_section.list.3.title') }}
+ </div>
+ <div
+ class="text-rui-text-secondary text-body-1 whitespace-break-spaces"
+ >
+ {{ t('values.values_section.list.3.value') }}
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
diff --git a/components/values/ValueContact.vue b/components/values/ValueContact.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+const { t } = useI18n();
+
+const contacts = [
+ {
+ title: 'Email',
+ description: t('values.contact_section.email.description'),
+ href: 'mailto:info@rotki.com',
+ icon: 'chat-smile-2-line',
+ },
+ {
+ title: 'Twitter',
+ description: t('values.contact_section.twitter.description'),
+ href: 'https://twitter.com/rotkiapp',
+ icon: 'twitter-x-line',
+ linkLabel: '@RotkiApp',
+ },
+ {
+ title: 'Discord',
+ description: t('values.contact_section.discord.description'),
+ href: 'https://discord.rotki.com',
+ icon: 'discord-line',
+ },
+ {
+ title: 'Github',
+ description: t('values.contact_section.github.description'),
+ href: 'https://github.com/rotki',
+ icon: 'github-line',
+ linkLabel: 'Rotki Solutions GmbH',
+ },
+];
+</script>
+
+<template>
+ <div class="py-10 md:py-20">
+ <div class="container space-y-10 md:space-y-16">
+ <div>
+ <div class="text-h6 text-rui-primary mb-3">
+ {{ t('values.contact_section.title') }}
+ </div>
+ <div class="text-h4 mb-4">
+ {{ t('values.contact_section.header') }}
+ </div>
+ <div class="text-body-1 text-rui-text-secondary">
+ {{ t('values.contact_section.subtitle') }}
+ </div>
+ </div>
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+ <div
+ v-for="contact in contacts"
+ :key="contact.title"
+ class="p-6 bg-rui-primary/[0.04] space-y-4"
+ >
+ <div
+ class="w-12 h-12 rounded-[10px] bg-rui-primary text-white flex items-center justify-center"
+ >
+ <RuiIcon :name="contact.icon" />
+ </div>
+ <div class="space-y-5">
+ <div class="space-y-2">
+ <div class="text-h6">{{ contact.title }}</div>
+ <div class="text-body-1 text-rui-text-secondary">
+ {{ contact.description }}
+ </div>
+ </div>
+ <div class="-ml-1">
+ <ButtonLink external :to="contact.href" inline color="primary">
+ {{ contact.linkLabel ?? contact.href }}
+ </ButtonLink>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
diff --git a/components/values/ValueHeading.vue b/components/values/ValueHeading.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+const { t } = useI18n();
+</script>
+
+<template>
+ <div class="py-10 md:py-20">
+ <div class="container">
+ <div class="text-h6 text-rui-primary">
+ {{ t('values.title') }}
+ </div>
+ <div class="text-h5 md:text-h3 mt-4">
+ {{ t('values.subtitle') }}
+ </div>
+ </div>
+ </div>
+</template>
diff --git a/components/values/ValueVission.vue b/components/values/ValueVission.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+const { t } = useI18n();
+
+const values = [
+ { icon: 'bank-line', label: t('values.vision_section.list.1') },
+ {
+ icon: 'money-dollar-circle-line',
+ label: t('values.vision_section.list.2'),
+ },
+ { icon: 'calendar-todo-line', label: t('values.vision_section.list.3') },
+ { icon: 'hand-coin-line', label: t('values.vision_section.list.4') },
+];
+</script>
+
+<template>
+ <div class="py-10 md:py-20">
+ <div class="container space-y-10 md:space-y-16">
+ <div class="space-y-5">
+ <div class="text-h4">{{ t('values.vision_section.title') }}</div>
+ <div class="text-body-1">
+ {{ t('values.vision_section.description') }}
+ </div>
+ </div>
+ <div
+ class="flex flex-col lg:flex-row gap-12 items-center justify-between"
+ >
+ <div class="w-full lg:w-[560px] space-y-12">
+ <div
+ v-for="(value, index) in values"
+ :key="index"
+ class="flex space-x-4"
+ >
+ <div
+ class="w-12 h-12 shrink-0 rounded-[10px] bg-rui-primary text-white flex items-center justify-center"
+ >
+ <RuiIcon :name="value.icon" />
+ </div>
+ <div class="text-body-1 text-rui-text-secondary">
+ {{ value.label }}
+ </div>
+ </div>
+ </div>
+ <div
+ class="shrink-0 w-[240px] h-[240px] md:w-[360px] md:h-[360px] lg:w-[400px] lg:h-[400px]"
+ >
+ <img
+ src="/img/rotki-values.png"
+ alt="Rotki values"
+ class="rounded-full w-full h-full border-[12px] border-rui-grey-200"
+ />
+ </div>
+ </div>
+ </div>
+ </div>
+</template>