Jelajahi Sumber

feat(web): Landing page optimization - Schema.org, FAQ, stats, testimonials, CTA, content

- feat(schema): Add JSON-LD for SoftwareApplication, Organization, WebSite, FAQPage
- feat(faq): Add FAQ section with 8 Q&As + wired FAQPage schema
- feat(stats): Add social proof stats bar (120K+/40K+/1K+)
- feat(testimonials): Add testimonial section with 3 user review cards
- feat(cta): Add 扫码体验 CTA button in hero linking to #contact
- feat(content): Deepened DAN and 菌群检测 product card descriptions
Xiaogang Liao 4 bulan lalu
induk
melakukan
8c9302d369
2 mengubah file dengan 334 tambahan dan 3 penghapusan
  1. 181 1
      web/css/style.css
  2. 153 2
      web/index.html

+ 181 - 1
web/css/style.css

@@ -351,6 +351,18 @@ ul { list-style: none; }
   transform: translateY(-2px);
 }
 
+.btn-accent {
+  background: linear-gradient(135deg, var(--color-primary) 0%, #6BB5E0 100%);
+  color: #fff;
+  border-color: var(--color-primary);
+  box-shadow: 0 4px 16px rgba(74, 155, 215, .3);
+}
+.btn-accent:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 28px rgba(74, 155, 215, .45);
+  background: linear-gradient(135deg, var(--color-primary-hover) 0%, #5DABD6 100%);
+}
+
 /* Hero service provider link */
 .hero-service-link {
   margin-top: var(--space-lg);
@@ -578,6 +590,46 @@ ul { list-style: none; }
   to { opacity: 1; transform: translateX(-50%) translateY(0); }
 }
 
+/* Stats Banner */
+.stats-banner {
+  background: var(--bg-surface);
+  padding: var(--space-2xl) 0;
+  border-bottom: 1px solid var(--color-border-light);
+}
+.stats-banner .container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--space-3xl);
+}
+.stats-item {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-xs);
+}
+.stat-number {
+  font-size: 2.5rem;
+  font-weight: 800;
+  color: var(--color-primary);
+  line-height: 1.2;
+}
+.stat-label {
+  font-size: var(--font-size-small);
+  color: var(--color-text-secondary);
+  font-weight: 500;
+}
+@media (max-width: 768px) {
+  .stats-banner .container {
+    flex-direction: column;
+    gap: var(--space-xl);
+  }
+  .stat-number {
+    font-size: 2rem;
+  }
+}
+
 /* ----------------------------------------------------------
    7. About Section
    ---------------------------------------------------------- */
@@ -1414,9 +1466,137 @@ ul { list-style: none; }
   font-size: var(--font-size-tiny);
 }
 
