chore(nft-quest): edit layout

examples/nft-quest/app.vue

@@ -13,25 +13,7 @@
       </div>
       <WalletButton />
     </div>
-    <div class="grow flex flex-col sm:flex-row">
-      <div class="order-last sm:order-first border-b border-b-neutral-900 sm:border-b-0 sm:border-r sm:border-r-neutral-900 basis-6/12 h-full">
-        <NuxtPage />
-      </div>
-      <div class="basis-6/12 flex items-center justify-center">
-        <div class="nft-image max-w-[680px]">
-          <video
-            autoplay
-            loop
-            muted
-          >
-            <source
-              src="/nft/zeek-nft.mp4"
-              type="video/mp4"
-            >
-          </video>
-        </div>
-      </div>
-    </div>
+    <NuxtPage />
   </div>
 </template>
 
@@ -46,8 +28,13 @@ defineOgImageComponent("ZeekNFT");
   height: 66px;
 }
 
-.nft-image {
-  background-image: url('/nft-animation.png');
-
+.page-enter-active,
+.page-leave-active {
+  transition: all 0.18s;
+}
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+  filter: blur(1rem);
 }
 </style>

examples/nft-quest/assets/style.scss

@@ -1,3 +1,8 @@
 body {
   @apply min-h-[100dvh] bg-white dark:bg-black dark:text-white;
 }
+
+.nft-image {
+  background-image: url("/nft-animation.png");
+  background-size: contain;
+}

examples/nft-quest/nuxt.config.ts

@@ -38,6 +38,7 @@ export default defineNuxtConfig({
     },
   },
   app: {
+    pageTransition: { name: "page", mode: "out-in" },
     head: {
       link: [
         { rel: "icon", type: "image/x-icon", href: "/favicon.ico", sizes: "32x32" },

examples/nft-quest/pages/index.vue

@@ -1,52 +1,72 @@
 <template>
-  <div class="h-full flex flex-col p-4 justify-center">
-    <div>
-      <BlurFade
-        in-view
-        :delay="0"
-        class="inline"
-      >
-        <span class="text-[45px] font-bold tracking-tighter dark:text-white leading-1">
-          Smart wallets on the Elastic Chain.
-        </span>
-      </BlurFade>
+  <div class="grow flex flex-col sm:flex-row relative">
+    <div class="order-last sm:order-first border-b border-b-neutral-900 sm:border-b-0 sm:border-r sm:border-r-neutral-900 basis-6/12 h-full">
+      <div class="h-full flex flex-col p-4 justify-center">
+        <div>
+          <BlurFade
+            in-view
+            :delay="0"
+            class="inline"
+          >
+            <span class="text-[45px] font-bold tracking-tighter dark:text-white leading-1">
+              Smart wallets on the Elastic Chain.
+            </span>
+          </BlurFade>
 
-      <BlurFade
-        in-view
-        :delay="550"
-        class="inline"
-      >
-        <span class="text-[45px] font-bold tracking-tighter leading-1 text-blue-400">
-          Click.
-        </span>
-      </BlurFade>
-      <BlurFade
-        in-view
-        :delay="950"
-        class="inline"
-      >
-        <span class="text-[45px] font-bold tracking-tighter leading-1 text-blue-700">
-          Connect.
-        </span>
-      </BlurFade>
-    </div>
-    <BlurFade
-      in-view
-      :delay="1450"
-      class="inline"
-    >
-      <p class=" mt-8 text-neutral-400 max-w-prose">
-        ZKsync makes any crypto transaction simple using familiar sign-on methods like passkeys and lets you set custom parameters like time and spending limits. No more mnemonic phrases or annoying signature requests. Give it a try.
-      </p>
+          <BlurFade
+            in-view
+            :delay="550"
+            class="inline"
+          >
+            <span class="text-[45px] font-bold tracking-tighter leading-1 text-blue-400">
+              Click.
+            </span>
+          </BlurFade>
+          <BlurFade
+            in-view
+            :delay="950"
+            class="inline"
+          >
+            <span class="text-[45px] font-bold tracking-tighter leading-1 text-blue-700">
+              Connect.
+            </span>
+          </BlurFade>
+        </div>
+        <BlurFade
+          in-view
+          :delay="1450"
+          class="flex flex-col sm:inline items-center"
+        >
+          <p class=" mt-8 text-neutral-400 max-w-prose">
+            ZKsync makes any crypto transaction simple using familiar sign-on methods like passkeys and lets you set custom parameters like time and spending limits. No more mnemonic phrases or annoying signature requests. Give it a try.
+          </p>
 
-      <ZkButton
-        type="primary"
-        class="uppercase mt-8"
-        @click="connect"
-      >
-        Let's Go
-      </ZkButton>
-    </BlurFade>
+          <div class="sticky bottom-[-8px] pb-4 bg-gradient-to-t from-black to-transparent w-full flex justify-center sm:justify-start">
+            <ZkButton
+              type="primary"
+              class="uppercase mt-8 min-w-[240px]"
+              @click="connect"
+            >
+              Let's Go
+            </ZkButton>
+          </div>
+        </BlurFade>
+      </div>
+    </div>
+    <div class="basis-6/12 flex items-center justify-center">
+      <div class="nft-image aspect-square w-full sm:max-w-[680px] max-w-[75%]">
+        <video
+          autoplay
+          loop
+          muted
+        >
+          <source
+            src="/nft/zeek-nft.mp4"
+            type="video/mp4"
+          >
+        </video>
+      </div>
+    </div>
   </div>
 </template>
 

examples/nft-quest/pages/mint.vue

@@ -1,5 +1,14 @@
 <template>
-  <NuxtPage />
+  <div class="grow flex flex-col sm:flex-row">
+    <div class="order-last sm:order-first border-b border-b-neutral-900 sm:border-b-0 sm:border-r sm:border-r-neutral-900 basis-6/12 h-full">
+      <div class="h-full flex flex-col p-4 justify-center">
+        <NuxtPage />
+      </div>
+    </div>
+    <div class="basis-6/12 flex items-center justify-center">
+      <div class="nft-image-gif aspect-square w-full sm:max-w-[680px] max-w-[75%]" />
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -8,3 +17,10 @@ useSeoMeta({
   ogTitle: "Mint - NFT Quest",
 });
 </script>
+
+<style lang="css">
+.nft-image-gif {
+  background-image: url("/nft-slow-loop.gif");
+  background-size: contain;
+}
+</style>

examples/nft-quest/pages/mint/index.vue

@@ -32,14 +32,17 @@
       <p class="mt-8 text-neutral-400 max-w-prose">
         Also, it's free. ZKsync can leverage paymasters to enable app developers to choose a custom gas token or even entirely sponsor gas fees for their users.
       </p>
-      <ZkButton
-        type="primary"
-        class="uppercase mt-8"
-        :loading="status === 'pending'"
-        @click="mintNFT"
-      >
-        Mint 100% free NFT
-      </ZkButton>
+      <div class="sticky bottom-[-8px] pb-4 bg-gradient-to-t from-black to-transparent w-full flex justify-center sm:justify-start">
+        <ZkButton
+          type="primary"
+          class="uppercase mt-8"
+          :loading="status === 'pending'"
+          @click="mintNFT"
+        >
+          Mint 100% free NFT
+        </ZkButton>
+      </div>
+
       <p
         v-if="status === 'error'"
         class="text-error-400 mt-4 text-sm"