updated token page

sitcon-tw · Mar 3, 2024 · 999415d · 999415d
1 parent 3e477ae
commit 999415d
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/src/app/(token)/layout.tsx b/src/app/(token)/layout.tsx
@@ -21,7 +21,7 @@ export default function RootLayout({
           rel="stylesheet"
         />
       </Head>
-      <body className="flex min-h-screen w-screen flex-col bg-sitcon-color8 font-sans text-gray-950">
+      <body className="flex w-screen flex-col bg-sitcon-color8 font-sans text-gray-950">
         {children}
       </body>
     </html>

diff --git a/src/app/(token)/token/page.tsx b/src/app/(token)/token/page.tsx
@@ -24,7 +24,7 @@ export default function Page() {
   return (
     <div>
       <motion.div
-        className="mx-auto w-full max-w-[512px] px-2 py-10"
+        className="mx-auto flex h-[100svh] w-full max-w-[512px] flex-col px-2 py-10"
         initial={{ opacity: 0, y: 100 }}
         animate={{ opacity: 1, y: 0 }}
         exit={{ opacity: 0, y: 100 }}
@@ -34,6 +34,9 @@ export default function Page() {
           你發現了拼圖碎片
           <span className="absolute">！</span>
         </h1>
+        <div className="mt-2 text-center text-2xl text-gray-600">
+          在 OPass &gt; 大地遊戲 &gt; 掃描器中輸入以上代碼來取得這個碎片
+        </div>
         <div className="my-4 flex flex-wrap items-center justify-between gap-6 rounded-2xl bg-gray-50 p-4 pl-6 text-center text-6xl shadow">
           <div
             className="grow overflow-hidden text-ellipsis p-2 text-left"
@@ -53,9 +56,19 @@ export default function Page() {
             {copied ? "已複製" : "複製"}
           </motion.button>
         </div>
-        <div className="text-center text-2xl text-gray-600">
-          在 OPass &gt; 大地遊戲 &gt; 掃描器中輸入以上代碼來取得拼圖
-        </div>
+        <div className="grow" />
+        <motion.div
+          className="rounded-xl bg-white/40 p-4 shadow"
+          initial={{ opacity: 0, y: 100 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 100 }}
+          transition={{ duration: 0.5, delay: 0.25 }}
+        >
+          <div className="text-xl font-bold text-gray-800">更快取得拼圖！</div>
+          <div className="mt-2 text-gray-600">
+            透過大地遊戲的掃描器直接掃描 QR Code，便可以快速取得這個碎片。
+          </div>
+        </motion.div>
       </motion.div>
     </div>
   );