浏览代码

Add user testimonials and application scenarios section to enterprise website

- Add 5 new user testimonial cards (total 8) covering family health, growth experiences,
  professional perspectives from parents and service providers
- Add new #scenarios section with 4 scenario cards:
  1. 儿童成长 (Child growth & development tracking)
  2. 家庭健康 (Family health management)
  3. 家庭关系 (Family relationships & communication)
  4. 服务商赋能 (Service provider tools & efficiency)
- Add responsive navigation links for 新闻/应用场景/用户见证
- Add CSS styling with responsive grids (4→3→2→1 columns)
- Align testimonial grid responsiveness with scenarios layout
E2E Test Bot 2 天之前
父节点
当前提交
fcb76ee264
共有 2 个文件被更改,包括 261 次插入 和 1 次删除
  1. 103 0
      web/css/style.css
  2. 158 1
      web/index.html

+ 103 - 0
web/css/style.css

@@ -3047,4 +3047,107 @@ ul { list-style: none; }
   }
 }
 
+/* Application Scenarios Section */
+.section-scenarios { background: var(--bg-section-alt); }
+.scenarios-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--space-lg);
+  max-width: 1200px;
+  margin: 0 auto;
+}
+@media (max-width: 1100px) {
+  .scenarios-grid { grid-template-columns: repeat(3, 1fr); }
+}
+@media (max-width: 900px) {
+  .scenarios-grid { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 600px) {
+  .scenarios-grid { grid-template-columns: 1fr; }
+}
+
+.scenario-card {
+  background: var(--bg-surface);
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--radius-lg);
+  padding: var(--space-xl);
+  border-left: 4px solid var(--color-primary);
+  transition: all var(--transition-normal);
+}
+.scenario-card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-md);
+  border-color: transparent;
+  border-left-color: var(--color-primary);
+}
+.scenario-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  margin-bottom: var(--space-md);
+}
+.scenario-icon {
+  font-size: 1.5rem;
+}
+.scenario-tag {
+  display: inline-block;
+  padding: var(--space-xs) var(--space-sm);
+  background: var(--bg-section-alt);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-tiny);
+  font-weight: 600;
+  color: var(--color-primary);
+  margin-left: var(--space-sm);
+}
+.scenario-title {
+  font-size: var(--font-size-h3);
+  font-weight: 700;
+  color: var(--color-text-primary);
+  margin-bottom: var(--space-sm);
+}
+.scenario-desc {
+  font-size: var(--font-size-small);
+  color: var(--color-text-secondary);
+  line-height: 1.6;
+  margin-bottom: var(--space-lg);
+}
+.scenario-benefits {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+  margin-top: var(--space-md);
+}
+.scenario-benefits li {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  font-size: var(--font-size-tiny);
+  color: var(--color-text-muted);
+}
+.scenarios-cta {
+  margin-top: var(--space-2xl);
+  padding-top: var(--space-lg);
+  border-top: 1px solid var(--color-border-light);
+}
+.scenarios-cta p {
+  font-size: var(--font-size-small);
+  color: var(--color-text-secondary);
+  margin-bottom: var(--space-md);
+}
+.scenarios-cta-actions {
+  display: flex;
+  gap: var(--space-md);
+}
+.scenarios-cta-actions .btn:first-child {
+  flex: 1;
+}
+
+/* Override testimonial grid for consistency */
+@media (max-width: 900px) {
+  .testimonials-grid { grid-template-columns: repeat(2, 1fr) !important; }
+}
+@media (max-width: 600px) {
+  .testimonials-grid { grid-template-columns: 1fr !important; }
+}
+
 

+ 158 - 1
web/index.html

@@ -104,6 +104,8 @@
           <li><a href="#products" class="nav-link">核心能力</a></li>
           <li><a href="#wuxing" class="nav-link">能量维度</a></li>
           <li><a href="#features" class="nav-link">核心功能</a></li>
+          <li><a href="#scenarios" class="nav-link">应用场景</a></li>
+          <li><a href="#testimonials" class="nav-link">用户见证</a></li>
           <li><a href="#ai-tech" class="nav-link">AI 技术</a></li>
           <li><a href="knowledge.html" class="nav-link">成长百科</a></li>
           <li><a href="#roles" class="nav-link">平台角色</a></li>
