feat(frontend): add public landing page

src/index.css

@@ -83,6 +83,93 @@
       line-height: 1.75rem !important;
     }
   }
+
+  @keyframes landing-rise {
+    from {
+      opacity: 0;
+      transform: translateY(28px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes landing-float {
+    0%,
+    100% {
+      transform: translateY(0px);
+    }
+    50% {
+      transform: translateY(-14px);
+    }
+  }
+
+  @keyframes landing-grid {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      transform: translate3d(0, 36px, 0);
+    }
+  }
+
+  @keyframes landing-aurora {
+    0%,
+    100% {
+      opacity: 0.8;
+      transform: translate3d(0, 0, 0) scale(1);
+    }
+    50% {
+      opacity: 1;
+      transform: translate3d(0, -1%, 0) scale(1.04);
+    }
+  }
+
+  @keyframes landing-shimmer {
+    0% {
+      background-position: 0% 50%;
+    }
+    100% {
+      background-position: 100% 50%;
+    }
+  }
+
+  .animate-landing-rise {
+    animation: landing-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
+  }
+
+  .animate-landing-float {
+    animation: landing-float 6s ease-in-out infinite;
+  }
+
+  .landing-hero-grid {
+    background-image:
+      linear-gradient(to right, rgba(15, 23, 42, 0.06) 1px, transparent 1px),
+      linear-gradient(to bottom, rgba(15, 23, 42, 0.06) 1px, transparent 1px);
+    background-size: 72px 72px;
+    mask-image: radial-gradient(circle at top, rgba(0, 0, 0, 0.95), transparent 78%);
+    animation: landing-grid 16s linear infinite;
+  }
+
+  .dark .landing-hero-grid {
+    background-image:
+      linear-gradient(to right, rgba(148, 163, 184, 0.09) 1px, transparent 1px),
+      linear-gradient(to bottom, rgba(148, 163, 184, 0.09) 1px, transparent 1px);
+  }
+
+  .landing-aurora {
+    background:
+      radial-gradient(circle at 10% 10%, rgba(34, 211, 238, 0.18), transparent 34%),
+      radial-gradient(circle at 85% 18%, rgba(245, 158, 11, 0.18), transparent 28%),
+      radial-gradient(circle at 58% 34%, rgba(20, 184, 166, 0.12), transparent 30%);
+    animation: landing-aurora 14s ease-in-out infinite;
+  }
+
+  .landing-shimmer {
+    background-size: 200% 200%;
+    animation: landing-shimmer 7s linear infinite;
+  }
 }
 
 
@@ -120,6 +207,10 @@
   scrollbar-color: #cbd5e1 transparent;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 .dark * {
   scrollbar-color: #334155 transparent;
 }