feat: replaces download modal with download page

components/HeroArea.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-const emit = defineEmits<{ (e: 'download'): void }>();
 const css = useCssModule();
 const { t } = useI18n();
 </script>
@@ -23,7 +22,7 @@ const { t } = useI18n();
  </div>
  </div>
  <div :class="css.buttons">
- <DownloadButton @click="emit('download')" />
+ <DownloadButton />
 
  <ButtonLink
  variant="outlined"
@@ -57,7 +56,7 @@ const { t } = useI18n();
  <div>{{ t('home.advantages.own_your_data.description') }}</div>
  </InfoBox>
  </div>
- <UseApp @download="emit('download')" />
+ <UseApp />
  </div>
 </template>
 

components/NavigationMenu.vue

@@ -4,14 +4,16 @@ const { t } = useI18n();
 
 <template>
  <div class="flex space-x-4 flex-wrap justify-center">
- <ButtonLink size="lg" to="/">{{ t('navigation_menu.home') }}</ButtonLink>
+ <ButtonLink size="lg" to="/" highlight-exact-active>{{
+ t('navigation_menu.home')
+ }}</ButtonLink>
  <ButtonLink size="lg" to="/#features">
  {{ t('navigation_menu.features') }}
  </ButtonLink>
- <ButtonLink v-if="false" size="lg" to="/download">
+ <ButtonLink size="lg" to="/download" highlight-exact-active>
  {{ t('navigation_menu.download') }}
  </ButtonLink>
- <ButtonLink size="lg" to="/jobs">
+ <ButtonLink size="lg" to="/jobs" highlight-active>
  {{ t('navigation_menu.jobs') }}
  </ButtonLink>
  <ButtonLink v-if="false" size="lg" to="/values">

components/common/ButtonLink.vue

@@ -1,33 +1,57 @@
 <script setup lang="ts">
+import { get } from '@vueuse/core';
+
 defineOptions({
  inheritAttrs: false,
 });
 
-withDefaults(
+const props = withDefaults(
  defineProps<{
  to: string;
  external?: boolean;
  inline?: boolean;
+ highlightActive?: boolean;
+ highlightExactActive?: boolean;
  }>(),
  {
  external: false,
  inline: false,
+ highlightActive: false,
+ highlightExactActive: false,
  },
 );
 
 const attrs = useAttrs();
+
+const { highlightActive, highlightExactActive } = toRefs(props);
+
+const getColor = (active: boolean, exact: boolean) => {
+ if (
+ (get(highlightActive) && active) ||
+ (get(highlightExactActive) && exact)
+ ) {
+ return 'primary';
+ }
+
+ return undefined;
+};
 </script>
 
 <template>
  <NuxtLink
+ #default="link"
  class="inline-flex"
  :href="external ? to : undefined"
  :to="external ? undefined : to"
  :target="external ? '_blank' : '_self'"
  :rel="external ? 'noreferrer' : null"
  >
  <RuiButton
- v-bind="{ variant: 'text', ...attrs }"
+ v-bind="{
+ variant: 'text',
+ color: getColor(link?.isActive, link?.isExactActive),
+ ...attrs,
+ }"
  :class="{ ['inline-flex py-0 !px-1 !text-[1em]']: inline }"
  >
  <slot>

components/common/carousel/Carousel.vue

@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import 'swiper/css';
+import { Swiper } from 'swiper/vue';
+import type { SwiperOptions } from 'swiper/types';
+
+withDefaults(defineProps<SwiperOptions>(), {
+ effect: 'slide',
+ direction: 'horizontal',
+ autoHeight: false,
+ enabled: true,
+ slidesPerView: 1,
+ spaceBetween: 30,
+ centeredSlides: false,
+});
+
+const css = useCssModule();
+</script>
+
+<template>
+ <Swiper
+ :auto-height="autoHeight"
+ :autoplay="autoplay"
+ :breakpoints="breakpoints"
+ :centered-slides="centeredSlides"
+ :class="css.swiper"
+ :coverflow-effect="coverflowEffect"
+ :direction="direction"
+ :effect="effect"
+ :enabled="enabled"
+ :loop="loop"
+ :modules="modules"
+ :navigation="navigation"
+ :pagination="pagination"
+ :slides-per-view="slidesPerView"
+ :space-between="spaceBetween"
+ :zoom="zoom"
+ >
+ <slot />
+ </Swiper>
+</template>
+
+<style lang="scss" module>
+.swiper {
+ width: 100%;
+}
+</style>

components/common/carousel/CarouselControls.vue