@@ -1364,6 +1366,19 @@
             <span class="testimonial-name">精准营养用户</span>
           </div>
         </div>
+        <div class="testimonial-card">
+          <div class="testimonial-stars">
+            <svg viewBox="0 0 20 20" width="16" height="16"><polygon points="10,1 12.5,7.5 19,8 14,12.5 15.5,19 10,15.5 4.5,19 6,12.5 1,8 7.5,7.5" fill="#F59E0B"/></svg>
+            <svg viewBox="0 0 20 20" width="16" height="16"><polygon points="10,1 12.5,7.5 19,8 14,12.5 15.5,19 10,15.5 4.5,19 6,12.5 1,8 7.5,7.5" fill="#F59E0B"/></svg>
+            <svg viewBox="0 0 20 20" width="16" height="16"><polygon points="10,1 12.5,7.5 19,8 14,12.5 15.5,19 10,15.5 4.5,19 6,12.5 1,8 7.5,7.5" fill="#F59E0B"/></svg>
+            <svg viewBox="0 0 20 20" width="16" height="16"><polygon points="10,1 12.5,7.5 19,8 14,12.5 15.5,19 10,15.5 4.5,19 6,12.5 1,8 7.5,7.5" fill="#F59E0B"/></svg>
+            <svg viewBox="0 0 20 20" width="16" height="16"><polygon points="10,1 12.5,7.5 19,8 14,12.5 15.5,19 10,15.5 4.5,19 6,12.5 1,8 7.5,7.5" fill="#F59E0B"/></svg>
+          </div>
+          <p class="testimonial-text">"做了菌群检测太神奇了,报告出来才发现孩子一直过敏的原因。AI 营养方案很实用,孩子体质明显改善了。"</p>
+          <div class="testimonial-author">
+            <span class="testimonial-name">精准营养用户</span>
+          </div>
+        </div>
         <div class="testimonial-card">
           <div class="testimonial-stars">
             <svg viewBox="0 0 20 20" width="16" height="16"><polygon points="10,1 12.5,7.5 19,8 14,12.5 15.5,19 10,15.5 4.5,19 6,12.5 1,8 7.5,7.5" fill="#F59E0B"/></svg>
@@ -1377,11 +1392,153 @@
             <span class="testimonial-name">家庭客户</span>
           </div>
         </div>