+/* Testimonials Section */
+.section-testimonials { background: var(--bg-section-alt); }
+.testimonials-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-lg);
+  max-width: 960px;
+  margin: 0 auto;
+}
+.testimonial-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);
+}
+.testimonial-card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-md);
+  border-color: transparent;
+  border-left-color: var(--color-primary);
+}
+.testimonial-stars { display: flex; gap: 2px; margin-bottom: var(--space-md); }
+.testimonial-text {
+  font-size: var(--font-size-small);
+  color: var(--color-text-secondary);
+  line-height: 1.8;
+  font-style: italic;
+  margin-bottom: var(--space-lg);
+}
+.testimonial-author {
+  border-top: 1px solid var(--color-border-light);
+  padding-top: var(--space-md);
+}
+.testimonial-name { font-size: var(--font-size-tiny); font-weight: 600; color: var(--color-text-primary); }
+@media (max-width: 900px) { .testimonials-grid { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 600px) { .testimonials-grid { grid-template-columns: 1fr; } }
+
+/* ----------------------------------------------------------
+    14.5. FAQ Section
+    ---------------------------------------------------------- */
+.section-faq {
+  background: var(--bg-section-alt);
+}
+
+.faq-list {
+  max-width: 800px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+}
+
+.faq-item {
+  background: var(--bg-surface);
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  transition: all var(--transition-normal);
+}
+
+.faq-item:hover {
+  border-color: var(--color-primary);
+  box-shadow: var(--shadow-sm);
+}
+
+.faq-item[open] {
+  border-color: var(--color-primary);
+  box-shadow: var(--shadow-md);
+}
+
+.faq-item > summary {
+  padding: var(--space-lg) var(--space-xl);
+  font-weight: 600;
+  font-size: var(--font-size-body);
+  color: var(--color-text-primary);
+  cursor: pointer;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-md);
+  transition: color var(--transition-fast);
+}
+
+.faq-item > summary::-webkit-details-marker {
+  display: none;
+}
+
+.faq-item > summary::after {
+  content: '+';
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--color-primary);
+  flex-shrink: 0;
+  transition: transform var(--transition-fast);
+}
+
+.faq-item[open] > summary::after {
+  content: '−';
+}
+
+.faq-item > summary:hover {
+  color: var(--color-primary);
+}
+
+.faq-answer {
+  padding: 0 var(--space-xl) var(--space-lg);
+  font-size: var(--font-size-small);
+  color: var(--color-text-secondary);
+  line-height: 1.8;
+  border-top: 1px solid var(--color-border-light);
+  padding-top: var(--space-md);
+}
+
+@media (max-width: 768px) {
+  .faq-item > summary {
+    padding: var(--space-md) var(--space-lg);
+    font-size: var(--font-size-small);
+  }
+
+  .faq-answer {
+    padding: 0 var(--space-lg) var(--space-md);
+    font-size: var(--font-size-tiny);
+  }
+}
+
 /* ----------------------------------------------------------
     15. Footer
-   ---------------------------------------------------------- */
+    ---------------------------------------------------------- */
 .site-footer {
   background: var(--color-text-primary);
   color: #fff;

+ 153 - 2
web/index.html

@@ -11,6 +11,49 @@
   <meta name="theme-color" content="#4A9BD7">
   <title>亿图腾 · 浠艾福 — 家庭幸福健康成长平台</title>
   <link rel="stylesheet" href="css/style.css">
+  <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@graph": [
+      {
+        "@type": "SoftwareApplication",
+        "name": "浠艾福 Care Family",
+        "applicationCategory": ["HealthApplication", "EducationApplication"],
+        "operatingSystem": "WeChat Mini Program, iOS, Android",
+        "offers": {
+          "@type": "Offer",
+          "price": 0,
+          "priceCurrency": "CNY"
+        },
+        "description": "亿图腾科技倾力打造的 AI 智慧家庭成长平台,以五行智慧为根、AI 大模型为翼,围绕身·心·智·行·富五个维度,为每个家庭定制全生命周期成长方案。连接家庭客户、专业服务商与平台运营三方角色,提供成长档案、精准营养、规划指导、菌群检测等核心服务。"
+      },
+      {
+        "@type": "Organization",
+        "name": "亿图腾(北京)科技有限公司",
+        "url": "https://www.etotem.com.cn",
+        "description": "以 AI 科技为引擎,以家庭为中心,致力于为中国家庭提供一站式智慧健康成长解决方案的科技企业。"
+      },
+      {
+        "@type": "WebSite",
+        "name": "亿图腾·浠艾福",
+        "url": "https://www.etotem.com.cn"
+      },
+      {
+        "@type": "FAQPage",
+        "mainEntity": [
+          {"@type":"Question","name":"浠艾福是什么平台?","acceptedAnswer":{"@type":"Answer","text":"浠艾福(Care Family)是以家庭为单位的 AI 智慧成长平台。围绕身·智·富·行·心五大维度,连接家庭客户、专业服务商与平台运营三方角色,以五维能量体系驱动全家持续成长。不是单一的育儿工具,而是覆盖全生命周期的一站式幸福解决方案。"}},
+          {"@type":"Question","name":"一个家庭如何开始使用?","acceptedAnswer":{"@type":"Answer","text":"微信搜索「浠艾福」小程序,创建家庭账户即可开始。每位家庭成员拥有独立的成长账户与五维能量体系,既独立又互通。从精准营养到成长规划,从亲子互动到长辈陪护,同一平台覆盖全家。"}},
+          {"@type":"Question","name":"浠艾福和普通育儿App有什么不同?","acceptedAnswer":{"@type":"Answer","text":"普通育儿App通常面向单一阶段或单一角色。浠艾福覆盖全家成员——成人健康管理、孩子成长规划、长辈陪护关怀。包含菌群检测(第二基因)、精准营养方案、心智测评、成长档案等闭环服务,以 AI + 专业规划师驱动,而非单纯的工具或内容聚合。"}},
+          {"@type":"Question","name":"什么是五维能量体系?","acceptedAnswer":{"@type":"Answer","text":"五维能量是浠艾福的核心评估模型,包含身(主动健康)、智(赋能未来)、富(利他创富)、行(人际和谐)、心(大爱相随)五大维度。遵循五行相生相克原理——相生让系统前进,相克让系统不翻车。AI 智能分析各维度能量分布,直观呈现家庭成长健康指数。"}},
+          {"@type":"Question","name":"菌群检测是什么?怎么做?","acceptedAnswer":{"@type":"Answer","text":"肠道菌群是人体的\u201c第二基因\u201d。通过高通量测序深度解析肠道微生态,精准识别营养需求与体质特征。用户购买检测包→采集样本→寄回实验室→获取报告→AI 营养师定制个性化膳食方案。整个过程在家即可完成。"}},
+          {"@type":"Question","name":"DAN成长档案记录什么?","acceptedAnswer":{"@type":"Answer","text":"DAN 成长档案以 AI 智能记录每位家庭成员从身体到心智的完整成长轨迹。包含多模态成长报告、健康数据可视化、里程碑自动标记。目前已服务 120,000+ 家庭用户,帮助家长不错过每个成长关键期。"}},
+          {"@type":"Question","name":"哪些人可以成为服务商?","acceptedAnswer":{"@type":"Answer","text":"成长规划师、健康营养师、心理咨询师、活动管理员等专业从业者均可入驻。登录浠艾福管理后台(www.etotem.com.cn/admin)提交申请,平台审核通过后即可为家庭提供服务。目前已有 1,000+ 专业从业人员入驻。"}},
+          {"@type":"Question","name":"浠艾福适合什么样的家庭?","acceptedAnswer":{"@type":"Answer","text":"任何关注全家综合健康与成长的家庭都适合——从希望获得科学营养方案的父母,到需要专业成长规划的孩子,再到需要身心关怀的长辈。浠艾福提供从检测诊断到方案执行的全链路服务,一站式覆盖。"}}
+        ]
+      }
+    ]
+  }
+  </script>
 </head>
 <body>
 
