novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
f0657ce9f4f1c92ebadbf0e5fd58940c1a7b5fbe
novalon-website/.superpowers/brainstorm/71919-1777542709/homepage-layout-options.html
T
张翔 fe6e4b1c54 refactor: P0 - remove testimonial, migrate footer & mobile menu to NAVIGATION_V2 
- Remove TestimonialSection from homepage (no customers yet)
- Footer: dark theme, NAVIGATION_V2 + MEGA_DROPDOWN_DATA links
- Mobile Menu: NAVIGATION_V2 with collapsible dropdown support
2026-04-30 22:00:00 +08:00

225 lines
16 KiB
HTML
Raw Blame History

<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>
Reference in New Issue View Git Blame Copy Permalink