updated onboarding, include UI & UX

src/pages/index.tsx

@@ -1,16 +1,14 @@
 import BaseLayout from '@layouts/base';
-import FullscreenLayout from '@layouts/fullscreen';
 
 import LumeSymbol from '@assets/icons/Lume';
 import { useLocalStorage } from '@rehooks/local-storage';
-import { motion } from 'framer-motion';
 import { useRouter } from 'next/router';
 import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useEffect, useRef, useState } from 'react';
 
 export default function Page() {
   const router = useRouter();
 
-  const [currentUser]: any = useLocalStorage('current-user');
+  const [currentUser]: object[] = useLocalStorage('current-user');
   const [loading, setLoading] = useState(true);
   const timer = useRef(null);
 
@@ -18,7 +16,7 @@ export default function Page() {
     if (currentUser) {
       timer.current = setTimeout(() => {
         setLoading(false);
-        router.push('/newsfeed/following');
+        router.push('/newsfeed/circle');
       }, 1000);
     } else {
       timer.current = setTimeout(() => {
@@ -34,32 +32,24 @@ export default function Page() {
   }, [currentUser, router]);
 
   return (
-    <div className="relative flex h-full flex-col items-center justify-between">
-      <div>{/* spacer */}</div>
-      <div className="flex flex-col items-center gap-4">
-        <motion.div layoutId="logo" className="relative">
-          <LumeSymbol className="h-16 w-16 text-white" />
-        </motion.div>
-        <div className="flex flex-col items-center gap-0.5">
-          <motion.h2
-            layoutId="subtitle"
-            className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-4xl font-medium text-transparent"
-          >
-            A censorship-resistant social network
-          </motion.h2>
-          <motion.h1
-            layoutId="title"
-            className="bg-[radial-gradient(ellipse_at_bottom_right,_var(--tw-gradient-stops))] from-gray-300 via-fuchsia-600 to-orange-600 bg-clip-text text-5xl font-bold text-transparent"
-          >
-            built on nostr
-          </motion.h1>
+    <div className="relative h-full overflow-hidden">
+      {/* dragging area */}
+      <div data-tauri-drag-region className="absolute top-0 left-0 z-20 h-16 w-full bg-transparent" />
+      {/* end dragging area */}
+      <div className="relative flex h-full flex-col items-center justify-center">
+        <div className="flex flex-col items-center gap-2">
+          <LumeSymbol className="h-16 w-16 text-black dark:text-white" />
+          <div className="text-center">
+            <h3 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Did you know?</h3>
+            <p className="font-medium text-zinc-300 dark:text-zinc-600">
+              no one can&apos;t stop you use bitcoin and nostr
+            </p>
+          </div>
         </div>
-      </div>
-      <div className="flex items-center gap-2 pb-16">
-        <div className="h-10">
-          {loading ? (
+        <div className="absolute bottom-16 left-1/2 -translate-x-1/2 transform">
+          {loading && (
             <svg
-              className="h-5 w-5 animate-spin text-white"
+              className="h-5 w-5 animate-spin text-black dark:text-white"
               xmlns="http://www.w3.org/2000/svg"
               fill="none"
               viewBox="0 0 24 24"
@@ -71,32 +61,9 @@ export default function Page() {
                 d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
               ></path>
             </svg>
-          ) : (
-            <></>
           )}
         </div>
       </div>
-      {/* background */}
-      <div className="absolute inset-0 bg-gradient-to-r from-fuchsia-400/10 to-orange-100/10 opacity-100 [mask-image:radial-gradient(farthest-side_at_top,white,transparent)]">
-        <svg
-          aria-hidden="true"
-          className="dark:fill-white/2.5 absolute inset-x-0 inset-y-[-50%] h-[200%] w-full skew-y-[-18deg] fill-black/40 stroke-black/50 mix-blend-overlay dark:stroke-white/5"
-        >
-          <defs>
-            <pattern id=":R11d6:" width="72" height="56" patternUnits="userSpaceOnUse" x="-12" y="4">
-              <path d="M.5 56V.5H72" fill="none"></path>
-            </pattern>
-          </defs>
-          <rect width="100%" height="100%" strokeWidth="0" fill="url(#:R11d6:)"></rect>
-          <svg x="-12" y="4" className="overflow-visible">
-            <rect strokeWidth="0" width="73" height="57" x="288" y="168"></rect>
-            <rect strokeWidth="0" width="73" height="57" x="144" y="56"></rect>
-            <rect strokeWidth="0" width="73" height="57" x="504" y="168"></rect>
-            <rect strokeWidth="0" width="73" height="57" x="720" y="336"></rect>
-          </svg>
-        </svg>
-      </div>
-      {/* end background */}
     </div>
   );
 }
@@ -110,9 +77,5 @@ Page.getLayout = function getLayout(
     | ReactFragment
     | ReactPortal
 ) {
-  return (
-    <BaseLayout>
-      <FullscreenLayout>{page}</FullscreenLayout>
-    </BaseLayout>
-  );
+  return <BaseLayout>{page}</BaseLayout>;
 };