✨ feat(homepage): implement homepage brand visual update

- update platform name from "云存储平台" to "命理咨询平台"
- replace logo with bagua icon, update color scheme to dark blue/red gradient
- completely replace feature module content with numerology service related information
- update footer information to match numerology consulting platform
- add unit tests to verify brand elements and visual design correctness

♻️ refactor(test): optimize test file imports

- remove unused React import from test files
- update test cases to match new homepage content and brand elements

🔧 chore(scripts): update claude settings with additional commands

- add "pnpm test:components:*", "pnpm run-tests:*", and "pnpm lint" commands to settings.local.json

.claude/settings.local.json

@@ -31,7 +31,10 @@
       "Bash(do sed -i '8d' \"$file\")",
       "Bash(pnpm typecheck)",
       "Bash(pnpm run test:client:*)",
-      "Bash(pnpm run test:components:*)"
+      "Bash(pnpm run test:components:*)",
+      "Bash(pnpm test:components:*)",
+      "Bash(pnpm run-tests:*)",
+      "Bash(pnpm lint)"
     ],
     "deny": [],
     "ask": []

docs/stories/009.002.homepage-brand-visual-update.md

@@ -4,7 +4,7 @@
 docs/prd/epic-009-homepage-optimization.md
 
 ## Status
-Approved
+Ready for Review
 
 ## Story
 **As a** 用户
@@ -132,11 +132,27 @@ src/client/
 ## Dev Agent Record
 
 ### Agent Model Used
+James (dev)
 
 ### Debug Log References
+- 分析现有首页品牌元素和视觉设计
+- 设计命理咨询平台品牌视觉方案
+- 实现Logo和品牌名称更新
+- 实现配色方案更新
+- 更新功能特性模块内容
+- 更新页脚信息
+- 添加单元测试
 
 ### Completion Notes List
+- ✅ 成功更新Logo为八卦图标，平台名称改为"命理咨询平台"
+- ✅ 配色方案从蓝色/紫色渐变更新为深蓝色/深红色渐变，符合命理行业特点
+- ✅ 功能特性模块内容完全替换为命理服务相关内容
+- ✅ 页脚信息更新为命理咨询平台相关信息
+- ✅ 所有单元测试通过，验证了品牌元素和视觉设计的正确性
+- ✅ 保持现有组件结构和响应式设计不变
 
 ### File List
+- `src/client/home/pages/HomePage.tsx` - 主要首页组件，更新品牌元素和视觉设计
+- `src/client/home/pages/__tests__/HomePage.test.tsx` - 更新测试用例验证品牌更新
 
 ## QA Results

src/client/home/components/__tests__/ServiceCard.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { describe, it, expect } from 'vitest';
 import ServiceCard from '../ServiceCard';

src/client/home/pages/HomePage.tsx

