fix: refine Phase 1 homepage visual layout
This commit is contained in:
parent
865f1cae06
commit
4dac5c17cb
@ -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,
|
||||
|
||||
14
app/page.tsx
14
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>
|
||||
|
||||
@ -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
|
||||
/>
|
||||
);
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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` 桌面导航；这不是实际设备验收结果。
|
||||
|
||||
Loading…
Reference in New Issue
Block a user