2
0
Эх сурвалжийг харах

✨ feat(homepage): update homepage content and design

- 修改页面标题为"智能客户关系管理系统",增强产品定位
- 更新描述文本,突出一站式客户管理解决方案的核心价值
- 重构三大功能板块内容:
  - 将"用户认证"改为"客户管理",强调客户信息集中管理功能
  - 将"用户中心"改为"销售机会跟踪",突出销售流程管理能力
  - 将"响应式设计"改为"数据分析报表",展示数据可视化价值
- 更新各板块图标,使其与新功能定位更匹配
- 优化按钮样式和交互效果:
  - 增加按钮尺寸(px-4 py-2)提升可点击区域
  - 添加过渡动画(transition-colors duration-200)增强交互体验
  - 调整注册按钮为蓝色背景,提高视觉吸引力
  - 将"注册"按钮文本改为"免费试用",增强转化引导
- 为功能卡片添加悬停效果(hover:shadow-md hover:-translate-y-1)提升交互体验
yourname 4 сар өмнө
parent
commit
6e711692d7

+ 27 - 27
src/client/home/pages/HomePage.tsx

@@ -25,17 +25,17 @@ const HomePage: React.FC = () => {
             </div>
           ) : (
             <div className="flex space-x-2">
-              <button 
+              <button
                 onClick={() => navigate('/login')}
-                className="px-3 py-1 rounded text-sm bg-white text-blue-600 hover:bg-blue-50"
+                className="px-4 py-2 rounded text-sm bg-white text-blue-600 hover:bg-blue-50 transition-colors duration-200"
               >
                 登录
               </button>
-              <button 
+              <button
                 onClick={() => navigate('/register')}
-                className="px-3 py-1 rounded text-sm bg-white text-blue-600 hover:bg-blue-50"
+                className="px-4 py-2 rounded text-sm bg-blue-500 text-white hover:bg-blue-600 transition-colors duration-200"
               >
-                注册
+                免费试用
               </button>
             </div>
           )}
@@ -45,41 +45,41 @@ const HomePage: React.FC = () => {
       {/* 主内容区 */}
       <main className="flex-grow container mx-auto px-4 pt-24 pb-12">
         <div className="bg-white rounded-lg shadow-sm p-6 md:p-8">
-          <h2 className="text-2xl font-bold text-gray-900 mb-4">欢迎使用网站模板</h2>
-          <p className="text-gray-600 mb-6">
-            这是一个通用的网站首页模板,您可以根据需要进行自定义。
-            已包含基础的登录、注册和用户中心功能
+          <h2 className="text-3xl font-bold text-gray-900 mb-4">智能客户关系管理系统</h2>
+          <p className="text-gray-600 mb-6 text-lg">
+            一站式客户管理解决方案,帮助您高效管理客户资源、跟踪销售机会,
+            提升转化率和客户满意度
           </p>
           
           <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
-            <div className="bg-blue-50 p-5 rounded-lg text-center">
-              <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+            <div className="bg-blue-50 p-6 rounded-lg text-center shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
+              <div className="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-7 w-7 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 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 text-blue-700">客户管理</h3>
+              <p className="text-gray-600 text-sm">集中管理客户信息,建立完整客户档案,提升客户关系维护效率</p>
             </div>
             
-            <div className="bg-green-50 p-5 rounded-lg text-center">
-              <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto 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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+            <div className="bg-green-50 p-6 rounded-lg text-center shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
+              <div className="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-7 w-7 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
                 </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 text-green-700">销售机会跟踪</h3>
+              <p className="text-gray-600 text-sm">全流程销售机会管理,从初步接触到成交转化的完整跟踪体系</p>
             </div>
             
-            <div className="bg-purple-50 p-5 rounded-lg text-center">
-              <div className="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto 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">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
+            <div className="bg-purple-50 p-6 rounded-lg text-center shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1">
+              <div className="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-7 w-7 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                 </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 text-purple-700">数据分析报表</h3>
+              <p className="text-gray-600 text-sm">直观的数据可视化报表,帮助您深入了解业务状况和销售趋势</p>
             </div>
           </div>
         </div>