style: update /cyber-month security section

package.json

@@ -103,6 +103,7 @@
     "vee-validate": "^3.4.8",
     "vue-async-computed": "^3.9.0",
     "vue-carousel": "^0.18.0",
+    "vue-check-view": "^0.3.0",
     "vue-circular-count-down-timer": "^2.0.0",
     "vue-clickaway": "^2.2.2",
     "vue-clipboard2": "^0.3.1",

src/renderer/locales/en.js

@@ -5793,6 +5793,23 @@ module.exports = {
           }
         ],
         btn: 'Get it now'
+      },
+      smooth_life: {
+        title: 'Smooth out your digital life',
+        items: [
+          {
+            title: 'Auto Device Sync',
+            desc: 'Seamlessly access your data across all devices with automatic synchronization.'
+          },
+          {
+            title: 'Effortless Management',
+            desc: 'Create, save, and autofill login details, addresses, credit cards, and more for a hassle-free digital life.'
+          },
+          {
+            title: 'Item Recovery',
+            desc: 'Easily restore recently deleted items or previous versions to keep your data intact and organized.'
+          }
+        ]
       }
     }
   },

src/renderer/nuxt.config.js

@@ -84,15 +84,11 @@ module.exports = {
     { ssr: true, src: '@/plugins/onpremise/mixins.js' },
 
     // UI
-    { ssr: false, src: '@/plugins/ui/circle-countdown-timer.js' },
-    { ssr: false, src: '@/plugins/ui/clipboard.js' },
+    { ssr: false, src: '@/plugins/ui/client-only.js' },
     { ssr: true, src: '@/plugins/ui/element.js' },
     { ssr: true, src: '@/plugins/ui/fontawesome.js' },
     { ssr: true, src: '@/plugins/ui/katex.js' },
-    { ssr: true, src: '@/plugins/ui/vee.js' },
-    { ssr: false, src: '@/plugins/ui/vue-virtual-scroller.js' },
-    { ssr: false, src: '@/plugins/ui/youtube.js' },
-    { ssr: false, src: '@/plugins/ui/vue-carousel.js' }
+    { ssr: true, src: '@/plugins/ui/vee.js' }
   ],
   buildModules: [
     '@nuxt/typescript-build',

src/renderer/pages/promo/cyber-month.vue

@@ -4,11 +4,13 @@
     <div
       class="bg-black-300 flex flex-col md:flex-row justify-between items-center px-12 py-6"
     >
-      <img
-        src="~assets/images/logo/logo_black_with_text.svg"
-        alt="Locker Logo"
-        class="h-12 mb-4 md:mb-0"
-      >
+      <nuxt-link to="/">
+        <img
+          src="~assets/images/logo/logo_black_with_text.svg"
+          alt="Locker Logo"
+          class="h-12 mb-4 md:mb-0"
+        >
+      </nuxt-link>
       <div>
         <nuxt-link to="/lifetime" class="nav-btn">
           {{ $t('promo.cyber_month.nav.btn') }} <i class="el-icon-right" />
@@ -137,6 +139,7 @@
         <div
           v-for="(item, index) in $t('promo.cyber_month.security.items')"
           :key="index"
+          v-view="e => securityItemViewHandler(index, e)"
           class="py-12 flex border-[#BFBFBF]"
           :class="{ 'border-t': index > 0 }"
         >
@@ -148,9 +151,13 @@
             "
             :alt="item.title"
             class="h-11 w-11"
+            :class="{ 'green-svg': index + 1 === currentSecurityItem }"
           >
           <div class="ml-5">
-            <h3 class="font-semibold landing-font-24 mb-2">
+            <h3
+              class="font-semibold landing-font-24 mb-2"
+              :class="{ 'text-primary': index + 1 === currentSecurityItem }"
+            >
               {{ item.title }}
             </h3>
             <p class="landing-font-16">
@@ -161,15 +168,10 @@
       </div>
 
       <div class="hidden md:flex w-1/2 pl-[20%] py-20 flex-col">
-        <div
-          v-for="item in [1, 2, 3, 4]"
-          :key="item"
-          class="py-8 rounded-3xl illus-gradient-bg"
-          style="margin-bottom: 50vh"
-        >
+        <div class="py-8 rounded-3xl illus-gradient-bg sticky top-8">
           <img
             :src="
-              require(`~/assets/images/pages/promo/cyber-month/security-illus-${item}.png`)
+              require(`~/assets/images/pages/promo/cyber-month/security-illus-${currentSecurityItem}.png`)
             "
             class="w-full"
           >
@@ -186,6 +188,43 @@
     <!-- Security end -->
 
     <!-- Smooth life -->
+    <div class="flex flex-wrap px-12 py-[112px] items-center">
+      <div class="w-full md:w-1/2 md:order-2">
+        <h2 class="landing-font-38 font-semibold mb-4">
+          {{ $t('promo.cyber_month.smooth_life.title') }}
+        </h2>
+
+        <div
+          v-for="(item, index) in $t('promo.cyber_month.smooth_life.items')"
+          :key="index"
+          class="py-12 border-[#BFBFBF] flex"
+          :class="{ 'border-t': index > 0 }"
+        >
+          <img
+            :src="
+              require(`~/assets/images/pages/promo/cyber-month/smooth-${1}.svg`)
+            "
+            class="h-10 w-10 mr-5"
+          >
+          <div>
+            <h3 class="landing-font-24 font-semibold mb-2">
+              {{ item.title }}
+            </h3>
+            <p class="landing-font-16">
+              {{ item.desc }}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div class="w-full md:order-1 md:w-1/2 md:pr-[10%] mt-8 md:mt-0">
+        <img
+          src="~/assets/images/pages/promo/cyber-month/smooth-img.png"
+          alt="Smooth digital life"
+          class="w-full"
+        >
+      </div>
+    </div>
     <!-- Smooth life end -->
 
     <!-- Team collab -->
@@ -212,7 +251,32 @@
 </template>
 <script>
 export default {
-  layout: 'authenticate'
+  layout: 'authenticate',
+  data () {
+    return {
+      visibleSecurityItems: []
+    }
+  },
+  computed: {
+    currentSecurityItem () {
+      if (!this.visibleSecurityItems.length) {
+        return 1
+      }
+      return Math.max(...this.visibleSecurityItems) + 1
+    }
+  },
+  methods: {
+    securityItemViewHandler (index, e) {
+      let data = [...this.visibleSecurityItems]
+      if (e.percentInView === 1 && !data.includes(index)) {
+        data.push(index)
+      }
+      if (e.percentInView < 0.7 && data.includes(index)) {
+        data = data.filter(i => i !== index)
+      }
+      this.visibleSecurityItems = data
+    }
+  }
 }
 </script>
 <style scoped>
@@ -237,4 +301,8 @@ export default {
 .illus-gradient-bg {
   background: linear-gradient(180deg, #5f9c64 0%, #24712a 100%), #f5f5f5;
 }
+.green-svg {
+  filter: invert(36%) sepia(100%) saturate(337%) hue-rotate(78deg)
+    brightness(94%) contrast(94%);
+}
 </style>

src/renderer/plugins/ui/client-only.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import CircularCountDownTimer from 'vue-circular-count-down-timer'
+import Clipboard from 'vue-clipboard2'
+import { RecycleScroller } from 'vue-virtual-scroller'
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
+import VueYouTubeEmbed from 'vue-youtube-embed'
+import VueCarousel from 'vue-carousel'
+import checkView from 'vue-check-view'
+
+Vue.use(CircularCountDownTimer)
+Vue.use(Clipboard)
+Vue.component('RecycleScroller', RecycleScroller)
+Vue.use(VueYouTubeEmbed, { global: true })
+Vue.use(VueCarousel)
+Vue.use(checkView)

yarn.lock

@@ -13363,6 +13363,11 @@ vue-carousel@^0.18.0:
     regenerator-runtime "^0.12.1"
     vue "^2.5.17"
 
+vue-check-view@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/vue-check-view/-/vue-check-view-0.3.0.tgz#813509a73916dd99483eaa4b1b24ca189c50ca7b"
+  integrity sha512-2IR2m4MCgOG/9UQaIn7cvvqbDcvUmPavun8nBMieRxGbhqvlUorjLIwJqvuFXruBO73HXXbCcrVKxnGr4ub5ag==
+
 vue-circular-count-down-timer@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/vue-circular-count-down-timer/-/vue-circular-count-down-timer-2.0.0.tgz#11a28b4c0837df7d32bf9fc15c1c9cb6d707f547"