Update HR flow UI

app/assets/css/main.css

@@ -43,31 +43,35 @@ body,
 
 body {
   font-family: "IBM Plex Sans", sans-serif;
-  background:
+  background: #f9f6ef;
-    radial-gradient(1200px 600px at 10% 10%, rgba(219, 39, 119, 0.16), transparent 60%),
-    radial-gradient(900px 500px at 90% 15%, rgba(250, 204, 21, 0.2), transparent 55%),
-    radial-gradient(900px 700px at 50% 100%, rgba(74, 222, 128, 0.12), transparent 60%),
-    oklch(98% 0 0);
 }
 
 .glass-card {
-  background: rgba(255, 255, 255, 0.7);
+  background: rgba(255, 255, 255, 0.55);
-  border: 1px solid rgba(255, 255, 255, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.8);
-  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
+  box-shadow:
-  backdrop-filter: blur(18px);
+    0 24px 40px rgba(27, 32, 58, 0.12),
+    inset 0 1px 0 rgba(255, 255, 255, 0.75);
+  backdrop-filter: blur(24px) saturate(140%);
 }
 
 .glass-pane {
-  background: rgba(255, 255, 255, 0.55);
+  background: rgba(255, 255, 255, 0.42);
-  border: 1px solid rgba(255, 255, 255, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(18px);
+  box-shadow:
+    0 16px 28px rgba(27, 32, 58, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(16px) saturate(130%);
 }
 
 .section-title {
   font-family: "Space Grotesk", sans-serif;
-  font-size: 1.5rem;
+  font-size: 2.1rem;
-  font-weight: 600;
+  font-weight: 800;
-  letter-spacing: -0.01em;
+  letter-spacing: -0.02em;
+  line-height: 1.15;
+  color: rgb(15 23 42);
+  text-shadow: 0 6px 20px rgba(99, 102, 241, 0.18);
 }
 
 .radar-label {
@@ -76,3 +80,61 @@ body {
   text-transform: uppercase;
   color: rgb(100 116 139);
 }
+
+.voice-wave {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 96px;
+}
+
+.voice-bar {
+  width: 6px;
+  height: 32px;
+  border-radius: 999px;
+  background: linear-gradient(180deg, rgba(56, 189, 248, 0.9), rgba(14, 165, 233, 0.3));
+  animation: voice-wave 1.6s ease-in-out infinite;
+}
+
+.voice-bar:nth-child(2) { animation-delay: -1.4s; height: 26px; }
+.voice-bar:nth-child(3) { animation-delay: -1.2s; height: 40px; }
+.voice-bar:nth-child(4) { animation-delay: -1.0s; height: 54px; }
+.voice-bar:nth-child(5) { animation-delay: -0.8s; height: 68px; }
+.voice-bar:nth-child(6) { animation-delay: -0.6s; height: 52px; }
+.voice-bar:nth-child(7) { animation-delay: -0.4s; height: 38px; }
+.voice-bar:nth-child(8) { animation-delay: -0.2s; height: 28px; }
+.voice-bar:nth-child(9) { animation-delay: -0.1s; height: 44px; }
+.voice-bar:nth-child(10) { animation-delay: -0.05s; height: 34px; }
+
+@keyframes voice-wave {
+  0%, 100% { transform: scaleY(0.6); opacity: 0.6; }
+  50% { transform: scaleY(1.2); opacity: 1; }
+}
+
+.bg-mesh {
+  background-image:
+    radial-gradient(1200px 600px at 10% -10%, rgba(67, 56, 118, 0.2), transparent 60%),
+    radial-gradient(900px 500px at 90% 10%, rgba(230, 184, 92, 0.18), transparent 60%),
+    linear-gradient(180deg, #f9f6ef 0%, #f2efe7 55%, #ebe8df 100%);
+}
+
+.reorder-move {
+  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
+  will-change: transform;
+}
+
+.reorder-enter-active,
+.reorder-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.reorder-enter-from {
+  opacity: 0;
+  transform: translateY(14px) scale(0.98);
+}
+
+.reorder-leave-to {
+  opacity: 0;
+  transform: translateY(-10px) scale(0.98);
+}

package-lock.json

@@ -7,6 +7,8 @@
       "name": "hr",
       "hasInstallScript": true,
       "dependencies": {
+        "@formkit/auto-animate": "^0.9.0",
+        "echarts": "^6.0.0",
         "nuxt": "^4.3.1",
         "vue": "^3.5.28",
         "vue-router": "^4.6.4"
@@ -966,6 +968,12 @@
         "node": ">=18"
       }
     },
+    "node_modules/@formkit/auto-animate": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@formkit/auto-animate/-/auto-animate-0.9.0.tgz",
+      "integrity": "sha512-VhP4zEAacXS3dfTpJpJ88QdLqMTcabMg0jwpOSxZ/VzfQVfl3GkZSCZThhGC5uhq/TxPHPzW0dzr4H9Bb1OgKA==",
+      "license": "MIT"
+    },
     "node_modules/@ioredis/commands": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.5.0.tgz",
@@ -5570,6 +5578,22 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
       "license": "MIT"
     },
+    "node_modules/echarts": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-6.0.0.tgz",
+      "integrity": "sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "6.0.0"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -10630,6 +10654,21 @@
       "engines": {
         "node": ">= 14"
       }
+    },
+    "node_modules/zrender": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-6.0.0.tgz",
+      "integrity": "sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
     }
   }
 }

package.json

@@ -10,6 +10,8 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@formkit/auto-animate": "^0.9.0",
+    "echarts": "^6.0.0",
     "nuxt": "^4.3.1",
     "vue": "^3.5.28",
     "vue-router": "^4.6.4"