@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import 'swiper/css';
+import { get } from '@vueuse/core';
+import { RuiFooterStepper } from '@rotki/ui-library';
+import type { Swiper } from 'swiper/types';
+
+const props = withDefaults(
+ defineProps<{ activeIndex: number; pages: number; swiper?: Swiper }>(),
+ {
+ swiper: undefined,
+ },
+);
+
+const emit = defineEmits<{ (e: 'update:swiper', value: Swiper): void }>();
+
+const { swiper } = toRefs(props);
+
+const css = useCssModule();
+
+const onNavigate = (index: number) => {
+ const s = get(swiper);
+
+ if (!s) {
+ return;
+ }
+
+ s.slideTo(index - 1);
+ emit('update:swiper', s);
+};
+</script>
+
+<template>
+ <RuiFooterStepper
+ :class="css.controls"
+ :model-value="activeIndex"
+ :pages="pages"
+ arrow-buttons
+ variant="bullet"
+ @update:model-value="onNavigate($event)"
+ />
+</template>
+
+<style lang="scss" module>
+.controls {
+ width: 100%;
+}
+</style>

components/download/DownloadButton.vue

@@ -1,20 +1,17 @@
 <script setup lang="ts">
-const emit = defineEmits<{ (e: 'click'): void }>();
-
 const { t } = useI18n();
 </script>
 
 <template>
- <div>
+ <NuxtLink class="inline-flex" to="/download">
  <RuiButton
  variant="default"
  size="lg"
  class="!py-4 !px-10 !text-xl uppercase"
  rounded
  color="primary"
- @click="emit('click')"
  >
  {{ t('actions.download') }}
  </RuiButton>
- </div>
+ </NuxtLink>
 </template>

components/download/DownloadDocs.vue

@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+const { t } = useI18n();
+const css = useCssModule();
+</script>
+
+<template>
+ <div :class="css.wrapper">
+ <div :class="css.wrapper__container" class="container">
+ <h6 :class="css.title">
+ {{ t('download.documentation.title') }}
+ </h6>
+ <h4 :class="css.heading">
+ {{ t('download.documentation.heading') }}
+ </h4>
+ <div :class="css.desc__wrapper">
+ <p :class="css.description">
+ {{ t('download.documentation.description') }}
+ </p>
+
+ <div class="shrink-0">
+ <ButtonLink
+ color="primary"
+ variant="default"
+ external
+ to="https://rotki.readthedocs.io/en/latest/index.html"
+ >
+ {{ t('download.documentation.action') }}
+ <template #append>
+ <RuiIcon name="external-link-line" />
+ </template>
+ </ButtonLink>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<style lang="scss" module>
+.wrapper {
+ @apply py-10 lg:py-20 bg-rui-primary/[0.04];
+
+ &__container {
+ @apply flex flex-col;
+
+ .title {
+ @apply text-rui-light-primary text-h6 mb-3;
+ }
+
+ .heading {
+ @apply text-rui-text text-h4 mb-5;
+ }
+
+ .desc__wrapper {
+ @apply flex flex-col md:flex-row space-y-6 md:space-y-0 md:space-x-6 items-start justify-between;
+
+ .description {
+ @apply text-rui-text text-body-1 max-w-[48rem];
+ }
+ }
+ }
+}
+</style>

components/download/DownloadHeading.vue

@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import { type DownloadItemProps } from '~/components/download/DownloadItem.vue';
+
+defineProps<{ version: string; links: DownloadItemProps[] }>();
+
+const { t } = useI18n();
+const css = useCssModule();
+</script>
+
+<template>
+ <div :class="css.wrapper">
+ <div :class="css.wrapper__container" class="container">
+ <div :class="css.titles">
+ <h6 :class="css.title">
+ {{ t('download.heading.download_rotki') }}
+ </h6>
+ <h3 :class="css.description">
+ {{ t('download.heading.description') }}
+ </h3>
+ </div>
+ <div :class="css.links">
+ <DownloadItem
+ v-for="(link, i) in links"
+ v-bind="link"
+ :key="i"
+ :class="css.link"
+ />
+ </div>
+ <p :class="css.version">
+ {{ t('download.latest_release') }}: {{ version }}
+ </p>
+ </div>
+ </div>
+</template>
+
+<style lang="scss" module>
+.wrapper {
+ @apply py-10 lg:py-20;
+
+ &__container {
+ @apply flex flex-col;
+
+ .titles {
+ @apply flex flex-col space-y-4 mb-16;
+
+ .title {
+ @apply text-rui-light-primary text-h6;
+ }
+
+ .description {
+ @apply text-rui-text text-h3;
+ }
+ }
+
+ .links {
+ @apply grid gap-6 grid-cols-2 lg:grid-cols-4 mb-6;
+
+ .link {
+ @apply w-full;
+ }
+ }
+
+ .version {
+ @apply text-body-1 text-rui-light-secondary;
+ }
+ }
+}
+</style>