@@ -59,6 +102,7 @@
         <div class="hero-actions">
           <a href="#product" class="btn btn-primary">了解浠艾福</a>
           <a href="#wuxing" class="btn btn-outline">探索五维能量</a>
+          <a href="#contact" class="btn btn-accent">扫码体验</a>
         </div>
         <div class="hero-service-link">
           <span>服务商?</span>
@@ -82,6 +126,14 @@
     </div>
   </section>
 
+  <div class="stats-banner" id="stats">
+    <div class="container">
+      <div class="stats-item"><span class="stat-number">120,000+</span><span class="stat-label">家庭用户</span></div>
+      <div class="stats-item"><span class="stat-number">40,000+</span><span class="stat-label">菌群检测服务</span></div>
+      <div class="stats-item"><span class="stat-number">1,000+</span><span class="stat-label">专业从业人员</span></div>
+    </div>
+  </div>
+
   <!-- ==================== About ==================== -->
   <section class="section section-about" id="about">
     <div class="container">
@@ -190,7 +242,7 @@
             </svg>
           </div>
           <h3>DAN 成长档案<span class="product-plus">+</span></h3>
-          <p>以 AI 智能记录每位家庭成员从身体到心智的完整成长轨迹。多模态成长报告、健康数据可视化、里程碑自动标记,让每一次成长都有迹可循。</p>
+          <p>以 AI 智能记录每位家庭成员从身体到心智的完整成长轨迹。多模态成长报告、健康数据可视化、里程碑自动标记,让每一次成长都有迹可循。 120,000+ 家庭正在用 DAN 记录孩子的第一次翻身、第一次独立阅读、第一次登台演讲——每一个里程碑,都是成长的故事。</p>
           <div class="product-tags">
             <span>AI 成长追踪</span>
             <span>多模态报告</span>
@@ -229,7 +281,7 @@
             </svg>
           </div>
           <h3>第二基因(菌群)检测</h3>
-          <p>肠道菌群是人体的"第二基因"——通过高通量测序深度解析肠道微生态,精准识别营养需求与体质特征。搭配 AI 营养师定制个性化膳食方案,从根源调理全家人的健康。</p>
+          <p>肠道菌群是人体的"第二基因"——通过高通量测序深度解析肠道微生态,精准识别营养需求与体质特征。搭配 AI 营养师定制个性化膳食方案,从根源调理全家人的健康。 只需在家完成采样寄回实验室,14 天获取专业报告。40,000+ 用户已通过菌群检测找到了适合家人的精准营养方案。</p>
           <div class="product-tags">
             <span>肠道菌群检测</span>
             <span>高通量测序</span>
@@ -905,6 +957,53 @@
     </div>
   </section>
 