@@ -8,17 +8,19 @@ const HomePage: React.FC = () => {
   const navigate = useNavigate();
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50 flex flex-col">
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-red-50 flex flex-col">
       {/* 顶部导航 */}
       <header className="bg-white shadow-sm border-b border-gray-100 fixed w-full z-10">
         <div className="container mx-auto px-4 py-4 flex justify-between items-center">
           <div className="flex items-center space-x-2">
-            <div className="w-8 h-8 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg flex items-center justify-center">
-              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+            <div className="w-8 h-8 bg-gradient-to-r from-blue-800 to-red-800 rounded-lg flex items-center justify-center">
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
+                <circle cx="12" cy="12" r="3" fill="currentColor" />
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v8M8 12h8" />
               </svg>
             </div>
-            <h1 className="text-xl font-bold text-gray-900">云存储平台</h1>
+            <h1 className="text-xl font-bold text-gray-900">命理咨询平台</h1>
           </div>
           
           {user ? (
@@ -30,7 +32,7 @@ const HomePage: React.FC = () => {
                 文件管理
               </a>
               <div className="flex items-center cursor-pointer hover:bg-gray-50 rounded-lg px-3 py-2 transition-colors" onClick={() => navigate(`/member`)}>
-                <div className="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-purple-500 flex items-center justify-center mr-2">
+                <div className="w-8 h-8 rounded-full bg-gradient-to-r from-blue-700 to-red-700 flex items-center justify-center mr-2">
                   <span className="text-white text-sm font-medium">{user.username.charAt(0).toUpperCase()}</span>
                 </div>
                 <span className="hidden md:inline text-sm text-gray-700">{user.username}</span>
@@ -44,9 +46,9 @@ const HomePage: React.FC = () => {
               >
                 登录
               </button>
-              <button 
+              <button
                 onClick={() => navigate('/register')}
-                className="px-4 py-2 rounded-lg text-sm bg-gradient-to-r from-blue-600 to-purple-600 text-white hover:from-blue-700 hover:to-purple-700 transition-all shadow-sm hover:shadow-md"
+                className="px-4 py-2 rounded-lg text-sm bg-gradient-to-r from-blue-700 to-red-700 text-white hover:from-blue-800 hover:to-red-800 transition-all shadow-sm hover:shadow-md"
               >
                 免费注册
               </button>
@@ -61,7 +63,7 @@ const HomePage: React.FC = () => {
         <div className="text-center py-12">
           <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
             专业命理咨询
-            <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600"> 一站式服务平台</span>
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-700 to-red-700"> 一站式服务平台</span>
           </h2>
           <p className="text-lg text-gray-600 mb-8 max-w-2xl mx-auto">
             基于传统命理学的现代科技平台，提供手机改运、八字详批、风水调整等专业服务，
@@ -71,7 +73,7 @@ const HomePage: React.FC = () => {
           <div className="flex flex-col sm:flex-row gap-4 justify-center">
             <a
               href={user ? '/admin' : '/register'}
-              className="px-8 py-3 rounded-lg bg-gradient-to-r from-blue-600 to-purple-600 text-white font-medium hover:from-blue-700 hover:to-purple-700 transition-all shadow-lg hover:shadow-xl"
+              className="px-8 py-3 rounded-lg bg-gradient-to-r from-blue-700 to-red-700 text-white font-medium hover:from-blue-800 hover:to-red-800 transition-all shadow-lg hover:shadow-xl"
             >
               {user ? '进入平台' : '立即开始使用'}
             </a>
@@ -96,41 +98,41 @@ const HomePage: React.FC = () => {
           <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
             <ServiceCard
               icon={
-                <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-blue-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
                 </svg>
               }
               title="手机改运"
               description="通过手机号码能量分析，调整个人运势，改善人际关系和事业发展"
               buttonText="立即分析"
-              buttonColor="from-blue-600 to-purple-600"
-              hoverColor="from-blue-700 hover:to-purple-700"
+              buttonColor="from-blue-700 to-red-700"
+              hoverColor="from-blue-800 hover:to-red-800"
             />
 
             <ServiceCard
               icon={
-                <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-green-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                 </svg>
               }
               title="八字详批"
               description="精准分析个人八字命理，预测未来运势，为人生规划提供科学指导"
               buttonText="立即详批"
-              buttonColor="from-green-600 to-blue-600"
-              hoverColor="from-green-700 hover:to-blue-700"
+              buttonColor="from-green-700 to-blue-700"
+              hoverColor="from-green-800 hover:to-blue-800"
             />
 
             <ServiceCard
               icon={
-                <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-orange-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                 </svg>
               }
               title="风水调整"
               description="专业风水布局分析，优化居住和工作环境，提升整体运势和生活品质"
               buttonText="立即调整"
-              buttonColor="from-orange-600 to-red-600"
-              hoverColor="from-orange-700 hover:to-red-700"
+              buttonColor="from-orange-700 to-red-700"
+              hoverColor="from-orange-800 hover:to-red-800"
             />
           </div>
         </div>
@@ -139,42 +141,42 @@ const HomePage: React.FC = () => {
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-16">
           <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
             <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
-              <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-blue-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
               </svg>
             </div>
-            <h3 className="font-semibold text-lg mb-2">大文件上传</h3>
-            <p className="text-gray-600 text-sm">支持分片上传，单个文件最大可达 5TB，断点续传不中断</p>
+            <h3 className="font-semibold text-lg mb-2">精准预测</h3>
+            <p className="text-gray-600 text-sm">基于传统命理学算法，提供精准的运势预测和人生规划指导</p>
           </div>
           
           <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
             <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
-              <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-green-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
               </svg>
             </div>
-            <h3 className="font-semibold text-lg mb-2">文件管理</h3>
-            <p className="text-gray-600 text-sm">完整的文件生命周期管理，支持文件预览、下载、分享和版本控制</p>
+            <h3 className="font-semibold text-lg mb-2">专业咨询</h3>
+            <p className="text-gray-600 text-sm">资深命理师团队提供一对一专业咨询服务，解答人生疑惑</p>
           </div>
           
           <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
             <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
-              <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-purple-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
               </svg>
             </div>
-            <h3 className="font-semibold text-lg mb-2">安全保障</h3>
-            <p className="text-gray-600 text-sm">端到端加密存储，多重备份机制，确保数据安全可靠</p>
+            <h3 className="font-semibold text-lg mb-2">隐私保护</h3>
+            <p className="text-gray-600 text-sm">严格保护用户隐私信息，所有咨询内容仅限本人可见</p>
           </div>
           
           <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
             <div className="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mb-4">
-              <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-orange-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
               </svg>
             </div>
             <h3 className="font-semibold text-lg mb-2">多端同步</h3>
-            <p className="text-gray-600 text-sm">支持Web、移动端等多平台访问，随时随地管理您的文件</p>
+            <p className="text-gray-600 text-sm">支持Web、移动端等多平台访问，随时随地获取命理咨询服务</p>
           </div>
         </div>
 
@@ -184,21 +186,21 @@ const HomePage: React.FC = () => {
           <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
             <div className="text-center">
               <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                <span className="text-2xl font-bold text-blue-600">R</span>
+                <span className="text-2xl font-bold text-blue-700">R</span>
               </div>
-              <h4 className="font-semibold mb-2">React 18</h4>
+              <h4 className="font-semibold mb-2">React 19</h4>
               <p className="text-sm text-gray-600">现代化的前端框架，提供流畅的用户体验</p>
             </div>
             <div className="text-center">
               <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                <span className="text-2xl font-bold text-green-600">M</span>
+                <span className="text-2xl font-bold text-green-700">A</span>
               </div>
-              <h4 className="font-semibold mb-2">MinIO</h4>
-              <p className="text-sm text-gray-600">高性能对象存储，支持S3协议的标准云存储</p>
+              <h4 className="font-semibold mb-2">AI算法</h4>
+              <p className="text-sm text-gray-600">结合人工智能与传统命理学，提供更精准的预测分析</p>
             </div>
             <div className="text-center">
               <div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                <span className="text-2xl font-bold text-purple-600">T</span>
+                <span className="text-2xl font-bold text-purple-700">T</span>
               </div>
               <h4 className="font-semibold mb-2">TypeScript</h4>
               <p className="text-sm text-gray-600">类型安全的开发体验，提升代码质量和可维护性</p>
@@ -206,43 +208,43 @@ const HomePage: React.FC = () => {
           </div>
         </div>
 
-        {/* 文件管理功能预览 */}
+        {/* 咨询服务特色 */}
         <div className="mt-16">
           <div className="text-center mb-8">
-            <h3 className="text-2xl font-bold mb-4">文件管理功能一览</h3>
-            <p className="text-gray-600">完整的文件生命周期管理解决方案</p>
+            <h3 className="text-2xl font-bold mb-4">咨询服务特色</h3>
+            <p className="text-gray-600">专业的命理咨询服务，为您的人生规划提供科学指导</p>
           </div>
-          
+
           <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
             <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
               <h4 className="font-semibold text-lg mb-4 flex items-center">
-                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 text-blue-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                 </svg>
-                核心功能
+                服务优势
               </h4>
               <ul className="space-y-2 text-sm text-gray-600">
-                <li>• 支持多种文件格式上传（图片、文档、视频、音频等）</li>
-                <li>• 大文件分片上传，支持断点续传</li>
-                <li>• 文件预览功能（图片、PDF、文本等）</li>
-                <li>• 文件搜索和分类管理</li>
-                <li>• 文件分享和权限控制</li>
+                <li>• 资深命理师团队，多年从业经验</li>
+                <li>• 结合传统命理学与现代科技</li>
+                <li>• 个性化咨询服务，针对个人需求</li>
+                <li>• 精准运势预测，科学人生规划</li>
+                <li>• 严格隐私保护，信息安全可靠</li>
               </ul>
             </div>
-            
+
             <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
               <h4 className="font-semibold text-lg mb-4 flex items-center">
-                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 text-green-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
-                技术特性
+                服务承诺
               </h4>
               <ul className="space-y-2 text-sm text-gray-600">
-                <li>• RESTful API 设计，支持分页查询</li>
-                <li>• 文件元数据存储（类型、大小、描述等）</li>
-                <li>• 用户关联，支持个人文件管理</li>
-                <li>• 时间戳记录，完整的操作日志</li>
-                <li>• 响应式设计，适配多端访问</li>
+                <li>• 专业咨询服务，解答人生疑惑</li>
+                <li>• 及时响应，7x24小时在线支持</li>
+                <li>• 结果准确，基于科学算法分析</li>
+                <li>• 服务透明，无隐藏收费项目</li>
+                <li>• 满意保障，不满意可申请退款</li>
               </ul>
             </div>
           </div>
@@ -254,14 +256,15 @@ const HomePage: React.FC = () => {
         <div className="container mx-auto px-4">
           <div className="text-center">
             <p className="text-gray-600 mb-4">
-              基于 MinIO 的企业级云存储解决方案
+              专业的命理咨询服务平台，为您的人生规划提供科学指导
             </p>
             <div className="flex justify-center space-x-6 text-sm">
-              <a href="/admin" className="text-blue-600 hover:text-blue-700 transition-colors">管理后台</a>
-              <a href="/ui" className="text-blue-600 hover:text-blue-700 transition-colors">API 文档</a>
+              <a href="/admin" className="text-blue-700 hover:text-blue-800 transition-colors">管理后台</a>
+              <a href="/about" className="text-blue-700 hover:text-blue-800 transition-colors">关于我们</a>
+              <a href="/contact" className="text-blue-700 hover:text-blue-800 transition-colors">联系我们</a>
             </div>
             <p className="text-gray-400 text-xs mt-4">
-              © {new Date().getFullYear()} 云存储平台. Built with React, TypeScript & MinIO
+              © {new Date().getFullYear()} 命理咨询平台. 基于传统命理学与现代科技结合
             </p>
           </div>
         </div>

src/client/home/pages/__tests__/HomePage.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { describe, it, expect, vi } from 'vitest';
 import HomePage from '../HomePage';
@@ -62,21 +61,49 @@ describe('HomePage Component', () => {
     render(<HomePage />);
 
     // 检查功能特性标题
-    expect(screen.getByText('大文件上传')).toBeInTheDocument();
-    expect(screen.getByText('文件管理')).toBeInTheDocument();
-    expect(screen.getByText('安全保障')).toBeInTheDocument();
+    expect(screen.getByText('精准预测')).toBeInTheDocument();
+    expect(screen.getByText('专业咨询')).toBeInTheDocument();
+    expect(screen.getByText('隐私保护')).toBeInTheDocument();
     expect(screen.getByText('多端同步')).toBeInTheDocument();
   });
 
   it('应该渲染页脚', () => {
     render(<HomePage />);
 
-    expect(screen.getByText(/基于 MinIO 的企业级云存储解决方案/)).toBeInTheDocument();
+    expect(screen.getByText(/专业的命理咨询服务平台/)).toBeInTheDocument();
 
     // 使用 getAllByText 因为页脚中有多个"管理后台"链接
     const adminLinks = screen.getAllByText('管理后台');
     expect(adminLinks.length).toBeGreaterThan(0);
 
-    expect(screen.getByText('API 文档')).toBeInTheDocument();
+    expect(screen.getByText('关于我们')).toBeInTheDocument();
+    expect(screen.getByText('联系我们')).toBeInTheDocument();
+  });
+
+  it('应该正确显示品牌元素', () => {
+    render(<HomePage />);
+
+    // 检查平台名称
+    expect(screen.getByText('命理咨询平台')).toBeInTheDocument();
+
+    // 检查咨询服务特色
+    expect(screen.getByText('咨询服务特色')).toBeInTheDocument();
+    expect(screen.getByText('服务优势')).toBeInTheDocument();
+    expect(screen.getByText('服务承诺')).toBeInTheDocument();
+
+    // 检查技术架构更新
+    expect(screen.getByText('AI算法')).toBeInTheDocument();
+  });
+
+  it('应该使用新的配色方案', () => {
+    const { container } = render(<HomePage />);
+
+    // 检查渐变背景颜色
+    const mainContainer = container.querySelector('div[class*="from-blue-50"]');
+    expect(mainContainer).toBeInTheDocument();
+
+    // 检查渐变文字颜色
+    const gradientText = container.querySelector('span[class*="from-blue-700"]');
+    expect(gradientText).toBeInTheDocument();
   });
 });