Feature/Protocols (#59)

* added protocols scroll panel

* replaced scroll-panel by swiper

* updated background on home-page

* updated docs link text

* updated bg-small img

* updated content positions on home page

* added mask for swiper on home-page

* fix dexe-logo.svg

---------

Co-authored-by: Yehor Podporinov <[email protected]>

assets/styles/_app-colors.scss

@@ -4,7 +4,7 @@ $black: #000000;
 $black-rgb: hexToRGB($black);
 
 $background-primary-light: #252627;
-$background-primary-main: #151419;
+$background-primary-main: #151314;
 $background-primary-dark: #0C0D10;
 
 $background-secondary-main: #181819;

assets/styles/_global.scss

@@ -143,13 +143,13 @@ h2 {
 
 h3 {
   font-family: var(--app-font-family-secondary);
-  font-size: toRem(24);
   font-weight: 400;
-  line-height: toRem(32);
+  font-size: toRem(32);
+  line-height: toRem(40);
   letter-spacing: 0;
 
   @include respond-to(medium) {
-    font-size: toRem(20);
-    line-height: toRem(28);
+    font-size: toRem(24);
+    line-height: toRem(32);
   }
 }

components/AppSwiper.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="app-swiper">
+    <swiper v-bind="swiperParams">
+      <swiper-slide
+        v-for="(item, idx) in items"
+        :key="idx"
+        class="app-swiper__slide"
+      >
+        <slot :item="item" />
+      </swiper-slide>
+    </swiper>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  items: unknown[]
+  swiperParams: object
+}>()
+</script>

components/ProjectsInfo.vue

@@ -49,13 +49,13 @@ $z-index: 2;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: toRem(24);
-  padding: 0 toRem(96) var(--app-padding-bottom);
+  padding: toRem(80) toRem(96) var(--app-padding-bottom);
 
   @include respond-to(medium) {
     grid-template-columns: 1fr;
     gap: toRem(8);
-    padding-right: var(--app-padding-right);
-    padding-left: var(--app-padding-left);
+    padding: toRem(40) var(--app-padding-right) var(--app-padding-bottom)
+      var(--app-padding-left);
   }
 }
 </style>

components/StatsPreview.vue

@@ -46,19 +46,18 @@ const { isSmallBreakpoint } = useViewportSizes()
 $z-index: 2;
 
 .stats-preview {
-  aspect-ratio: 1512 / 1126;
+  aspect-ratio: 1512 / 1150;
   display: flex;
   gap: toRem(60);
   width: 100%;
-  padding: var(--app-padding-top) toRem(96) 0;
+  padding: toRem(90) toRem(96) 0;
 
   @include respond-to(medium) {
-    padding-right: var(--app-padding-right);
-    padding-left: var(--app-padding-left);
+    padding: toRem(32) var(--app-padding-right) 0 var(--app-padding-left);
   }
 
   @include respond-to(small) {
-    aspect-ratio: 375 / 658;
+    aspect-ratio: 375 / 660;
   }
 }
 

enums/window-breakpoints.enum.ts

@@ -1,5 +1,5 @@
 export enum WINDOW_BREAKPOINTS {
-  xSmall = 480,
+  xSmall = 375,
   small = 600,
   tablet = 868,
   medium = 1024,

nuxt.config.ts

@@ -1,15 +1,8 @@
-import { IntlifyModuleOptions } from '@intlify/nuxt3'
 import { defineNuxtConfig } from 'nuxt/config'
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 
 import path from 'path'
 
-declare module '@nuxt/schema' {
-  interface NuxtConfig {
-    intlify?: IntlifyModuleOptions
-  }
-}
-
 const lifecycle = process.env.npm_lifecycle_event
 
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
@@ -113,11 +106,7 @@ export default defineNuxtConfig({
 
   css: ['@/assets/styles/app.scss'],
 
-  modules: ['@intlify/nuxt3', '@pinia/nuxt', '@vueuse/nuxt'],
-
-  intlify: {
-    localeDir: 'plugins/localization/resources',
-  },
+  modules: ['@pinia/nuxt', '@vueuse/nuxt', 'nuxt-swiper'],
 
   build: {
     transpile: [

package.json

@@ -22,7 +22,6 @@
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
-    "@intlify/nuxt3": "^0.2.4",
     "@mapbox/stylelint-processor-arbitrary-tags": "^0.4.0",
     "@pinia/nuxt": "^0.4.11",
     "@rushstack/eslint-patch": "^1.1.4",
@@ -69,6 +68,7 @@
     "flatpickr": "^4.6.13",
     "lodash-es": "^4.17.21",
     "nuxt": "^3.6.5",
+    "nuxt-swiper": "^1.2.2",
     "uuid": "^9.0.0",
     "vue-i18n": "^9.2.2",
     "vue-toastification": "^2.0.0-rc.5",