refactor: overhaul UI for streamlined user experience

Redesign navigation, home overview, user portrait, and valuation pages
with improved functionality and responsive design.

Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>

app/components/Charts.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import {
+  LineChart as RechartsLineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts"
+import { BarChart as RechartsBarChart, Bar } from "recharts"
+
+const lineData = [
+  { name: "周一", 新增微信号: 12 },
+  { name: "周二", 新增微信号: 19 },
+  { name: "周三", 新增微信号: 3 },
+  { name: "周四", 新增微信号: 5 },
+  { name: "周五", 新增微信号: 2 },
+  { name: "周六", 新增微信号: 3 },
+  { name: "周日", 新增微信号: 10 },
+]
+
+const barData = [
+  { name: "周一", 新增好友: 120 },
+  { name: "周二", 新增好友: 190 },
+  { name: "周三", 新增好友: 30 },
+  { name: "周四", 新增好友: 50 },
+  { name: "周五", 新增好友: 20 },
+  { name: "周六", 新增好友: 30 },
+  { name: "周日", 新增好友: 100 },
+]
+
+export function LineChart() {
+  return (
+    <ResponsiveContainer width="100%" height={180}>
+      <RechartsLineChart data={lineData}>
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Tooltip />
+        <Line type="monotone" dataKey="新增微信号" stroke="#8884d8" />
+      </RechartsLineChart>
+    </ResponsiveContainer>
+  )
+}
+
+export function BarChart() {
+  return (
+    <ResponsiveContainer width="100%" height={180}>
+      <RechartsBarChart data={barData}>
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Tooltip />
+        <Bar dataKey="新增好友" fill="#82ca9d" />
+      </RechartsBarChart>
+    </ResponsiveContainer>
+  )
+}