+        <div class="testimonial-card" style="border-left-color:#FF6B9D">
+          <div class="testimonial-stars">
+            <svg viewBox="0 0 20 20" width="16" height="16"><polygon points="10,1 12.5,7.5 19,8 14,12.5 15.5,19 10,15.5 4.5,19 6,12.5 1,8 7.5,7.5" fill="#F59E0B"/></svg>
+            <svg viewBox="0 0 20 20" width="16" height="16"><polygon points="10,1 12.5,7.5 19,8 14,12.5 15.5,19 10,15.5 4.5,19 6,12.5 1,8 7.5,7.5" fill="#F59E0B"/></svg>
+            <svg viewBox="0 0 20 20" width="16" height="16"><polygon points="10,1 12.5,7.5 19,8 14,12.5 15.5,19 10,15.5 4.5,19 6,12.5 1,8 7.5,7.5" fill="#F59E0B"/></svg>
+            <svg viewBox="0 0 20 20" width="16" height="16"><polygon points="10,1 12.5,7.5 19,8 14,12.5 15.5,19 10,15.5 4.5,19 6,12.5 1,8 7.5,7.5" fill="#F59E0B"/></svg>
+            <svg viewBox="0 0 20 20" width="16" height="16"><polygon points="10,1 12.5,7.5 19,8 14,12.5 15.5,19 10,15.5 4.5,19 6,12.5 1,8 7.5,7.5" fill="#F59E0B"/></svg>
+          </div>
+          <p class="testimonial-text">"我家两个孩子,一个在小学一个在初中,浠艾福让我和家人都能用,孩子能看到自己的成长轨迹,我们做家长的也很放心。"</p>
+          <div class="testimonial-author">
+            <span class="testimonial-name">二胎家庭家长</span>
+          </div>
+        </div>
+        <div class="testimonial-card" style="border-left-color:#6366F1">
+          <div class="testimonial-stars">
+            <svg viewBox="0 0 20 20" width="16" height="16"><polygon points="10,1 12.5,7.5 19,8 14,12.5 15.5,19 10,15.5 4.5,19 6,12.5 1,8 7.5,7.5" fill="#F59E0B"/></svg>
+            <svg viewBox="0 0 20 20" width="16" height="16"><polygon points="10,1 12.5,7.5 19,8 14,12.5 15.5,19 10,15.5 4.5,19 6,12.5 1,8 7.5,7.5" fill="#F59E0B"/></svg>
+            <svg viewBox="0 0 20 20" width="16" height="16"><polygon points="10,1 12.5,7.5 19,8 14,12.5 15.5,19 10,15.5 4.5,19 6,12.5 1,8 7.5,7.5" fill="#F59E0B"/></svg>
+            <svg viewBox="0 0 20 20" width="16" height="16"><polygon points="10,1 12.5,7.5 19,8 14,12.5 15.5,19 10,15.5 4.5,19 6,12.5 1,8 7.5,7.5" fill="#F59E0B"/></svg>
+            <svg viewBox="0 0 20 20" width="16" height="16"><polygon points="10,1 12.5,7.5 19,8 14,12.5 15.5,19 10,15.5 4.5,19 6,12.5 1,8 7.5,7.5" fill="#F59E0B"/></svg>
+          </div>
+          <p class="testimonial-text">"作为咨询师,浠艾福让我们能更精准地了解每个来访者的状态变化,五维能量评估帮我们找到了以前没注意到的问题。"</p>
+          <div class="testimonial-author">
+            <span class="testimonial-name">心理咨询师 / 服务商</span>
+          </div>
+        </div>
+        <div class="testimonial-card" style="border-left-color:#10B981">
+          <div class="testimonial-stars">
+            <svg viewBox="0 0 20 20" width="16" height="16"><polygon points="10,1 12.5,7.5 19,8 14,12.5 15.5,19 10,15.5 4.5,19 6,12.5 1,8 7.5,7.5" fill="#F59E0B"/></svg>
+            <svg viewBox="0 0 20 20" width="16" height="16"><polygon points="10,1 12.5,7.5 19,8 14,12.5 15.5,19 10,15.5 4.5,19 6,12.5 1,8 7.5,7.5" fill="#F59E0B"/></svg>
+            <svg viewBox="0 0 20 20" width="16" height="16"><polygon points="10,1 12.5,7.5 19,8 14,12.5 15.5,19 10,15.5 4.5,19 6,12.5 1,8 7.5,7.5" fill="#F59E0B"/></svg>
+            <svg viewBox="0 0 20 20" width="16" height="16"><polygon points="10,1 12.5,7.5 19,8 14,12.5 15.5,19 10,15.5 4.5,19 6,12.5 1,8 7.5,7.5" fill="#F59E0B"/></svg>
+            <svg viewBox="0 0 20 20" width="16" height="16"><polygon points="10,1 12.5,7.5 19,8 14,12.5 15.5,19 10,15.5 4.5,19 6,12.5 1,8 7.5,7.5" fill="#F59E0B"/></svg>
+          </div>
+          <p class="testimonial-text">"自从接入浠艾福的成长规划模块后,我们团队的服务效率提升了很多。AI 推荐让任务派发更精准,家长反馈也更好。"</p>
+          <div class="testimonial-author">
+            <span class="testimonial-name">成长规划师 / 服务商</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ==================== Application Scenarios ==================== -->
+  <section class="section section-scenarios" id="scenarios">
+    <div class="container">
+      <div class="section-header">
+        <span class="section-tag">应用场景</span>
+        <h2 class="section-title">浠艾福的场景化解决方案</h2>
+        <p class="section-desc">
+          从家庭健康到成长规划,从精准营养到关系经营,浠艾福覆盖全家人的真实需求场景。
+        </p>
+      </div>
+
+      <div class="scenarios-grid">
+        <!-- 场景一:儿童健康成长 -->
+        <div class="scenario-card">
+          <div class="scenario-header" style="--sc-color:#6366F1">
+            <span class="scenario-icon">🧒</span>
+            <span class="scenario-tag">儿童成长</span>
+          </div>
+          <h3 class="scenario-title">孩子的每一步都值得被看见</h3>
+          <p class="scenario-desc">
+            从婴幼儿体质调理到学龄期习惯养成,浠艾福通过成长档案实时记录孩子的体能、情绪、认知变化,
+            五维能量图直观呈现发展态势,帮助家长及早发现成长关键点,不让孩子输在认知起跑线上。
+          </p>
+          <ul class="scenario-benefits">
+            <li>🔍 认知能力发展追踪</li>
+            <li>📊 情绪状态可视化</li>
+            <li>🎯 个性化成长路径推荐</li>
+            <li>📈 阶段性里程碑自动标记</li>
+          </ul>
+        </div>
+
+        <!-- 场景二:家庭健康管理 -->
+        <div class="scenario-card">
+          <div class="scenario-header" style="--sc-color:#FF8C42">
+            <span class="scenario-icon">🏥</span>
+            <span class="scenario-tag">家庭健康</span>
+          </div>
+          <h3 class="scenario-title">全家人的精准健康管家</h3>
+          <p class="scenario-desc">
+            从肠道菌群检测到日常营养建议,从睡眠节律分析到体质调理方案,
+            浠艾福以 AI 驱动精准健康引擎,让全家人拥有自己的「健康数字孪生」——
+            不用等到生病才关注,预防优于治疗。
+          </p>
+          <ul class="scenario-benefits">
+            <li>🧪 肠道菌群检测与分析</li>
+            <li>🍽️ AI 个性化营养方案</li>
+            <li>📋 多维度健康报告</li>
+            <li>🛡️ 风险预警与健康管理</li>
+          </ul>
+        </div>
+
+        <!-- 场景三:亲子关系与家庭关系 -->
+        <div class="scenario-card">
+          <div class="scenario-header" style="--sc-color:#10B981">
+            <span class="scenario-icon">👨‍👩‍👧</span>
+            <span class="scenario-tag">家庭关系</span>
+          </div>
+          <h3 class="scenario-title">让爱在理解中流淌</h3>
+          <p class="scenario-desc">
+            亲子关系、夫妻关系、代际关系——关系是所有家庭问题的核心。
+            浠艾福通过关系测评与 AI 陪伴,帮助家庭成员更好地理解彼此、沟通表达,
+            让每一次对话都有温度,让每一次陪伴都有质量。
+          </p>
+          <ul class="scenario-benefits">
+            <li>💬 亲子沟通 AI 辅助建议</li>
+            <li>❤️ 夫妻关系经营指导</li>
+            <li>👴 长辈关怀与代际连接</li>
+            <li>📖 家庭关系心理学知识库</li>
+          </ul>
+        </div>
+
+        <!-- 场景四:服务商专业服务 -->
+        <div class="scenario-card">
+          <div class="scenario-header" style="--sc-color:#4A9BD7">
+            <span class="scenario-icon">👩‍🏫</span>
+            <span class="scenario-tag">服务商赋能</span>
+          </div>
+          <h3 class="scenario-title">专业服务,高效交付</h3>
+          <p class="scenario-desc">
+            对成长规划师、营养师、心理咨询师等服务者而言,浠艾福提供 AI 赋能的专业工具:
+            智能匹配客户、生成个性化方案、记录服务过程、追踪效果数据——
+            让您把精力放在真正重要的地方,用专业赢得信任。
+          </p>
+          <ul class="scenario-benefits">
+            <li>🎯 AI 智能客户匹配推荐</li>
+            <li>📝 服务方案一键生成</li>
+            <li>📊 效果数据可视化看板</li>
+            <li>🤝 客户全生命周期管理</li>
+          </ul>
+        </div>
+      </div>
+
+      <!-- 场景切换 CTA -->
+      <div class="scenarios-cta">
+        <p>不确定您的家庭适合哪个场景?让 AI 帮您快速匹配</p>
+        <div class="scenarios-cta-actions">
+          <a href="#product" class="btn btn-primary">了解浠艾福产品</a>
+          <a href="#contact" class="btn btn-outline">联系我们获取方案</a>
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- ==================== Knowledge Base ==================== -->
+  <!-- ==================== FAQ ==================== -->
   <section class="section section-knowledge" id="knowledge">
     <div class="container">
       <div class="section-header">