index.html 78 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta name="description" content="浠艾福做的是家庭精准生活方式管理——从代谢到心理,帮一家人把身体和状态都调顺。一个人的主动,全家人的健康。">
  7. <meta name="keywords" content="浠艾福,Care Family,家庭健康管理,精准生活方式管理,代谢健康,心理健康,五维能量,主动健康">
  8. <meta property="og:title" content="浠艾福 · 一个人的主动,全家人的健康">
  9. <meta property="og:description" content="家庭精准生活方式管理——从代谢到心理,帮一家人把身体和状态都调顺。">
  10. <meta property="og:type" content="website">
  11. <meta property="og:image" content="https://www.etotem.com.cn/logo.png">
  12. <meta property="og:image:width" content="512">
  13. <meta property="og:image:height" content="512">
  14. <meta property="og:url" content="https://www.etotem.com.cn/">
  15. <link rel="canonical" href="https://www.etotem.com.cn/">
  16. <meta name="theme-color" content="#4A9BD7">
  17. <title>浠艾福 · 家庭精准生活方式管理平台</title>
  18. <link rel="stylesheet" href="css/style.css">
  19. <!-- ========== Clarity (Microsoft) - User Behavior Analytics ========== -->
  20. <script type="application/ld+json">
  21. {
  22. "@context": "https://schema.org",
  23. "@graph": [
  24. {
  25. "@type": "SoftwareApplication",
  26. "name": "浠艾福 Care Family",
  27. "applicationCategory": ["HealthApplication", "EducationApplication"],
  28. "operatingSystem": "WeChat Mini Program, iOS, Android",
  29. "offers": {
  30. "@type": "Offer",
  31. "price": 0,
  32. "priceCurrency": "CNY"
  33. },
  34. "description": "家庭精准生活方式管理平台——从代谢到心理,帮一家人把身体和状态都调顺。以主动健康为理念、AI 大模型为引擎,围绕身·智·富·行·心五个维度,为每个家庭定制全生命周期成长方案。连接家庭客户、专业服务商与平台运营三方角色,整合菌群检测数据(纳入健康档案)、DAN测评数据(纳入成长档案)与家庭成员数据,以 AI 技术 + 专业人员指导为核心服务。"
  35. },
  36. {
  37. "@type": "Organization",
  38. "name": "浠艾福主动健康学院",
  39. "url": "https://www.etotem.com.cn",
  40. "description": "以家庭为中心,致力于为中国家庭提供精准生活方式管理服务的科技企业——从代谢到心理,帮一家人把身体和状态都调顺。"
  41. },
  42. {
  43. "@type": "WebSite",
  44. "name": "浠艾福主动健康学院",
  45. "url": "https://www.etotem.com.cn"
  46. },
  47. {
  48. "@type": "FAQPage",
  49. "mainEntity": [
  50. {"@type":"Question","name":"浠艾福是什么平台?","acceptedAnswer":{"@type":"Answer","text":"浠艾福(Care Family)是一家人的<strong>精准生活方式管理</strong>平台——从<strong>代谢</strong>到<strong>心理</strong>,帮一家人把身体和状态都调顺。以<strong>主动健康</strong>为理念,围绕身·智·富·行·心五大维度,连接家庭客户、专业服务商与平台运营三方角色,以 AI + 专业人员双轨驱动全家持续成长。"}},
  51. {"@type":"Question","name":"为什么说一个人的主动,全家人的健康?","acceptedAnswer":{"@type":"Answer","text":"家庭健康具有传导性:一个人先做出改变,饮食习惯、作息节奏、情绪氛围会自然影响其他成员。浠艾福让改变从一个人开始,让全家的身体和状态一起被调顺。"}},
  52. {"@type":"Question","name":"什么是从代谢到心理?","acceptedAnswer":{"@type":"Answer","text":"代谢是身体的地基——肠道菌群、营养、睡眠、运动;心理是生活的上层——情绪、关系、认知。浠艾福以五维体系覆盖两端:先调代谢,再调状态,身心一体、互相成就。"}},
  53. {"@type":"Question","name":"一个家庭如何开始使用?","acceptedAnswer":{"@type":"Answer","text":"微信搜索「浠艾福」小程序,创建家庭账户即可开始。每位家庭成员拥有独立的成长账户与五维能量体系,既独立又互通。从精准营养到成长规划,从亲子互动到长辈陪护,同一平台覆盖全家。"}},
  54. {"@type":"Question","name":"浠艾福和普通育儿App有什么不同?","acceptedAnswer":{"@type":"Answer","text":"普通育儿App通常面向单一阶段或单一角色。浠艾福覆盖全家成员——成人健康管理、孩子成长规划、长辈陪护关怀。将健康档案数据、测评数据、家庭成员数据多维度整合,以 AI + 专业规划师驱动输出综合方案,而非单纯的工具或内容聚合。"}},
  55. {"@type":"Question","name":"什么是五维能量体系?","acceptedAnswer":{"@type":"Answer","text":"五维能量是浠艾福倡导的<strong>主动健康</strong>核心评估体系,聚焦身·智·富·行·心五个维度——鼓励家庭主动管理每个维度的能量状态,而非被动等待问题发生。包含身(根基永固)、智(赋能未来)、富(成就)、行(人际和谐)、心(大爱相随)五大维度。遵循五行相生相克原理——相生让系统前进,相克让系统不翻车。AI 智能分析各维度能量分布,直观呈现家庭成长健康指数。"}},
  56. {"@type":"Question","name":"健康档案是什么?怎么做?","acceptedAnswer":{"@type":"Answer","text":"肠道菌群是人体的\u201c第二基因\u201d。通过 16S rRNA 高通量测序深度解析肠道微生态,呈现菌群多样性、有益菌与有害菌比例、肠道屏障完整性等趋势指标。用户购买检测包→居家采样→寄回实验室→获取报告→AI 营养师从肠道菌群-肠-脑轴角度定制个性化膳食方案,帮助家庭更有依据地调整日常饮食与作息。整个过程在家即可完成。"}},
  57. {"@type":"Question","name":"成长档案记录什么?","acceptedAnswer":{"@type":"Answer","text":"成长档案以 AI 智能记录每位家庭成员从身体到心智的完整成长轨迹。包含多模态成长报告、健康数据可视化、里程碑自动标记。目前已服务 120,000+ 家庭用户,帮助家长不错过每个成长关键期。"}},
  58. {"@type":"Question","name":"哪些人可以成为服务商?","acceptedAnswer":{"@type":"Answer","text":"成长规划师、健康营养师、心理咨询师、活动管理员等专业从业者均可入驻。微信搜索「浠艾福」小程序,在「我的」→「服务商入驻」中提交申请,平台审核通过后即可为家庭提供服务。目前已有 1,000+ 专业从业人员入驻。"}},
  59. {"@type":"Question","name":"浠艾福适合什么样的家庭?","acceptedAnswer":{"@type":"Answer","text":"任何关注全家综合健康与成长的家庭都适合——从希望获得科学营养方案的父母,到需要专业成长规划的孩子,再到需要身心关怀的长辈。浠艾福提供从检测诊断到方案执行的全链路服务,一站式覆盖。"}},
  60. {"@type":"Question","name":"健康档案适合多大年龄的孩子?","acceptedAnswer":{"@type":"Answer","text":"健康档案适用于全年龄段,从婴幼儿到老年人均可检测。婴幼儿的肠道菌群正处于建立关键期,检测可早期发现菌群失衡风险;成年人的肠道菌群与代谢、免疫密切相关。采样方式无创无痛,不同年龄段有对应的采样指导方案。"}},
  61. {"@type":"Question","name":"健康档案多久出报告?","acceptedAnswer":{"@type":"Answer","text":"样本寄回实验室后,通常在 15 个工作日内出具专业报告。报告涵盖菌群多样性分析、有益菌/有害菌比例、潜在健康风险提示,并附送 AI 营养师定制的个性化膳食建议。检测流程全程可追踪。"}},
  62. {"@type":"Question","name":"16S rRNA测序是什么?","acceptedAnswer":{"@type":"Answer","text":"16S rRNA 测序是当前国际通用的肠道菌群分析技术,通过对肠道微生物 16S 核糖体 RNA 基因进行高通量测序,可以精确鉴定样本中细菌的种类和相对丰度。该技术已广泛应用于临床研究和精准营养领域,是了解肠道微生态的金标准方法之一。"}},
  63. {"@type":"Question","name":"精准健康包含什么内容?","acceptedAnswer":{"@type":"Answer","text":"精准健康基于健康档案数据和日常健康记录,由 AI 健康模型结合专业知识库生成。包含:科学膳食搭配与精准营养素补充、优质饮水与作息指导、运动处方与节律建议、环境与空气健康提示。每位家庭成员获得个性化方案,持续跟踪调整,让健康改善可量化。"}},
  64. {"@type":"Question","name":"成长规划师提供什么服务?","acceptedAnswer":{"@type":"Answer","text":"成长规划师是一对一陪伴式服务,包括:家庭五维能量评估、孩子成长阶段综合测评、个性化成长路径设计、阶段性目标设定与拆解、亲子活动策划与复盘、成长数据分析与方案调整。规划师结合 AI 推荐工具,确保每一步都有专业指导。"}},
  65. {"@type":"Question","name":"五维能量评估是怎么做的?","acceptedAnswer":{"@type":"Answer","text":"五维能量评估通过 AI 智能问答测评、日常行为数据分析和专业量表三种方式综合进行。系统从身(根基永固)、智(赋能未来)、富(成就)、行(人际和谐)、心(大爱相随)五个维度收集数据,结合百万家庭常模进行对比分析,生成可视化的能量分布雷达图与健康指数,帮助家庭直观了解优势与短板。"}},
  66. {"@type":"Question","name":"一个家庭账户可以添加几个孩子?","acceptedAnswer":{"@type":"Answer","text":"一个家庭账户可以添加多位家庭成员,包括孩子、夫妻双方和长辈。每位成员拥有独立的成长账户、五维能量体系和成长档案,数据既独立呈现又汇聚为完整的家庭幸福全景。多孩家庭可以轻松管理每个孩子的成长计划。"}},
  67. {"@type":"Question","name":"浠艾福平台如何保障用户数据安全?","acceptedAnswer":{"@type":"Answer","text":"浠艾福采用多重数据安全措施:JWT Bearer Token 身份认证机制、数据加密传输与存储、独立的隐私政策和用户协议、角色化权限管理体系(家长/孩子/服务商/管理员各自拥有不同数据访问范围)。用户数据不会在未经授权的情况下被第三方获取。"}},
  68. {"@type":"Question","name":"在浠艾福平台需要付费吗?","acceptedAnswer":{"@type":"Answer","text":"浠艾福提供免费的基础功能(成长档案基础版、五维能量概览、基础 AI 问答),也提供增值付费服务(数据整合分析报告、AI 精准健康、成长规划师一对一服务、专业心智测评解读等)。用户可根据家庭需求灵活选择,不强制消费。"}},
  69. {"@type":"Question","name":"长辈也可以用浠艾福吗?","acceptedAnswer":{"@type":"Answer","text":"可以。浠艾福覆盖全家成员,长辈可以拥有独立的成长账户,享受AI驱动的健康数据分析与专业指导(精准营养方案、体质调理建议等),也参与家庭互动。平台支持多角色视角切换,让代际之间的理解与关爱更加顺畅。"}},
  70. {"@type":"Question","name":"浠艾福和AI教育工具有什么区别?","acceptedAnswer":{"@type":"Answer","text":"市面上的 AI 教育工具通常只关注学习效率或单一学科。浠艾福以五行五维体系为核心,在聚焦孩子成长的同时,覆盖成人健康管理和长辈陪护关怀。核心差异在于:全家覆盖而非单一个体、五大维度全面发展而非单一能力、AI+专业规划师双驱动而非纯工具、从检测诊断到方案执行的完整闭环。是家庭幸福健康的全方位解决方案,而不仅仅是教育App。"}},
  71. {"@type":"Question","name":"什么是五行相生相克在家庭教育中的应用?","acceptedAnswer":{"@type":"Answer","text":"浠艾福将五行哲学融入家庭成长体系:相生关系(身→智→富→行→心→身)让系统正向循环——强健体魄孕育智慧、智慧开启成就、成就滋养社交、社交温暖心灵、大爱呵护健康。相克关系防止过度失衡——健康是最大财富莫用健康换金钱、勿让铜臭掩盖温情。AI 实时监控五维能量状态,在失衡前发出预警,帮助家庭保持动态平衡的成长节奏。"}}
  72. ]
  73. }
  74. ]
  75. }
  76. </script>
  77. <!-- Microsoft Clarity 用户行为分析 -->
  78. <script>
  79. (function(c,l,a,r,i,t,y){
  80. c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
  81. t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
  82. y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
  83. })(window, document, "clarity", "script", "xj4p74ra9m");
  84. </script>
  85. </head>
  86. <body>
  87. <!-- ==================== Navigation ==================== -->
  88. <header class="site-header" id="header">
  89. <div class="container header-inner">
  90. <a href="#hero" class="logo">
  91. <img src="logo.png" alt="浠艾福" class="logo-img" width="36" height="36">
  92. <span class="logo-text">浠艾福</span>
  93. <span class="logo-tag">主动健康</span>
  94. </a>
  95. <button class="nav-toggle" id="navToggle" aria-label="切换导航">
  96. <span></span><span></span><span></span>
  97. </button>
  98. <nav class="nav" id="nav">
  99. <ul class="nav-list">
  100. <li><a href="five-dimensions.html" class="nav-link">五维能量</a></li>
  101. <li><a href="#products" class="nav-link">核心能力</a></li>
  102. <li><a href="knowledge.html" class="nav-link">成长百科</a></li>
  103. <li><a href="service-users.html" class="nav-link">服务用户</a></li>
  104. <li><a href="partnership.html" class="nav-link">合作方式</a></li>
  105. <li><a href="about.html" class="nav-link">关于我们</a></li>
  106. <li><a href="#contact" class="nav-link">联系我们</a></li>
  107. </ul>
  108. </nav>
  109. </div>
  110. </header>
  111. <!-- ==================== Hero ==================== -->
  112. <section class="hero" id="hero">
  113. <div class="hero-bg"></div>
  114. <div class="container hero-inner">
  115. <div class="hero-content">
  116. <span class="hero-badge">家庭精准生活方式管理</span>
  117. <h1 class="hero-title">
  118. 一个人的主动,<br>
  119. <span class="highlight">全家人的健康。</span>
  120. </h1>
  121. <p class="hero-desc">
  122. 从 <strong>代谢</strong> 到 <strong>心理</strong>,帮一家人把 <strong>身体和状态</strong> 都调顺。
  123. 浠艾福以 <strong>主动健康</strong> 为理念,围绕 <strong>身·智·富·行·心</strong> 五大维度,
  124. 为每个家庭定制 <strong>精准的生活方式管理方案</strong>。
  125. </p>
  126. <div class="hero-actions">
  127. <a href="#product" class="btn btn-primary">从一次主动开始</a>
  128. <a href="#wuxing" class="btn btn-outline">探索五维能量</a>
  129. <a href="#contact" class="btn btn-accent">扫码体验</a>
  130. </div>
  131. <div class="hero-service-link">
  132. <span>服务商?</span>
  133. <a href="/admin/">登录管理后台 →</a>
  134. </div>
  135. </div>
  136. <div class="hero-visual">
  137. <div class="dimension-orbit">
  138. <div class="orbit-center">家</div>
  139. <div class="orbit-item o1" style="--i:0">身</div>
  140. <div class="orbit-item o2" style="--i:1">智</div>
  141. <div class="orbit-item o3" style="--i:2">富</div>
  142. <div class="orbit-item o4" style="--i:3">行</div>
  143. <div class="orbit-item o5" style="--i:4">心</div>
  144. </div>
  145. </div>
  146. </div>
  147. <div class="scroll-indicator">
  148. <span>向下滚动</span>
  149. <div class="scroll-arrow"></div>
  150. </div>
  151. </section>
  152. <!-- ==================== About ==================== -->
  153. <section class="section section-about" id="about">
  154. <div class="container">
  155. <div class="section-header">
  156. <span class="section-tag">关于我们</span>
  157. <h2 class="section-title">浠艾福主动健康学院</h2>
  158. <p class="section-desc">
  159. 我们相信,<strong>一个人的主动,能带动全家人的健康</strong>。浠艾福以 AI 精准分析为引擎,从代谢到心理,为每个家庭提供可落地的生活方式管理方案——让身体和状态,一起调顺,让每一次改变都看得见,让健康陪伴全家的每一天。
  160. </p>
  161. </div>
  162. <div class="about-grid">
  163. <div class="about-card">
  164. <div class="about-icon">
  165. <svg viewBox="0 0 48 48" fill="none" width="48" height="48"><circle cx="24" cy="24" r="20" stroke="#4A9BD7" stroke-width="2" fill="#E8F4FA"/><path d="M24 32s-7-5-7-9c0-2.5 2-4.5 4-4.5s3 1.5 3 3c0-1.5 1-3 3-3s4 2 4 4.5c0 4-7 9-7 9z" fill="#4A9BD7" fill-opacity=".15" stroke="#4A9BD7" stroke-width="1.5" stroke-linejoin="round"/><path d="M17 20c-1-3 1-6 4-6s4 2 4 4-2 4-4 4-4-1-4-2z" fill="#4A9BD7" fill-opacity=".15" stroke="#4A9BD7" stroke-width="1.5"/><circle cx="32" cy="18" r="2.5" fill="#4A9BD7" fill-opacity=".3"/></svg>
  166. </div>
  167. <h3>企业使命</h3>
  168. <p>用精准生活方式管理,让一个人的主动,点亮全家人的健康。</p>
  169. </div>
  170. <div class="about-card">
  171. <div class="about-icon">
  172. <svg viewBox="0 0 48 48" fill="none" width="48" height="48"><circle cx="24" cy="24" r="20" stroke="#4ECDC4" stroke-width="2" fill="#E6FFF9"/><circle cx="17" cy="19" r="4" fill="#4ECDC4" fill-opacity=".15" stroke="#4ECDC4" stroke-width="1.5"/><circle cx="31" cy="19" r="4" fill="#4ECDC4" fill-opacity=".15" stroke="#4ECDC4" stroke-width="1.5"/><circle cx="24" cy="32" r="4" fill="#4ECDC4" fill-opacity=".15" stroke="#4ECDC4" stroke-width="1.5"/><path d="M20 22l-1 2M28 22l1 2M22 29l-3-6M26 29l3-6" stroke="#4ECDC4" stroke-width="1.2" stroke-linecap="round"/></svg>
  173. </div>
  174. <h3>企业愿景</h3>
  175. <p>AI 科技驱动,以家庭为中心,让每一个中国家庭都能拥有专属的幸福成长解决方案,成为最值得信赖的家庭健康成长伙伴。</p>
  176. </div>
  177. <div class="about-card">
  178. <div class="about-icon">
  179. <svg viewBox="0 0 48 48" fill="none" width="48" height="48"><circle cx="24" cy="24" r="20" stroke="#FFD93D" stroke-width="2" fill="#FFFDE6"/><circle cx="24" cy="12" r="3" fill="#FFD93D" fill-opacity=".4"/><circle cx="35.5" cy="19.5" r="3" fill="#FFD93D" fill-opacity=".4"/><circle cx="31" cy="33" r="3" fill="#FFD93D" fill-opacity=".4"/><circle cx="17" cy="33" r="3" fill="#FFD93D" fill-opacity=".4"/><circle cx="12.5" cy="19.5" r="3" fill="#FFD93D" fill-opacity=".4"/><path d="M24 15L33 21l-3 10H18l-3-10z" stroke="#FFD93D" stroke-width="1.5" fill="#FFD93D" fill-opacity=".08" stroke-linejoin="round"/></svg>
  180. </div>
  181. <h3>企业价值观</h3>
  182. <p>以家庭为中心 · AI + 专业服务双驱动 · 诚信透明 · 持续创新 · 协作共赢</p>
  183. </div>
  184. </div>
  185. <div class="stats-banner" id="stats">
  186. <div class="container">
  187. <div class="stats-item"><span class="stat-number">120,000+</span><span class="stat-label">家庭用户</span></div>
  188. <div class="stats-item"><span class="stat-number">1,000+</span><span class="stat-label">专业从业人员</span></div>
  189. </div>
  190. </div>
  191. </div>
  192. </section>
  193. <!-- ==================== Proactive Health Concept ==================== -->
  194. <section class="section section-concept">
  195. <div class="container" style="max-width:900px;">
  196. <div style="background:#fff;border-radius:16px;padding:2.5rem 2rem;text-align:center;box-shadow:0 4px 24px rgba(0,0,0,0.06);border:1px solid #e2e8f0;">
  197. <h3 style="font-size:clamp(1.2rem,3.5vw,1.5rem);font-weight:700;color:#1a2e1a;margin-bottom:0.5rem;line-height:1.5;">主动健康是五维持续增长<br class="hide-desktop"> · 被动健康是五维内部消耗</h3>
  198. <p style="font-size:0.9rem;color:#718096;margin-bottom:1.5rem;">身·智·富·行·心——两种选择,两种截然不同的人生轨迹</p>
  199. <div style="display:flex;flex-direction:column;gap:0.6rem;max-width:700px;margin:0 auto;">
  200. <!-- 被动健康 -->
  201. <div style="background:#fffbeb;border:1.5px solid #fde68a;border-radius:12px;padding:1.5rem 1.2rem;text-align:center;">
  202. <div style="display:flex;align-items:center;justify-content:center;gap:0.4rem;margin-bottom:0.4rem;">
  203. <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="#d97706" stroke-width="1.5"/><path d="M12 6v6l4 4" stroke="#d97706" stroke-width="1.5" stroke-linecap="round"/></svg>
  204. <span style="font-size:1.1rem;font-weight:700;color:#92400e;">被动健康</span>
  205. </div>
  206. <p style="font-size:0.9rem;color:#a16207;line-height:1.7;margin-bottom:0.4rem;">
  207. <strong style="color:#78350f;">五维内部消耗</strong><br>
  208. 前半生用健康换财富——透支身体、忽略心智、牺牲关系<br>
  209. 后半生用财富换健康——医疗支出吞噬积蓄、生命质量下降
  210. </p>
  211. <div style="padding:0.5rem 0.8rem;background:#fff;border-radius:8px;font-size:0.8rem;color:#92400e;font-weight:600;">
  212. 📉 五维持平或持续下滑 — 身弱·智耗·富空·行损·心累
  213. </div>
  214. </div>
  215. <!-- 分隔箭头 -->
  216. <div style="display:flex;align-items:center;justify-content:center;gap:0.4rem;padding:0.2rem 0;">
  217. <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 4v16M5 13l7 7 7-7" stroke="#94a3b8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
  218. <span style="font-size:0.75rem;color:#94a3b8;letter-spacing:0.05em;">转变观念</span>
  219. </div>
  220. <!-- 主动健康 -->
  221. <div style="background:#f0fdfa;border:1.5px solid #5eead4;border-radius:12px;padding:1.5rem 1.2rem;text-align:center;">
  222. <div style="display:flex;align-items:center;justify-content:center;gap:0.4rem;margin-bottom:0.4rem;">
  223. <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="#0d9488" stroke-width="1.5"/><path d="M8 12l3 3 5-5" stroke="#0d9488" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
  224. <span style="font-size:1.1rem;font-weight:700;color:#115e59;">主动健康</span>
  225. </div>
  226. <p style="font-size:0.9rem;color:#0f766e;line-height:1.7;margin-bottom:0.4rem;">
  227. <strong style="color:#134e4a;">五维持续稳定的增长</strong><br>
  228. 前期主动投入健康管理——身强、智增、富积累、行畅、心润<br>
  229. 全生命周期持续收益——健康本身就是最大的家庭资产增值
  230. </p>
  231. <div style="padding:0.5rem 0.8rem;background:#fff;border-radius:8px;font-size:0.8rem;color:#0d9488;font-weight:600;">
  232. 📈 五维持续攀升 — 身健·智明·富盈·行和·心暖
  233. </div>
  234. </div>
  235. </div>
  236. <!-- 核心闭环 -->
  237. <div style="margin-top:1.8rem;">
  238. <p style="font-size:0.9rem;color:#64748b;margin-bottom:0.8rem;">主动健康的五维闭环</p>
  239. <div style="display:flex;flex-wrap:wrap;justify-content:center;gap:0.8rem;">
  240. <span style="background:#f0fdfa;border:1px solid #5eead4;padding:0.5rem 1rem;border-radius:8px;font-size:0.9rem;color:#0d9488;font-weight:500;">🔍 提前识别</span>
  241. <span style="color:#5eead4;font-size:1.1rem;">→</span>
  242. <span style="background:#f0fdfa;border:1px solid #5eead4;padding:0.5rem 1rem;border-radius:8px;font-size:0.9rem;color:#0d9488;font-weight:500;">🛡️ 风险管控</span>
  243. <span style="color:#5eead4;font-size:1.1rem;">→</span>
  244. <span style="background:#f0fdfa;border:1px solid #5eead4;padding:0.5rem 1rem;border-radius:8px;font-size:0.9rem;color:#0d9488;font-weight:500;">⚡ 主动干预</span>
  245. <span style="color:#5eead4;font-size:1.1rem;">→</span>
  246. <span style="background:#f0fdfa;border:1px solid #5eead4;padding:0.5rem 1rem;border-radius:8px;font-size:0.9rem;color:#0d9488;font-weight:500;">📊 效果评估</span>
  247. <span style="color:#5eead4;font-size:1.1rem;">→</span>
  248. <span style="background:#f0fdfa;border:1px solid #5eead4;padding:0.5rem 1rem;border-radius:8px;font-size:0.9rem;color:#0d9488;font-weight:500;">🔄 持续优化</span>
  249. </div>
  250. </div>
  251. <p class="section-tip">一个人的主动,全家人的健康——改变从你先开始。</p>
  252. </div>
  253. </div>
  254. </section>
  255. <!-- ==================== Product (XAF) ==================== -->
  256. <section class="section section-product" id="product">
  257. <div class="container">
  258. <div class="section-header">
  259. <span class="section-tag">产品概览</span>
  260. <h2 class="section-title">浠艾福 · Care Family</h2>
  261. <p class="section-subtitle">一个家庭即是一个会员单位 · 全家共享一套成长体系</p>
  262. <p class="section-desc">
  263. 一家人的精准生活方式管理平台——从代谢到心理,围绕五大维度,
  264. 通过活动、课程、商品、任务、咨询等多元服务,
  265. 连接家庭客户、专业服务商与平台运营三方角色,
  266. 帮一家人把身体和状态都调顺。
  267. </p>
  268. </div>
  269. <div class="product-showcase">
  270. <div class="product-intro">
  271. <div class="product-quote">
  272. <p>"在充满变化的时代,一个家庭的终极幸福——<br>
  273. 是衣食无忧的底气,不为物质所困;<br>
  274. 是以智慧与品格赢得社会的尊敬与尊崇;<br>
  275. 更是将家族智慧与家风代代相传,<br>
  276. 在爱与价值观中培养下一代的健全人格与核心竞争力。"</p>
  277. </div>
  278. <div class="product-stats">
  279. <a href="#roles" class="stat stat-link">
  280. <span class="stat-num">3</span>
  281. <span class="stat-label">平台角色</span>
  282. </a>
  283. <a href="#products" class="stat stat-link">
  284. <span class="stat-num">4</span>
  285. <span class="stat-label">核心产品</span>
  286. </a>
  287. <a href="five-dimensions.html" class="stat stat-link">
  288. <span class="stat-num">5</span>
  289. <span class="stat-label">幸福维度</span>
  290. </a>
  291. <a href="#ai-tech" class="stat stat-link">
  292. <span class="stat-num">6</span>
  293. <span class="stat-label">AI 技术应用</span>
  294. </a>
  295. </div>
  296. </div>
  297. <!-- 幸福支柱 -->
  298. <div class="pillars-grid">
  299. <!-- 衣食无忧 -->
  300. <div class="pillar-card pillar-card--material reveal">
  301. <div class="pillar-main">
  302. <div class="pillar-left">
  303. <div class="pillar-name">衣食无忧</div>
  304. <div class="pillar-subtitle">物质生存基础</div>
  305. </div>
  306. <div class="pillar-arrow">✕</div>
  307. <div class="pillar-dimensions">
  308. <span class="pillar-dim-badge" style="--dim-color:#FF8C42; background:#FF8C42">
  309. 身 <span class="dim-sub">根基永固</span>
  310. </span>
  311. <span class="pillar-dim-badge" style="--dim-color:#F59E0B; background:#F59E0B">
  312. 富 <span class="dim-sub">成就</span>
  313. </span>
  314. </div>
  315. </div>
  316. <div class="pillar-interpretation">
  317. <strong>身</strong>是无忧的根基——无病无灾才有底气;<strong>富</strong>是无忧的保障——自我实现与价值感,让家庭成员更有底气与获得感。两者结合,既强体魄又安心,构成家庭坚实的物理底盘。
  318. </div>
  319. </div>
  320. <!-- 受人尊敬 -->
  321. <div class="pillar-card pillar-card--respect reveal">
  322. <div class="pillar-main">
  323. <div class="pillar-left">
  324. <div class="pillar-name">受人尊敬</div>
  325. <div class="pillar-subtitle">社会价值认同</div>
  326. </div>
  327. <div class="pillar-arrow">➡️</div>
  328. <div class="pillar-dimensions">
  329. <span class="pillar-dim-badge" style="--dim-color:#6366F1; background:#6366F1">
  330. 智 <span class="dim-sub">赋能未来</span>
  331. </span>
  332. <span class="pillar-dim-badge" style="--dim-color:#10B981; background:#10B981">
  333. 行 <span class="dim-sub">人际和谐</span>
  334. </span>
  335. </div>
  336. </div>
  337. <div class="pillar-interpretation">
  338. <strong>智</strong>是受人尊敬的内核——真才实学与健全人格赢得认可;<strong>行</strong>是受人尊敬的外显——和睦友善与广结善缘积累声望。内外兼修,社会价值自然彰显。
  339. </div>
  340. </div>
  341. <!-- 代际传承 -->
  342. <div class="pillar-card pillar-card--legacy reveal">
  343. <div class="pillar-main">
  344. <div class="pillar-left">
  345. <div class="pillar-name">代际传承</div>
  346. <div class="pillar-subtitle">生命延续与期望</div>
  347. </div>
  348. <div class="pillar-arrow">➡️</div>
  349. <div class="pillar-dimensions">
  350. <span class="pillar-dim-badge" style="--dim-color:#FF6B9D; background:#FF6B9D">
  351. 心 <span class="dim-sub">大爱相随</span>
  352. </span>
  353. <span class="pillar-dim-badge" style="--dim-color:#6366F1; background:#6366F1">
  354. 智 <span class="dim-sub">赋能未来</span>
  355. </span>
  356. </div>
  357. </div>
  358. <div class="pillar-interpretation">
  359. 传承不仅是血脉,更是爱与智慧。<strong>心</strong>负责凝聚家族情感纽带,让子女感受温暖与归属;<strong>智</strong>负责赋予子女立足未来的核心竞争力,让传承有质量。
  360. </div>
  361. </div>
  362. </div>
  363. </div>
  364. </section>
  365. <!-- ==================== Core Products ==================== -->
  366. <section class="section section-products" id="products">
  367. <div class="container">
  368. <div class="section-header">
  369. <span class="section-tag">核心产品</span>
  370. <h2 class="section-title">核心能力</h2>
  371. <p class="section-desc">
  372. 从数据采集到数据分析,从方案确认到执行跟踪,浠艾福以 AI 与专业服务
  373. 形成完整的家庭健康与成长管理闭环。
  374. </p>
  375. </div>
  376. <div class="products-grid">
  377. <div class="product-card" style="--product-color:#0EA5E9;--product-bg:#ECFEFF;">
  378. <div class="product-card-icon">📥</div>
  379. <h3>成长档案<span class="product-plus">+</span></h3>
  380. <p class="product-summary">采集 — 多源报告与成长轨迹统一沉淀。</p>
  381. </div>
  382. <div class="product-card" style="--product-color:#10B981;--product-bg:#ECFDF5;">
  383. <div class="product-card-icon">📊</div>
  384. <h3>健康档案<span class="product-plus">+</span></h3>
  385. <p class="product-summary">分析 — 跨数据关联、趋势洞察与风险预警(参考非诊断)。</p>
  386. </div>
  387. <div class="product-card" style="--product-color:#4A9BD7;--product-bg:#E8F4FA;">
  388. <div class="product-card-icon">🍎</div>
  389. <h3>精准健康</h3>
  390. <p class="product-summary">方案 — AI 生成 + 规划师审核;食品非药,请遵医嘱。</p>
  391. </div>
  392. <div class="product-card" style="--product-color:#C0A060;--product-bg:#F9F4EC;">
  393. <div class="product-card-icon">🤝</div>
  394. <h3>成长规划</h3>
  395. <p class="product-summary">跟踪 — 规划师陪伴、目标拆解与定期复盘。</p>
  396. </div>
  397. </div>
  398. <div style="text-align:center;margin-top:var(--space-xl)">
  399. <a href="service-users.html" class="btn btn-primary">查看完整服务与能力 →</a>
  400. </div>
  401. </div>
  402. </section>
  403. <!-- ==================== Wuxing Philosophy ==================== -->
  404. <section class="section section-wuxing" id="wuxing">
  405. <div class="container">
  406. <div class="section-header">
  407. <span class="section-tag">五维能量</span>
  408. <h2 class="section-title">能量维度</h2>
  409. <p class="section-subtitle">主动健康 · 五大能量维度 · 动态平衡 —— 代谢是地基,心理是上层</p>
  410. <p class="section-desc">
  411. 在 AI 时代,家庭成长面临前所未有的机遇与挑战。<strong>主动健康</strong>理念贯穿五维——不是等病来,而是主动管理每个维度的能量状态。
  412. 五维幸福并非各自孤立,而是像一个有机生态系统——
  413. <strong>相生让系统前进,相克让系统不翻车</strong>。
  414. 每一维都在为下一维积蓄能量,同时也受到制约不至过度失衡。
  415. AI 智能分析帮助家庭更精准地感知五维状态,让成长路径清晰可见。
  416. </p>
  417. </div>
  418. <!-- Wuxing Cycle Diagram -->
  419. <div class="wuxing-diagram">
  420. <canvas id="wuxingCanvas"></canvas>
  421. <div class="taiji-center">
  422. <svg viewBox="0 0 120 120" width="70" height="70" class="taiji-svg">
  423. <circle cx="60" cy="60" r="56" fill="none" stroke="currentColor" stroke-width="1.2" opacity="0.3"/>
  424. <path d="M60 4 A56 56 0 0 1 60 116 A28 28 0 0 0 60 60 A28 28 0 0 1 60 4" fill="currentColor" opacity="0.3"/>
  425. <circle cx="60" cy="32" r="10" fill="#fff"/>
  426. <circle cx="60" cy="88" r="10" fill="currentColor" opacity="0.3"/>
  427. </svg>
  428. </div>
  429. </div>
  430. <!-- Explanation Cards -->
  431. <div class="wuxing-explanations">
  432. <!-- 相生 -->
  433. <div class="we-section">
  434. <h3 class="we-title we-sheng">✨ 相生关系 · 循环促进</h3>
  435. <p class="we-subtitle">每一维为下一维注入能量,形成正向螺旋上升</p>
  436. <div class="we-grid">
  437. <div class="wuxing-card wc-sheng" style="--wc-color:#5D4037">
  438. <span class="wc-arrow"><span style="color:#5D4037;font-weight:600">身</span> → <span style="color:#C0A060;font-weight:600">智</span></span>
  439. <p>强健体魄孕育<span style="color:#C0A060;font-weight:600">智</span>慧,<span style="color:#5D4037;font-weight:600">身</span><span style="color:#EF4444;font-weight:600">心</span>健康奠定<span style="color:#C0A060;font-weight:600">智</span>慧根基。</p>
  440. </div>
  441. <div class="wuxing-card wc-sheng" style="--wc-color:#C0A060">
  442. <span class="wc-arrow"><span style="color:#C0A060;font-weight:600">智</span> → <span style="color:#0EA5E9;font-weight:600">富</span></span>
  443. <p><span style="color:#C0A060;font-weight:600">智</span>慧开启<span style="color:#0EA5E9;font-weight:600">成就</span>之门,知识赋能自我实现。</p>
  444. </div>
  445. <div class="wuxing-card wc-sheng" style="--wc-color:#0EA5E9">
  446. <span class="wc-arrow"><span style="color:#0EA5E9;font-weight:600">富</span> → <span style="color:#10B981;font-weight:600">行</span></span>
  447. <p><span style="color:#0EA5E9;font-weight:600">成就</span>滋养关系网络,价值自足成就人情温暖。</p>
  448. </div>
  449. <div class="wuxing-card wc-sheng" style="--wc-color:#10B981">
  450. <span class="wc-arrow"><span style="color:#10B981;font-weight:600">行</span> → <span style="color:#EF4444;font-weight:600">心</span></span>
  451. <p>关系和谐温暖<span style="color:#EF4444;font-weight:600">心</span>灵,良好人际滋养爱与归属。</p>
  452. </div>
  453. <div class="wuxing-card wc-sheng" style="--wc-color:#EF4444">
  454. <span class="wc-arrow"><span style="color:#EF4444;font-weight:600">心</span> → <span style="color:#5D4037;font-weight:600">身</span></span>
  455. <p>家族大爱呵护健康,情感关怀滋养体魄。</p>
  456. </div>
  457. </div>
  458. </div>
  459. <!-- 相克 -->
  460. <div class="we-section">
  461. <h3 class="we-title we-ke">⚖️ 相克关系 · 动态制衡</h3>
  462. <p class="we-subtitle">每个维度都有制约机制,防止任何一维过度膨胀</p>
  463. <div class="we-grid">
  464. <div class="wuxing-card wc-ke" style="--wc-color:#5D4037">
  465. <span class="wc-arrow"><span style="color:#5D4037;font-weight:600">身</span> ⨯ <span style="color:#0EA5E9;font-weight:600">富</span></span>
  466. <p>健康是最大财<span style="color:#0EA5E9;font-weight:600">富</span>,莫用健康换金钱。</p>
  467. </div>
  468. <div class="wuxing-card wc-ke" style="--wc-color:#C0A060">
  469. <span class="wc-arrow"><span style="color:#C0A060;font-weight:600">智</span> ⨯ <span style="color:#10B981;font-weight:600">行</span></span>
  470. <p>算计人际关系得失不如真诚以待,关系不需要完美策略。</p>
  471. </div>
  472. <div class="wuxing-card wc-ke" style="--wc-color:#0EA5E9">
  473. <span class="wc-arrow"><span style="color:#0EA5E9;font-weight:600">富</span> ⨯ <span style="color:#EF4444;font-weight:600">心</span></span>
  474. <p>勿让功利掩盖温情,<span style="color:#0EA5E9;font-weight:600">成就</span>服务于家庭。</p>
  475. </div>
  476. <div class="wuxing-card wc-ke" style="--wc-color:#10B981">
  477. <span class="wc-arrow"><span style="color:#10B981;font-weight:600">行</span> ⨯ <span style="color:#5D4037;font-weight:600">身</span></span>
  478. <p>人际有度,关爱有方,莫因取悦他人透支自<span style="color:#5D4037;font-weight:600">身</span>健康。</p>
  479. </div>
  480. <div class="wuxing-card wc-ke" style="--wc-color:#EF4444">
  481. <span class="wc-arrow"><span style="color:#EF4444;font-weight:600">心</span> ⨯ <span style="color:#C0A060;font-weight:600">智</span></span>
  482. <p>大爱需留理性空间,不过度保护。</p>
  483. </div>
  484. </div>
  485. </div>
  486. </div>
  487. </div>
  488. <div class="container" style="text-align:center;margin-top:var(--space-xl)">
  489. <a href="five-dimensions.html" class="btn btn-primary">查看完整五维理念 →</a>
  490. </div>
  491. </section>
  492. <!-- ==================== Features ==================== -->
  493. <section class="section section-features" id="features">
  494. <div class="container">
  495. <div class="section-header">
  496. <span class="section-tag">核心功能</span>
  497. <h2 class="section-title">家庭成长闭环</h2>
  498. <p class="section-desc">
  499. 围绕"<strong>提前识别 → 风险管控 → 主动干预 → 效果评估</strong>"的主动健康闭环,
  500. 浠艾福以 AI 贯穿每个环节——不等问题发生,提前发现风险并主动规避。
  501. </p>
  502. </div>
  503. <div class="features-grid">
  504. <div class="feature-card">
  505. <div class="feature-icon" style="--fc:#6366F1"><svg viewBox="0 0 32 32" fill="none" width="32" height="32"><circle cx="16" cy="16" r="10" stroke="currentColor" stroke-width="2"/><path d="M16 10v6l4 4" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/><circle cx="10" cy="9" r="3" fill="currentColor" opacity=".15" stroke="currentColor" stroke-width="1.2"/></svg></div>
  506. <h3>提前识别</h3>
  507. <p>AI 多维评估提前发现健康与成长隐患——不等症状出现,从五维能量数据中识别潜在风险,为每位家庭成员绘制主动健康基线。</p>
  508. </div>
  509. <div class="feature-card">
  510. <div class="feature-icon" style="--fc:#10B981"><svg viewBox="0 0 32 32" fill="none" width="32" height="32"><path d="M16 4l3 9h10l-8 6 3 9-8-5-8 5 3-9-8-6h10l3-9z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg></div>
  511. <h3>风险管控</h3>
  512. <p>针对识别出的风险点,AI 结合专业知识库生成分级管控方案——从生活方式调整到专业干预建议,不让隐患发展为问题。</p>
  513. </div>
  514. <div class="feature-card">
  515. <div class="feature-icon" style="--fc:#F59E0B"><svg viewBox="0 0 32 32" fill="none" width="32" height="32"><path d="M6 16l6 6 14-14" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
  516. <h3>主动干预</h3>
  517. <p>任务下发到执行、能量追踪到有序支出,家长引导与孩子主动参与结合,将健康管理融入日常——不等病来,天天都是主动健康日。</p>
  518. </div>
  519. <div class="feature-card">
  520. <div class="feature-icon" style="--fc:#EF4444"><svg viewBox="0 0 32 32" fill="none" width="32" height="32"><path d="M8 6v20M8 16l4-4 4 4 8-8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
  521. <h3>效果评估</h3>
  522. <p>成长档案记录每步轨迹,健康报告与阶段性复盘让风险管控效果可视化——数据驱动持续优化,形成主动健康的良性循环。</p>
  523. </div>
  524. </div>
  525. </div>
  526. </section>
  527. <!-- ==================== AI Technology ==================== -->
  528. <section class="section section-ai-tech" id="ai-tech">
  529. <div class="container">
  530. <div class="section-header">
  531. <span class="section-tag">AI 技术应用</span>
  532. <h2 class="section-title">六大 AI 引擎 · 让成长看得见</h2>
  533. <p class="section-desc">
  534. 浠艾福深度融合 AI 大模型、百万数据常模与专业知识库,
  535. 将 AI 能力渗透到家庭成长的每一个环节——从测评到营养、从能量分析到日常陪伴,
  536. 让科技真正为家庭教育赋能。
  537. </p>
  538. </div>
  539. <div class="ai-grid">
  540. <div class="ai-card" style="--ai-color:#6366F1;--ai-bg:#EEF0FF;">
  541. <div class="ai-card-header">
  542. <div class="ai-card-icon">
  543. <svg viewBox="0 0 48 48" fill="none" width="36" height="36">
  544. <rect x="8" y="8" width="32" height="32" rx="8" stroke="#6366F1" stroke-width="1.8" fill="none"/>
  545. <path d="M18 20l-3 8h2l1-3h4l1 3h2l-3-8h-4z" fill="#6366F1" opacity=".7"/>
  546. <circle cx="33" cy="17" r="2" fill="#6366F1" opacity=".5"/>
  547. <path d="M30 27l3 3 5-5" stroke="#6366F1" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
  548. </svg>
  549. </div>
  550. <div class="ai-card-badge">大模型+常模</div>
  551. </div>
  552. <h3>AI 智能测评与解读</h3>
  553. <p>完成专业多维测评后,AI 大模型结合百万级常模数据,自动生成多维度分析报告——从认知能力、情绪特质到身体素质深度解读。告别冰冷的分数,为每个家庭提供科学、可操作的个性化成长建议,让测评结果真正指导行动。</p>
  554. </div>
  555. <div class="ai-card" style="--ai-color:#10B981;--ai-bg:#ECFDF5;">
  556. <div class="ai-card-header">
  557. <div class="ai-card-icon">
  558. <svg viewBox="0 0 48 48" fill="none" width="36" height="36">
  559. <circle cx="24" cy="24" r="18" stroke="#10B981" stroke-width="1.8" fill="none"/>
  560. <path d="M16 28c2-4 6-4 8 0s6 4 8 0" stroke="#10B981" stroke-width="1.5" stroke-linecap="round"/>
  561. <circle cx="18" cy="18" r="3" fill="#10B981" opacity=".15" stroke="#10B981" stroke-width="1.2"/>
  562. <circle cx="30" cy="18" r="3" fill="#10B981" opacity=".15" stroke="#10B981" stroke-width="1.2"/>
  563. <path d="M20 34l4 2 4-2" stroke="#10B981" stroke-width="1.5" stroke-linecap="round"/>
  564. </svg>
  565. </div>
  566. <div class="ai-card-badge">专业知识库+大模型</div>
  567. </div>
  568. <h3>AI 精准健康</h3>
  569. <p>结合肠道菌群 16S rRNA 测序数据(合作方供给,仅用于科研与辅助参考,非临床诊断)与日常健康记录,AI 健康模型调用专业知识库分析个体代谢特征,自动生成个性化的生活方式参考方案。从阳光节律到科学运动、从空气环境到优质饮水、从日常膳食到精准营养素补充,陪伴全家人的每一天健康。食品与营养素不是药品,请遵医嘱。</p>
  570. </div>
  571. <div class="ai-card" style="--ai-color:#4A9BD7;--ai-bg:#E8F4FA;">
  572. <div class="ai-card-header">
  573. <div class="ai-card-icon">
  574. <svg viewBox="0 0 48 48" fill="none" width="36" height="36">
  575. <circle cx="24" cy="24" r="18" stroke="#4A9BD7" stroke-width="1.8" fill="none"/>
  576. <path d="M24 10v4M24 34v4M10 24h4M34 24h4" stroke="#4A9BD7" stroke-width="1.5" stroke-linecap="round"/>
  577. <circle cx="24" cy="24" r="6" fill="#4A9BD7" opacity=".12" stroke="#4A9BD7" stroke-width="1.2"/>
  578. <path d="M16 16l4 4M28 28l4 4" stroke="#4A9BD7" stroke-width="1.2" stroke-linecap="round"/>
  579. </svg>
  580. </div>
  581. <div class="ai-card-badge">数据智能</div>
  582. </div>
  583. <h3>AI 五维能量引擎</h3>
  584. <p>实时分析家庭在身·智·富·行·心五大维度上的能量分配与消耗轨迹。AI 基于百万家庭常模数据自动识别失衡风险——比如"身"投入过多而"心"被忽视——及时预警并推荐平衡路径。健康指数动态可视化,让家庭成长状态一目了然。</p>
  585. </div>
  586. <div class="ai-card" style="--ai-color:#C0A060;--ai-bg:#F9F4EC;">
  587. <div class="ai-card-header">
  588. <div class="ai-card-icon">
  589. <svg viewBox="0 0 48 48" fill="none" width="36" height="36">
  590. <circle cx="24" cy="24" r="18" stroke="#C0A060" stroke-width="1.8" fill="none"/>
  591. <path d="M16 18h16" stroke="#C0A060" stroke-width="1.5" stroke-linecap="round"/>
  592. <path d="M16 24h12" stroke="#C0A060" stroke-width="1.5" stroke-linecap="round"/>
  593. <path d="M16 30h8" stroke="#C0A060" stroke-width="1.5" stroke-linecap="round"/>
  594. <circle cx="36" cy="36" r="4" fill="#C0A060" opacity=".12" stroke="#C0A060" stroke-width="1.2"/>
  595. <path d="M36 34v4M34 36h4" stroke="#C0A060" stroke-width="1.5" stroke-linecap="round"/>
  596. </svg>
  597. </div>
  598. <div class="ai-card-badge">大模型对话</div>
  599. </div>
  600. <h3>AI 成长顾问</h3>
  601. <p>家长可以随时用自然语言提问——"孩子最近情绪不太好怎么办?""有哪些适合我们家的亲子活动?"AI 大模型结合家庭档案与专业育儿知识库,给出有温度、有依据的个性化建议。24 小时在线,成为每个家庭身边触手可及的 AI 育儿助手。</p>
  602. </div>
  603. <div class="ai-card" style="--ai-color:#EF4444;--ai-bg:#FEF2F2;">
  604. <div class="ai-card-header">
  605. <div class="ai-card-icon">
  606. <svg viewBox="0 0 48 48" fill="none" width="36" height="36">
  607. <rect x="10" y="8" width="28" height="32" rx="4" stroke="#EF4444" stroke-width="1.8" fill="none"/>
  608. <path d="M16 16h16" stroke="#EF4444" stroke-width="1.5" stroke-linecap="round"/>
  609. <path d="M16 22h12" stroke="#EF4444" stroke-width="1.5" stroke-linecap="round"/>
  610. <circle cx="36" cy="32" r="5" fill="#EF4444" opacity=".12" stroke="#EF4444" stroke-width="1.2"/>
  611. <path d="M34 32h4M36 30v4" stroke="#EF4444" stroke-width="1.5" stroke-linecap="round"/>
  612. </svg>
  613. </div>
  614. <div class="ai-card-badge">多模态分析</div>
  615. </div>
  616. <h3>AI 多模态成长档案</h3>
  617. <p>自动汇聚孩子的健康报告、测评数据、活动照片、成长记录等多模态信息,AI 从中识别关键成长里程碑——第一次独立完成任务的勇气、某项能力的跨越式提升——生成年度成长叙事报告。每一次进步都被看见,每一段成长都有故事。</p>
  618. </div>
  619. <div class="ai-card" style="--ai-color:#A78BFA;--ai-bg:#F5F0FF;">
  620. <div class="ai-card-header">
  621. <div class="ai-card-icon">
  622. <svg viewBox="0 0 48 48" fill="none" width="36" height="36">
  623. <circle cx="24" cy="24" r="18" stroke="#A78BFA" stroke-width="1.8" fill="none"/>
  624. <path d="M16 20l8 4 8-4" stroke="#A78BFA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  625. <path d="M16 28l8 4 8-4" stroke="#A78BFA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  626. <circle cx="24" cy="16" r="3" fill="#A78BFA" opacity=".15" stroke="#A78BFA" stroke-width="1.2"/>
  627. </svg>
  628. </div>
  629. <div class="ai-card-badge">智能匹配</div>
  630. </div>
  631. <h3>AI 成长路径推荐</h3>
  632. <p>基于家庭画像、各成员发展阶段与五维能量分布,AI 智能匹配最合适的任务、活动与课程——从亲子互动到成人提升,从体能挑战到情绪管理。不是千篇一律的模板,而是为每个家庭量身定制的成长路径,让努力始终走在正确的方向上。</p>
  633. </div>
  634. </div>
  635. </div>
  636. </section>
  637. <!-- ==================== FAQ ==================== -->
  638. <section class="section section-faq" id="faq">
  639. <div class="container">
  640. <div class="section-header">
  641. <span class="section-tag">常见问题</span>
  642. <h2 class="section-title">你可能想知道的</h2>
  643. <p class="section-desc">
  644. 关于浠艾福平台,家长们最常问的问题。
  645. </p>
  646. </div>
  647. <div class="faq-list">
  648. <details class="faq-item">
  649. <summary>浠艾福是什么平台?</summary>
  650. <div class="faq-answer">浠艾福(Care Family)是一家人的<strong>精准生活方式管理</strong>平台——从<strong>代谢</strong>到<strong>心理</strong>,帮一家人把身体和状态都调顺。以<strong>主动健康</strong>为理念,围绕身·智·富·行·心五大维度,连接家庭客户、专业服务商与平台运营三方角色,以 AI + 专业人员双轨驱动全家持续成长。</div>
  651. </details>
  652. <details class="faq-item">
  653. <summary>一个家庭如何开始使用?</summary>
  654. <div class="faq-answer">微信搜索「浠艾福」小程序,创建家庭账户即可开始。每位家庭成员拥有独立的成长账户与五维能量体系,既独立又互通。从精准营养到成长规划,从亲子互动到长辈陪护,同一平台覆盖全家。</div>
  655. </details>
  656. <details class="faq-item">
  657. <summary>浠艾福和普通育儿App有什么不同?</summary>
  658. <div class="faq-answer">普通育儿App通常面向单一阶段或单一角色。浠艾福覆盖全家成员——成人健康管理、孩子成长规划、长辈陪护关怀。将健康档案数据、测评数据、家庭成员数据多维度整合,以 AI + 专业规划师驱动输出综合方案,而非单纯的工具或内容聚合。</div>
  659. </details>
  660. <details class="faq-item">
  661. <summary>什么是五维能量体系?</summary>
  662. <div class="faq-answer">五维能量是浠艾福的核心评估模型,包含身(根基永固)、智(赋能未来)、富(成就)、行(人际和谐)、心(大爱相随)五大维度。遵循五行相生相克原理——相生让系统前进,相克让系统不翻车。AI 智能分析各维度能量分布,直观呈现家庭成长健康指数。</div>
  663. </details>
  664. <details class="faq-item">
  665. <summary>成长档案是什么?有什么用?</summary>
  666. <div class="faq-answer">成长档案是全家成员的成长数据中心——AI 多模态记录(文字/图片/视频/语音)完整成长轨迹,整合 DAN 测评等专业评估数据与日常记录,自动识别里程碑生成成长报告。帮助家长不错过每个成长关键期,让成长有据可查、有迹可循。已服务 120,000+ 家庭。</div>
  667. </details>
  668. <details class="faq-item">
  669. <summary>健康档案是什么?菌群检测怎么做?</summary>
  670. <div class="faq-answer">健康档案是全家成员的健康数据中心——汇聚菌群检测、体检记录、日常监测等多源数据。菌群检测采用 16S rRNA 高通量测序:购买检测包→居家采样(无菌采样器取少量粪便)→寄回实验室→15 个工作日出具报告。检测数据自动归档健康档案,AI 营养师基于菌群-肠-脑轴定制个性化膳食方案。采样无创无痛,婴幼儿也可安全进行。</div>
  671. </details>
  672. <details class="faq-item">
  673. <summary>精准健康包含什么内容?</summary>
  674. <div class="faq-answer">精准健康基于健康档案数据与日常记录,由 AI 健康模型结合专业知识库生成。包含:科学膳食搭配与精准营养素补充、优质饮水与作息指导、运动处方与节律建议。每位家庭成员获得个性化方案,持续跟踪调整,让健康改善可量化。</div>
  675. </details>
  676. <details class="faq-item">
  677. <summary>成长规划师提供什么服务?</summary>
  678. <div class="faq-answer">成长规划师提供一对一陪伴式服务:家庭五维能量评估、孩子成长阶段综合测评、个性化成长路径设计、阶段性目标设定与拆解、亲子活动策划与复盘、成长数据分析与方案动态调整。规划师结合 AI 推荐工具,确保每一步都有专业指导,方案落地见效。</div>
  679. </details>
  680. <details class="faq-item">
  681. <summary>在浠艾福平台需要付费吗?</summary>
  682. <div class="faq-answer">浠艾福提供免费的基础功能(成长档案基础版、五维能量概览、基础 AI 问答),也提供增值付费服务(数据整合分析报告、AI 精准健康、成长规划师一对一服务、专业心智测评解读等)。用户可根据家庭需求灵活选择,不强制消费。</div>
  683. </details>
  684. <details class="faq-item">
  685. <summary>浠艾福适合什么样的家庭?</summary>
  686. <div class="faq-answer">任何关注全家综合健康与成长的家庭都适合——从希望获得科学营养方案的父母,到需要专业成长规划的孩子,再到需要身心关怀的长辈。浠艾福提供从检测诊断到方案执行的全链路服务,一站式覆盖全家 0-80 岁全生命周期。</div>
  687. </details>
  688. <details class="faq-item">
  689. <summary>浠艾福平台如何保障用户数据安全?</summary>
  690. <div class="faq-answer">浠艾福采用多重数据安全措施:JWT Bearer Token 身份认证、数据加密传输与存储、独立的隐私政策与用户协议、角色化权限管理(家长/孩子/服务商/管理员各自拥有不同数据访问范围)。用户数据不会在未经授权的情况下被第三方获取。</div>
  691. </details>
  692. <details class="faq-item">
  693. <summary>为什么说「一个人的主动,全家人的健康」?</summary>
  694. <div class="faq-answer">家庭健康具有传导性:一个人先做出改变,饮食习惯、作息节奏、情绪氛围会自然影响其他成员。浠艾福让改变从一个人开始,让全家的身体和状态一起被调顺。</div>
  695. </details>
  696. <details class="faq-item">
  697. <summary>「从代谢到心理」是什么意思?</summary>
  698. <div class="faq-answer">代谢是身体的地基——肠道菌群、营养、睡眠、运动;心理是生活的上层——情绪、关系、认知。浠艾福以五维体系覆盖两端:先调代谢,再调状态,身心一体、互相成就。</div>
  699. </details>
  700. </div>
  701. </div>
  702. </section>
  703. <!-- ==================== Roles ==================== -->
  704. <section class="section section-roles" id="roles">
  705. <div class="container">
  706. <div class="section-header">
  707. <span class="section-tag">平台角色</span>
  708. <h2 class="section-title">三方协同 · 各司其职</h2>
  709. <p class="section-desc">
  710. 浠艾福连接家庭客户、专业服务商与平台运营三方角色,构建完整的家庭成长服务生态。
  711. </p>
  712. </div>
  713. <div class="roles-flow">
  714. <div class="role-card role-parent">
  715. <div class="role-badge">客户</div>
  716. <div class="role-icon" style="display:flex;gap:4px;justify-content:center;">
  717. <svg viewBox="0 0 48 48" fill="none" width="36" height="36"><circle cx="24" cy="24" r="20" stroke="#4A9BD7" stroke-width="2" fill="#E8F4FA"/><circle cx="24" cy="18" r="6" fill="#4A9BD7" fill-opacity=".2" stroke="#4A9BD7" stroke-width="1.5"/><path d="M14 36c0-6 4-10 10-10s10 4 10 10" stroke="#4A9BD7" stroke-width="2" stroke-linecap="round"/></svg>
  718. </div>
  719. <h3>家庭客户 <span class="role-member-tag">会员主体</span></h3>
  720. <p>家庭为服务单位,覆盖全家各年龄段成员的健康成长需求。</p>
  721. <ul class="role-perms">
  722. <li><strong>独立账户</strong><span class="perm-desc"> — 每位家庭成员都有自己的成长账户与五维能量体系,独立又互通</span></li>
  723. <li><strong>一站覆盖</strong><span class="perm-desc"> — 从健康管理到成长规划、从亲子互动到长辈陪护,同一平台覆盖全家</span></li>
  724. <li><strong>幸福全景</strong><span class="perm-desc"> — 各成员的成长轨迹各自精彩,又共同汇聚为完整的家庭幸福全景</span></li>
  725. </ul>
  726. </div>
  727. <div class="roles-connector">
  728. <div class="connector-arrow"></div>
  729. <div class="connector-label">服务</div>
  730. </div>
  731. <div class="role-card role-teacher">
  732. <div class="role-badge">服务商</div>
  733. <div class="role-icon" style="display:flex;gap:4px;justify-content:center;">
  734. <svg viewBox="0 0 48 48" fill="none" width="36" height="36"><circle cx="24" cy="24" r="20" stroke="#3B82F6" stroke-width="2" fill="#F0F7FF"/><path d="M16 28c2-6 14-6 16 0M24 18a3 3 0 100-6 3 3 0 000 6z" stroke="#3B82F6" stroke-width="2" stroke-linecap="round"/></svg>
  735. </div>
  736. <h3>专业服务团队</h3>
  737. <p>专业服务者,为家庭提供全方位的成长支持与解决方案。</p>
  738. <ul class="role-perms">
  739. <li><strong>成长规划师</strong> — 成长路径规划、任务下发、测评解读</li>
  740. <li><strong>健康营养师</strong> — 精准营养方案、体质调理指导</li>
  741. <li><strong>心理咨询师</strong> — 情绪疏导、家庭关系、心智评估</li>
  742. <li><strong>活动管理员</strong> — 亲子活动组织、主题沙龙策划</li>
  743. </ul>
  744. <a href="/admin/" class="role-login-btn">登录管理后台</a>
  745. </div>
  746. <div class="roles-connector">
  747. <div class="connector-arrow"></div>
  748. <div class="connector-label">运营</div>
  749. </div>
  750. <div class="role-card role-admin">
  751. <div class="role-badge">平台</div>
  752. <div class="role-icon" style="display:flex;gap:4px;justify-content:center;">
  753. <svg viewBox="0 0 48 48" fill="none" width="36" height="36"><circle cx="24" cy="24" r="20" stroke="#6366F1" stroke-width="2" fill="#EEF0FF"/><rect x="16" y="14" width="16" height="20" rx="2" stroke="#6366F1" stroke-width="2"/><path d="M20 22h8M20 28h6" stroke="#6366F1" stroke-width="2" stroke-linecap="round"/></svg>
  754. </div>
  755. <h3>平台运营</h3>
  756. <p>系统管理者,审核入驻、配置系统、数据管理、操作日志。</p>
  757. <ul class="role-perms">
  758. <li><strong>审核管理</strong><span class="perm-desc"> — 审核服务商入驻、商品套餐上线</span></li>
  759. <li><strong>用户管理</strong><span class="perm-desc"> — 管理家庭账号、处理用户反馈</span></li>
  760. <li><strong>系统设置</strong><span class="perm-desc"> — 配置系统参数、管理维度与知识库</span></li>
  761. <li><strong>数据审计</strong><span class="perm-desc"> — 操作日志审计、平台数据分析</span></li>
  762. </ul>
  763. <a href="/admin/" class="role-login-btn">登录管理后台</a>
  764. </div>
  765. </div>
  766. </div>
  767. </section>
  768. <!-- ==================== Contact ==================== -->
  769. <section class="section section-contact" id="contact">
  770. <div class="container">
  771. <div class="section-header">
  772. <span class="section-tag">联系我们</span>
  773. <h2 class="section-title">携手共建家庭幸福未来</h2>
  774. <p class="section-desc">
  775. 无论您是家长、成长规划师,还是合作伙伴,
  776. 我们都期待与您一起,以 AI 之力为中国家庭的健康成长贡献力量。
  777. </p>
  778. </div>
  779. <div class="contact-grid">
  780. <div class="contact-info">
  781. <div class="contact-item">
  782. <svg viewBox="0 0 24 24" fill="none" width="24" height="24"><circle cx="12" cy="12" r="10" stroke="#4A9BD7" stroke-width="2"/><path d="M12 6v8l4 4" stroke="#4A9BD7" stroke-width="2" stroke-linecap="round"/></svg>
  783. <div>
  784. <strong>公司全称</strong>
  785. <span>浠艾福主动健康学院</span>
  786. </div>
  787. </div>
  788. <div class="contact-item">
  789. <svg viewBox="0 0 24 24" fill="none" width="24" height="24"><rect x="4" y="6" width="16" height="12" rx="2" stroke="#4A9BD7" stroke-width="2"/><path d="M4 8l8 5 8-5" stroke="#4A9BD7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
  790. <div>
  791. <strong>产品名称</strong>
  792. <span>浠艾福(Care Family)</span>
  793. </div>
  794. </div>
  795. <div class="contact-item">
  796. <svg viewBox="0 0 24 24" fill="none" width="24" height="24"><path d="M12 2C8 2 4 5 4 9c0 5 8 13 8 13s8-8 8-13c0-4-4-7-8-7z" stroke="#4A9BD7" stroke-width="2"/><circle cx="12" cy="9" r="3" stroke="#4A9BD7" stroke-width="2"/></svg>
  797. <div>
  798. <strong>公司地址</strong>
  799. <span>中国 · 北京</span>
  800. </div>
  801. </div>
  802. </div>
  803. <div class="contact-cta">
  804. <p>欢迎体验浠艾福家庭幸福健康成长平台</p>
  805. <p class="cta-sub">微信小程序搜索「浠艾福」即可体验</p>
  806. <div class="contact-qr">
  807. <img src="cf.jpg" alt="浠艾福小程序码">
  808. <span>微信扫码立即体验</span>
  809. </div>
  810. </div>
  811. </div>
  812. </div>
  813. </section>
  814. <!-- ==================== Testimonials ==================== -->
  815. <section class="section section-testimonials" id="testimonials">
  816. <div class="container">
  817. <div class="section-header">
  818. <span class="section-tag">用户心声</span>
  819. <h2 class="section-title">他们正在用浠艾福改变家庭</h2>
  820. <p class="section-desc">来自 成长档案与精准营养用户的真实反馈</p>
  821. </div>
  822. <div class="testimonials-grid">
  823. <div class="testimonial-card">
  824. <div class="testimonial-stars">
  825. <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>
  826. <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>
  827. <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>
  828. <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>
  829. <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>
  830. </div>
  831. <p class="testimonial-text">"自从用了 成长档案,我能清晰地看到孩子在认知、情绪各方面的进步轨迹。以前靠感觉,现在靠数据。"</p>
  832. <div class="testimonial-author">
  833. <span class="testimonial-name">成长档案用户</span>
  834. </div>
  835. </div>
  836. <div class="testimonial-card">
  837. <div class="testimonial-stars">
  838. <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>
  839. <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>
  840. <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>
  841. <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>
  842. <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>
  843. </div>
  844. <p class="testimonial-text">"第一次把菌群报告、体检和日常记录放在同一个账户里,哪些维度偏弱一眼就看到了。跟着规划师的任务走,全家的作息和饮食比之前规律多了。"</p>
  845. <div class="testimonial-author">
  846. <span class="testimonial-name">精准营养用户</span>
  847. </div>
  848. </div>
  849. <div class="testimonial-card">
  850. <div class="testimonial-stars">
  851. <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>
  852. <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>
  853. <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>
  854. <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>
  855. <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>
  856. </div>
  857. <p class="testimonial-text">"规划师非常专业,给孩子做的成长规划很有针对性。五维能量图让我们看到之前忽略的维度,很有启发。"</p>
  858. <div class="testimonial-author">
  859. <span class="testimonial-name">家庭客户</span>
  860. </div>
  861. </div>
  862. <div class="testimonial-card" style="border-left-color:#FF6B9D">
  863. <div class="testimonial-stars">
  864. <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>
  865. <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>
  866. <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>
  867. <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>
  868. <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>
  869. </div>
  870. <p class="testimonial-text">"我家两个孩子,一个在小学一个在初中,浠艾福让我和家人都能用,孩子能看到自己的成长轨迹,我们做家长的也很放心。"</p>
  871. <div class="testimonial-author">
  872. <span class="testimonial-name">二胎家庭家长</span>
  873. </div>
  874. </div>
  875. </div>
  876. </div>
  877. </section>
  878. <!-- ==================== Application Scenarios ==================== -->
  879. <section class="section section-scenarios" id="scenarios">
  880. <div class="container">
  881. <div class="section-header">
  882. <span class="section-tag">应用场景</span>
  883. <h2 class="section-title">浠艾福的场景化解决方案</h2>
  884. <p class="section-desc">
  885. 从家庭健康到成长规划,从精准营养到关系经营,浠艾福覆盖全家人的真实需求场景。
  886. </p>
  887. </div>
  888. <div class="scenarios-grid">
  889. <!-- 场景一:儿童健康成长 -->
  890. <div class="scenario-card">
  891. <div class="scenario-header" style="--sc-color:#6366F1">
  892. <span class="scenario-icon">🧒</span>
  893. <span class="scenario-tag">儿童成长</span>
  894. </div>
  895. <h3 class="scenario-title">孩子的每一步都值得被看见</h3>
  896. <p class="scenario-desc">
  897. 从婴幼儿体质调理到学龄期习惯养成,浠艾福通过成长档案实时记录孩子的体能、情绪、认知变化,
  898. 五维能量图直观呈现发展态势,帮助家长及早发现成长关键点,不让孩子输在认知起跑线上。
  899. </p>
  900. <ul class="scenario-benefits">
  901. <li>🔍 认知能力发展追踪</li>
  902. <li>📊 情绪状态可视化</li>
  903. <li>🎯 个性化成长路径推荐</li>
  904. <li>📈 阶段性里程碑自动标记</li>
  905. </ul>
  906. </div>
  907. <!-- 场景二:家庭健康管理 -->
  908. <div class="scenario-card">
  909. <div class="scenario-header" style="--sc-color:#FF8C42">
  910. <span class="scenario-icon">🏥</span>
  911. <span class="scenario-tag">家庭健康</span>
  912. </div>
  913. <h3 class="scenario-title">全家人的精准健康管家</h3>
  914. <p class="scenario-desc">
  915. 从肠道菌群检测到日常营养建议,从睡眠节律分析到体质调理方案,
  916. 浠艾福以 AI 驱动精准健康引擎,让全家人拥有自己的「健康数字孪生」——
  917. 不用等到生病才关注,预防优于治疗。
  918. </p>
  919. <ul class="scenario-benefits">
  920. <li>🧪 肠道菌群检测与分析</li>
  921. <li>🍽️ AI 个性化营养方案</li>
  922. <li>📋 多维度健康报告</li>
  923. <li>🛡️ 风险预警与健康管理</li>
  924. </ul>
  925. </div>
  926. <!-- 场景三:亲子关系与家庭关系 -->
  927. <div class="scenario-card">
  928. <div class="scenario-header" style="--sc-color:#10B981">
  929. <span class="scenario-icon">👨‍👩‍👧</span>
  930. <span class="scenario-tag">家庭关系</span>
  931. </div>
  932. <h3 class="scenario-title">让爱在理解中流淌</h3>
  933. <p class="scenario-desc">
  934. 亲子关系、夫妻关系、代际关系——关系是所有家庭问题的核心。
  935. 浠艾福通过关系测评与 AI 陪伴,帮助家庭成员更好地理解彼此、沟通表达,
  936. 让每一次对话都有温度,让每一次陪伴都有质量。
  937. </p>
  938. <ul class="scenario-benefits">
  939. <li>💬 亲子沟通 AI 辅助建议</li>
  940. <li>❤️ 夫妻关系经营指导</li>
  941. <li>👴 长辈关怀与代际连接</li>
  942. <li>📖 家庭关系心理学知识库</li>
  943. </ul>
  944. </div>
  945. <!-- 场景四:服务商专业服务 -->
  946. <div class="scenario-card">
  947. <div class="scenario-header" style="--sc-color:#4A9BD7">
  948. <span class="scenario-icon">👩‍🏫</span>
  949. <span class="scenario-tag">服务商赋能</span>
  950. </div>
  951. <h3 class="scenario-title">专业服务,高效交付</h3>
  952. <p class="scenario-desc">
  953. 对成长规划师、营养师、心理咨询师等服务者而言,浠艾福提供 AI 赋能的专业工具:
  954. 智能匹配客户、生成个性化方案、记录服务过程、追踪效果数据——
  955. 让您把精力放在真正重要的地方,用专业赢得信任。
  956. </p>
  957. <ul class="scenario-benefits">
  958. <li>🎯 AI 智能客户匹配推荐</li>
  959. <li>📝 服务方案一键生成</li>
  960. <li>📊 效果数据可视化看板</li>
  961. <li>🤝 客户全生命周期管理</li>
  962. </ul>
  963. </div>
  964. </div>
  965. <!-- 场景切换 CTA -->
  966. <div class="scenarios-cta">
  967. <p>不确定您的家庭适合哪个场景?让 AI 帮您快速匹配</p>
  968. <div class="scenarios-cta-actions">
  969. <a href="#product" class="btn btn-primary">了解浠艾福产品</a>
  970. <a href="#contact" class="btn btn-outline">联系我们获取方案</a>
  971. </div>
  972. </div>
  973. </div>
  974. </section>
  975. <!-- ==================== FAQ ==================== -->
  976. <section class="section section-knowledge" id="knowledge">
  977. <div class="container">
  978. <div class="section-header">
  979. <span class="section-tag">成长百科</span>
  980. <h2 class="section-title">精准管理 · 从了解开始</h2>
  981. <p class="section-desc">
  982. 避免盲目摸索,从专业视角了解每位家庭成员的健康与成长规律,
  983. 用科学知识为全家人的生活质量保驾护航。
  984. </p>
  985. </div>
  986. <div class="knowledge-grid" id="knowledgeGrid">
  987. <div class="knowledge-loading" id="knowledgeLoading">
  988. <span class="knowledge-loading-text">加载中...</span>
  989. </div>
  990. </div>
  991. <div class="knowledge-links">
  992. <h3>精选专题</h3>
  993. <div class="knowledge-topics">
  994. <a href="articles/geo-faq-1-allergy.html" class="knowledge-topic">
  995. <span class="topic-icon">🌿</span>
  996. <span class="topic-text">孩子过敏反复,肠道健康值得关注</span>
  997. <span class="topic-arrow">→</span>
  998. </a>
  999. <a href="articles/geo-faq-2-attention.html" class="knowledge-topic">
  1000. <span class="topic-icon">🧠</span>
  1001. <span class="topic-text">关注肠道,读懂孩子的注意力状态</span>
  1002. <span class="topic-arrow">→</span>
  1003. </a>
  1004. <a href="articles/geo-faq-3-immunity.html" class="knowledge-topic">
  1005. <span class="topic-icon">🛡️</span>
  1006. <span class="topic-text">儿童免疫力提升3大关键步骤</span>
  1007. <span class="topic-arrow">→</span>
  1008. </a>
  1009. </div>
  1010. </div>
  1011. <div class="knowledge-footer">
  1012. <p class="knowledge-tip">微信搜索「<strong>浠艾福</strong>」小程序,获取更多专业成长知识</p>
  1013. <div style="text-align:center;margin-top:var(--space-lg)">
  1014. <a href="knowledge.html" class="btn btn-primary">进入成长百科 →</a>
  1015. </div>
  1016. </div>
  1017. <style>
  1018. .knowledge-links { margin-top: var(--space-2xl); }
  1019. .knowledge-links h3 {
  1020. font-size: var(--font-size-h3);
  1021. text-align: center;
  1022. margin-bottom: var(--space-lg);
  1023. color: var(--color-text-primary);
  1024. }
  1025. .knowledge-topics {
  1026. display: grid;
  1027. grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  1028. gap: var(--space-md);
  1029. margin: 0 auto;
  1030. max-width: 900px;
  1031. }
  1032. .knowledge-topic {
  1033. display: flex;
  1034. align-items: center;
  1035. gap: var(--space-sm);
  1036. background: var(--bg-surface);
  1037. padding: var(--space-md) var(--space-lg);
  1038. border-radius: var(--radius-md);
  1039. text-decoration: none;
  1040. color: var(--color-text-secondary);
  1041. box-shadow: var(--shadow-sm);
  1042. transition: all var(--transition-fast);
  1043. border: 1px solid var(--color-border-light);
  1044. }
  1045. .knowledge-topic:hover {
  1046. box-shadow: var(--shadow-md);
  1047. border-color: var(--color-primary);
  1048. color: var(--color-primary);
  1049. transform: translateY(-2px);
  1050. }
  1051. .topic-icon { font-size: 1.3rem; flex-shrink: 0; }
  1052. .topic-text { font-size: var(--font-size-small); flex: 1; line-height: 1.4; }
  1053. .topic-arrow { color: var(--color-text-muted); font-size: var(--font-size-small); flex-shrink: 0; }
  1054. .knowledge-topic:hover .topic-arrow { color: var(--color-primary); }
  1055. </style>
  1056. </div>
  1057. </section>
  1058. <!-- Footer (shared) -->
  1059. <div id="footer-placeholder"></div>
  1060. <script src="js/footer.js"></script>
  1061. <!-- ==================== Floating CTA ==================== -->
  1062. <div class="float-cta" id="floatCta">
  1063. <button class="float-cta-btn" id="floatCtaBtn" aria-label="扫码体验">
  1064. <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  1065. <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
  1066. <polyline points="9 22 9 12 15 12 15 22"/>
  1067. </svg>
  1068. </button>
  1069. <div class="float-cta-popup" id="floatCtaPopup">
  1070. <div class="float-cta-popup-inner">
  1071. <button class="float-cta-close" id="floatCtaClose" aria-label="关闭">&times;</button>
  1072. <p class="float-cta-title">微信扫码体验</p>
  1073. <div class="float-cta-qr">
  1074. <svg viewBox="0 0 24 24" width="56" height="56" fill="none" stroke="#4A9BD7" stroke-width="1.2">
  1075. <rect x="2" y="2" width="8" height="8" rx="1.5"/>
  1076. <rect x="14" y="2" width="8" height="8" rx="1.5"/>
  1077. <rect x="2" y="14" width="8" height="8" rx="1.5"/>
  1078. <path d="M14 14h2v2h-2zM18 14h2v2h-2zM14 18h2v2h-2zM18 18h2v2h-2zM16 16h2v2h-2z"/>
  1079. </svg>
  1080. </div>
  1081. <p class="float-cta-tip">微信搜索「<strong>浠艾福</strong>」小程序</p>
  1082. </div>
  1083. </div>
  1084. </div>
  1085. <!-- ==================== Cookie Consent ==================== -->
  1086. <div class="cookie-consent" id="cookieConsent">
  1087. <p class="cookie-consent-text">本网站使用 Cookie 提升用户体验。继续使用即表示您同意我们的 <a href="#">隐私政策</a>。</p>
  1088. <button class="cookie-consent-btn" id="cookieConsentBtn">知道了</button>
  1089. </div>
  1090. <!-- JavaScript -->
  1091. <script src="js/main.js"></script>
  1092. </body>
  1093. </html>