Merge pull request #93 from zkLinkProtocol/feat/banner

Feat/banner

components/header/Banner.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="banner max-w-[100vw] md:max-w-[700px]">
+    <swiper
+      :spaceBetween="30"
+      :centeredSlides="true"
+      :autoplay="{
+        delay: 2500,
+        disableOnInteraction: false,
+      }"
+      :pagination="{
+        clickable: true,
+      }"
+      :navigation="true"
+      :modules="modules"
+      class="mySwiper"
+    >
+      <swiper-slide>
+        <!-- <div>
+          <img src="/img/banner.svg" class="m-auto hidden md:block" />
+          <img src="/img/mobile.svg" class="m-auto block md:hidden" />
+        </div> -->
+
+        <a href="https://app.zklink.io/" target="\_blank">
+          <img src="/img/banner.svg" className="bannerImg" />
+          <img src="/img/mobile.svg" className="mobileImg" />
+        </a>
+      </swiper-slide>
+      <swiper-slide>
+        <a href="https://zklink.io/merge" target="\_blank">
+          <img src="/img/portal-banner.png" className="bannerImg" />
+          <img src="/img/portal-banner-mobile.png" className="mobileImg" />
+        </a>
+      </swiper-slide>
+    </swiper>
+  </div>
+</template>
+<script>
+// Import Swiper Vue.js components
+import { Swiper, SwiperSlide } from "swiper/vue";
+
+// Import Swiper styles
+import "swiper/css";
+
+// import "swiper/css/pagination";
+// import "swiper/css/navigation";
+
+// import required modules
+import { Autoplay, Pagination, Navigation } from "swiper/modules";
+
+export default {
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+  setup() {
+    return {
+      modules: [Autoplay, Pagination, Navigation],
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+/* @import "swiper/css"; */
+.banner {
+  margin: 0 auto;
+  overflow: auto;
+  width: 100%;
+  text-align: center;
+  a {
+    display: block;
+    width: 100%;
+    min-width: 0px;
+    max-width: 700px;
+  }
+  .bannerImg {
+    display: block;
+    width: 100%;
+    height: 80px;
+  }
+  .mobileImg {
+    display: none;
+  }
+  @media screen and (max-width: 640px) {
+    .bannerImg {
+      display: none;
+    }
+    .mobileImg {
+      display: none;
+      display: block;
+      width: 100%;
+      height: 80px;
+    }
+  }
+}
+</style>

components/header/Header.vue

@@ -75,7 +75,10 @@
         <CommonButton class="hamburger-icon" @click="mobileMainNavigationOpened = true">
           <Bars3Icon class="h-6 w-6" aria-hidden="true" />
           <transition v-bind="TransitionOpacity()">
-            <CommonBadge v-if="withdrawalsAvailableForClaiming && withdrawalsAvailableForClaiming.length" class="action-available-badge">
+            <CommonBadge
+              v-if="withdrawalsAvailableForClaiming && withdrawalsAvailableForClaiming.length"
+              class="action-available-badge"
+            >
               {{ withdrawalsAvailableForClaiming.length }}
             </CommonBadge>
           </transition>
@@ -103,7 +106,7 @@
       <div>Note: Withdrawals will be enabled before 04/13/2024</div>
     </div> -->
     <div className="banner" v-if="!route.query.s || route.query.s !== 'okx'">
-      <a href="https://app.zklink.io/" target="\_blank">
+      <!-- <a href="https://app.zklink.io/" target="\_blank">
         <img
           src="/img/banner.svg"
           alt=""
@@ -114,7 +117,8 @@
           alt=""
           className="mobileImg"
         />
-      </a>
+      </a> -->
+      <banner />
     </div>
   </div>
 </template>
@@ -138,6 +142,7 @@ import { useRoute } from "#imports";
 import { useOnboardStore } from "@/store/onboard";
 import { useZkSyncWithdrawalsStore } from "@/store/zksync/withdrawals";
 import useNetworks from "@/composables/useNetworks";
+import Banner from "./Banner.vue";
 const { defaultNetwork, isMainnet } = useNetworks();
 
 const route = useRoute();
@@ -217,28 +222,28 @@ const isShowFaucet = computed(() => defaultNetwork.id === 810182);
     height: 18px;
   }
 }
-.banner{
+.banner {
   width: 100%;
   text-align: center;
-  a{
+  a {
     display: inline-block;
     width: 100%;
     min-width: 0px;
     max-width: 700px;
   }
-  .bannerImg{
+  .bannerImg {
     display: inline-block;
     width: 100%;
     height: 80px;
   }
-  .mobileImg{
+  .mobileImg {
     display: none;
   }
   @media screen and (max-width: 640px) {
-    .bannerImg{
+    .bannerImg {
       display: none;
     }
-    .mobileImg{
+    .mobileImg {
       display: none;
       display: inline-block;
       width: 100%;

package.json

@@ -88,6 +88,7 @@
     "ofetch": "^1.3.3",
     "pinia": "^2.0.33",
     "sass": "^1.57.1",
+    "swiper": "^11.1.0",
     "ts-node": "^10.0.0",
     "typescript": "^4.3.5",
     "viem": "^2.9.5",