novalon-website/docs/superpowers/plans/2026-04-30-atlassian-brand-fusion-redesign.json

{
  "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"
  }
}