From 4dac5c17cbda400fb4de98956c50115f511e825a Mon Sep 17 00:00:00 2001
From: flym <mu.blank@gmail.com>
Date: Tue, 8 Sep 2026 19:51:22 +0800
Subject: [PATCH] fix: refine Phase 1 homepage visual layout

---
 app/globals.css            | 26 ++++++++++++++++++++++++--
 app/page.tsx               | 14 +++++++-------
 components/brand-mark.tsx  |  6 +++---
 components/site-header.tsx |  6 +++---
 components/ui.tsx          |  2 +-
 docs/phase-1-report.md     | 20 ++++++++++++++++++++
 6 files changed, 58 insertions(+), 16 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 7a4a302..cc13bfe 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -90,7 +90,7 @@ select:focus-visible {
 }
 
 .container-shell {
-  width: min(1180px, calc(100% - 2.5rem));
+  width: min(1320px, calc(100% - 4rem));
   margin-inline: auto;
 }
 
@@ -133,6 +133,18 @@ select:focus-visible {
   line-height: 0.98;
 }
 
+.text-balance {
+  text-wrap: balance;
+}
+
+.desktop-nav {
+  display: none;
+}
+
+.mobile-nav-trigger {
+  display: inline-flex;
+}
+
 .body-copy {
   color: #9ca3af;
   line-height: 1.8;
@@ -159,7 +171,7 @@ select:focus-visible {
   justify-content: center;
   gap: 0.7rem;
   border-radius: 0.65rem;
-  padding: 0.75rem 1rem;
+  padding: 0.78rem 1.2rem;
   font-size: 0.875rem;
   font-weight: 700;
   transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
@@ -256,6 +268,16 @@ button:disabled {
   }
 }
 
+@media (min-width: 768px) {
+  .desktop-nav {
+    display: flex;
+  }
+
+  .mobile-nav-trigger {
+    display: none;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,
diff --git a/app/page.tsx b/app/page.tsx
index e2726de..aefb81c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -15,10 +15,10 @@ export default function HomePage() {
     <>
       <section className="relative isolate overflow-hidden hero-glow">
         <div className="surface-grid pointer-events-none absolute inset-0 -z-10 opacity-60" />
-        <div className="container-shell grid min-h-[680px] items-center gap-12 py-20 lg:grid-cols-[0.8fr_1.2fr] lg:py-28">
+        <div className="container-shell grid min-h-[560px] items-center gap-10 py-16 lg:grid-cols-[0.85fr_1.15fr] lg:py-20">
           <div>
             <p className="eyebrow">Connecting technology with everyday life</p>
-            <h1 className="display-heading">连接技术与日常。</h1>
+            <h1 className="display-heading text-balance">连接技术与日常。</h1>
             <p className="body-copy mt-8 max-w-md text-lg">我们专注于蓝牙周边、音频与智能设备，持续把可靠的技术变成简单、可用的产品。</p>
             <div className="mt-9 flex flex-wrap items-center gap-4">
               <Link className="button-primary" href="/products">了解产品 <ArrowRight /></Link>
@@ -36,9 +36,9 @@ export default function HomePage() {
         </div>
       </section>
 
-      <section className="section-rule py-24 sm:py-32">
+      <section className="section-rule py-20 sm:py-24">
         <div className="container-shell">
-          <div className="flex flex-col justify-between gap-8 sm:flex-row sm:items-end">
+          <div className="flex flex-col justify-between gap-6 sm:flex-row sm:items-end">
             <SectionHeading eyebrow="Products" title="为真实场景，打造可靠的蓝牙周边。" description="产品中心将由结构化内容驱动。当前资料尚未确认，以下内容仅用于开发阶段验证模板。" />
             <ArrowLink href="/products">查看全部产品</ArrowLink>
           </div>
@@ -59,7 +59,7 @@ export default function HomePage() {
         </div>
       </section>
 
-      <section className="section-rule py-24 sm:py-32" id="technology">
+      <section className="section-rule py-20 sm:py-24" id="technology">
         <div className="container-shell">
           <SectionHeading eyebrow="Technology" title="从无线连接到嵌入式开发，关注产品背后的核心技术。" description="以硬件经验为基础，持续探索可靠连接、音频体验、嵌入式系统与 AI 在设备中的应用。" tone="cyan" />
           <div className="mt-14 grid border-y border-line sm:grid-cols-2 lg:grid-cols-4">
@@ -73,11 +73,11 @@ export default function HomePage() {
         </div>
       </section>
 
-      <section className="section-rule overflow-hidden py-24 sm:py-32" id="ai-lab">
+      <section className="section-rule overflow-hidden py-20 sm:py-24" id="ai-lab">
         <div className="container-shell grid items-center gap-12 lg:grid-cols-[0.8fr_1.2fr]">
           <div>
             <p className="eyebrow eyebrow-cyan">AI Lab</p>
-            <h2 className="mt-5 max-w-md text-4xl font-semibold tracking-[-0.05em] text-copy sm:text-6xl">让设备更懂声音。</h2>
+            <h2 className="text-balance mt-5 max-w-lg text-4xl font-semibold tracking-[-0.05em] text-copy sm:text-6xl">让设备更懂声音。</h2>
             <p className="body-copy mt-6 max-w-md">从文本转语音开始，探索语音能力在真实产品中的应用。完整工具位于独立工作台，不抢占首页的产品叙事。</p>
             <Link className="button-secondary mt-8" href="/tts">体验 TTS <ArrowRight /></Link>
           </div>
diff --git a/components/brand-mark.tsx b/components/brand-mark.tsx
index c612701..5fd2581 100644
--- a/components/brand-mark.tsx
+++ b/components/brand-mark.tsx
@@ -5,9 +5,9 @@ export function BrandMark({ compact = false }: { compact?: boolean }) {
     <Image
       src="/brand/logo_bt.png"
       alt="考町科技 KAOTINGS"
-      width={compact ? 142 : 176}
-      height={compact ? 51 : 63}
-      className={compact ? "h-[34px] w-auto" : "h-10 w-auto"}
+      width={compact ? 168 : 208}
+      height={compact ? 60 : 75}
+      className={compact ? "h-11 w-auto" : "h-14 w-auto"}
       priority
     />
   );
diff --git a/components/site-header.tsx b/components/site-header.tsx
index ee68e8b..0d1cf5e 100644
--- a/components/site-header.tsx
+++ b/components/site-header.tsx
@@ -15,14 +15,14 @@ export function SiteHeader() {
         <Link aria-label="返回考町科技首页" href="/" onClick={() => setOpen(false)}>
           <BrandMark compact />
         </Link>
-        <nav aria-label="主导航" className="hidden items-center gap-8 md:flex">
+        <nav aria-label="主导航" className="desktop-nav items-center gap-8">
           {navigation.map((item) => (
             <Link className="text-sm text-muted transition-colors hover:text-copy" href={item.href} key={item.href}>
               {item.label}
             </Link>
           ))}
         </nav>
-        <div className="hidden items-center gap-3 md:flex">
+        <div className="desktop-nav items-center gap-3">
           <Link className="text-sm text-muted transition-colors hover:text-copy" href="/login">
             登录
           </Link>
@@ -30,7 +30,7 @@ export function SiteHeader() {
             联系我们
           </Link>
         </div>
-        <button aria-expanded={open} aria-label={open ? "关闭导航" : "打开导航"} className="button-ghost min-h-10 p-2 md:hidden" onClick={() => setOpen((current) => !current)} type="button">
+        <button aria-expanded={open} aria-label={open ? "关闭导航" : "打开导航"} className="button-ghost mobile-nav-trigger min-h-10 p-2" onClick={() => setOpen((current) => !current)} type="button">
           {open ? <CloseIcon /> : <MenuIcon />}
         </button>
       </div>
diff --git a/components/ui.tsx b/components/ui.tsx
index 05b5186..37fed3e 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -9,7 +9,7 @@ export function SectionHeading({ eyebrow, title, description, tone = "orange" }:
   return (
     <div className="max-w-2xl">
       <p className={`eyebrow ${tone === "blue" ? "eyebrow-blue" : tone === "cyan" ? "eyebrow-cyan" : ""}`}>{eyebrow}</p>
-      <h2 className="mt-5 text-3xl font-semibold tracking-[-0.04em] text-copy sm:text-5xl">{title}</h2>
+      <h2 className="text-balance mt-5 text-3xl font-semibold tracking-[-0.04em] text-copy sm:text-5xl">{title}</h2>
       {description ? <p className="body-copy mt-5 max-w-xl text-base">{description}</p> : null}
     </div>
   );
diff --git a/docs/phase-1-report.md b/docs/phase-1-report.md
index b9a011a..4364f19 100644
--- a/docs/phase-1-report.md
+++ b/docs/phase-1-report.md
@@ -152,3 +152,23 @@ npm run start -- -H 0.0.0.0 -p 3000
 - 移动端是否有横向溢出、文字截断、焦点不可见或触控区域过小。
 
 上述人工检查完成前，Phase 1 的真实视觉验收保持“待完成”。
+
+## 11. 本轮首页视觉修正
+
+依据 `docs/design/references/kaotings-homepage-approved-reference.png` 和用户提供的测试截图完成以下调整：
+
+- 内容容器最大宽度从 `1180px` 调整为 `1320px`，宽屏保留左右边界，减少主体过窄问题。
+- 导航 Logo 使用正式组合 Logo，桌面高度调整为约 `44px`，页脚约 `56px`，始终保持原始比例。
+- 导航、账户入口和移动按钮改为显式 `768px` CSS 断点，桌面完整导航显示时移动菜单按钮隐藏。
+- 标题和区块标题启用 `text-wrap: balance`，降低中文孤字断行概率；产品和 AI Lab 标题的栏宽同步放宽。
+- 首页 Hero、产品、技术和 AI Lab 区块的纵向间距收紧，按钮横向留白略增，改善“大空白、小内容”比例。
+- 产品抽象视觉仍明确标注“开发占位”，不作为真实产品素材验收。
+
+本轮实际检查记录：
+
+- 本地：`npm run typecheck` 通过，`npm run build` 通过。
+- 测试站：重新构建并监听 `0.0.0.0:3000`，`http://192.168.199.22:3000/` 返回 `200`。
+- 实际浏览器 viewport：未核实。
+- 浏览器缩放比例：未核实。
+- 桌面/移动真实截图：未生成，待用户在实际浏览器验收。
+- 源码断点目标：`<768px` 移动导航，`>=768px` 桌面导航；这不是实际设备验收结果。