feat(web): 用户端设计完善 + ICP 备案号

- 页脚升级双层结构：品牌区 + 产品/资源链接列 + 底栏（© + 滇ICP备2025056308号-1，链接工信部备案系统） - 滚动进场动效：Reveal 组件（IntersectionObserver），首页各区块错峰淡入，尊重 prefers-reduced-motion - Hero 终端窗事件流逐行浮现动画 - 功能卡片 hover 时 mono 标签点亮强调色 - 全站动态页面标题（博客详情随文章名变化） Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-17 11:20:32 +08:00
parent 0250355dcd
commit 4423a770e2
15 changed files with 306 additions and 108 deletions
@@ -2,45 +2,56 @@ import { Link } from 'react-router-dom'
 import { Download } from 'lucide-react'
 import { SITE } from '@/content/site'
 import { TerminalDemo } from '@/components/terminal-demo'
+import { Reveal } from '@/components/reveal'

 export function Hero() {
  return (
    <section className="px-6 pt-21 text-center lg:px-10">
-      <span className="mb-6.5 inline-flex items-center gap-2 rounded-full border border-hairline-strong px-3.5 py-1 font-mono text-xs tracking-[0.08em] text-accent-ink">
-        <span className="size-[7px] rounded-full bg-accent" />
-        {SITE.version} 已发布 · macOS / Windows
-      </span>
+      <Reveal>
+        <span className="mb-6.5 inline-flex items-center gap-2 rounded-full border border-hairline-strong px-3.5 py-1 font-mono text-xs tracking-[0.08em] text-accent-ink">
+          <span className="size-[7px] rounded-full bg-accent" />
+          {SITE.version} 已发布 · macOS / Windows
+        </span>
+      </Reveal>

-      <h1 className="mx-auto max-w-[17em] text-balance text-4xl font-[650] leading-[1.18] tracking-[-0.028em] md:text-[52px] lg:text-[58px]">
-        事件驱动的
-        <br />
-        AI Agent 工作台<span className="text-ink-3">。</span>
-      </h1>
+      <Reveal delay={80}>
+        <h1 className="mx-auto max-w-[17em] text-balance text-4xl font-[650] leading-[1.18] tracking-[-0.028em] md:text-[52px] lg:text-[58px]">
+          事件驱动的
+          <br />
+          AI Agent 工作台<span className="text-ink-3">。</span>
+        </h1>
+      </Reveal>

-      <p className="mx-auto mt-5.5 max-w-[37em] text-[17px] text-ink-2">
-        在画布上编排智能体，让多 Agent
-        团队替你研究、检索、写出真正的 Word
-        报告。桌面开箱即用，也可一条命令私有化部署。
-      </p>
+      <Reveal delay={160}>
+        <p className="mx-auto mt-5.5 max-w-[37em] text-[17px] text-ink-2">
+          在画布上编排智能体，让多 Agent
+          团队替你研究、检索、写出真正的 Word
+          报告。桌面开箱即用，也可一条命令私有化部署。
+        </p>
+      </Reveal>

-      <div className="mt-9 flex flex-wrap justify-center gap-3">
-        <Link
-          to="/download"
-          className="inline-flex items-center gap-2 rounded-lg bg-accent px-6 py-2.5 text-[14.5px] font-medium text-ground transition-opacity hover:opacity-90"
-        >
-          下载桌面版 <Download className="size-4" />
-        </Link>
-        <a
-          href={SITE.github}
-          target="_blank"
-          rel="noreferrer"
-          className="inline-flex items-center rounded-lg border border-hairline-strong px-6 py-2.5 font-mono text-[14px] transition-colors hover:border-accent"
-        >
-          $ make demo
-        </a>
-      </div>
+      <Reveal delay={240}>
+        <div className="mt-9 flex flex-wrap justify-center gap-3">
+          <Link
+            to="/download"
+            className="inline-flex items-center gap-2 rounded-lg bg-accent px-6 py-2.5 text-[14.5px] font-medium text-ground transition-opacity hover:opacity-90"
+          >
+            下载桌面版 <Download className="size-4" />
+          </Link>
+          <a
+            href={SITE.github}
+            target="_blank"
+            rel="noreferrer"
+            className="inline-flex items-center rounded-lg border border-hairline-strong px-6 py-2.5 font-mono text-[14px] transition-colors hover:border-accent"
+          >
+            $ make demo
+          </a>
+        </div>
+      </Reveal>

-      <TerminalDemo />
+      <Reveal delay={320}>
+        <TerminalDemo />
+      </Reveal>
    </section>
  )
 }