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/page.tsx

@@ -1,55 +1,65 @@
 import Link from "next/link";
 import PageShell from "@/components/page-shell";
 import { BookOpen, BrainCircuit, Compass, Sparkles } from "lucide-react";
+import { ZenCard } from "@/components/ui/zen-card";
 
 const MODULES = [
   {
     href: "/learn",
     title: "易经学习",
-    description: "64 卦原文阅读，繁体精简版与简体图文版",
+    description: "64 卦卡片择读，繁体精简与简体图文",
     icon: BookOpen,
+    accent: "from-amber-500/10 to-transparent",
   },
   {
     href: "/liuyao",
     title: "六爻算卦",
-    description: "三钱法起卦，结合卦辞 AI 智能解读",
+    description: "三钱法起卦，卦辞 AI 智能解读",
     icon: Sparkles,
+    accent: "from-stone-500/10 to-transparent",
   },
   {
     href: "/bazi",
     title: "生辰八字",
-    description: "四柱排盘，十神大运流年，AI 命理解读",
+    description: "四柱排盘，十神大运，AI 命理解读",
     icon: BrainCircuit,
+    accent: "from-zinc-500/10 to-transparent",
   },
   {
     href: "/combined",
     title: "综合测算",
-    description: "天时地利人和融合分析，六爻可选",
+    description: "天时地利人和，六爻可选",
     icon: Compass,
+    accent: "from-neutral-500/10 to-transparent",
   },
 ];
 
 export default function Home() {
   return (
-    <PageShell className="max-w-2xl px-4 py-8">
-      <div className="mb-8 text-center">
-        <h1 className="text-2xl font-bold tracking-tight">知命阁</h1>
-        <p className="mt-2 text-muted-foreground">
+    <PageShell className="max-w-4xl px-4 py-10 sm:py-14">
+      <div className="mb-10 text-center">
+        <p className="text-4xl opacity-30">☯</p>
+        <h1 className="mt-2 text-3xl font-bold tracking-[0.2em]">知命阁</h1>
+        <p className="mt-3 text-sm tracking-wide text-muted-foreground">
           融合周易智慧与人工智能
         </p>
       </div>
       <div className="grid gap-4 sm:grid-cols-2">
-        {MODULES.map(({ href, title, description, icon: Icon }) => (
-          <Link
-            key={href}
-            href={href}
-            className="group rounded-lg border bg-card p-5 shadow-sm transition-colors hover:border-primary/40 hover:bg-accent/30"
-          >
-            <div className="mb-3 flex items-center gap-2">
-              <Icon size={20} className="text-primary" />
-              <span className="font-medium">{title}</span>
-            </div>
-            <p className="text-sm text-muted-foreground">{description}</p>
+        {MODULES.map(({ href, title, description, icon: Icon, accent }) => (
+          <Link key={href} href={href} className="group block">
+            <ZenCard
+              className={`h-full bg-gradient-to-br ${accent} transition-all duration-300 group-hover:-translate-y-0.5 group-hover:shadow-md`}
+            >
+              <div className="mb-3 flex items-center gap-3">
+                <span className="flex h-10 w-10 items-center justify-center rounded-full border border-border/60 bg-background/80">
+                  <Icon size={20} className="text-primary/80" />
+                </span>
+                <span className="text-lg font-medium tracking-wide">{title}</span>
+              </div>
+              <p className="text-sm leading-relaxed text-muted-foreground">
+                {description}
+              </p>
+            </ZenCard>
           </Link>
         ))}
       </div>