novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: P0 - remove testimonial, migrate footer & mobile menu to NAVIGATION_V2

Browse Source 
- Remove TestimonialSection from homepage (no customers yet)
- Footer: dark theme, NAVIGATION_V2 + MEGA_DROPDOWN_DATA links
- Mobile Menu: NAVIGATION_V2 with collapsible dropdown support
This commit is contained in:
张翔
2026-04-30 22:00:00 +08:00
parent b6d2313e8f
commit fe6e4b1c54
24 changed files with 8928 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.superpowers/brainstorm/71919-1777542709/.server-stopped
+1
View File
@@ -0,0 +1 @@
{"reason":"idle timeout","timestamp":1777547630053}
.superpowers/brainstorm/71919-1777542709/atlassian-comparison.html
+116
View File
@@ -0,0 +1,116 @@
<h2>Novalon × Atlassian：设计思路对比</h2>
<p class="subtitle">分析两者在信息架构、视觉层次、交互模式上的核心差异，探索可借鉴的方向</p>
<div class="section">
<h3>📐 信息架构对比</h3>
<div class="split">
<div class="mockup">
<div class="mockup-header">当前 Novalon — 单页长滚动</div>
<div class="mockup-body" style="padding: 12px;">
<div class="mock-nav" style="margin-bottom:8px;">Logo | 服务 | 解决方案 | 产品 | 案例 | 关于 | 团队 | 新闻</div>
<div class="placeholder" style="height:60px;margin-bottom:6px;background:#1C1C1C;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;">Hero 全屏（水墨粒子 + 数据流）</div>
<div class="placeholder" style="height:35px;margin-bottom:4px;background:#fff;border:1px solid #E5E5E5;display:flex;align-items:center;justify-content:center;font-size:10px;">核心业务 Section</div>
<div class="placeholder" style="height:35px;margin-bottom:4px;background:#F5F5F5;display:flex;align-items:center;justify-content:center;font-size:10px;">解决方案 Section</div>
<div class="placeholder" style="height:35px;margin-bottom:4px;background:#fff;border:1px solid #E5E5E5;display:flex;align-items:center;justify-content:center;font-size:10px;">产品 Section</div>
<div class="placeholder" style="height:35px;margin-bottom:4px;background:#F5F5F5;display:flex;align-items:center;justify-content:center;font-size:10px;">案例 Section</div>
<div class="placeholder" style="height:35px;margin-bottom:4px;background:#fff;border:1px solid #E5E5E5;display:flex;align-items:center;justify-content:center;font-size:10px;">关于 + 团队 Section</div>
<div class="placeholder" style="height:35px;margin-bottom:4px;background:#F5F5F5;display:flex;align-items:center;justify-content:center;font-size:10px;">新闻 Section</div>
<div style="font-size:9px;color:#888;margin-top:6px;text-align:center;">8个Section 纵向堆叠，通过 URL hash 导航</div>
</div>
</div>
<div class="mockup">
<div class="mockup-header">Atlassian — 多页面产品矩阵</div>
<div class="mockup-body" style="padding: 12px;">
<div class="mock-nav" style="margin-bottom:8px;">Logo | Products ▾ | Solutions ▾ | Resources ▾ | Pricing | Contact</div>
<div class="placeholder" style="height:50px;margin-bottom:6px;background:linear-gradient(135deg,#0052CC,#2684FF);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;">Hero（产品主张 + 视频背景）</div>
<div class="placeholder" style="height:35px;margin-bottom:4px;background:#fff;border:1px solid #DFE1E6;display:flex;align-items:center;justify-content:center;font-size:10px;">社会证明（300K+ 公司 / 80% Fortune 500）</div>
<div class="placeholder" style="height:35px;margin-bottom:4px;background:#F4F5F7;display:flex;align-items:center;justify-content:center;font-size:10px;">产品矩阵卡片（Jira / Confluence / Loom / Rovo）</div>
<div class="placeholder" style="height:35px;margin-bottom:4px;background:#fff;border:1px solid #DFE1E6;display:flex;align-items:center;justify-content:center;font-size:10px;">模板/场景入口（Scrum / Bug / DevOps）</div>
<div class="placeholder" style="height:35px;margin-bottom:4px;background:#F4F5F7;display:flex;align-items:center;justify-content:center;font-size:10px;">客户证言轮播</div>
<div class="placeholder" style="height:35px;margin-bottom:4px;background:#fff;border:1px solid #DFE1E6;display:flex;align-items:center;justify-content:center;font-size:10px;">CTA + Footer</div>
<div style="font-size:9px;color:#888;margin-top:6px;text-align:center;">独立产品页 + 下拉导航 + 场景化入口</div>
</div>
</div>
</div>
</div>
<div class="section">
<h3>🎨 视觉设计语言对比</h3>
<div class="split">
<div class="mockup">
<div class="mockup-header">Novalon — 水墨科技风</div>
<div class="mockup-body" style="padding: 16px;">
<div style="display:flex;gap:8px;margin-bottom:12px;">
<div style="width:40px;height:40px;background:#1C1C1C;border-radius:4px;" title="墨黑"></div>
<div style="width:40px;height:40px;background:#C41E3A;border-radius:4px;" title="朱砂红"></div>
<div style="width:40px;height:40px;background:#FFFBF5;border:1px solid #E5E5E5;border-radius:4px;" title="宣纸白"></div>
<div style="width:40px;height:40px;background:#F5F5F5;border-radius:4px;" title="浅灰"></div>
</div>
<div style="font-size:12px;margin-bottom:4px;"><strong>字体：</strong>Geist Sans + 青柳隶书（品牌标题）</div>
<div style="font-size:12px;margin-bottom:4px;"><strong>动效：</strong>水墨粒子 / 数据流 / 印章动画 / 视差</div>
<div style="font-size:12px;margin-bottom:4px;"><strong>氛围：</strong>东方韵味 × 科技感</div>
<div style="font-size:12px;"><strong>节奏：</strong>深→白→深→白 明暗交替</div>
</div>
</div>
<div class="mockup">
<div class="mockup-header">Atlassian — 清晰现代风</div>
<div class="mockup-body" style="padding: 16px;">
<div style="display:flex;gap:8px;margin-bottom:12px;">
<div style="width:40px;height:40px;background:#0052CC;border-radius:4px;" title="品牌蓝"></div>
<div style="width:40px;height:40px;background:#00875A;border-radius:4px;" title="绿色"></div>
<div style="width:40px;height:40px;background:#FF991F;border-radius:4px;" title="橙色"></div>
<div style="width:40px;height:40px;background:#F4F5F7;border-radius:4px;" title="浅灰"></div>
</div>
<div style="font-size:12px;margin-bottom:4px;"><strong>字体：</strong>Atlassian Sans + Atlassian Mono</div>
<div style="font-size:12px;margin-bottom:4px;"><strong>动效：</strong>微交互 / 悬浮反馈 / 渐进展示</div>
<div style="font-size:12px;margin-bottom:4px;"><strong>氛围：</strong>专业、清晰、可信赖</div>
<div style="font-size:12px;"><strong>节奏：</strong>白底为主 + 品牌色点缀</div>
</div>
</div>
</div>
</div>
<div class="section">
<h3>🔑 Atlassian 可借鉴的 5 个核心设计模式</h3>
<div class="options">
<div class="option" data-choice="product-matrix" onclick="toggleSelect(this)">
<div class="letter">1</div>
<div class="content">
<h3>产品矩阵导航</h3>
<p>顶部导航下拉展示所有产品，每个产品有独立落地页。用户可按"产品"或"场景"两条路径发现内容。Novalon 当前将产品、服务、解决方案平铺在单页中，缺乏独立深度。</p>
</div>
</div>
<div class="option" data-choice="social-proof" onclick="toggleSelect(this)">
<div class="letter">2</div>
<div class="content">
<h3>社会证明前置</h3>
<p>Hero 之后紧跟"300K+ 公司 / 80% Fortune 500"数据条。Novalon 的数据统计在 Hero 底部，且缺乏大客户 Logo 墙和具体量化成果展示。</p>
</div>
</div>
<div class="option" data-choice="scenario-entry" onclick="toggleSelect(this)">
<div class="letter">3</div>
<div class="content">
<h3>场景化入口</h3>
<p>"Get started with a template" — Scrum / Bug Tracking / DevOps 等场景模板，让用户按自身需求快速找到切入点。Novalon 的解决方案页面目前是静态描述，缺乏场景引导。</p>
</div>
</div>
<div class="option" data-choice="testimonial-carousel" onclick="toggleSelect(this)">
<div class="letter">4</div>
<div class="content">
<h3>客户证言轮播</h3>
<p>大段真实客户引言 + 姓名/职位/公司，按企业规模分类（Large Enterprise / SMB）。Novalon 的案例页目前是项目描述，缺乏客户视角的成果证言。</p>
</div>
</div>
<div class="option" data-choice="design-system" onclick="toggleSelect(this)">
<div class="letter">5</div>
<div class="content">
<h3>设计系统驱动一致性</h3>
<p>Atlassian Design System 统一了 Token、组件、模式三层。从字体（Atlassian Sans）、图标（1.5px stroke）、颜色（中性偏暖）到组件（按钮/标签/卡片），全产品线一致。Novalon 目前有设计变量但缺乏系统化组件库。</p>
</div>
</div>
</div>
</div>
<div class="section" style="text-align:center;padding:16px;background:#FFFBF5;border-radius:8px;border:1px solid #E5E5E5;">
<p style="font-size:13px;color:#5C5C5C;">👆 点击上方你感兴趣的设计模式（可多选），然后在终端告诉我你最想深入讨论哪些方向</p>
</div>
.superpowers/brainstorm/71919-1777542709/brand-direction-comparison.html
+201
View File
@@ -0,0 +1,201 @@
<h2>品牌基因方向对比：A vs B vs C</h2>
<p class="subtitle">同样的信息架构（借鉴 Atlassian），三种不同的视觉表达</p>
<div class="section">
<h3>首页 Hero 区域效果模拟</h3>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;">
<div class="card" data-choice="a" onclick="toggleSelect(this)">
<div class="card-image">
<div style="background:linear-gradient(180deg,#0A0A0A 0%,#1C1C1C 100%);padding:20px;min-height:200px;position:relative;overflow:hidden;">
<div style="position:absolute;top:10px;left:15px;width:3px;height:3px;background:#C41E3A;border-radius:50%;opacity:0.6;"></div>
<div style="position:absolute;top:40px;right:25px;width:2px;height:2px;background:#C41E3A;border-radius:50%;opacity:0.4;"></div>
<div style="position:absolute;bottom:30px;left:30px;width:4px;height:4px;background:#C41E3A;border-radius:50%;opacity:0.3;"></div>
<div style="position:absolute;top:60px;left:50%;width:60px;height:1px;background:linear-gradient(90deg,transparent,#C41E3A33,transparent);"></div>
<div style="position:relative;z-index:1;text-align:center;padding-top:20px;">
<div style="font-size:8px;color:#C41E3A;background:rgba(196,30,58,0.15);display:inline-block;padding:2px 8px;border-radius:2px;margin-bottom:8px;">数字化转型</div>
<div style="font-family:serif;font-size:18px;color:#FFFFFF;letter-spacing:4px;margin-bottom:6px;">睿新致遠</div>
<div style="font-size:9px;color:#999;margin-bottom:12px;">智连未来，成长伙伴</div>
<div style="display:inline-block;background:#C41E3A;color:#fff;font-size:8px;padding:4px 12px;border-radius:2px;">预约演示</div>
</div>
<div style="position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-right:1px solid #666;border-bottom:1px solid #666;transform:translateX(-50%) rotate(45deg);"></div>
</div>
</div>
<div class="card-body">
<h3>A — 保留并强化</h3>
<p>深墨色背景 + 水墨粒子持续运动 + 书法标题 + 朱砂红品牌色。视觉冲击力强，东方辨识度高。</p>
</div>
</div>
<div class="card" data-choice="b" onclick="toggleSelect(this)">
<div class="card-image">
<div style="background:linear-gradient(180deg,#FAFAFA 0%,#FFFFFF 100%);padding:20px;min-height:200px;position:relative;overflow:hidden;border:1px solid #E5E5E5;">
<div style="position:absolute;top:20px;right:20px;width:40px;height:40px;border:1px solid rgba(196,30,58,0.1);border-radius:50%;"></div>
<div style="position:absolute;bottom:20px;left:15px;width:30px;height:30px;border:1px solid rgba(196,30,58,0.08);border-radius:50%;"></div>
<div style="position:relative;z-index:1;text-align:center;padding-top:20px;">
<div style="font-size:8px;color:#C41E3A;border:1px solid rgba(196,30,58,0.3);display:inline-block;padding:2px 8px;border-radius:2px;margin-bottom:8px;">数字化转型</div>
<div style="font-family:serif;font-size:18px;color:#1C1C1C;letter-spacing:4px;margin-bottom:6px;">睿新致遠</div>
<div style="font-size:9px;color:#5C5C5C;margin-bottom:12px;">智连未来，成长伙伴</div>
<div style="display:inline-block;background:#C41E3A;color:#fff;font-size:8px;padding:4px 12px;border-radius:2px;">预约演示</div>
</div>
</div>
</div>
<div class="card-body">
<h3>B — 收敛但保留印记</h3>
<p>白底为主 + 极简装饰线条 + 书法标题保留 + 朱砂红品牌色。克制专业，品牌锚点仍在。</p>
</div>
</div>
<div class="card" data-choice="c" onclick="toggleSelect(this)">
<div class="card-image">
<div style="background:#FFFFFF;padding:20px;min-height:200px;position:relative;overflow:hidden;border:1px solid #E5E5E5;">
<div style="position:relative;z-index:1;text-align:center;padding-top:20px;">
<div style="font-size:8px;color:#0052CC;display:inline-block;padding:2px 8px;border-radius:10px;background:#E9F0FF;margin-bottom:8px;">数字化转型</div>
<div style="font-size:18px;color:#1C1C1C;font-weight:700;margin-bottom:6px;">Novalon</div>
<div style="font-size:9px;color:#5C5C5C;margin-bottom:12px;">智连未来，成长伙伴</div>
<div style="display:inline-block;background:#0052CC;color:#fff;font-size:8px;padding:4px 12px;border-radius:4px;">预约演示</div>
</div>
</div>
</div>
<div class="card-body">
<h3>C — 全面现代清晰风</h3>
<p>纯白底 + 蓝色品牌色 + 西文无衬线 + 圆角标签。极致清晰，但失去东方辨识度。</p>
</div>
</div>
</div>
</div>
<div class="section">
<h3>产品卡片效果模拟</h3>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;">
<div style="border:1px solid #333;border-radius:8px;overflow:hidden;">
<div style="background:#0A0A0A;padding:16px;text-align:center;">
<div style="width:36px;height:36px;background:rgba(196,30,58,0.15);border-radius:6px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;">
<span style="color:#C41E3A;font-size:14px;">ERP</span>
</div>
<div style="color:#fff;font-size:11px;font-weight:600;">睿新ERP管理系统</div>
<div style="color:#888;font-size:8px;margin-top:4px;">集成财务、采购、销售、库存、生产</div>
</div>
<div style="background:#1C1C1C;padding:8px 16px;">
<div style="color:#C41E3A;font-size:8px;">了解更多 →</div>
</div>
</div>
<div style="border:1px solid #E5E5E5;border-radius:8px;overflow:hidden;">
<div style="background:#FFFBF5;padding:16px;text-align:center;">
<div style="width:36px;height:36px;background:#FEF2F4;border-radius:6px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;">
<span style="color:#C41E3A;font-size:14px;">ERP</span>
</div>
<div style="color:#1C1C1C;font-size:11px;font-weight:600;">睿新ERP管理系统</div>
<div style="color:#5C5C5C;font-size:8px;margin-top:4px;">集成财务、采购、销售、库存、生产</div>
</div>
<div style="background:#fff;padding:8px 16px;border-top:1px solid #E5E5E5;">
<div style="color:#C41E3A;font-size:8px;">了解更多 →</div>
</div>
</div>
<div style="border:1px solid #DFE1E6;border-radius:8px;overflow:hidden;">
<div style="background:#FFFFFF;padding:16px;text-align:center;">
<div style="width:36px;height:36px;background:#E9F0FF;border-radius:8px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;">
<span style="color:#0052CC;font-size:14px;">ERP</span>
</div>
<div style="color:#172B4D;font-size:11px;font-weight:600;">睿新ERP管理系统</div>
<div style="color:#5E6C84;font-size:8px;margin-top:4px;">集成财务、采购、销售、库存、生产</div>
</div>
<div style="background:#F4F5F7;padding:8px 16px;">
<div style="color:#0052CC;font-size:8px;">了解更多 →</div>
</div>
</div>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:4px;">
<div style="text-align:center;font-size:9px;color:#888;">A — 深色沉浸卡片</div>
<div style="text-align:center;font-size:9px;color:#888;">B — 暖白克制卡片</div>
<div style="text-align:center;font-size:9px;color:#888;">C — 标准现代卡片</div>
</div>
</div>
<div class="section">
<h3>关键权衡分析</h3>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;">
<div style="padding:12px;border:1px solid #333;border-radius:8px;background:#FAFAFA;">
<div style="font-weight:700;font-size:12px;margin-bottom:8px;color:#1C1C1C;">A — 保留并强化</div>
<div class="pros-cons">
<div class="pros">
<h4>✅ 优势</h4>
<ul>
<li>独特的东方美学辨识度</li>
<li>深色背景对比度极高</li>
<li>品牌差异化明显</li>
<li>现有动效资产可复用</li>
</ul>
</div>
<div class="cons">
<h4>⚠️ 风险</h4>
<ul>
<li>动效多影响性能/加载</li>
<li>深色风格可能"太酷"不够"稳"</li>
<li>企业客户可能偏好传统专业感</li>
<li>动效维护成本高</li>
</ul>
</div>
</div>
</div>
<div style="padding:12px;border:2px solid #C41E3A;border-radius:8px;background:#FFFBF5;">
<div style="font-weight:700;font-size:12px;margin-bottom:8px;color:#C41E3A;">B — 收敛但保留印记 ⭐推荐</div>
<div class="pros-cons">
<div class="pros">
<h4>✅ 优势</h4>
<ul>
<li>专业感与品牌特色兼顾</li>
<li>白底更适合信息密集展示</li>
<li>性能友好（减少粒子动效）</li>
<li>书法+朱砂红仍保持辨识度</li>
<li>更接近 Atlassian 的清晰架构</li>
</ul>
</div>
<div class="cons">
<h4>⚠️ 风险</h4>
<ul>
<li>需要重新平衡"克制"与"特色"</li>
<li>部分现有动效组件需弃用</li>
<li>设计系统需从头建立</li>
</ul>
</div>
</div>
</div>
<div style="padding:12px;border:1px solid #DFE1E6;border-radius:8px;background:#FAFAFA;">
<div style="font-weight:700;font-size:12px;margin-bottom:8px;color:#172B4D;">C — 全面现代清晰风</div>
<div class="pros-cons">
<div class="pros">
<h4>✅ 优势</h4>
<ul>
<li>极致清晰，信息传达效率最高</li>
<li>可直接参考 Atlassian Design System</li>
<li>开发维护成本最低</li>
<li>国际化的专业感</li>
</ul>
</div>
<div class="cons">
<h4>⚠️ 风险</h4>
<ul>
<li><strong>完全丧失东方品牌辨识度</strong></li>
<li>与国内竞品无差异</li>
<li>品牌重塑成本极高</li>
<li>现有视觉资产全部废弃</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="section" style="text-align:center;padding:16px;background:#FFFBF5;border-radius:8px;border:1px solid #E5E5E5;">
<p style="font-size:13px;color:#5C5C5C;">👆 点击顶部三张 Hero 卡片中你倾向的方向，然后在终端告诉我你的选择</p>
</div>
.superpowers/brainstorm/71919-1777542709/delivery-pace-comparison.html
+118
View File
@@ -0,0 +1,118 @@
<h2>交付节奏方案对比</h2>
<p class="subtitle">三种纯方案 vs 推荐的混合方案</p>
<div class="section">
<h3>三种纯方案的问题</h3>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;">
<div style="padding:16px;border:1px solid #E5E5E5;border-radius:8px;background:#FAFAFA;">
<div style="font-weight:700;font-size:13px;margin-bottom:8px;">A — 首页先行</div>
<div style="font-size:10px;color:#5C5C5C;margin-bottom:8px;">首页 → 产品页 → 服务页 → ...</div>
<div style="background:#fff;padding:8px;border-radius:4px;border:1px solid #E5E5E5;margin-bottom:6px;">
<div style="font-size:9px;color:#16A34A;">✅ 快速见效</div>
<div style="font-size:9px;color:#16A34A;">✅ 可验证方向</div>
</div>
<div style="background:#FEF2F4;padding:8px;border-radius:4px;border:1px solid #FECDD3;">
<div style="font-size:9px;color:#C41E3A;">❌ 首页新风格 → 跳转子页旧风格</div>
<div style="font-size:9px;color:#C41E3A;">❌ 体验割裂</div>
<div style="font-size:9px;color:#C41E3A;">❌ 每个页面重复造组件</div>
</div>
</div>
<div style="padding:16px;border:1px solid #E5E5E5;border-radius:8px;background:#FAFAFA;">
<div style="font-weight:700;font-size:13px;margin-bottom:8px;">B — 架构先行</div>
<div style="font-size:10px;color:#5C5C5C;margin-bottom:8px;">全站导航 → 全站框架 → 填充内容</div>
<div style="background:#fff;padding:8px;border-radius:4px;border:1px solid #E5E5E5;margin-bottom:6px;">
<div style="font-size:9px;color:#16A34A;">✅ 全站一致</div>
<div style="font-size:9px;color:#16A34A;">✅ 无割裂感</div>
</div>
<div style="background:#FEF2F4;padding:8px;border-radius:4px;border:1px solid #FECDD3;">
<div style="font-size:9px;color:#C41E3A;">❌ 所有页面同时动，风险大</div>
<div style="font-size:9px;color:#C41E3A;">❌ 长时间看不到完整效果</div>
<div style="font-size:9px;color:#C41E3A;">❌ 回滚困难</div>
</div>
</div>
<div style="padding:16px;border:1px solid #E5E5E5;border-radius:8px;background:#FAFAFA;">
<div style="font-weight:700;font-size:13px;margin-bottom:8px;">C — 设计系统先行</div>
<div style="font-size:10px;color:#5C5C5C;margin-bottom:8px;">Token → 组件库 → 页面迁移</div>
<div style="background:#fff;padding:8px;border-radius:4px;border:1px solid #E5E5E5;margin-bottom:6px;">
<div style="font-size:9px;color:#16A34A;">✅ 质量有保障</div>
<div style="font-size:9px;color:#16A34A;">✅ 组件复用</div>
</div>
<div style="background:#FEF2F4;padding:8px;border-radius:4px;border:1px solid #FECDD3;">
<div style="font-size:9px;color:#C41E3A;">❌ 前期投入大，零可见产出</div>
<div style="font-size:9px;color:#C41E3A;">❌ 容易过度设计（组件脱离实际）</div>
<div style="font-size:9px;color:#C41E3A;">❌ "系统建完了但页面还没动"</div>
</div>
</div>
</div>
</div>
<div class="section">
<h3>⭐ 推荐：A + C 混合 — 首页驱动的设计系统</h3>
<p class="subtitle">用首页的实际需求驱动组件设计，首页完成时设计系统基础也同步就绪</p>
<div style="background:#FFFBF5;border:2px solid #C41E3A;border-radius:12px;padding:20px;">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:16px;">
<div>
<div style="font-weight:700;font-size:12px;color:#C41E3A;margin-bottom:10px;">Phase 1：首页重构 + 设计系统基础</div>
<div style="background:#fff;border-radius:8px;padding:12px;border:1px solid #E5E5E5;">
<div style="font-size:10px;margin-bottom:6px;"><strong>首页改造：</strong></div>
<div style="font-size:9px;color:#5C5C5C;margin-bottom:2px;">• 新 Hero（白底 + 书法标题 + 朱砂红CTA）</div>
<div style="font-size:9px;color:#5C5C5C;margin-bottom:2px;">• 社会证明数据条</div>
<div style="font-size:9px;color:#5C5C5C;margin-bottom:2px;">• 产品矩阵卡片</div>
<div style="font-size:9px;color:#5C5C5C;margin-bottom:2px;">• 场景化入口</div>
<div style="font-size:9px;color:#5C5C5C;margin-bottom:8px;">• 客户证言区</div>
<div style="font-size:10px;margin-bottom:6px;"><strong>同步沉淀：</strong></div>
<div style="font-size:9px;color:#C41E3A;margin-bottom:2px;">• Design Token 体系（颜色/间距/字体）</div>
<div style="font-size:9px;color:#C41E3A;margin-bottom:2px;">• 导航组件（下拉产品矩阵）</div>
<div style="font-size:9px;color:#C41E3A;margin-bottom:2px;">• 产品卡片组件</div>
<div style="font-size:9px;color:#C41E3A;">• 排版系统（标题/正文/标签）</div>
</div>
</div>
<div>
<div style="font-weight:700;font-size:12px;color:#1C1C1C;margin-bottom:10px;">Phase 2：产品页/服务页迁移</div>
<div style="background:#fff;border-radius:8px;padding:12px;border:1px solid #E5E5E5;margin-bottom:12px;">
<div style="font-size:9px;color:#5C5C5C;margin-bottom:2px;">• 基于 Phase 1 沉淀的组件直接组装</div>
<div style="font-size:9px;color:#5C5C5C;margin-bottom:2px;">• 产品详情页（已有独立 Section 组件）</div>
<div style="font-size:9px;color:#5C5C5C;">• 服务详情页（已有独立 Section 组件）</div>
</div>
<div style="font-weight:700;font-size:12px;color:#1C1C1C;margin-bottom:10px;">Phase 3：其余页面 + 设计系统完善</div>
<div style="background:#fff;border-radius:8px;padding:12px;border:1px solid #E5E5E5;">
<div style="font-size:9px;color:#5C5C5C;margin-bottom:2px;">• 解决方案页（场景化入口落地）</div>
<div style="font-size:9px;color:#5C5C5C;margin-bottom:2px;">• 案例页（客户证言组件复用）</div>
<div style="font-size:9px;color:#5C5C5C;">• 关于/团队/新闻页</div>
</div>
</div>
</div>
<div style="background:#fff;border-radius:8px;padding:12px;border:1px solid #E5E5E5;">
<div style="font-weight:700;font-size:11px;margin-bottom:8px;">💡 核心原则：组件从实际页面需求中生长</div>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;">
<div style="text-align:center;padding:8px;background:#FEF2F4;border-radius:4px;">
<div style="font-size:20px;margin-bottom:4px;">🏗️</div>
<div style="font-size:9px;color:#5C5C5C;">做首页时发现<br/>需要产品卡片</div>
</div>
<div style="text-align:center;padding:8px;background:#FEF2F4;border-radius:4px;">
<div style="font-size:20px;margin-bottom:4px;">🔧</div>
<div style="font-size:9px;color:#5C5C5C;">抽取为通用<br/>ProductCard 组件</div>
</div>
<div style="text-align:center;padding:8px;background:#FEF2F4;border-radius:4px;">
<div style="font-size:20px;margin-bottom:4px;">♻️</div>
<div style="font-size:9px;color:#5C5C5C;">产品页/服务页<br/>直接复用组件</div>
</div>
</div>
</div>
</div>
</div>
<div class="section" style="text-align:center;padding:16px;background:#FFFBF5;border-radius:8px;border:1px solid #E5E5E5;">
<p style="font-size:13px;color:#5C5C5C;">确认这个节奏方向？或者你有其他想法？在终端告诉我</p>
</div>
.superpowers/brainstorm/71919-1777542709/design-spec-full.html
+234
View File
@@ -0,0 +1,234 @@
<h2>方案二：品牌融合重构 — 完整设计规格</h2>
<p class="subtitle">Atlassian 信息架构 × Novalon 品牌叙事 × 收敛但保留印记</p>
<div class="section">
<h3>📐 整体页面结构</h3>
<div style="background:#FFFBF5;border:1px solid #E5E5E5;border-radius:8px;padding:16px;">
<div style="display:flex;flex-direction:column;gap:3px;">
<div style="background:#FFFBF5;border:1px solid #E5E5E5;border-radius:4px;padding:6px 10px;display:flex;align-items:center;gap:8px;">
<div style="width:8px;height:8px;background:#C41E3A;border-radius:2px;"></div>
<div style="font-size:9px;font-weight:700;">Navigation</div>
<div style="font-size:7px;color:#5C5C5C;">Logo + 产品▾ + 解决方案▾ + 服务 + 案例 + 关于 + 联系我们</div>
</div>
<div style="background:linear-gradient(180deg,#FFFBF5,#FFFFFF);border:1px solid #E5E5E5;border-radius:4px;padding:6px 10px;display:flex;align-items:center;gap:8px;">
<div style="width:8px;height:8px;background:#1C1C1C;border-radius:2px;"></div>
<div style="font-size:9px;font-weight:700;">Section 1: Hero</div>
<div style="font-size:7px;color:#5C5C5C;">品牌主张 + 双CTA + 极简装饰</div>
</div>
<div style="background:#F5F5F5;border-radius:4px;padding:6px 10px;display:flex;align-items:center;gap:8px;">
<div style="width:8px;height:8px;background:#C41E3A;border-radius:50%;"></div>
<div style="font-size:9px;font-weight:700;">Section 2: 社会证明</div>
<div style="font-size:7px;color:#5C5C5C;">三列关键数据 + 客户Logo墙（可选）</div>
</div>
<div style="background:#FFFFFF;border:1px solid #E5E5E5;border-radius:4px;padding:6px 10px;display:flex;align-items:center;gap:8px;">
<div style="width:8px;height:8px;background:#C41E3A;border-radius:2px;"></div>
<div style="font-size:9px;font-weight:700;">Section 3: 核心产品矩阵</div>
<div style="font-size:7px;color:#5C5C5C;">2×2 卡片网格 + 朱砂红左边框</div>
</div>
<div style="background:#FFFBF5;border:1px solid #E5E5E5;border-radius:4px;padding:6px 10px;display:flex;align-items:center;gap:8px;">
<div style="width:8px;height:8px;background:#D97706;border-radius:2px;"></div>
<div style="font-size:9px;font-weight:700;">Section 4: 挑战与场景入口</div>
<div style="font-size:7px;color:#5C5C5C;">"您面临什么挑战？" 三列痛点卡片</div>
</div>
<div style="background:#1C1C1C;border-radius:4px;padding:6px 10px;display:flex;align-items:center;gap:8px;">
<div style="width:8px;height:8px;background:#C41E3A;border-radius:50%;"></div>
<div style="font-size:9px;font-weight:700;color:#fff;">Section 5: 客户成果</div>
<div style="font-size:7px;color:rgba(255,255,255,0.6);">深色背景 + 客户引言 + 量化数据</div>
</div>
<div style="background:linear-gradient(135deg,#C41E3A,#A01830);border-radius:4px;padding:6px 10px;display:flex;align-items:center;gap:8px;">
<div style="width:8px;height:8px;background:#fff;border-radius:2px;"></div>
<div style="font-size:9px;font-weight:700;color:#fff;">Section 6: CTA</div>
<div style="font-size:7px;color:rgba(255,255,255,0.8);">朱砂红渐变 + 行动号召</div>
</div>
<div style="background:#F5F5F5;border:1px solid #E5E5E5;border-radius:4px;padding:6px 10px;display:flex;align-items:center;gap:8px;">
<div style="width:8px;height:8px;background:#999;border-radius:2px;"></div>
<div style="font-size:9px;font-weight:700;">Footer</div>
<div style="font-size:7px;color:#5C5C5C;">品牌信息 + 导航 + 联系方式</div>
</div>
</div>
<div style="margin-top:8px;font-size:8px;color:#5C5C5C;text-align:center;">
视觉节奏：暖白 → 浅灰 → 白 → 暖白 → <strong>深墨</strong> → 朱砂红 → 浅灰
</div>
</div>
</div>
<div class="section">
<h3>🧭 导航重设计：产品矩阵下拉</h3>
<div class="split">
<div class="mockup">
<div class="mockup-header">当前导航</div>
<div class="mockup-body" style="padding:12px;">
<div class="mock-nav" style="margin-bottom:8px;">Logo | 服务 | 解决方案 | 产品 | 案例 | 关于 | 团队 | 新闻</div>
<div style="font-size:8px;color:#C41E3A;">问题：</div>
<div style="font-size:7px;color:#5C5C5C;">• 8个平铺项，认知负担重</div>
<div style="font-size:7px;color:#5C5C5C;">• 产品/服务/解决方案关系不清</div>
<div style="font-size:7px;color:#5C5C5C;">• 无下拉，无法快速预览</div>
<div style="font-size:7px;color:#5C5C5C;">• "团队""新闻"占位但非核心</div>
</div>
</div>
<div class="mockup">
<div class="mockup-header">新导航</div>
<div class="mockup-body" style="padding:12px;">
<div class="mock-nav" style="margin-bottom:8px;">Logo 睿新致遠 | <strong>产品 ▾</strong> | <strong>解决方案 ▾</strong> | 服务 | 案例 | 关于我们</div>
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:8px;margin-bottom:6px;">
<div style="font-size:7px;color:#999;margin-bottom:4px;">点击"产品 ▾"展开：</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;">
<div style="padding:4px 6px;border-left:2px solid #C41E3A;">
<div style="font-size:7px;font-weight:700;">ERP 管理系统</div>
<div style="font-size:6px;color:#5C5C5C;">财务·采购·销售·库存</div>
</div>
<div style="padding:4px 6px;border-left:2px solid #C41E3A;">
<div style="font-size:7px;font-weight:700;">CRM 客户管理</div>
<div style="font-size:6px;color:#5C5C5C;">线索·商机·合同·服务</div>
</div>
<div style="padding:4px 6px;border-left:2px solid #C41E3A;">
<div style="font-size:7px;font-weight:700;">BI 数据平台</div>
<div style="font-size:6px;color:#5C5C5C;">报表·仪表盘·预测</div>
</div>
<div style="padding:4px 6px;border-left:2px solid #C41E3A;">
<div style="font-size:7px;font-weight:700;">CMS 内容平台</div>
<div style="font-size:6px;color:#5C5C5C;">建站·运营·分发</div>
</div>
</div>
</div>
<div style="font-size:8px;color:#16A34A;">改进：</div>
<div style="font-size:7px;color:#5C5C5C;">• 6项→核心4项+2个下拉</div>
<div style="font-size:7px;color:#5C5C5C;">• 下拉预览产品，减少跳转</div>
<div style="font-size:7px;color:#5C5C5C;">• "团队/新闻"移入"关于我们"</div>
</div>
</div>
</div>
</div>
<div class="section">
<h3>🎨 Design Token 体系（收敛版）</h3>
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:8px;padding:16px;">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
<div>
<div style="font-size:10px;font-weight:700;margin-bottom:8px;">色彩（保留，微调）</div>
<div style="display:flex;gap:4px;margin-bottom:6px;">
<div style="text-align:center;">
<div style="width:28px;height:28px;background:#1C1C1C;border-radius:4px;"></div>
<div style="font-size:6px;color:#888;margin-top:2px;">墨黑</div>
</div>
<div style="text-align:center;">
<div style="width:28px;height:28px;background:#C41E3A;border-radius:4px;"></div>
<div style="font-size:6px;color:#888;margin-top:2px;">朱砂红</div>
</div>
<div style="text-align:center;">
<div style="width:28px;height:28px;background:#FFFBF5;border:1px solid #E5E5E5;border-radius:4px;"></div>
<div style="font-size:6px;color:#888;margin-top:2px;">宣纸白</div>
</div>
<div style="text-align:center;">
<div style="width:28px;height:28px;background:#F5F5F5;border-radius:4px;"></div>
<div style="font-size:6px;color:#888;margin-top:2px;">浅灰</div>
</div>
<div style="text-align:center;">
<div style="width:28px;height:28px;background:#FEF2F4;border-radius:4px;"></div>
<div style="font-size:6px;color:#888;margin-top:2px;">红底</div>
</div>
</div>
<div style="font-size:7px;color:#5C5C5C;">✅ 保留现有色彩体系不变</div>
<div style="font-size:7px;color:#5C5C5C;">➕ 新增场景色：#FFFBEB(黄底) #F0FDF4(绿底)</div>
</div>
<div>
<div style="font-size:10px;font-weight:700;margin-bottom:8px;">动效（大幅收敛）</div>
<div style="font-size:7px;color:#C41E3A;margin-bottom:2px;">❌ 移除：水墨粒子、数据流、粒子星河、鼠标交互粒子</div>
<div style="font-size:7px;color:#C41E3A;margin-bottom:2px;">❌ 移除：流体波浪、几何抽象、网格线</div>
<div style="font-size:7px;color:#16A34A;margin-bottom:2px;">✅ 保留：渐变流动（极简版）、微妙圆点</div>
<div style="font-size:7px;color:#16A34A;margin-bottom:2px;">✅ 保留：滚动揭示（FadeUp）、数字动画</div>
<div style="font-size:7px;color:#0052CC;margin-bottom:2px;">➕ 新增：悬浮微交互、卡片 hover 提升效果</div>
<div style="font-size:7px;color:#0052CC;">➕ 新增：导航下拉过渡、场景卡片 hover 色变</div>
</div>
</div>
</div>
</div>
<div class="section">
<h3>🧩 Phase 1 沉淀的核心组件</h3>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;">
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:10px;">
<div style="font-size:9px;font-weight:700;color:#C41E3A;margin-bottom:4px;">MegaDropdown</div>
<div style="font-size:7px;color:#5C5C5C;">产品矩阵下拉导航</div>
<div style="font-size:6px;color:#999;margin-top:4px;">复用：产品页、解决方案页</div>
</div>
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:10px;">
<div style="font-size:9px;font-weight:700;color:#C41E3A;margin-bottom:4px;">ProductCard</div>
<div style="font-size:7px;color:#5C5C5C;">朱砂红左边框产品卡片</div>
<div style="font-size:6px;color:#999;margin-top:4px;">复用：产品列表页、首页</div>
</div>
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:10px;">
<div style="font-size:9px;font-weight:700;color:#C41E3A;margin-bottom:4px;">ChallengeCard</div>
<div style="font-size:7px;color:#5C5C5C;">痛点/场景入口卡片</div>
<div style="font-size:6px;color:#999;margin-top:4px;">复用：解决方案页、服务页</div>
</div>
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:10px;">
<div style="font-size:9px;font-weight:700;color:#C41E3A;margin-bottom:4px;">StatsBar</div>
<div style="font-size:7px;color:#5C5C5C;">三列数据统计条</div>
<div style="font-size:6px;color:#999;margin-top:4px;">复用：产品页、关于页</div>
</div>
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:10px;">
<div style="font-size:9px;font-weight:700;color:#C41E3A;margin-bottom:4px;">TestimonialBlock</div>
<div style="font-size:7px;color:#5C5C5C;">深色背景客户证言</div>
<div style="font-size:6px;color:#999;margin-top:4px;">复用：案例页、产品页</div>
</div>
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:10px;">
<div style="font-size:9px;font-weight:700;color:#C41E3A;margin-bottom:4px;">CTASection</div>
<div style="font-size:7px;color:#5C5C5C;">朱砂红渐变行动号召</div>
<div style="font-size:6px;color:#999;margin-top:4px;">复用：全站通用</div>
</div>
</div>
</div>
<div class="section">
<h3>📋 现有组件迁移策略</h3>
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:8px;padding:12px;">
<table style="width:100%;font-size:8px;border-collapse:collapse;">
<tr style="border-bottom:1px solid #E5E5E5;">
<td style="padding:4px;font-weight:700;">组件</td>
<td style="padding:4px;font-weight:700;">策略</td>
<td style="padding:4px;font-weight:700;">说明</td>
</tr>
<tr style="border-bottom:1px solid #F5F5F5;">
<td style="padding:4px;color:#C41E3A;">InkBackground</td>
<td style="padding:4px;">❌ 废弃</td>
<td style="padding:4px;color:#5C5C5C;">水墨背景不再使用，用极简装饰替代</td>
</tr>
<tr style="border-bottom:1px solid #F5F5F5;">
<td style="padding:4px;color:#C41E3A;">DataParticleFlow</td>
<td style="padding:4px;">❌ 废弃</td>
<td style="padding:4px;color:#5C5C5C;">粒子动效过于花哨，不符合收敛方向</td>
</tr>
<tr style="border-bottom:1px solid #F5F5F5;">
<td style="padding:4px;color:#16A34A;">SubtleDots</td>
<td style="padding:4px;">✅ 保留</td>
<td style="padding:4px;color:#5C5C5C;">微妙圆点符合收敛方向</td>
</tr>
<tr style="border-bottom:1px solid #F5F5F5;">
<td style="padding:4px;color:#16A34A;">GradientFlow</td>
<td style="padding:4px;">🔧 简化</td>
<td style="padding:4px;color:#5C5C5C;">保留但降低强度，作为Hero极淡背景</td>
</tr>
<tr style="border-bottom:1px solid #F5F5F5;">
<td style="padding:4px;color:#16A34A;">ScrollReveal/FadeUp</td>
<td style="padding:4px;">✅ 保留</td>
<td style="padding:4px;color:#5C5C5C;">滚动揭示动画是核心交互</td>
</tr>
<tr style="border-bottom:1px solid #F5F5F5;">
<td style="padding:4px;color:#16A34A;">AnimatedNumber</td>
<td style="padding:4px;">✅ 保留</td>
<td style="padding:4px;color:#5C5C5C;">数据统计动画</td>
</tr>
<tr>
<td style="padding:4px;color:#0052CC;">SealAnimation</td>
<td style="padding:4px;">🔄 重构</td>
<td style="padding:4px;color:#5C5C5C;">印章动画保留但仅用于品牌标题区</td>
</tr>
</table>
</div>
</div>
<div class="section" style="text-align:center;padding:16px;background:#FFFBF5;border-radius:8px;border:2px solid #C41E3A;">
<p style="font-size:13px;color:#1C1C1C;font-weight:700;">以上是方案二的完整设计规格</p>
<p style="font-size:11px;color:#5C5C5C;margin-top:4px;">确认无误后，我将编写正式设计文档并进入实现规划阶段</p>
</div>
.superpowers/brainstorm/71919-1777542709/homepage-layout-options.html
+224
View File
@@ -0,0 +1,224 @@
<h2>首页重构：3 种布局方案</h2>
<p class="subtitle">同样的品牌方向（收敛+保留印记），不同的信息组织逻辑</p>
<div class="section">
<h3>方案一：Atlassian 直接映射</h3>
<p class="subtitle">将 Atlassian 首页结构直接映射到 Novalon 内容</p>
<div class="mockup">
<div class="mockup-header">首页线框图</div>
<div class="mockup-body" style="padding:12px;">
<div class="mock-nav" style="margin-bottom:8px;">Logo 睿新致遠 | 产品 ▾ | 解决方案 ▾ | 案例 | 关于 | 联系我们</div>
<div style="background:#FFFBF5;border:1px solid #E5E5E5;border-radius:6px;padding:16px;text-align:center;margin-bottom:6px;">
<div style="font-size:8px;color:#C41E3A;border:1px solid rgba(196,30,58,0.3);display:inline-block;padding:1px 6px;border-radius:2px;margin-bottom:4px;">数字化转型伙伴</div>
<div style="font-family:serif;font-size:14px;color:#1C1C1C;letter-spacing:2px;margin-bottom:2px;">睿新致遠</div>
<div style="font-size:8px;color:#5C5C5C;margin-bottom:6px;">企业数字化转型的可靠成长伙伴</div>
<div style="display:inline-block;background:#C41E3A;color:#fff;font-size:7px;padding:3px 10px;border-radius:2px;">预约演示</div>
</div>
<div style="background:#F5F5F5;border-radius:4px;padding:6px;text-align:center;margin-bottom:6px;font-size:8px;color:#5C5C5C;">
📊 200+ 企业客户 · 覆盖 15+ 行业 · 99.9% 系统可用性
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:6px;">
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:4px;padding:8px;text-align:center;">
<div style="font-size:7px;color:#C41E3A;font-weight:700;">ERP</div>
<div style="font-size:6px;color:#5C5C5C;">企业管理系统</div>
</div>
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:4px;padding:8px;text-align:center;">
<div style="font-size:7px;color:#C41E3A;font-weight:700;">CRM</div>
<div style="font-size:6px;color:#5C5C5C;">客户关系管理</div>
</div>
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:4px;padding:8px;text-align:center;">
<div style="font-size:7px;color:#C41E3A;font-weight:700;">BI</div>
<div style="font-size:6px;color:#5C5C5C;">商业智能分析</div>
</div>
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:4px;padding:8px;text-align:center;">
<div style="font-size:7px;color:#C41E3A;font-weight:700;">CMS</div>
<div style="font-size:6px;color:#5C5C5C;">内容管理平台</div>
</div>
</div>
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:4px;padding:8px;margin-bottom:6px;">
<div style="font-size:8px;font-weight:700;margin-bottom:4px;">按场景探索</div>
<div style="display:flex;gap:4px;">
<div style="background:#FEF2F4;font-size:6px;padding:2px 6px;border-radius:2px;color:#C41E3A;">制造业</div>
<div style="background:#FEF2F4;font-size:6px;padding:2px 6px;border-radius:2px;color:#C41E3A;">金融</div>
<div style="background:#FEF2F4;font-size:6px;padding:2px 6px;border-radius:2px;color:#C41E3A;">零售</div>
</div>
</div>
<div style="background:#F5F5F5;border-radius:4px;padding:8px;margin-bottom:6px;">
<div style="font-size:7px;color:#5C5C5C;font-style:italic;">"与睿新合作后，我们的运营效率提升了40%"</div>
<div style="font-size:6px;color:#999;margin-top:2px;">— 某制造业CTO</div>
</div>
<div style="background:#C41E3A;border-radius:4px;padding:8px;text-align:center;">
<div style="font-size:8px;color:#fff;font-weight:700;">开始您的数字化转型</div>
<div style="font-size:6px;color:rgba(255,255,255,0.8);margin-top:2px;">预约免费咨询</div>
</div>
</div>
</div>
<div class="pros-cons" style="margin-top:8px;">
<div class="pros"><h4>✅ 优势</h4><ul><li>结构清晰，Atlassian 验证过的模式</li><li>产品矩阵一目了然</li><li>开发参照明确</li></ul></div>
<div class="cons"><h4>⚠️ 不足</h4><ul><li>可能过于"复制"Atlassian</li><li>缺乏 Novalon 独特叙事</li><li>场景入口较浅</li></ul></div>
</div>
</div>
<div class="section">
<h3>方案二：品牌融合重构 ⭐推荐</h3>
<p class="subtitle">Atlassian 的信息架构 + Novalon 的品牌叙事逻辑</p>
<div class="mockup">
<div class="mockup-header">首页线框图</div>
<div class="mockup-body" style="padding:12px;">
<div class="mock-nav" style="margin-bottom:8px;">Logo 睿新致遠 | 产品 ▾ | 解决方案 ▾ | 服务 | 案例 | 关于我们</div>
<div style="background:linear-gradient(180deg,#FFFBF5,#FFFFFF);border:1px solid #E5E5E5;border-radius:6px;padding:20px 16px;text-align:center;margin-bottom:6px;position:relative;overflow:hidden;">
<div style="position:absolute;top:8px;right:12px;width:24px;height:24px;border:1px solid rgba(196,30,58,0.08);border-radius:50%;"></div>
<div style="position:absolute;bottom:12px;left:10px;width:18px;height:18px;border:1px solid rgba(196,30,58,0.06);border-radius:50%;"></div>
<div style="font-size:7px;color:#C41E3A;letter-spacing:2px;margin-bottom:6px;">NOVALON · 睿新致遠</div>
<div style="font-family:serif;font-size:16px;color:#1C1C1C;letter-spacing:3px;margin-bottom:4px;">智连未来，成长伙伴</div>
<div style="font-size:8px;color:#5C5C5C;margin-bottom:8px;max-width:240px;margin-left:auto;margin-right:auto;">从战略规划到系统落地，陪伴企业完成数字化转型的每一步</div>
<div style="display:flex;gap:6px;justify-content:center;">
<div style="background:#C41E3A;color:#fff;font-size:7px;padding:4px 12px;border-radius:2px;">预约演示</div>
<div style="border:1px solid #1C1C1C;color:#1C1C1C;font-size:7px;padding:4px 12px;border-radius:2px;">了解方案</div>
</div>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;margin-bottom:6px;background:#F5F5F5;border-radius:4px;padding:8px;">
<div style="text-align:center;">
<div style="font-size:12px;font-weight:700;color:#C41E3A;">200+</div>
<div style="font-size:6px;color:#5C5C5C;">企业客户</div>
</div>
<div style="text-align:center;">
<div style="font-size:12px;font-weight:700;color:#C41E3A;">15+</div>
<div style="font-size:6px;color:#5C5C5C;">行业覆盖</div>
</div>
<div style="text-align:center;">
<div style="font-size:12px;font-weight:700;color:#C41E3A;">99.9%</div>
<div style="font-size:6px;color:#5C5C5C;">系统可用性</div>
</div>
</div>
<div style="margin-bottom:6px;">
<div style="font-size:8px;font-weight:700;margin-bottom:4px;color:#1C1C1C;">核心产品</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;">
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:8px;border-left:3px solid #C41E3A;">
<div style="font-size:7px;font-weight:700;color:#1C1C1C;">ERP 管理系统</div>
<div style="font-size:6px;color:#5C5C5C;margin-top:2px;">财务·采购·销售·库存·生产</div>
</div>
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:8px;border-left:3px solid #C41E3A;">
<div style="font-size:7px;font-weight:700;color:#1C1C1C;">CRM 客户管理</div>
<div style="font-size:6px;color:#5C5C5C;margin-top:2px;">线索·商机·合同·服务</div>
</div>
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:8px;border-left:3px solid #C41E3A;">
<div style="font-size:7px;font-weight:700;color:#1C1C1C;">BI 数据平台</div>
<div style="font-size:6px;color:#5C5C5C;margin-top:2px;">报表·仪表盘·预测·决策</div>
</div>
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:8px;border-left:3px solid #C41E3A;">
<div style="font-size:7px;font-weight:700;color:#1C1C1C;">CMS 内容平台</div>
<div style="font-size:6px;color:#5C5C5C;margin-top:2px;">建站·运营·分发·分析</div>
</div>
</div>
</div>
<div style="margin-bottom:6px;">
<div style="font-size:8px;font-weight:700;margin-bottom:4px;color:#1C1C1C;">您面临什么挑战？</div>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;">
<div style="background:#FEF2F4;border-radius:6px;padding:8px;text-align:center;cursor:pointer;">
<div style="font-size:10px;margin-bottom:2px;">🏭</div>
<div style="font-size:7px;font-weight:700;color:#1C1C1C;">系统孤岛</div>
<div style="font-size:6px;color:#C41E3A;margin-top:1px;">数据不通</div>
</div>
<div style="background:#FFFBEB;border-radius:6px;padding:8px;text-align:center;cursor:pointer;">
<div style="font-size:10px;margin-bottom:2px;">📈</div>
<div style="font-size:7px;font-weight:700;color:#1C1C1C;">增长瓶颈</div>
<div style="font-size:6px;color:#D97706;margin-top:1px;">效率低下</div>
</div>
<div style="background:#F0FDF4;border-radius:6px;padding:8px;text-align:center;cursor:pointer;">
<div style="font-size:10px;margin-bottom:2px;">🔒</div>
<div style="font-size:7px;font-weight:700;color:#1C1C1C;">合规风险</div>
<div style="font-size:6px;color:#16A34A;margin-top:1px;">安全隐忧</div>
</div>
</div>
</div>
<div style="background:#1C1C1C;border-radius:6px;padding:10px;margin-bottom:6px;">
<div style="font-size:7px;color:rgba(255,255,255,0.6);margin-bottom:4px;">客户成果</div>
<div style="font-size:8px;color:#fff;font-style:italic;margin-bottom:4px;">"睿新团队不是交付完就走的供应商，而是真正陪伴我们成长的伙伴"</div>
<div style="display:flex;justify-content:space-between;align-items:center;">
<div style="font-size:6px;color:rgba(255,255,255,0.5);">— 某上市制造企业 CTO</div>
<div style="display:flex;gap:4px;">
<div style="text-align:center;"><div style="font-size:9px;font-weight:700;color:#C41E3A;">40%</div><div style="font-size:5px;color:rgba(255,255,255,0.4);">效率提升</div></div>
<div style="text-align:center;"><div style="font-size:9px;font-weight:700;color:#C41E3A;">6月</div><div style="font-size:5px;color:rgba(255,255,255,0.4);">交付周期</div></div>
</div>
</div>
</div>
<div style="background:linear-gradient(135deg,#C41E3A,#A01830);border-radius:6px;padding:10px;text-align:center;">
<div style="font-size:8px;color:#fff;font-weight:700;">开启数字化转型之旅</div>
<div style="font-size:6px;color:rgba(255,255,255,0.8);margin-top:2px;">免费咨询 · 专属方案 · 30天试用</div>
</div>
</div>
</div>
<div class="pros-cons" style="margin-top:8px;">
<div class="pros"><h4>✅ 优势</h4><ul><li>品牌叙事 + 产品矩阵完美融合</li><li>"您面临什么挑战"场景入口有温度</li><li>深色客户成果区形成视觉节奏</li><li>朱砂红左边框 = 品牌印记</li></ul></div>
<div class="cons"><h4>⚠️ 不足</h4><ul><li>设计复杂度中等</li><li>需要更多内容支撑（客户证言/数据）</li></ul></div>
</div>
</div>
<div class="section">
<h3>方案三：场景驱动叙事</h3>
<p class="subtitle">以用户痛点/场景为主线，产品作为解决方案嵌入</p>
<div class="mockup">
<div class="mockup-header">首页线框图</div>
<div class="mockup-body" style="padding:12px;">
<div class="mock-nav" style="margin-bottom:8px;">Logo 睿新致遠 | 行业方案 ▾ | 产品 | 服务 | 案例</div>
<div style="background:#FFFBF5;border:1px solid #E5E5E5;border-radius:6px;padding:16px;text-align:center;margin-bottom:6px;">
<div style="font-family:serif;font-size:14px;color:#1C1C1C;letter-spacing:2px;margin-bottom:4px;">您的挑战，我们的使命</div>
<div style="font-size:8px;color:#5C5C5C;">选择您最关心的业务挑战</div>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:6px;">
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:8px;">
<div style="font-size:10px;margin-bottom:2px;">🏭</div>
<div style="font-size:7px;font-weight:700;color:#1C1C1C;">制造业数字化转型</div>
<div style="font-size:6px;color:#5C5C5C;margin-top:2px;">ERP + MES + BI 一体化</div>
<div style="font-size:6px;color:#C41E3A;margin-top:2px;">查看方案 →</div>
</div>
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:8px;">
<div style="font-size:10px;margin-bottom:2px;">🏦</div>
<div style="font-size:7px;font-weight:700;color:#1C1C1C;">金融合规与风控</div>
<div style="font-size:6px;color:#5C5C5C;margin-top:2px;">CRM + BI + 安全审计</div>
<div style="font-size:6px;color:#C41E3A;margin-top:2px;">查看方案 →</div>
</div>
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:8px;">
<div style="font-size:10px;margin-bottom:2px;">🛒</div>
<div style="font-size:7px;font-weight:700;color:#1C1C1C;">零售全渠道运营</div>
<div style="font-size:6px;color:#5C5C5C;margin-top:2px;">CRM + CMS + 数据中台</div>
<div style="font-size:6px;color:#C41E3A;margin-top:2px;">查看方案 →</div>
</div>
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:8px;">
<div style="font-size:10px;margin-bottom:2px;">🏗️</div>
<div style="font-size:7px;font-weight:700;color:#1C1C1C;">工程项目管理</div>
<div style="font-size:6px;color:#5C5C5C;margin-top:2px;">ERP + 进度追踪 + 成本管控</div>
<div style="font-size:6px;color:#C41E3A;margin-top:2px;">查看方案 →</div>
</div>
</div>
<div style="background:#F5F5F5;border-radius:4px;padding:6px;text-align:center;margin-bottom:6px;font-size:7px;color:#5C5C5C;">
每个场景背后，都有对应的产品组合支撑
</div>
<div style="background:#fff;border:1px solid #E5E5E5;border-radius:4px;padding:8px;margin-bottom:6px;">
<div style="font-size:7px;font-weight:700;margin-bottom:4px;">我们的产品</div>
<div style="display:flex;gap:6px;justify-content:center;">
<div style="font-size:7px;color:#C41E3A;font-weight:700;">ERP</div>
<div style="font-size:7px;color:#5C5C5C;">·</div>
<div style="font-size:7px;color:#C41E3A;font-weight:700;">CRM</div>
<div style="font-size:7px;color:#5C5C5C;">·</div>
<div style="font-size:7px;color:#C41E3A;font-weight:700;">BI</div>
<div style="font-size:7px;color:#5C5C5C;">·</div>
<div style="font-size:7px;color:#C41E3A;font-weight:700;">CMS</div>
</div>
</div>
<div style="background:#C41E3A;border-radius:4px;padding:8px;text-align:center;">
<div style="font-size:8px;color:#fff;font-weight:700;">找到您的解决方案</div>
</div>
</div>
</div>
<div class="pros-cons" style="margin-top:8px;">
<div class="pros"><h4>✅ 优势</h4><ul><li>用户视角，按痛点找方案</li><li>差异化明显（竞品少这么做）</li><li>产品自然嵌入场景</li></ul></div>
<div class="cons"><h4>⚠️ 不足</h4><ul><li>需要丰富的行业场景内容</li><li>产品曝光度相对弱</li><li>SEO 不利（产品关键词靠后）</li><li>内容准备量大</li></ul></div>
</div>
</div>
<div class="section" style="text-align:center;padding:16px;background:#FFFBF5;border-radius:8px;border:2px solid #C41E3A;">
<p style="font-size:13px;color:#1C1C1C;font-weight:700;">👆 点击你倾向的方案卡片（方案一/二/三的线框图区域），然后在终端确认</p>
<p style="font-size:11px;color:#5C5C5C;margin-top:4px;">我推荐方案二——品牌融合重构，它在 Atlassian 架构优势和 Novalon 品牌特色之间取得了最佳平衡</p>
</div>