+  <!-- ==================== FAQ ==================== -->
+  <section class="section section-faq" id="faq">
+    <div class="container">
+      <div class="section-header">
+        <span class="section-tag">常见问题</span>
+        <h2 class="section-title">你可能想知道的</h2>
+        <p class="section-desc">
+          关于浠艾福平台,家长们最常问的 8 个问题。
+        </p>
+      </div>
+      <div class="faq-list">
+        <details class="faq-item">
+          <summary>浠艾福是什么平台?</summary>
+          <div class="faq-answer">浠艾福(Care Family)是以家庭为单位的 AI 智慧成长平台。围绕身·智·富·行·心五大维度,连接家庭客户、专业服务商与平台运营三方角色,以五维能量体系驱动全家持续成长。不是单一的育儿工具,而是覆盖全生命周期的一站式幸福解决方案。</div>
+        </details>
+        <details class="faq-item">
+          <summary>一个家庭如何开始使用?</summary>
+          <div class="faq-answer">微信搜索「浠艾福」小程序,创建家庭账户即可开始。每位家庭成员拥有独立的成长账户与五维能量体系,既独立又互通。从精准营养到成长规划,从亲子互动到长辈陪护,同一平台覆盖全家。</div>
+        </details>
+        <details class="faq-item">
+          <summary>浠艾福和普通育儿App有什么不同?</summary>
+          <div class="faq-answer">普通育儿App通常面向单一阶段或单一角色。浠艾福覆盖全家成员——成人健康管理、孩子成长规划、长辈陪护关怀。包含菌群检测(第二基因)、精准营养方案、心智测评、成长档案等闭环服务,以 AI + 专业规划师驱动,而非单纯的工具或内容聚合。</div>
+        </details>
+        <details class="faq-item">
+          <summary>什么是五维能量体系?</summary>
+          <div class="faq-answer">五维能量是浠艾福的核心评估模型,包含身(主动健康)、智(赋能未来)、富(利他创富)、行(人际和谐)、心(大爱相随)五大维度。遵循五行相生相克原理——相生让系统前进,相克让系统不翻车。AI 智能分析各维度能量分布,直观呈现家庭成长健康指数。</div>
+        </details>
+        <details class="faq-item">
+          <summary>菌群检测是什么?怎么做?</summary>
+          <div class="faq-answer">肠道菌群是人体的"第二基因"。通过高通量测序深度解析肠道微生态,精准识别营养需求与体质特征。用户购买检测包→采集样本→寄回实验室→获取报告→AI 营养师定制个性化膳食方案。整个过程在家即可完成。</div>
+        </details>
+        <details class="faq-item">
+          <summary>DAN成长档案记录什么?</summary>
+          <div class="faq-answer">DAN 成长档案以 AI 智能记录每位家庭成员从身体到心智的完整成长轨迹。包含多模态成长报告、健康数据可视化、里程碑自动标记。目前已服务 120,000+ 家庭用户,帮助家长不错过每个成长关键期。</div>
+        </details>
+        <details class="faq-item">
+          <summary>哪些人可以成为服务商?</summary>
+          <div class="faq-answer">成长规划师、健康营养师、心理咨询师、活动管理员等专业从业者均可入驻。登录浠艾福管理后台(www.etotem.com.cn/admin)提交申请,平台审核通过后即可为家庭提供服务。目前已有 1,000+ 专业从业人员入驻。</div>
+        </details>
+        <details class="faq-item">
+          <summary>浠艾福适合什么样的家庭?</summary>
+          <div class="faq-answer">任何关注全家综合健康与成长的家庭都适合——从希望获得科学营养方案的父母,到需要专业成长规划的孩子,再到需要身心关怀的长辈。浠艾福提供从检测诊断到方案执行的全链路服务,一站式覆盖。</div>
+        </details>
+      </div>
+    </div>
+  </section>
+
   <!-- ==================== Roles ==================== -->
   <section class="section section-roles" id="roles">
     <div class="container">
@@ -1024,6 +1123,58 @@
     </div>
   </section>
 
+  <!-- ==================== Testimonials ==================== -->
+  <section class="section section-testimonials" id="testimonials">
+    <div class="container">
+      <div class="section-header">
+        <span class="section-tag">用户心声</span>
+        <h2 class="section-title">他们正在用浠艾福改变家庭</h2>
+        <p class="section-desc">来自 DAN 成长档案与精准营养用户的真实反馈</p>
+      </div>
+      <div class="testimonials-grid">
+        <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">"自从用了 DAN 成长档案,我能清晰地看到孩子在认知、情绪各方面的进步轨迹。以前靠感觉,现在靠数据。"</p>
+          <div class="testimonial-author">
+            <span class="testimonial-name">DAN 成长计划用户</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>
+            <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>
+    </div>
+  </section>
+
   <!-- ==================== Footer ==================== -->
   <footer class="site-footer">
     <div class="container">