From c4e0778b727a6ed8e134e8946ad6851e2f082b79 Mon Sep 17 00:00:00 2001
From: zihluwang <real@zihluwang.me>
Date: Thu, 15 Jan 2026 15:42:11 +0800
Subject: [PATCH] refactor: update layout and styling for hero and home
 components

---
 src/layout/hero-layout/index.tsx |   6 +-
 src/page/home/index.tsx          | 113 ++++++++++++++-----------------
 2 files changed, 52 insertions(+), 67 deletions(-)

diff --git a/src/layout/hero-layout/index.tsx b/src/layout/hero-layout/index.tsx
index 760217e..6beddce 100644
--- a/src/layout/hero-layout/index.tsx
+++ b/src/layout/hero-layout/index.tsx
@@ -45,10 +45,8 @@ export default function HeroLayout() {
       </header>
 
       {/* Main Content Area */}
-      <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8 flex-grow">
-        <div className="px-4 py-6 sm:px-0">
-          <Outlet />
-        </div>
+      <main className="flex-1 p-4 overflow-hidden">
+        <Outlet />
       </main>
 
       {/* Footer */}
diff --git a/src/page/home/index.tsx b/src/page/home/index.tsx
index c8fcce2..2b87c77 100644
--- a/src/page/home/index.tsx
+++ b/src/page/home/index.tsx
@@ -39,73 +39,60 @@ export default function Home() {
   }, [jsonInput, query])
 
   return (
-    <div className="min-h-screen bg-slate-50 p-6 font-sans text-slate-900">
-      <div className="max-w-7xl mx-auto space-y-6">
-        <header className="flex flex-col gap-2">
-          <h1 className="text-2xl font-bold tracking-tight text-slate-800">
-            TypeScript JSONPath Explorer
-          </h1>
-          <p className="text-slate-500 text-sm">
-            Debug and visualises your JSONPath queries with real-time highlighting.
-          </p>
-        </header>
-
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          {/* 控制面板 */}
-          <div className="flex flex-col gap-4">
-            <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
-              <div className="bg-slate-50 px-4 py-2 border-b border-slate-200">
-                <span className="text-xs font-semibold uppercase tracking-wider text-slate-500">
-                  JSON Source
-                </span>
-              </div>
-              <textarea
-                className="w-full h-100 p-4 font-mono text-sm outline-none focus:ring-2 focus:ring-indigo-500/20 transition-all resize-none"
-                value={jsonInput}
-                onChange={(e) => setJsonInput(e.target.value)}
-                spellCheck={false}
-              />
-            </div>
-
-            <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-4">
-              <label className="block text-xs font-semibold uppercase tracking-wider text-slate-500 mb-2">
-                JSONPath Expression
-              </label>
-              <input
-                type="text"
-                className="w-full p-3 font-mono text-sm border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all shadow-sm"
-                value={query}
-                onChange={(e) => setQuery(e.target.value)}
-                placeholder="e.g. $..roles"
-              />
-            </div>
+    <div className="h-full flex gap-4">
+      {/* 左侧输入面板 - 40% */}
+      <div className="w-2/5 flex flex-col gap-4">
+        <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden flex-1 flex flex-col">
+          <div className="bg-slate-50 px-4 py-2 border-b border-slate-200">
+            <span className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+              JSON Source
+            </span>
           </div>
+          <textarea
+            className="flex-1 w-full p-4 font-mono text-sm outline-none focus:ring-2 focus:ring-indigo-500/20 transition-all resize-none"
+            value={jsonInput}
+            onChange={(e) => setJsonInput(e.target.value)}
+            spellCheck={false}
+          />
+        </div>
 
-          {/* 可视化面板 */}
-          <div className="bg-white rounded-xl shadow-sm border border-slate-200 flex flex-col overflow-hidden">
-            <div className="bg-slate-50 px-4 py-2 border-b border-slate-200 flex justify-between items-center">
-              <span className="text-xs font-semibold uppercase tracking-wider text-slate-500">
-                Visualised Result
-              </span>
-              <span className="text-xs font-medium px-2 py-0.5 bg-indigo-100 text-indigo-700 rounded-full">
-                {result.matchedPaths.length} matches
-              </span>
-            </div>
+        <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-4">
+          <label className="block text-xs font-semibold uppercase tracking-wider text-slate-500 mb-2">
+            JSONPath Expression
+          </label>
+          <input
+            type="text"
+            className="w-full p-3 font-mono text-sm border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all shadow-sm"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="e.g. $..roles"
+          />
+        </div>
+      </div>
 
-            <div className="p-6 overflow-auto max-h-[580px] font-mono text-sm leading-relaxed">
-              {result.error ? (
-                <div className="bg-red-50 text-red-600 p-4 rounded-lg border border-red-100 text-xs">
-                  <strong>Error:</strong> {result.error}
-                </div>
-              ) : (
-                <JsonTreeNode
-                  data={result.parsed}
-                  path={["$"]}
-                  matchedPaths={result.matchedPaths}
-                />
-              )}
+      {/* 右侧可视化面板 - 60% */}
+      <div className="w-3/5 bg-white rounded-xl shadow-sm border border-slate-200 flex flex-col overflow-hidden">
+        <div className="bg-slate-50 px-4 py-2 border-b border-slate-200 flex justify-between items-center">
+          <span className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+            Visualised Result
+          </span>
+          <span className="text-xs font-medium px-2 py-0.5 bg-indigo-100 text-indigo-700 rounded-full">
+            {result.matchedPaths.length} matches
+          </span>
+        </div>
+
+        <div className="flex-1 p-6 overflow-auto font-mono text-sm leading-relaxed">
+          {result.error ? (
+            <div className="bg-red-50 text-red-600 p-4 rounded-lg border border-red-100 text-xs">
+              <strong>Error:</strong> {result.error}
             </div>
-          </div>
+          ) : (
+            <JsonTreeNode
+              data={result.parsed}
+              path={["$"]}
+              matchedPaths={result.matchedPaths}
+            />
+          )}
         </div>
       </div>
     </div>