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,33 @@
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+
+export interface GuaGridItem {
+  num: string;
+  name: string;
+  href: string;
+}
+
+export function GuaGrid({ items }: { items: GuaGridItem[] }) {
+  return (
+    <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+      {items.map(({ num, name, href }) => (
+        <Link
+          key={href}
+          href={href}
+          className={cn(
+            "zen-card group relative flex flex-col items-center justify-center rounded-xl border border-border/50",
+            "bg-card/70 px-3 py-4 text-center shadow-sm transition-all duration-300",
+            "hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-md",
+          )}
+        >
+          <span className="mb-2 flex h-10 w-10 items-center justify-center rounded-full border border-border/60 bg-secondary/80 font-mono text-sm text-muted-foreground transition-colors group-hover:border-primary/40 group-hover:text-primary">
+            {num}
+          </span>
+          <span className="line-clamp-2 text-sm leading-snug text-foreground group-hover:text-primary">
+            {name}
+          </span>
+        </Link>
+      ))}
+    </div>
+  );
+}