{ "project": "novalon-website-atlassian-brand-fusion", "version": "1.0.0", "createdAt": "2026-04-30", "status": "approved", "spec": "docs/superpowers/specs/2026-04-30-atlassian-brand-fusion-redesign.md", "plan": "docs/superpowers/plans/2026-04-30-atlassian-brand-fusion-redesign.md", "objective": "借鉴 Atlassian 信息架构,重构 Novalon 首页为收敛但保留印记的品牌融合风格,同步沉淀 6 个核心组件", "architecture": "Next.js 16 App Router + 静态导出。首页从单文件长滚动重构为 6 个独立 Section 组件 + 新导航组件。动效从粒子/水墨收敛为微交互。导航从 8 项平铺改为 4 核心 + 2 下拉。", "techStack": ["Next.js 16", "React 19", "Tailwind CSS 4", "Framer Motion 12", "Lucide React"], "phases": [ { "id": "phase-1", "name": "首页重构 + 设计系统基础", "status": "pending", "tasks": [ { "id": "task-1", "title": "Design Token 更新", "status": "pending", "priority": "high", "files": { "modify": ["src/app/globals.css"] }, "steps": [ { "id": "1-1", "action": "在 :root 中新增场景色变量 (--color-challenge-isolation/growth/compliance 及 hover 变体)", "status": "pending" }, { "id": "1-2", "action": "验证 CSS 变量可用 (npx tsc --noEmit)", "status": "pending" }, { "id": "1-3", "action": "Commit: feat: add challenge scenario color tokens to design system", "status": "pending" } ] }, { "id": "task-2", "title": "导航常量重构", "status": "pending", "priority": "high", "files": { "create": ["src/lib/constants/navigation.test.ts"], "modify": ["src/lib/constants/navigation.ts", "src/lib/constants/index.ts"] }, "steps": [ { "id": "2-1", "action": "编写失败的测试 (NAVIGATION_V2 + MEGA_DROPDOWN_DATA)", "status": "pending" }, { "id": "2-2", "action": "运行测试验证失败", "status": "pending" }, { "id": "2-3", "action": "实现 NavigationItemV2 + MegaDropdownItem + MegaDropdownData 类型及 NAVIGATION_V2 + MEGA_DROPDOWN_DATA 常量", "status": "pending" }, { "id": "2-4", "action": "更新 index.ts 导出", "status": "pending" }, { "id": "2-5", "action": "运行测试验证通过", "status": "pending" }, { "id": "2-6", "action": "Commit: feat: add NAVIGATION_V2 and MEGA_DROPDOWN_DATA", "status": "pending" } ] }, { "id": "task-3", "title": "MegaDropdown 组件", "status": "pending", "priority": "high", "files": { "create": ["src/components/layout/mega-dropdown.tsx", "src/components/layout/mega-dropdown.test.tsx"] }, "steps": [ { "id": "3-1", "action": "编写失败的测试 (渲染触发按钮/显示下拉内容/隐藏下拉/点击触发/渲染条目)", "status": "pending" }, { "id": "3-2", "action": "运行测试验证失败", "status": "pending" }, { "id": "3-3", "action": "实现 MegaDropdown 组件 (ChevronDown + AnimatePresence + 2列网格 + 朱砂红左边框)", "status": "pending" }, { "id": "3-4", "action": "运行测试验证通过", "status": "pending" }, { "id": "3-5", "action": "Commit: feat: add MegaDropdown component", "status": "pending" } ] }, { "id": "task-4", "title": "Header 重构", "status": "pending", "priority": "high", "files": { "modify": ["src/components/layout/header.tsx", "src/components/layout/header.test.tsx"] }, "steps": [ { "id": "4-1", "action": "编写失败的测试 (NAVIGATION_V2 项/旧项不存在)", "status": "pending" }, { "id": "4-2", "action": "运行测试验证失败", "status": "pending" }, { "id": "4-3", "action": "重构 Header: NAVIGATION → NAVIGATION_V2 + MegaDropdown + openDropdown state", "status": "pending" }, { "id": "4-4", "action": "运行测试验证通过", "status": "pending" }, { "id": "4-5", "action": "Commit: feat: refactor Header with NAVIGATION_V2 and MegaDropdown", "status": "pending" } ] }, { "id": "task-5", "title": "Hero Section 重构", "status": "pending", "priority": "high", "files": { "create": ["src/components/sections/hero-section-v2.tsx", "src/components/sections/hero-section-v2.test.tsx"] }, "steps": [ { "id": "5-1", "action": "编写失败的测试 (品牌标签/书法标题/双CTA/副标题)", "status": "pending" }, { "id": "5-2", "action": "运行测试验证失败", "status": "pending" }, { "id": "5-3", "action": "实现 HeroSectionV2 (暖白渐变+极简装饰圆圈+品牌标签+书法标题+双CTA+FadeUp动效)", "status": "pending" }, { "id": "5-4", "action": "运行测试验证通过", "status": "pending" }, { "id": "5-5", "action": "Commit: feat: add HeroSectionV2 with brand fusion style", "status": "pending" } ] }, { "id": "task-6", "title": "StatsBar 组件", "status": "pending", "priority": "medium", "files": { "create": ["src/components/ui/stats-bar.tsx", "src/components/ui/stats-bar.test.tsx"] }, "steps": [ { "id": "6-1", "action": "编写失败的测试 (渲染所有数值和标签)", "status": "pending" }, { "id": "6-2", "action": "运行测试验证失败", "status": "pending" }, { "id": "6-3", "action": "实现 StatsBar (3列网格+朱砂红数值+灰色标签)", "status": "pending" }, { "id": "6-4", "action": "运行测试验证通过", "status": "pending" }, { "id": "6-5", "action": "Commit: feat: add StatsBar component", "status": "pending" } ] }, { "id": "task-7", "title": "社会证明 Section", "status": "pending", "priority": "medium", "files": { "create": ["src/components/sections/social-proof-section.tsx", "src/components/sections/social-proof-section.test.tsx"], "modify": ["src/lib/constants/stats.ts"] }, "steps": [ { "id": "7-1", "action": "在 stats.ts 新增 HOME_STATS 常量", "status": "pending" }, { "id": "7-2", "action": "编写测试 (渲染数据/浅灰背景)", "status": "pending" }, { "id": "7-3", "action": "实现 SocialProofSection (浅灰背景+StatsBar)", "status": "pending" }, { "id": "7-4", "action": "运行测试验证通过", "status": "pending" }, { "id": "7-5", "action": "Commit: feat: add SocialProofSection with HOME_STATS", "status": "pending" } ] }, { "id": "task-8", "title": "ProductCard 组件", "status": "pending", "priority": "high", "files": { "create": ["src/components/ui/product-card.tsx", "src/components/ui/product-card.test.tsx"] }, "steps": [ { "id": "8-1", "action": "编写失败的测试 (标题/描述/链接/左边框)", "status": "pending" }, { "id": "8-2", "action": "运行测试验证失败", "status": "pending" }, { "id": "8-3", "action": "实现 ProductCard (朱砂红3px左边框+hover提升+阴影)", "status": "pending" }, { "id": "8-4", "action": "运行测试验证通过", "status": "pending" }, { "id": "8-5", "action": "Commit: feat: add ProductCard component", "status": "pending" } ] }, { "id": "task-9", "title": "产品矩阵 Section", "status": "pending", "priority": "high", "files": { "create": ["src/components/sections/product-matrix-section.tsx", "src/components/sections/product-matrix-section.test.tsx"] }, "steps": [ { "id": "9-1", "action": "编写测试 (标题/4个产品)", "status": "pending" }, { "id": "9-2", "action": "运行测试验证失败", "status": "pending" }, { "id": "9-3", "action": "实现 ProductMatrixSection (白底+2x2网格+PRODUCTS数据)", "status": "pending" }, { "id": "9-4", "action": "运行测试验证通过", "status": "pending" }, { "id": "9-5", "action": "Commit: feat: add ProductMatrixSection", "status": "pending" } ] }, { "id": "task-10", "title": "ChallengeCard 组件", "status": "pending", "priority": "high", "files": { "create": ["src/components/ui/challenge-card.tsx", "src/components/ui/challenge-card.test.tsx"] }, "steps": [ { "id": "10-1", "action": "编写失败的测试 (图标/标题/副标题/链接)", "status": "pending" }, { "id": "10-2", "action": "运行测试验证失败", "status": "pending" }, { "id": "10-3", "action": "实现 ChallengeCard (场景色背景+hover色变+emoji图标+朱砂红副标题)", "status": "pending" }, { "id": "10-4", "action": "运行测试验证通过", "status": "pending" }, { "id": "10-5", "action": "Commit: feat: add ChallengeCard component", "status": "pending" } ] }, { "id": "task-11", "title": "挑战场景 Section", "status": "pending", "priority": "high", "files": { "create": ["src/components/sections/challenge-section.tsx", "src/components/sections/challenge-section.test.tsx"] }, "steps": [ { "id": "11-1", "action": "编写测试 (标题/三个挑战卡片)", "status": "pending" }, { "id": "11-2", "action": "运行测试验证失败", "status": "pending" }, { "id": "11-3", "action": "实现 ChallengeSection (暖白背景+三列网格+系统孤岛/增长瓶颈/合规风险)", "status": "pending" }, { "id": "11-4", "action": "运行测试验证通过", "status": "pending" }, { "id": "11-5", "action": "Commit: feat: add ChallengeSection", "status": "pending" } ] }, { "id": "task-12", "title": "TestimonialBlock 组件", "status": "pending", "priority": "medium", "files": { "create": ["src/components/ui/testimonial-block.tsx", "src/components/ui/testimonial-block.test.tsx"] }, "steps": [ { "id": "12-1", "action": "编写失败的测试 (引言/署名/量化指标)", "status": "pending" }, { "id": "12-2", "action": "运行测试验证失败", "status": "pending" }, { "id": "12-3", "action": "实现 TestimonialBlock (深墨背景+引言+署名+朱砂红数值指标)", "status": "pending" }, { "id": "12-4", "action": "运行测试验证通过", "status": "pending" }, { "id": "12-5", "action": "Commit: feat: add TestimonialBlock component", "status": "pending" } ] }, { "id": "task-13", "title": "客户成果 Section", "status": "pending", "priority": "medium", "files": { "create": ["src/components/sections/testimonial-section.tsx", "src/components/sections/testimonial-section.test.tsx"] }, "steps": [ { "id": "13-1", "action": "编写测试 (客户成果标签)", "status": "pending" }, { "id": "13-2", "action": "运行测试验证失败", "status": "pending" }, { "id": "13-3", "action": "实现 TestimonialSection (深墨背景+CASES数据+TestimonialBlock)", "status": "pending" }, { "id": "13-4", "action": "运行测试验证通过", "status": "pending" }, { "id": "13-5", "action": "Commit: feat: add TestimonialSection", "status": "pending" } ] }, { "id": "task-14", "title": "CTASection 组件", "status": "pending", "priority": "medium", "files": { "create": ["src/components/ui/cta-section.tsx", "src/components/ui/cta-section.test.tsx"] }, "steps": [ { "id": "14-1", "action": "编写失败的测试 (标题/副标题/按钮)", "status": "pending" }, { "id": "14-2", "action": "运行测试验证失败", "status": "pending" }, { "id": "14-3", "action": "实现 CTASection (朱砂红渐变+白色描边按钮)", "status": "pending" }, { "id": "14-4", "action": "运行测试验证通过", "status": "pending" }, { "id": "14-5", "action": "Commit: feat: add CTASection component", "status": "pending" } ] }, { "id": "task-15", "title": "CTA Section 页面级", "status": "pending", "priority": "medium", "files": { "create": ["src/components/sections/cta-section-page.tsx", "src/components/sections/cta-section-page.test.tsx"] }, "steps": [ { "id": "15-1", "action": "编写测试 (标题/副标题内容)", "status": "pending" }, { "id": "15-2", "action": "运行测试验证失败", "status": "pending" }, { "id": "15-3", "action": "实现 CTASectionPage (CTASection 包装+首页特定内容)", "status": "pending" }, { "id": "15-4", "action": "运行测试验证通过", "status": "pending" }, { "id": "15-5", "action": "Commit: feat: add CTASectionPage", "status": "pending" } ] }, { "id": "task-16", "title": "首页组装", "status": "pending", "priority": "high", "files": { "modify": ["src/app/(marketing)/home-content.tsx"] }, "steps": [ { "id": "16-1", "action": "编写测试 (新Hero/产品矩阵/挑战/CTA)", "status": "pending" }, { "id": "16-2", "action": "运行测试验证失败", "status": "pending" }, { "id": "16-3", "action": "重构 home-content.tsx: 替换为 HeroSectionV2 + SocialProof + ProductMatrix + Challenge + Testimonial + CTA", "status": "pending" }, { "id": "16-4", "action": "运行测试验证通过", "status": "pending" }, { "id": "16-5", "action": "Commit: feat: assemble homepage with new brand-fusion sections", "status": "pending" } ] }, { "id": "task-17", "title": "废弃动效清理", "status": "pending", "priority": "low", "files": { "modify": ["src/components/effects/index.ts"] }, "steps": [ { "id": "17-1", "action": "从 effects/index.ts 移除废弃组件导出 (InkBackground/DataParticleFlow/ParticleGalaxy/MouseInteractiveParticles/FluidWaveBackground/GeometricAbstract/GridLines/AdvancedFloatingEffects)", "status": "pending" }, { "id": "17-2", "action": "验证构建无报错 (npx tsc --noEmit)", "status": "pending" }, { "id": "17-3", "action": "Commit: chore: remove deprecated particle/ink effect exports", "status": "pending" } ] }, { "id": "task-18", "title": "集成测试与验证", "status": "pending", "priority": "high", "steps": [ { "id": "18-1", "action": "运行全量单元测试 (npx jest --no-coverage)", "status": "pending" }, { "id": "18-2", "action": "运行类型检查 (npx tsc --noEmit)", "status": "pending" }, { "id": "18-3", "action": "运行构建 (npm run build)", "status": "pending" }, { "id": "18-4", "action": "启动开发服务器手动验证 (导航/6个Section/无粒子动效)", "status": "pending" }, { "id": "18-5", "action": "运行 Lighthouse 审计 (Performance≥90, Accessibility≥95)", "status": "pending" }, { "id": "18-6", "action": "最终 Commit: feat: complete Phase 1 of Atlassian-style brand fusion homepage redesign", "status": "pending" } ] } ] } ], "components": { "new": [ { "name": "MegaDropdown", "path": "src/components/layout/mega-dropdown.tsx", "reuse": ["全站导航"] }, { "name": "ProductCard", "path": "src/components/ui/product-card.tsx", "reuse": ["首页", "产品列表页"] }, { "name": "ChallengeCard", "path": "src/components/ui/challenge-card.tsx", "reuse": ["首页", "解决方案页"] }, { "name": "StatsBar", "path": "src/components/ui/stats-bar.tsx", "reuse": ["首页", "产品页", "关于页"] }, { "name": "TestimonialBlock", "path": "src/components/ui/testimonial-block.tsx", "reuse": ["首页", "案例页", "产品页"] }, { "name": "CTASection", "path": "src/components/ui/cta-section.tsx", "reuse": ["全站通用"] }, { "name": "HeroSectionV2", "path": "src/components/sections/hero-section-v2.tsx", "reuse": ["首页"] }, { "name": "SocialProofSection", "path": "src/components/sections/social-proof-section.tsx", "reuse": ["首页"] }, { "name": "ProductMatrixSection", "path": "src/components/sections/product-matrix-section.tsx", "reuse": ["首页"] }, { "name": "ChallengeSection", "path": "src/components/sections/challenge-section.tsx", "reuse": ["首页"] }, { "name": "TestimonialSection", "path": "src/components/sections/testimonial-section.tsx", "reuse": ["首页"] }, { "name": "CTASectionPage", "path": "src/components/sections/cta-section-page.tsx", "reuse": ["首页"] } ], "modify": [ { "name": "Header", "path": "src/components/layout/header.tsx", "change": "集成 MegaDropdown + NAVIGATION_V2" }, { "name": "home-content", "path": "src/app/(marketing)/home-content.tsx", "change": "替换为新 Section 组件" } ], "deprecate": [ "InkBackground", "DataParticleFlow", "ParticleGalaxy", "MouseInteractiveParticles", "FluidWaveBackground", "GeometricAbstract", "GridLines", "AdvancedFloatingEffects" ] }, "designDecisions": { "brandDirection": "B — 收敛但保留印记", "deliveryRhythm": "A+C 混合 — 首页驱动的设计系统", "homepageLayout": "方案二 — 品牌融合重构", "animationStrategy": "大幅收敛 — 移除粒子/水墨,保留微交互", "navigationStructure": "4核心+2下拉" }, "visualRhythm": ["暖白(Hero)", "浅灰(社会证明)", "白(产品矩阵)", "暖白(挑战场景)", "深墨(客户成果)", "朱砂红(CTA)", "浅灰(Footer)"], "qualityGates": { "unitTests": "all pass", "typeCheck": "no errors", "build": "success", "lighthousePerformance": ">=90", "lighthouseAccessibility": ">=95" } }