Kaizen dApp Staking (#1001)

* add basic card slide ui

* add new listing list

* Add swiper navigation style

* Add background image to dapps staking top page

* update panel section style

* update style

* update my staking and on chain data section style

* update slide card style

* fix styles

* update cards style

* fix ads area style

* fix dynamic ads section name style

* Add youtube thumbnails

* update staking video

* upate ads thumbnails

* remove hover effect

* fix box shadow mask

* fix top metric style

* update on chain data section style

* update background repeat

* update background style

* update scoped style

* update my dapps and unbonding list background style

* add info for dapps owners

* Revert "Merge branch 'main' into feat/kaizen-dapp-staking"

This reverts commit 2957349, reversing
changes made to 8f49105.

* fix styles

* Add registration modal

* Campaign logic (#1016)

* Campaigns logic

* Add campaigns

* Add short description

* Node version for checkout

* Remove UA account icon

* Check if images array is empty

* Algem campaign image

* Introduction logic

* Fix registration page style

* clean up

* clean up

* Add image info

* Revert hide AuIcon

---------

Co-authored-by: Bobo <[email protected]>

package.json

@@ -78,6 +78,7 @@
     "serverless-http": "^2.7.0",
     "store": "^2.0.12",
     "stream": "^0.0.2",
+    "swiper": "^11.0.3",
     "v-odometer": "^2.0.1",
     "validator": "^13.7.0",
     "vue-i18n": "^9.2.2",

src/components/dapp-staking/StakingTop.vue

@@ -24,6 +24,13 @@
       <dapp-list category="Utility" />
       <dapp-list category="Others" />
     </div>
+
+    <Teleport to="#staking-top-bg">
+      <div
+        class="dapps-staking-bg"
+        :style="{ backgroundImage: `url(${isDarkTheme ? bg_img.dark : bg_img.light})` }"
+      />
+    </Teleport>
   </div>
   <div v-else />
 </template>
@@ -94,7 +101,13 @@ export default defineComponent({
       store.dispatch('dapps/getTvl');
     });
 
-    return { isReady, isZkEvm };
+    const isDarkTheme = computed<boolean>(() => store.getters['general/theme'] === 'DARK');
+    const bg_img = {
+      light: require('/src/assets/img/dapps_staking_bg_light.webp'),
+      dark: require('/src/assets/img/dapps_staking_bg_dark.webp'),
+    };
+
+    return { isReady, isZkEvm, isDarkTheme, bg_img };
   },
 });
 </script>

src/components/dapp-staking/my-staking/AdsArea.vue

@@ -1,13 +1,32 @@
 <template>
-  <div class="wrapper--cards">
-    <div v-for="(t, index) in items" :key="index" class="card" @click="goToLink(t.link)">
-      <div
-        class="wrapper--img"
-        :style="`background-image: url('${isShiden ? bg_img.shiden_hero : bg_img.astar_hero}')`"
-      ></div>
-      <div class="txt--subtitle">{{ t.subtitle }}</div>
-      <div class="txt--title">{{ t.title }}</div>
-    </div>
+  <div class="wrapper--ads-area">
+    <swiper
+      class="swiper--ads-area"
+      :slides-per-view="1.25"
+      :slides-per-group="1"
+      :space-between="24"
+      :navigation="true"
+      :parallax="true"
+      :modules="modules"
+      :breakpoints="{
+        '768': {
+          slidesPerView: 3,
+          slidesPerGroup: 3,
+        },
+      }"
+    >
+      <swiper-slide v-for="(t, index) in items" :key="index">
+        <div class="card--swiper" @click="goToLink(t.link)">
+          <img :src="t.img" class="card__img" />
+          <div class="card__bottom">
+            <div>
+              <div class="text--subtitle">{{ t.subtitle }}</div>
+              <div class="text--title">{{ t.title }}</div>
+            </div>
+          </div>
+        </div>
+      </swiper-slide>
+    </swiper>
   </div>
 </template>
 <script lang="ts">
@@ -16,7 +35,17 @@ import { useNetworkInfo } from 'src/hooks';
 import { endpointKey } from 'src/config/chainEndpoints';
 import adsData from 'src/data/ads.json';
 
+// Import Swiper
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import { Navigation } from 'swiper/modules';
+
 export default defineComponent({
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
   setup() {
     const bg_img = {
       astar_hero: require('/src/assets/img/banner/banner-02-astar.png'),
@@ -25,87 +54,25 @@ export default defineComponent({
     const { currentNetworkIdx } = useNetworkInfo();
     const isShiden = computed(() => currentNetworkIdx.value === endpointKey.SHIDEN);
 
-    const items = adsData;
+    const items = adsData.map((item) => {
+      return {
+        ...item,
+        img: item.img === '' ? bg_img.astar_hero : item.img,
+      };
+    });
 
     const goToLink = (link: string) => {
       window.open(link, '_blank');
     };
 
     return {
+      modules: [Navigation],
       items,
-      bg_img,
-      isShiden,
       goToLink,
     };
   },
 });
 </script>
 <style lang="scss" scoped>
-@import 'src/css/quasar.variables.scss';
-.wrapper--cards {
-  display: grid;
-  grid-template-columns: auto auto auto;
-  gap: 16px;
-  justify-content: center;
-  padding: 0 16px;
-  margin-top: 48px;
-  margin-bottom: 48px;
-  @media (min-width: $md) {
-    justify-content: center;
-    gap: 24px;
-  }
-  width: 100%;
-  overflow-x: auto;
-  overflow-y: hidden;
-  justify-content: left;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-.card {
-  flex-basis: 30%;
-  cursor: pointer;
-
-  margin-bottom: 48px;
-  @media (min-width: $md) {
-    flex-basis: 0;
-  }
-  .wrapper--img {
-    background: rgb(110, 110, 110);
-    background-size: cover;
-    height: 200px;
-    border-radius: 6px;
-    width: 300px;
-    @media (min-width: $md) {
-      width: 100%;
-    }
-    @media (min-width: $xl) {
-      width: 310px;
-    }
-  }
-  .txt--subtitle {
-    font-weight: 600;
-    font-size: 14px;
-    line-height: 17px;
-    color: #b1b7c1;
-    margin-top: 16px;
-  }
-  .txt--title {
-    font-weight: 600;
-    font-size: 20px;
-    line-height: 18px;
-    color: $navy-1;
-    margin-top: 10px;
-  }
-  @media (max-width: $sm) {
-    margin-bottom: 40px;
-  }
-}
-.body--dark {
-  .card {
-    .txt--title {
-      color: $gray-1;
-    }
-  }
-}
+@import './styles/ads-area.scss';
 </style>