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>
2026-06-10 23:24:55 +08:00
parent 206673fd90
commit 6265e56a7f
20 changed files with 682 additions and 423 deletions
@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+export function ZenCard({
+  title,
+  subtitle,
+  children,
+  className,
+}: {
+  title?: string;
+  subtitle?: string;
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <section
+      className={cn(
+        "zen-card relative overflow-hidden rounded-2xl border border-border/60 bg-card/80 p-5 shadow-sm backdrop-blur-sm sm:p-6",
+        className,
+      )}
+    >
+      <div className="zen-card-glow pointer-events-none absolute -right-8 -top-8 h-32 w-32 rounded-full opacity-40" />
+      {(title || subtitle) && (
+        <header className="relative mb-4 border-b border-border/50 pb-3">
+          {title && (
+            <h2 className="text-base font-medium tracking-wide text-foreground">
+              {title}
+            </h2>
+          )}
+          {subtitle && (
+            <p className="mt-0.5 text-xs text-muted-foreground">{subtitle}</p>
+          )}
+        </header>
+      )}
+      <div className="relative space-y-4">{children}</div>
+    </section>
+  );
+}