Redesign UI with zen cards, split AI panel, and PWA install support.

Learn uses 64-gua card grid; liuyao/bazi/combined use two input cards plus sticky right AI panel; add manifest, service worker, and install prompt.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/learn/other/page.tsx

@@ -1,5 +1,7 @@
 import Link from "next/link";
 import PageShell from "@/components/page-shell";
+import { GuaGrid } from "@/components/learn/gua-grid";
+import { ZenCard } from "@/components/ui/zen-card";
 import {
   getGuaName,
   guaNumFromMark,
@@ -8,48 +10,47 @@ import {
 
 export default async function LearnOtherPage() {
   const guaMarks = await listGuaMarks("simplified");
+  const items = guaMarks.map((mark) => ({
+    num: guaNumFromMark(mark),
+    name: getGuaName(mark),
+    href: `/learn/other/${guaNumFromMark(mark)}`,
+  }));
 
   return (
-    <PageShell className="max-w-3xl px-4 py-8">
-      <div className="mb-6">
-        <h1 className="text-2xl font-bold">易经学习 · 简体图文版</h1>
-        <p className="mt-2 text-muted-foreground">
-          含互卦、错卦、综卦及更多注释（部分卦象图片待补全）
+    <PageShell className="max-w-6xl px-4 py-8">
+      <div className="mb-8 text-center">
+        <h1 className="text-2xl font-bold tracking-wide">易经学习</h1>
+        <p className="mt-2 text-sm text-muted-foreground">
+          简体图文版 · 六十四卦详览
         </p>
-        <Link
-          href="/learn"
-          className="mt-2 inline-block text-sm text-primary underline underline-offset-4"
-        >
-          ← 返回繁体精简版
+      </div>
+
+      <div className="mb-8 grid gap-4 sm:grid-cols-2">
+        <Link href="/learn" className="block">
+          <ZenCard
+            title="繁体精简版"
+            subtitle="原文精要"
+            className="h-full transition-colors hover:border-primary/30"
+          >
+            <p className="text-sm text-muted-foreground">
+              精简版卦辞，适合速读。
+            </p>
+            <span className="inline-block text-xs text-primary">← 返回</span>
+          </ZenCard>
         </Link>
+        <ZenCard
+          title="简体图文版"
+          subtitle="当前浏览"
+          className="ring-1 ring-primary/20"
+        >
+          <p className="text-sm text-muted-foreground">
+            含互卦、错卦、综卦及卦象图。
+          </p>
+          <span className="inline-block text-xs text-primary">已选中</span>
+        </ZenCard>
       </div>
-      <div className="overflow-x-auto rounded-lg border">
-        <table className="w-full text-sm">
-          <thead className="bg-muted/50">
-            <tr>
-              <th className="px-4 py-2 text-left font-medium">序号</th>
-              <th className="px-4 py-2 text-left font-medium">卦名</th>
-            </tr>
-          </thead>
-          <tbody>
-            {guaMarks.map((mark) => (
-              <tr key={mark} className="border-t">
-                <td className="px-4 py-2 font-mono text-muted-foreground">
-                  {guaNumFromMark(mark)}
-                </td>
-                <td className="px-4 py-2">
-                  <Link
-                    href={`/learn/other/${guaNumFromMark(mark)}`}
-                    className="text-primary underline-offset-4 hover:underline"
-                  >
-                    {getGuaName(mark)}
-                  </Link>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
+
+      <GuaGrid items={items} />
     </PageShell>
   );
 }