✨ feat(home): 新增公司网站主布局和业务页面

- 重构MainLayout组件，添加顶部导航栏和移动端菜单
- 新增AI工具页面，展示元亨Word等AI产品矩阵
- 新增公司介绍页面，包含发展历程和团队信息
- 新增联系我们页面，提供多种联系方式
- 新增设计规划服务页面，展示UI/UX设计等服务
- 新增软件需求页面，展示开发服务和技术栈
- 新增共享人才页面，展示人才分类和合作模式
- 重构首页，更新为元亨科技公司介绍和核心服务展示
- 更新路由配置，支持新的页面结构和导航

【feat】新增完整的公司网站页面体系
【refactor】重构主布局和导航结构
【style】优化页面样式和响应式设计

src/client/home/layouts/MainLayout.tsx

@@ -1,14 +1,136 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import {
-  Outlet
-} from 'react-router';
+import React from 'react';
+import { Outlet, useNavigate, useLocation } from 'react-router';
+import { Button } from '@/client/components/ui/button';
+import { User } from 'lucide-react';
+import { useAuth } from '../hooks/AuthProvider';
+import UserInfoModal from '../components/UserInfoModal';
+import { useState } from 'react';
 
 /**
- * 主布局组件
- * 包含侧边栏、顶部导航和内容区域
+ * 元亨科技网站主布局组件
+ * 包含顶部导航菜单和内容区域
  */
 export const MainLayout = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { user, isAuthenticated } = useAuth();
+  const [showUserModal, setShowUserModal] = useState(false);
+
+  const navItems = [
+    { path: '/', label: '首页' },
+    { path: '/about', label: '公司介绍' },
+    { path: '/ai-tools', label: 'AI工具' },
+    { path: '/design-planning', label: '设计规划' },
+    { path: '/software-requirements', label: '软件需求' },
+    { path: '/talent-sharing', label: '共享人才' },
+    { path: '/contact', label: '联系我们' },
+  ];
+
+  const isActive = (path: string) => {
+    if (path === '/') {
+      return location.pathname === '/';
+    }
+    return location.pathname.startsWith(path);
+  };
+
   return (
-    <Outlet />
+    <div className="min-h-screen bg-white">
+      {/* 顶部导航栏 */}
+      <header className="fixed top-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-sm border-b border-gray-200 shadow-sm">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center h-16">
+            {/* Logo */}
+            <div className="flex items-center space-x-3">
+              <div className="w-10 h-10 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg flex items-center justify-center">
+                <span className="text-white font-bold text-lg">元</span>
+              </div>
+              <h1 className="text-xl font-bold text-gray-900">元亨科技</h1>
+            </div>
+            
+            {/* 主导航菜单 */}
+            <nav className="hidden md:flex items-center space-x-1">
+              {navItems.map((item) => (
+                <Button
+                  key={item.path}
+                  variant={isActive(item.path) ? "default" : "ghost"}
+                  className={`px-4 py-2 text-sm font-medium transition-colors ${
+                    isActive(item.path) 
+                      ? 'bg-blue-600 text-white' 
+                      : 'text-gray-700 hover:text-blue-600 hover:bg-gray-100'
+                  }`}
+                  onClick={() => navigate(item.path)}
+                >
+                  {item.label}
+                </Button>
+              ))}
+            </nav>
+
+            {/* 用户操作区域 */}
+            <div className="flex items-center space-x-3">
+              {isAuthenticated ? (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="flex items-center space-x-2 text-gray-700 hover:text-blue-600"
+                  onClick={() => setShowUserModal(true)}
+                >
+                  <User className="h-4 w-4" />
+                  <span className="hidden sm:inline">{user?.nickname || user?.username || '个人中心'}</span>
+                </Button>
+              ) : (
+                <div className="flex items-center space-x-2">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => navigate('/login')}
+                    className="text-gray-700 hover:text-blue-600"
+                  >
+                    登录
+                  </Button>
+                  <Button
+                    size="sm"
+                    onClick={() => navigate('/register')}
+                    className="bg-blue-600 hover:bg-blue-700 text-white"
+                  >
+                    注册
+                  </Button>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* 移动端导航菜单（简化版） */}
+      <div className="md:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-40">
+        <div className="flex overflow-x-auto py-2 px-4 space-x-1">
+          {navItems.slice(0, 4).map((item) => (
+            <Button
+              key={item.path}
+              variant={isActive(item.path) ? "default" : "ghost"}
+              size="sm"
+              className={`flex-1 min-w-0 text-xs px-2 py-1 ${
+                isActive(item.path) 
+                  ? 'bg-blue-600 text-white' 
+                  : 'text-gray-700 hover:text-blue-600'
+              }`}
+              onClick={() => navigate(item.path)}
+            >
+              {item.label}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      {/* 主要内容区域 */}
+      <main className="pt-16 pb-20 md:pb-0">
+        <Outlet />
+      </main>
+
+      <UserInfoModal
+        isOpen={showUserModal}
+        onClose={() => setShowUserModal(false)}
+      />
+    </div>
   );
-};
+};

src/client/home/pages/AIToolsPage.tsx

@@ -0,0 +1,350 @@
+import React from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/client/components/ui/card';
+import { Button } from '@/client/components/ui/button';
+import { Badge } from '@/client/components/ui/badge';
+import { Separator } from '@/client/components/ui/separator';
+import { 
+  Brain, 
+  FileText, 
+  Image, 
+  Code, 
+  Zap, 
+  Shield, 
+  Users,
+  ArrowRight,
+  ExternalLink,
+  BarChart,
+  Settings
+} from 'lucide-react';
+
+export default function AIToolsPage() {
+  const aiTools = [
+    {
+      icon: <FileText className="h-8 w-8" />,
+      title: "元亨Word",
+      description: "智能文档批量处理平台，支持Word模板与Excel数据结合，一键生成个性化文档",
+      features: ["智能字段替换", "批量图片处理", "Excel数据驱动", "实时预览"],
+      status: "active",
+      link: "https://www.d8d.fun/editor/workspace/159/template/142",
+      color: "text-blue-600",
+      bgColor: "bg-blue-50"
+    },
+    {
+      icon: <Image className="h-8 w-8" />,
+      title: "智能图像处理",
+      description: "基于深度学习的图像识别、分析和增强工具，支持多种图像格式处理",
+      features: ["图像识别", "智能裁剪", "风格转换", "质量增强"],
+      status: "active",
+      link: "#",
+      color: "text-green-600",
+      bgColor: "bg-green-50"
+    },
+    {
+      icon: <Code className="h-8 w-8" />,
+      title: "代码智能生成",
+      description: "AI辅助编程工具，支持多种编程语言，提高开发效率",
+      features: ["代码补全", "Bug检测", "性能优化", "文档生成"],
+      status: "beta",
+      link: "#",
+      color: "text-purple-600",
+      bgColor: "bg-purple-50"
+    },
+    {
+      icon: <BarChart className="h-8 w-8" />,
+      title: "数据分析平台",
+      description: "智能数据分析与可视化工具，帮助企业洞察业务数据",
+      features: ["数据挖掘", "预测分析", "可视化报表", "实时监控"],
+      status: "active",
+      link: "#",
+      color: "text-orange-600",
+      bgColor: "bg-orange-50"
+    },
+    {
+      icon: <Users className="h-8 w-8" />,
+      title: "智能客服系统",
+      description: "基于自然语言处理的智能客服解决方案，提升客户服务效率",
+      features: ["智能问答", "情感分析", "多轮对话", "知识库管理"],
+      status: "coming",
+      link: "#",
+      color: "text-red-600",
+      bgColor: "bg-red-50"
+    },
+    {
+      icon: <Settings className="h-8 w-8" />,
+      title: "流程自动化",
+      description: "企业业务流程自动化工具，减少人工操作，提高工作效率",
+      features: ["工作流设计", "规则引擎", "任务调度", "监控告警"],
+      status: "beta",
+      link: "#",
+      color: "text-indigo-600",
+      bgColor: "bg-indigo-50"
+    }
+  ];
+
+  const getStatusBadge = (status: string) => {
+    const statusConfig = {
+      active: { label: "已上线", variant: "default" as const },
+      beta: { label: "测试版", variant: "secondary" as const },
+      coming: { label: "即将推出", variant: "outline" as const }
+    };
+    
+    const config = statusConfig[status as keyof typeof statusConfig] || statusConfig.active;
+    return <Badge variant={config.variant}>{config.label}</Badge>;
+  };
+
+  const handleToolClick = (tool: any) => {
+    if (tool.link && tool.link !== '#') {
+      window.open(tool.link, '_blank');
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
+      {/* Hero Section */}
+      <div className="relative overflow-hidden bg-gradient-to-r from-blue-600 to-purple-600 text-white">
+        <div className="absolute inset-0 bg-black/20" />
+        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
+          <div className="text-center">
+            <div className="inline-flex items-center px-4 py-2 rounded-full bg-white/20 backdrop-blur-sm text-sm font-medium mb-6">
+              <Brain className="h-4 w-4 mr-2" />
+              AI工具矩阵
+            </div>
+            
+            <h1 className="text-5xl md:text-6xl font-bold mb-6">
+              智能工具平台
+            </h1>
+            
+            <p className="text-xl md:text-2xl text-blue-100 max-w-3xl mx-auto mb-8">
+              元亨科技为您提供全方位的AI解决方案，从文档处理到数据分析，助力企业智能化转型
+            </p>
+            
+            <div className="flex flex-wrap justify-center gap-4 mt-8">
+              <Badge variant="secondary" className="text-sm">文档处理</Badge>
+              <Badge variant="secondary" className="text-sm">图像识别</Badge>
+              <Badge variant="secondary" className="text-sm">代码生成</Badge>
+              <Badge variant="secondary" className="text-sm">数据分析</Badge>
+              <Badge variant="secondary" className="text-sm">智能客服</Badge>
+              <Badge variant="secondary" className="text-sm">流程自动化</Badge>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Featured Tool - 元亨Word */}
+      <div className="py-20 bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid lg:grid-cols-2 gap-12 items-center">
+            <div>
+              <div className="flex items-center mb-4">
+                <div className="p-3 bg-blue-100 rounded-lg mr-4">
+                  <FileText className="h-8 w-8 text-blue-600" />
+                </div>
+                <div>
+                  <Badge variant="default" className="mb-2">旗舰产品</Badge>
+                  <h2 className="text-3xl font-bold text-gray-900">元亨Word批量处理</h2>
+                </div>
+              </div>
+              
+              <p className="text-lg text-gray-700 mb-6">
+                基于AI技术的智能文档批量处理平台，支持Word模板与Excel数据完美结合，
+                一键生成个性化文档，大幅提升工作效率。
+              </p>
+              
+              <div className="space-y-3 mb-8">
+                <div className="flex items-center">
+                  <Zap className="h-5 w-5 text-green-500 mr-3" />
+                  <span className="text-gray-700">智能字段替换，精准匹配数据</span>
+                </div>
+                <div className="flex items-center">
+                  <Image className="h-5 w-5 text-green-500 mr-3" />
+                  <span className="text-gray-700">批量图片处理，自动尺寸优化</span>
+                </div>
+                <div className="flex items-center">
+                  <Shield className="h-5 w-5 text-green-500 mr-3" />
+                  <span className="text-gray-700">数据安全保障，隐私保护</span>
+                </div>
+              </div>
+              
+              <Button 
+                size="lg"
+                className="bg-blue-600 hover:bg-blue-700 text-white"
+                onClick={() => window.open('https://www.d8d.fun/editor/workspace/159/template/142', '_blank')}
+              >
+                <ExternalLink className="h-4 w-4 mr-2" />
+                立即体验元亨Word
+                <ArrowRight className="h-4 w-4 ml-2" />
+              </Button>
+            </div>
+            
+            <div className="relative">
+              <div className="bg-gradient-to-br from-blue-100 to-purple-100 rounded-2xl p-8">
+                <div className="grid gap-6">
+                  <Card className="border-0 shadow-lg">
+                    <CardHeader>
+                      <CardTitle>核心功能</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <ul className="space-y-2">
+                        <li className="flex items-center">
+                          <div className="w-2 h-2 bg-blue-600 rounded-full mr-3"></div>
+                          Word模板批量处理
+                        </li>
+                        <li className="flex items-center">
+                          <div className="w-2 h-2 bg-blue-600 rounded-full mr-3"></div>
+                          Excel数据驱动生成
+                        </li>
+                        <li className="flex items-center">
+                          <div className="w-2 h-2 bg-blue-600 rounded-full mr-3"></div>
+                          智能图片替换处理
+                        </li>
+                        <li className="flex items-center">
+                          <div className="w-2 h-2 bg-blue-600 rounded-full mr-3"></div>
+                          实时预览与下载
+                        </li>
+                      </ul>
+                    </CardContent>
+                  </Card>
+                  
+                  <Card className="border-0 shadow-lg">
+                    <CardHeader>
+                      <CardTitle>适用场景</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <ul className="space-y-2">
+                        <li className="flex items-center">
+                          <div className="w-2 h-2 bg-green-600 rounded-full mr-3"></div>
+                          合同批量生成
+                        </li>
+                        <li className="flex items-center">
+                          <div className="w-2 h-2 bg-green-600 rounded-full mr-3"></div>
+                          报告文档自动化
+                        </li>
+                        <li className="flex items-center">
+                          <div className="w-2 h-2 bg-green-600 rounded-full mr-3"></div>
+                          证书批量制作
+                        </li>
+                        <li className="flex items-center">
+                          <div className="w-2 h-2 bg-green-600 rounded-full mr-3"></div>
+                          表格数据填充
+                        </li>
+                      </ul>
+                    </CardContent>
+                  </Card>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* All AI Tools */}
+      <div className="py-20 bg-gray-50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold text-gray-900 mb-4">AI工具全家桶</h2>
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+              从文档处理到智能分析，我们提供全方位的AI解决方案
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {aiTools.map((tool, index) => (
+              <Card 
+                key={index}
+                className={`border-0 shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer ${
+                  tool.status === 'coming' ? 'opacity-75' : ''
+                }`}
+                onClick={() => handleToolClick(tool)}
+              >
+                <CardHeader>
+                  <div className="flex items-center justify-between mb-4">
+                    <div className={`p-3 rounded-lg ${tool.bgColor} ${tool.color}`}>
+                      {tool.icon}
+                    </div>
+                    {getStatusBadge(tool.status)}
+                  </div>
+                  <CardTitle className="text-xl">{tool.title}</CardTitle>
+                  <CardDescription className="text-base mt-2">
+                    {tool.description}
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-2 mb-4">
+                    {tool.features.map((feature, featureIndex) => (
+                      <div key={featureIndex} className="flex items-center text-sm text-gray-600">
+                        <div className="w-1.5 h-1.5 bg-gray-400 rounded-full mr-2"></div>
+                        {feature}
+                      </div>
+                    ))}
+                  </div>
+                  
+                  <Button 
+                    variant={tool.status === 'coming' ? "outline" : "default"}
+                    size="sm"
+                    className="w-full"
+                    disabled={tool.status === 'coming'}
+                  >
+                    {tool.status === 'coming' ? '即将推出' : '了解更多'}
+                    <ArrowRight className="h-3 w-3 ml-2" />
+                  </Button>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Technology Stack */}
+      <div className="py-20 bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold text-gray-900 mb-4">技术架构</h2>
+            <p className="text-xl text-gray-600">基于前沿AI技术，构建稳定可靠的智能平台</p>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+            {[
+              { name: "机器学习", description: "深度学习算法模型训练" },
+              { name: "自然语言处理", description: "文本理解与生成技术" },
+              { name: "计算机视觉", description: "图像识别与分析处理" },
+              { name: "大数据分析", description: "海量数据处理与挖掘" }
+            ].map((tech, index) => (
+              <Card key={index} className="border-0 shadow-lg text-center">
+                <CardHeader>
+                  <div className="w-12 h-12 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <Brain className="h-6 w-6 text-white" />
+                  </div>
+                  <CardTitle>{tech.name}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <CardDescription>{tech.description}</CardDescription>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* CTA Section */}
+      <div className="py-20 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
+        <div className="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8">
+          <h2 className="text-4xl font-bold mb-4">
+            开启智能办公新时代
+          </h2>
+          <p className="text-xl text-blue-100 mb-8">
+            选择元亨科技AI工具，让工作更高效、更智能
+          </p>
+          <Button 
+            size="lg"
+            variant="secondary"
+            className="bg-white text-blue-600 hover:bg-gray-100 px-8 py-3"
+            onClick={() => window.open('https://www.d8d.fun/editor/workspace/159/template/142', '_blank')}
+          >
+            <ExternalLink className="h-4 w-4 mr-2" />
+            免费体验元亨Word
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/client/home/pages/AboutPage.tsx

@@ -0,0 +1,282 @@
+import React from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/client/components/ui/card';
+import { Button } from '@/client/components/ui/button';
+import { Badge } from '@/client/components/ui/badge';
+import { Separator } from '@/client/components/ui/separator';
+import { 
+  Building, 
+  Target, 
+  Users, 
+  Award, 
+  Clock, 
+  MapPin,
+  Heart,
+  Shield,
+  Zap
+} from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+
+export default function AboutPage() {
+  const navigate = useNavigate();
+
+  const companyInfo = {
+    name: "元亨科技有限公司",
+    founded: "2018年",
+    location: "中国·北京",
+    employees: "50+",
+    projects: "200+",
+    clients: "1000+"
+  };
+
+  const values = [
+    {
+      icon: <Heart className="h-8 w-8" />,
+      title: "客户至上",
+      description: "始终以客户需求为导向，提供最优质的服务体验",
+      color: "text-red-600"
+    },
+    {
+      icon: <Shield className="h-8 w-8" />,
+      title: "诚信经营",
+      description: "坚持诚信原则，建立长期稳定的合作关系",
+      color: "text-blue-600"
+    },
+    {
+      icon: <Zap className="h-8 w-8" />,
+      title: "创新驱动",
+      description: "持续技术创新，引领行业发展方向",
+      color: "text-yellow-600"
+    }
+  ];
+
+  const milestones = [
+    { year: "2018", event: "公司成立，专注于AI技术研发" },
+    { year: "2019", event: "推出首个AI文档处理产品" },
+    { year: "2020", event: "获得国家高新技术企业认证" },
+    { year: "2021", event: "用户突破10万，服务覆盖全国" },
+    { year: "2022", event: "推出元亨Word批量处理平台" },
+    { year: "2023", event: "AI工具矩阵全面升级" },
+    { year: "2024", event: "开启国际化战略布局" }
+  ];
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
+      {/* Hero Section */}
+      <div className="relative overflow-hidden bg-gradient-to-r from-blue-600 to-purple-600 text-white">
+        <div className="absolute inset-0 bg-black/20" />
+        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
+          <div className="text-center">
+            <div className="inline-flex items-center px-4 py-2 rounded-full bg-white/20 backdrop-blur-sm text-sm font-medium mb-6">
+              <Building className="h-4 w-4 mr-2" />
+              关于元亨科技
+            </div>
+            
+            <h1 className="text-5xl md:text-6xl font-bold mb-6">
+              元亨科技有限公司
+            </h1>
+            
+            <p className="text-xl md:text-2xl text-blue-100 max-w-3xl mx-auto mb-8">
+              专注于人工智能技术研发与应用的高新技术企业，致力于为企业提供智能化解决方案
+            </p>
+            
+            <div className="flex flex-wrap justify-center gap-6 mt-8">
+              <div className="text-center">
+                <div className="text-3xl font-bold">{companyInfo.founded}</div>
+                <div className="text-blue-200">成立时间</div>
+              </div>
+              <div className="text-center">
+                <div className="text-3xl font-bold">{companyInfo.employees}</div>
+                <div className="text-blue-200">专业团队</div>
+              </div>
+              <div className="text-center">
+                <div className="text-3xl font-bold">{companyInfo.projects}+</div>
+                <div className="text-blue-200">成功项目</div>
+              </div>
+              <div className="text-center">
+                <div className="text-3xl font-bold">{companyInfo.clients}+</div>
+                <div className="text-blue-200">服务客户</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Company Overview */}
+      <div className="py-20 bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid lg:grid-cols-2 gap-12 items-center">
+            <div>
+              <h2 className="text-4xl font-bold text-gray-900 mb-6">公司简介</h2>
+              <p className="text-lg text-gray-700 mb-6">
+                元亨科技有限公司成立于2018年，是一家专注于人工智能技术研发与应用的高新技术企业。
+                公司总部位于北京，拥有一支由资深AI专家、软件工程师和产品设计师组成的专业团队。
+              </p>
+              <p className="text-lg text-gray-700 mb-6">
+                我们致力于将前沿的AI技术转化为实用的商业解决方案，帮助企业实现数字化转型和智能化升级。
+                目前，我们的产品和服务已广泛应用于金融、教育、医疗、制造等多个行业领域。
+              </p>
+              <div className="flex items-center text-gray-600 mb-4">
+                <MapPin className="h-5 w-5 mr-2" />
+                <span>总部地址：{companyInfo.location}</span>
+              </div>
+              <div className="flex items-center text-gray-600">
+                <Clock className="h-5 w-5 mr-2" />
+                <span>成立时间：{companyInfo.founded}</span>
+              </div>
+            </div>
+            <div className="relative">
+              <div className="bg-gradient-to-br from-blue-100 to-purple-100 rounded-2xl p-8">
+                <div className="grid grid-cols-2 gap-6">
+                  <Card className="border-0 shadow-lg">
+                    <CardHeader className="pb-2">
+                      <Target className="h-8 w-8 text-blue-600" />
+                      <CardTitle className="text-lg">使命</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <CardDescription>
+                        让AI技术赋能每一个企业，推动产业智能化升级
+                      </CardDescription>
+                    </CardContent>
+                  </Card>
+                  <Card className="border-0 shadow-lg">
+                    <CardHeader className="pb-2">
+                      <Award className="h-8 w-8 text-purple-600" />
+                      <CardTitle className="text-lg">愿景</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <CardDescription>
+                        成为全球领先的AI技术解决方案提供商
+                      </CardDescription>
+                    </CardContent>
+                  </Card>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Core Values */}
+      <div className="py-20 bg-gray-50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold text-gray-900 mb-4">核心价值观</h2>
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+              我们坚信，优秀的企业文化是持续发展的基石
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-8">
+            {values.map((value, index) => (
+              <Card key={index} className="border-0 shadow-lg hover:shadow-xl transition-all duration-300">
+                <CardHeader className="text-center">
+                  <div className={`p-3 rounded-full bg-gray-100 inline-block mb-4 ${value.color}`}>
+                    {value.icon}
+                  </div>
+                  <CardTitle className="text-xl">{value.title}</CardTitle>
+                </CardHeader>
+                <CardContent className="text-center">
+                  <CardDescription className="text-base">
+                    {value.description}
+                  </CardDescription>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Development History */}
+      <div className="py-20 bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold text-gray-900 mb-4">发展历程</h2>
+            <p className="text-xl text-gray-600">每一步都见证着我们的成长与突破</p>
+          </div>
+
+          <div className="relative">
+            <div className="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-blue-200"></div>
+            
+            <div className="space-y-12">
+              {milestones.map((milestone, index) => (
+                <div key={index} className={`relative flex items-center ${index % 2 === 0 ? 'flex-row' : 'flex-row-reverse'}`}>
+                  <div className={`flex-1 ${index % 2 === 0 ? 'pr-8 text-right' : 'pl-8'}`}>
+                    <div className="inline-block bg-white p-6 rounded-lg shadow-lg border">
+                      <Badge variant="secondary" className="mb-2">{milestone.year}</Badge>
+                      <p className="text-lg font-medium text-gray-900">{milestone.event}</p>
+                    </div>
+                  </div>
+                  <div className="w-4 h-4 bg-blue-600 rounded-full border-4 border-white shadow-lg z-10"></div>
+                  <div className="flex-1"></div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Team Section */}
+      <div className="py-20 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <h2 className="text-4xl font-bold mb-6">专业团队</h2>
+          <p className="text-xl text-blue-100 max-w-3xl mx-auto mb-8">
+            我们拥有一支由AI专家、软件工程师、产品设计师和行业顾问组成的多元化团队，
+            具备丰富的技术经验和行业洞察力
+          </p>
+          
+          <div className="grid md:grid-cols-4 gap-8 mt-12">
+            <div className="text-center">
+              <Users className="h-12 w-12 mx-auto mb-4 text-blue-200" />
+              <div className="text-2xl font-bold">AI专家</div>
+              <div className="text-blue-200">机器学习、自然语言处理</div>
+            </div>
+            <div className="text-center">
+              <Zap className="h-12 w-12 mx-auto mb-4 text-blue-200" />
+              <div className="text-2xl font-bold">软件工程师</div>
+              <div className="text-blue-200">全栈开发、系统架构</div>
+            </div>
+            <div className="text-center">
+              <Target className="h-12 w-12 mx-auto mb-4 text-blue-200" />
+              <div className="text-2xl font-bold">产品设计师</div>
+              <div className="text-blue-200">用户体验、界面设计</div>
+            </div>
+            <div className="text-center">
+              <Shield className="h-12 w-12 mx-auto mb-4 text-blue-200" />
+              <div className="text-2xl font-bold">行业顾问</div>
+              <div className="text-blue-200">业务咨询、解决方案</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* CTA Section */}
+      <div className="py-20 bg-white">
+        <div className="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8">
+          <h2 className="text-4xl font-bold text-gray-900 mb-4">
+            加入元亨科技，共创智能未来
+          </h2>
+          <p className="text-xl text-gray-600 mb-8">
+            如果您对我们的技术和服务感兴趣，欢迎与我们联系
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <Button 
+              size="lg"
+              className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3"
+              onClick={() => navigate('/contact')}
+            >
+              联系我们
+            </Button>
+            <Button 
+              size="lg"
+              variant="outline"
+              className="border-blue-600 text-blue-600 hover:bg-blue-50 px-8 py-3"
+              onClick={() => navigate('/ai-tools')}
+            >
+              了解产品
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/client/home/pages/ContactPage.tsx

@@ -0,0 +1,392 @@
+import React, { useState } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/client/components/ui/card';
+import { Button } from '@/client/components/ui/button';
+import { Badge } from '@/client/components/ui/badge';
+import { Input } from '@/client/components/ui/input';
+import { Textarea } from '@/client/components/ui/textarea';
+import { Label } from '@/client/components/ui/label';
+import { Separator } from '@/client/components/ui/separator';
+import { 
+  MapPin, 
+  Phone, 
+  Mail, 
+  Clock, 
+  MessageCircle,
+  Send,
+  CheckCircle,
+  Users,
+  Building
+} from 'lucide-react';
+
+export default function ContactPage() {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    phone: '',
+    company: '',
+    subject: '',
+    message: ''
+  });
+
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // 这里可以添加表单提交逻辑
+    console.log('表单数据:', formData);
+    setIsSubmitted(true);
+    // 重置表单
+    setFormData({
+      name: '',
+      email: '',
+      phone: '',
+      company: '',
+      subject: '',
+      message: ''
+    });
+  };
+
+  const contactInfo = [
+    {
+      icon: <MapPin className="h-6 w-6" />,
+      title: "公司地址",
+      content: "北京市海淀区中关村科技园区\n创新大厦A座15层",
+      description: "交通便利，地铁直达"
+    },
+    {
+      icon: <Phone className="h-6 w-6" />,
+      title: "联系电话",
+      content: "400-123-4567\n010-8888-9999",
+      description: "工作日 9:00-18:00"
+    },
+    {
+      icon: <Mail className="h-6 w-6" />,
+      title: "电子邮箱",
+      content: "contact@yuanhengtech.com\nsupport@yuanhengtech.com",
+      description: "24小时内回复"
+    },
+    {
+      icon: <Clock className="h-6 w-6" />,
+      title: "工作时间",
+      content: "周一至周五 9:00-18:00\n周六 9:00-12:00",
+      description: "节假日除外"
+    }
+  ];
+
+  const departments = [
+    {
+      name: "商务合作",
+      description: "项目合作、渠道合作、战略合作",
+      contact: "张经理",
+      phone: "138-0013-8000",
+      email: "business@yuanhengtech.com"
+    },
+    {
+      name: "技术支持",
+      description: "技术咨询、产品支持、售后服务",
+      contact: "李工程师",
+      phone: "139-0013-9000",
+      email: "support@yuanhengtech.com"
+    },
+    {
+      name: "人才招聘",
+      description: "人才共享、项目外包、技术咨询",
+      contact: "王总监",
+      phone: "136-0013-6000",
+      email: "hr@yuanhengtech.com"
+    },
+    {
+      name: "媒体合作",
+      description: "品牌宣传、媒体采访、活动合作",
+      contact: "陈主管",
+      phone: "137-0013-7000",
+      email: "media@yuanhengtech.com"
+    }
+  ];
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
+      {/* Hero Section */}
+      <div className="relative overflow-hidden bg-gradient-to-r from-blue-600 to-purple-600 text-white">
+        <div className="absolute inset-0 bg-black/20" />
+        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
+          <div className="text-center">
+            <div className="inline-flex items-center px-4 py-2 rounded-full bg-white/20 backdrop-blur-sm text-sm font-medium mb-6">
+              <MessageCircle className="h-4 w-4 mr-2" />
+              联系我们
+            </div>
+            
+            <h1 className="text-5xl md:text-6xl font-bold mb-6">
+              期待与您合作
+            </h1>
+            
+            <p className="text-xl md:text-2xl text-blue-100 max-w-3xl mx-auto mb-8">
+              无论您有任何问题或合作意向，我们都将竭诚为您服务
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Contact Information */}
+      <div className="py-20 bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold text-gray-900 mb-4">联系信息</h2>
+            <p className="text-xl text-gray-600">多种联系方式，方便您随时与我们沟通</p>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+            {contactInfo.map((info, index) => (
+              <Card key={index} className="border-0 shadow-lg text-center">
+                <CardHeader>
+                  <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4 text-blue-600">
+                    {info.icon}
+                  </div>
+                  <CardTitle>{info.title}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-2">
+                    <p className="text-gray-700 whitespace-pre-line">{info.content}</p>
+                    <p className="text-sm text-gray-500">{info.description}</p>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Contact Form */}
+      <div className="py-20 bg-gray-50">
+        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-12">
+            <h2 className="text-4xl font-bold text-gray-900 mb-4">在线咨询</h2>
+            <p className="text-xl text-gray-600">填写表单，我们将尽快与您联系</p>
+          </div>
+
+          {isSubmitted ? (
+            <Card className="border-0 shadow-lg text-center py-12">
+              <CardContent>
+                <CheckCircle className="h-16 w-16 text-green-500 mx-auto mb-4" />
+                <h3 className="text-2xl font-bold text-gray-900 mb-2">提交成功！</h3>
+                <p className="text-gray-600 mb-6">
+                  感谢您的咨询，我们将在24小时内与您联系。
+                </p>
+                <Button 
+                  onClick={() => setIsSubmitted(false)}
+                  variant="outline"
+                >
+                  继续咨询
+                </Button>
+              </CardContent>
+            </Card>
+          ) : (
+            <Card className="border-0 shadow-lg">
+              <CardHeader>
+                <CardTitle>咨询表单</CardTitle>
+                <CardDescription>请填写您的联系信息和咨询内容</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <form onSubmit={handleSubmit} className="space-y-6">
+                  <div className="grid md:grid-cols-2 gap-6">
+                    <div className="space-y-2">
+                      <Label htmlFor="name">姓名 *</Label>
+                      <Input
+                        id="name"
+                        name="name"
+                        value={formData.name}
+                        onChange={handleInputChange}
+                        placeholder="请输入您的姓名"
+                        required
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="email">邮箱 *</Label>
+                      <Input
+                        id="email"
+                        name="email"
+                        type="email"
+                        value={formData.email}
+                        onChange={handleInputChange}
+                        placeholder="请输入您的邮箱"
+                        required
+                      />
+                    </div>
+                  </div>
+
+                  <div className="grid md:grid-cols-2 gap-6">
+                    <div className="space-y-2">
+                      <Label htmlFor="phone">电话</Label>
+                      <Input
+                        id="phone"
+                        name="phone"
+                        value={formData.phone}
+                        onChange={handleInputChange}
+                        placeholder="请输入您的联系电话"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="company">公司名称</Label>
+                      <Input
+                        id="company"
+                        name="company"
+                        value={formData.company}
+                        onChange={handleInputChange}
+                        placeholder="请输入您的公司名称"
+                      />
+                    </div>
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="subject">咨询主题 *</Label>
+                    <Input
+                      id="subject"
+                      name="subject"
+                      value={formData.subject}
+                      onChange={handleInputChange}
+                      placeholder="请输入咨询主题"
+                      required
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="message">详细内容 *</Label>
+                    <Textarea
+                      id="message"
+                      name="message"
+                      value={formData.message}
+                      onChange={handleInputChange}
+                      placeholder="请详细描述您的需求或问题"
+                      rows={6}
+                      required
+                    />
+                  </div>
+
+                  <Button type="submit" className="w-full bg-blue-600 hover:bg-blue-700">
+                    <Send className="h-4 w-4 mr-2" />
+                    提交咨询
+                  </Button>
+                </form>
+              </CardContent>
+            </Card>
+          )}
+        </div>
+      </div>
+
+      {/* Department Contacts */}
+      <div className="py-20 bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold text-gray-900 mb-4">各部门联系方式</h2>
+            <p className="text-xl text-gray-600">根据您的需求联系对应的部门</p>
+          </div>
+
+          <div className="grid md:grid-cols-2 gap-8">
+            {departments.map((dept, index) => (
+              <Card key={index} className="border-0 shadow-lg hover:shadow-xl transition-all duration-300">
+                <CardHeader>
+                  <CardTitle className="flex items-center">
+                    <Building className="h-5 w-5 mr-2" />
+                    {dept.name}
+                  </CardTitle>
+                  <CardDescription>{dept.description}</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-3">
+                    <div className="flex items-center justify-between">
+                      <span className="text-sm text-gray-600">联系人：</span>
+                      <span className="font-medium">{dept.contact}</span>
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <span className="text-sm text-gray-600">电话：</span>
+                      <span className="font-medium">{dept.phone}</span>
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <span className="text-sm text-gray-600">邮箱：</span>
+                      <span className="font-medium text-blue-600">{dept.email}</span>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Map & Location */}
+      <div className="py-20 bg-gray-50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-12">
+            <h2 className="text-4xl font-bold text-gray-900 mb-4">公司位置</h2>
+            <p className="text-xl text-gray-600">欢迎莅临参观指导</p>
+          </div>
+
+          <Card className="border-0 shadow-lg">
+            <CardHeader>
+              <CardTitle className="flex items-center">
+                <MapPin className="h-5 w-5 mr-2" />
+                元亨科技有限公司
+              </CardTitle>
+              <CardDescription>北京市海淀区中关村科技园区创新大厦A座15层</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="bg-gradient-to-r from-blue-100 to-purple-100 rounded-lg p-8 text-center">
+                <div className="max-w-md mx-auto">
+                  <h3 className="text-xl font-semibold mb-4">交通指南</h3>
+                  <div className="space-y-2 text-gray-700">
+                    <p>🚇 地铁：10号线中关村站A出口，步行5分钟</p>
+                    <p>🚌 公交：中关村南站，多条线路可达</p>
+                    <p>🚗 自驾：园区提供地下停车场</p>
+                  </div>
+                </div>
+              </div>
+              
+              {/* 这里可以添加真实的地图组件 */}
+              <div className="mt-6 bg-gray-200 rounded-lg h-64 flex items-center justify-center">
+                <div className="text-center">
+                  <MapPin className="h-12 w-12 text-gray-400 mx-auto mb-2" />
+                  <p className="text-gray-600">地图位置展示</p>
+                  <p className="text-sm text-gray-500">(实际项目中可集成百度地图或高德地图)</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+
+      {/* Quick Actions */}
+      <div className="py-20 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
+        <div className="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8">
+          <h2 className="text-4xl font-bold mb-4">
+            立即开始合作
+          </h2>
+          <p className="text-xl text-blue-100 mb-8">
+            选择最适合您的联系方式，开启合作之旅
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <Button variant="secondary" size="lg">
+              <Phone className="h-4 w-4 mr-2" />
+              立即致电
+            </Button>
+            <Button variant="secondary" size="lg">
+              <Mail className="h-4 w-4 mr-2" />
+              发送邮件
+            </Button>
+            <Button variant="secondary" size="lg">
+              <Users className="h-4 w-4 mr-2" />
+              在线咨询
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/client/home/pages/DesignPlanningPage.tsx

@@ -0,0 +1,337 @@
+import React from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/client/components/ui/card';
+import { Button } from '@/client/components/ui/button';
+import { Badge } from '@/client/components/ui/badge';
+import { Separator } from '@/client/components/ui/separator';
+import { 
+  Layout, 
+  Palette, 
+  Code, 
+  Users, 
+  Target, 
+  Clock,
+  CheckCircle,
+  ArrowRight,
+  Zap,
+  Shield,
+  BarChart
+} from 'lucide-react';
+
+export default function DesignPlanningPage() {
+  const services = [
+    {
+      icon: <Layout className="h-8 w-8" />,
+      title: "UI/UX设计",
+      description: "用户界面与用户体验设计，打造直观易用的产品界面",
+      features: ["用户研究", "交互设计", "视觉设计", "原型测试"],
+      color: "text-blue-600",
+      bgColor: "bg-blue-50"
+    },
+    {
+      icon: <Palette className="h-8 w-8" />,
+      title: "品牌视觉设计",
+      description: "企业品牌形象设计，建立统一的视觉识别系统",
+      features: ["Logo设计", "VI系统", "品牌手册", "应用规范"],
+      color: "text-purple-600",
+      bgColor: "bg-purple-50"
+    },
+    {
+      icon: <Code className="h-8 w-8" />,
+      title: "产品架构设计",
+      description: "技术架构与系统设计，确保产品的可扩展性和稳定性",
+      features: ["技术选型", "系统架构", "数据库设计", "API设计"],
+      color: "text-green-600",
+      bgColor: "bg-green-50"
+    },
+    {
+      icon: <Users className="h-8 w-8" />,
+      title: "用户体验规划",
+      description: "全面的用户体验策略规划，提升产品用户满意度",
+      features: ["用户旅程", "可用性测试", "数据分析", "优化建议"],
+      color: "text-orange-600",
+      bgColor: "bg-orange-50"
+    }
+  ];
+
+  const processSteps = [
+    {
+      step: 1,
+      title: "需求分析",
+      description: "深入了解业务需求，明确设计目标",
+      icon: <Target className="h-6 w-6" />,
+      duration: "1-2周"
+    },
+    {
+      step: 2,
+      title: "概念设计",
+      description: "创意构思，确定设计方向和风格",
+      icon: <Palette className="h-6 w-6" />,
+      duration: "2-3周"
+    },
+    {
+      step: 3,
+      title: "详细设计",
+      description: "完成界面设计和交互细节",
+      icon: <Layout className="h-6 w-6" />,
+      duration: "3-4周"
+    },
+    {
+      step: 4,
+      title: "原型开发",
+      description: "制作可交互原型，进行用户测试",
+      icon: <Code className="h-6 w-6" />,
+      duration: "2-3周"
+    },
+    {
+      step: 5,
+      title: "优化迭代",
+      description: "根据反馈优化设计，完善细节",
+      icon: <CheckCircle className="h-6 w-6" />,
+      duration: "1-2周"
+    }
+  ];
+
+  const caseStudies = [
+    {
+      title: "金融科技平台设计",
+      description: "为某大型金融机构设计移动端理财平台",
+      results: ["用户满意度提升35%", "交易转化率增加20%", "操作效率提升50%"],
+      industry: "金融"
+    },
+    {
+      title: "教育SaaS系统设计",
+      description: "在线教育平台的整体用户体验设计",
+      results: ["用户留存率提升40%", "课程完成率增加25%", "教师工作效率提升60%"],
+      industry: "教育"
+    },
+    {
+      title: "医疗健康APP设计",
+      description: "智能医疗健康管理移动应用设计",
+      results: ["日活跃用户增长300%", "用户满意度4.8/5.0", "医疗咨询效率提升70%"],
+      industry: "医疗"
+    }
+  ];
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
+      {/* Hero Section */}
+      <div className="relative overflow-hidden bg-gradient-to-r from-blue-600 to-purple-600 text-white">
+        <div className="absolute inset-0 bg-black/20" />
+        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
+          <div className="text-center">
+            <div className="inline-flex items-center px-4 py-2 rounded-full bg-white/20 backdrop-blur-sm text-sm font-medium mb-6">
+              <Layout className="h-4 w-4 mr-2" />
+              设计规划服务
+            </div>
+            
+            <h1 className="text-5xl md:text-6xl font-bold mb-6">
+              专业设计规划
+            </h1>
+            
+            <p className="text-xl md:text-2xl text-blue-100 max-w-3xl mx-auto mb-8">
+              从概念到实现，我们提供全方位的设计规划服务，助力产品成功
+            </p>
+            
+            <div className="flex flex-wrap justify-center gap-6 mt-8">
+              <div className="text-center">
+                <div className="text-3xl font-bold">50+</div>
+                <div className="text-blue-200">成功案例</div>
+              </div>
+              <div className="text-center">
+                <div className="text-3xl font-bold">100+</div>
+                <div className="text-blue-200">设计项目</div>
+              </div>
+              <div className="text-center">
+                <div className="text-3xl font-bold">95%</div>
+                <div className="text-blue-200">客户满意度</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Design Services */}
+      <div className="py-20 bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold text-gray-900 mb-4">设计服务范围</h2>
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+              我们提供从战略规划到具体实施的全流程设计服务
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 gap-8">
+            {services.map((service, index) => (
+              <Card key={index} className="border-0 shadow-lg hover:shadow-xl transition-all duration-300">
+                <CardHeader>
+                  <div className="flex items-center mb-4">
+                    <div className={`p-3 rounded-lg ${service.bgColor} ${service.color} mr-4`}>
+                      {service.icon}
+                    </div>
+                    <CardTitle className="text-xl">{service.title}</CardTitle>
+                  </div>
+                  <CardDescription className="text-base">
+                    {service.description}
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-2">
+                    {service.features.map((feature, featureIndex) => (
+                      <div key={featureIndex} className="flex items-center text-sm text-gray-600">
+                        <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
+                        {feature}
+                      </div>
+                    ))}
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Design Process */}
+      <div className="py-20 bg-gray-50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold text-gray-900 mb-4">设计流程</h2>
+            <p className="text-xl text-gray-600">科学严谨的设计流程，确保项目质量</p>
+          </div>
+
+          <div className="relative">
+            <div className="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-blue-200 hidden lg:block"></div>
+            
+            <div className="space-y-8 lg:space-y-12">
+              {processSteps.map((step, index) => (
+                <div key={index} className={`relative flex items-center ${
+                  index % 2 === 0 ? 'lg:flex-row' : 'lg:flex-row-reverse'
+                }`}>
+                  <div className={`flex-1 ${index % 2 === 0 ? 'lg:pr-8 lg:text-right' : 'lg:pl-8'}`}>
+                    <Card className="border-0 shadow-lg">
+                      <CardHeader>
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center">
+                            <div className="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center text-lg font-bold mr-4">
+                              {step.step}
+                            </div>
+                            <CardTitle>{step.title}</CardTitle>
+                          </div>
+                          <Badge variant="outline">{step.duration}</Badge>
+                        </div>
+                      </CardHeader>
+                      <CardContent>
+                        <CardDescription className="text-base">
+                          {step.description}
+                        </CardDescription>
+                      </CardContent>
+                    </Card>
+                  </div>
+                  
+                  <div className="hidden lg:block w-12 h-12 bg-white border-4 border-blue-600 rounded-full flex items-center justify-center text-blue-600 z-10">
+                    {step.icon}
+                  </div>
+                  
+                  <div className="flex-1 hidden lg:block"></div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Case Studies */}
+      <div className="py-20 bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold text-gray-900 mb-4">成功案例</h2>
+            <p className="text-xl text-gray-600">我们为各行业客户提供专业的设计规划服务</p>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-8">
+            {caseStudies.map((caseStudy, index) => (
+              <Card key={index} className="border-0 shadow-lg hover:shadow-xl transition-all duration-300">
+                <CardHeader>
+                  <Badge variant="secondary" className="w-fit mb-2">{caseStudy.industry}</Badge>
+                  <CardTitle className="text-lg">{caseStudy.title}</CardTitle>
+                  <CardDescription>{caseStudy.description}</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-2">
+                    {caseStudy.results.map((result, resultIndex) => (
+                      <div key={resultIndex} className="flex items-center text-sm text-gray-700">
+                        <Zap className="h-3 w-3 text-green-500 mr-2" />
+                        {result}
+                      </div>
+                    ))}
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Design Principles */}
+      <div className="py-20 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold mb-4">设计原则</h2>
+            <p className="text-xl text-blue-100">我们坚持的设计理念和标准</p>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+            {[
+              {
+                icon: <Users className="h-8 w-8" />,
+                title: "用户中心",
+                description: "始终以用户需求和体验为核心"
+              },
+              {
+                icon: <Shield className="h-8 w-8" />,
+                title: "简洁直观",
+                description: "追求简洁明了的设计表达"
+              },
+              {
+                icon: <Zap className="h-8 w-8" />,
+                title: "高效实用",
+                description: "注重设计的实用性和效率"
+              },
+              {
+                icon: <BarChart className="h-8 w-8" />,
+                title: "数据驱动",
+                description: "基于数据分析进行设计决策"
+              }
+            ].map((principle, index) => (
+              <div key={index} className="text-center">
+                <div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
+                  {principle.icon}
+                </div>
+                <h3 className="text-xl font-semibold mb-2">{principle.title}</h3>
+                <p className="text-blue-200">{principle.description}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* CTA Section */}
+      <div className="py-20 bg-white">
+        <div className="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8">
+          <h2 className="text-4xl font-bold text-gray-900 mb-4">
+            开始您的设计之旅
+          </h2>
+          <p className="text-xl text-gray-600 mb-8">
+            让我们共同打造卓越的产品体验
+          </p>
+          <Button 
+            size="lg"
+            className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3"
+          >
+            <ArrowRight className="h-4 w-4 mr-2" />
+            咨询设计服务
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/client/home/pages/HomePage.tsx

@@ -4,151 +4,71 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/cli
 import { Badge } from '@/client/components/ui/badge';
 import { Separator } from '@/client/components/ui/separator';
 import {
-  FileText,
-  Upload,
-  Download,
-  Image,
-  Settings,
-  CheckCircle,
+  Brain,
+  Layout,
+  Code,
+  Users,
   Zap,
-  Package,
   Rocket,
   Shield,
-  User,
-  Check,
-  Clock,
-  Calendar,
-  Infinity
+  CheckCircle,
+  Target,
+  Building,
+  ArrowRight
 } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 import UserInfoModal from '@/client/home/components/UserInfoModal';
 import { useAuth } from '@/client/home/hooks/AuthProvider';
-import { useQuery } from '@tanstack/react-query';
-import { membershipPlanClient, publicSettingsClient } from '@/client/api';
-import type { InferResponseType } from 'hono/client';
 
 export default function HomePage() {
   const navigate = useNavigate();
   const { user, isAuthenticated } = useAuth();
-  const [hoveredFeature, setHoveredFeature] = useState<number | null>(null);
   const [showUserModal, setShowUserModal] = useState(false);
-  const [registerEnabled, setRegisterEnabled] = useState(true);
-
-  const { data: membershipPlans } = useQuery({
-    queryKey: ['membership-plans-home'],
-    queryFn: async () => {
-      const response = await membershipPlanClient.$get();
-      if (!response.ok) throw new Error('获取套餐失败');
-      const data = await response.json();
-      return data.data.filter((plan: any) => plan.isActive === 1).sort((a: any, b: any) => a.sortOrder - b.sortOrder);
-    },
-  });
-
-  // 获取首页注册设置状态
-  useQuery({
-    queryKey: ['register-setting-public'],
-    queryFn: async () => {
-      try {
-        const res = await publicSettingsClient.registerStatus.$get();
-        if (res.status === 200) {
-          const data = await res.json();
-          setRegisterEnabled(data.enabled);
-        }
-      } catch (error) {
-        console.error('获取注册设置失败:', error);
-      }
-      return null;
-    }
-  });
 
-  const features = [
+  const services = [
     {
-      icon: <FileText className="h-8 w-8" />,
-      title: "元亨Word模板批量处理",
-      description: "支持.docx格式，最大10MB，智能字段替换",
-      color: "text-blue-600"
+      icon: <Brain className="h-8 w-8" />,
+      title: "AI工具平台",
+      description: "智能文档处理、图像识别、数据分析等AI解决方案",
+      link: "/ai-tools",
+      color: "text-blue-600",
+      bgColor: "bg-blue-50"
     },
     {
-      icon: <Image className="h-8 w-8" />,
-      title: "智能图片处理",
-      description: "支持6种图片格式，自动尺寸控制，保持比例",
-      color: "text-green-600"
+      icon: <Layout className="h-8 w-8" />,
+      title: "设计规划服务",
+      description: "UI/UX设计、品牌视觉、产品架构等专业设计服务",
+      link: "/design-planning",
+      color: "text-purple-600",
+      bgColor: "bg-purple-50"
     },
     {
-      icon: <Upload className="h-8 w-8" />,
-      title: "Excel数据驱动",
-      description: "一键导入Excel数据，批量生成个性化文档",
-      color: "text-purple-600"
+      icon: <Code className="h-8 w-8" />,
+      title: "软件开发",
+      description: "Web应用、桌面应用、云原生等全方位开发服务",
+      link: "/software-requirements",
+      color: "text-green-600",
+      bgColor: "bg-green-50"
     },
     {
-      icon: <Settings className="h-8 w-8" />,
-      title: "灵活配置",
-      description: "自定义图片尺寸，实时预览，进度跟踪",
-      color: "text-orange-600"
+      icon: <Users className="h-8 w-8" />,
+      title: "人才共享",
+      description: "专业人才派遣、项目外包、技术咨询等灵活合作",
+      link: "/talent-sharing",
+      color: "text-orange-600",
+      bgColor: "bg-orange-50"
     }
   ];
 
   const stats = [
-    { value: "10MB", label: "Word模板上限", icon: <FileText className="h-5 w-5" /> },
-    { value: "500MB", label: "图片压缩包上限", icon: <Package className="h-5 w-5" /> },
-    { value: "1000+", label: "支持像素范围", icon: <Image className="h-5 w-5" /> },
-    { value: "6种", label: "图片格式支持", icon: <CheckCircle className="h-5 w-5" /> }
+    { value: "2018", label: "成立时间", icon: <Building className="h-5 w-5" /> },
+    { value: "50+", label: "专业团队", icon: <Users className="h-5 w-5" /> },
+    { value: "200+", label: "成功项目", icon: <CheckCircle className="h-5 w-5" /> },
+    { value: "1000+", label: "服务客户", icon: <Target className="h-5 w-5" /> }
   ];
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50">
-      {/* Header Navigation */}
-      <header className="fixed top-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-sm border-b">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between items-center h-16">
-            <div className="flex items-center">
-              <h1 className="text-xl font-bold text-gray-900">元亨Word</h1>
-            </div>
-            
-            <nav className="hidden md:flex items-center space-x-8">
-              <button
-                onClick={() => navigate('/templates')}
-                className="text-gray-700 hover:text-blue-600 transition-colors font-medium"
-              >
-                文档中心
-              </button>
-              <button
-                onClick={() => navigate('/pricing')}
-                className="text-gray-700 hover:text-blue-600 transition-colors font-medium"
-              >
-                收费标准
-              </button>
-              {isAuthenticated ? (
-                <button
-                  onClick={() => setShowUserModal(true)}
-                  className="flex items-center space-x-2 text-gray-700 hover:text-blue-600 transition-colors font-medium"
-                >
-                  <User className="h-5 w-5" />
-                  <span>{user?.nickname || user?.username || '个人中心'}</span>
-                </button>
-              ) : (
-                <>
-                  <button
-                    onClick={() => navigate('/login')}
-                    className="text-gray-700 hover:text-blue-600 transition-colors font-medium"
-                  >
-                    登录
-                  </button>
-                  {registerEnabled && (
-                    <button
-                      // onClick={() => navigate('/register')}
-                      // className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors font-medium"
-                    >
-                      {/* 注册 */}
-                    </button>
-                  )}
-                </>
-              )}
-            </nav>
-          </div>
-        </div>
-      </header>
-
       {/* Hero Section */}
       <div className="relative overflow-hidden">
         <div className="absolute inset-0 bg-gradient-to-r from-blue-600/5 to-purple-600/5" />
@@ -157,37 +77,38 @@ export default function HomePage() {
           <div className="text-center">
             <div className="inline-flex items-center px-4 py-2 rounded-full bg-blue-100 text-blue-800 text-sm font-medium mb-6">
               <Zap className="h-4 w-4 mr-2" />
-              AI驱动的文档批量处理工具
+              专业AI技术解决方案提供商
             </div>
             
             <h1 className="text-5xl md:text-6xl font-bold text-gray-900 mb-6">
-              元亨Word批量处理
+              元亨科技
               <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600">
-                增强版
+                引领智能未来
               </span>
             </h1>
             
             <p className="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
-              一键批量生成个性化Word文档，智能图片处理，高效数据驱动，
-              让繁琐的文档工作变得简单高效
+              专注于人工智能技术研发与应用，为企业提供全方位的智能化解决方案，
+              助力数字化转型和业务创新
             </p>
             
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
               <Button 
                 size="lg" 
                 className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-8 py-3 text-lg"
-                onClick={() => navigate('/word-preview')}
+                onClick={() => navigate('/ai-tools')}
               >
                 <Rocket className="h-5 w-5 mr-2" />
-                立即开始
+                了解产品
               </Button>
               <Button 
                 size="lg" 
                 variant="outline"
                 className="border-2 px-8 py-3 text-lg"
-                onClick={() => document.getElementById('features')?.scrollIntoView({ behavior: 'smooth' })}
+                onClick={() => navigate('/contact')}
               >
-                了解更多
+                <ArrowRight className="h-5 w-5 mr-2" />
+                联系我们
               </Button>
             </div>
           </div>
@@ -213,103 +134,40 @@ export default function HomePage() {
         </div>
       </div>
 
-      {/* Features Section */}
-      <div id="features" className="py-20 bg-white">
+      {/* Services Section */}
+      <div className="py-20 bg-white">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center mb-16">
             <h2 className="text-4xl font-bold text-gray-900 mb-4">
-              为什么选择我们
+              核心服务
             </h2>
             <p className="text-xl text-gray-600 max-w-2xl mx-auto">
-              专业、高效、智能的文档处理解决方案
+              我们提供全方位的技术服务和解决方案
             </p>
           </div>
 
-          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
-            {features.map((feature, index) => (
+          <div className="grid md:grid-cols-2 gap-8">
+            {services.map((service, index) => (
               <Card 
                 key={index}
-                className={`border-0 shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1 cursor-pointer ${
-                  hoveredFeature === index ? 'shadow-xl -translate-y-1' : ''
-                }`}
-                onMouseEnter={() => setHoveredFeature(index)}
-                onMouseLeave={() => setHoveredFeature(null)}
-                onClick={() => navigate('/word-preview')}
+                className="border-0 shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1 cursor-pointer"
+                onClick={() => navigate(service.link)}
               >
                 <CardHeader>
-                  <div className={`p-3 rounded-lg bg-gray-50 inline-block mb-4 ${feature.color}`}>
-                    {feature.icon}
+                  <div className="flex items-center mb-4">
+                    <div className={`p-3 rounded-lg ${service.bgColor} ${service.color} mr-4`}>
+                      {service.icon}
+                    </div>
+                    <CardTitle className="text-xl">{service.title}</CardTitle>
                   </div>
-                  <CardTitle className="text-xl">{feature.title}</CardTitle>
-                </CardHeader>
-                <CardContent>
                   <CardDescription className="text-base">
-                    {feature.description}
+                    {service.description}
                   </CardDescription>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      {/* Pricing Section */}
-      <div className="py-20 bg-gradient-to-br from-gray-50 to-blue-50">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center mb-16">
-            <h2 className="text-4xl font-bold text-gray-900 mb-4">
-              灵活的会员套餐
-            </h2>
-            <p className="text-xl text-gray-600">
-              选择最适合您的套餐，享受高效文档处理体验
-            </p>
-          </div>
-
-          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
-            {membershipPlans?.map((plan) => (
-              <Card
-                key={plan.id}
-                className={`relative border-0 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 ${
-                  plan.type === 'yearly' ? 'ring-2 ring-blue-500' : ''
-                }`}
-              >
-                {plan.type === 'yearly' && (
-                  <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
-                    <Badge className="bg-gradient-to-r from-blue-600 to-purple-600 text-white">
-                      推荐
-                    </Badge>
-                  </div>
-                )}
-                
-                <CardHeader>
-                  <div className="text-center">
-                    <h3 className="text-2xl font-bold mb-2">{plan.name}</h3>
-                    <div className="text-4xl font-bold text-blue-600 mb-2">
-                      ¥{plan.price}
-                    </div>
-                    <p className="text-gray-600">
-                      {plan.durationDays === 0 ? '永久有效' :
-                       plan.durationDays === 1 ? '24小时有效' :
-                       `${plan.durationDays}天有效`}
-                    </p>
-                  </div>
                 </CardHeader>
-                
                 <CardContent>
-                  <ul className="space-y-3">
-                    {plan.features?.map((feature: string, index: number) => (
-                      <li key={index} className="flex items-start">
-                        <Check className="h-5 w-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
-                        <span className="text-gray-700 text-sm">{feature}</span>
-                      </li>
-                    ))}
-                  </ul>
-                  
-                  <Button
-                    className="w-full mt-6 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700"
-                    onClick={() => navigate('/pricing')}
-                  >
-                    立即选择
+                  <Button variant="ghost" className="w-full justify-between">
+                    了解更多
+                    <ArrowRight className="h-4 w-4" />
                   </Button>
                 </CardContent>
               </Card>
@@ -318,156 +176,92 @@ export default function HomePage() {
         </div>
       </div>
 
-      {/* How It Works */}
-      <div className="py-20 bg-white">
+      {/* Why Choose Us */}
+      <div className="py-20 bg-gradient-to-br from-gray-50 to-blue-50">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center mb-16">
             <h2 className="text-4xl font-bold text-gray-900 mb-4">
-              简单三步，完成批量处理
+              为什么选择元亨科技
             </h2>
             <p className="text-xl text-gray-600">
-              无需复杂配置，轻松上手
+              专业、创新、可靠的技术合作伙伴
             </p>
           </div>
 
           <div className="grid md:grid-cols-3 gap-8">
             {[
-              { step: 1, title: "上传模板", description: "选择Word模板文件，支持{字段名}和{%图片名%}占位符", icon: <Upload className="h-8 w-8" /> },
-              { step: 2, title: "导入数据", description: "上传Excel数据文件，自动匹配模板字段", icon: <FileText className="h-8 w-8" /> },
-              { step: 3, title: "批量生成", description: "一键生成所有个性化文档，支持批量下载", icon: <Download className="h-8 w-8" /> }
-            ].map((item, index) => (
-              <div key={index} className="text-center">
-                <div className="w-16 h-16 bg-blue-600 text-white rounded-full flex items-center justify-center text-2xl font-bold mx-auto mb-4">
-                  {item.step}
-                </div>
-                <h3 className="text-xl font-semibold mb-2">{item.title}</h3>
-                <p className="text-gray-600">{item.description}</p>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      {/* Application Scenarios */}
-      <div className="py-20 bg-white">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center mb-16">
-            <h2 className="text-4xl font-bold text-gray-900 mb-4">
-              应用场景
-            </h2>
-            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
-              元亨WORD批量处理广泛应用于各类重复性文档工作场景
-            </p>
-          </div>
-
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-            {[
-              {
-                title: "项目资料安装调试表",
-                description: "批量生成项目安装调试记录表，自动填充项目名称、设备型号、安装位置等关键信息",
-                icon: <FileText className="h-8 w-8" />,
-                color: "text-blue-600"
-              },
-              {
-                title: "项目勘察设计点位表",
-                description: "快速生成勘察设计点位标记文档，包含坐标、尺寸、材质等详细参数",
-                icon: <Package className="h-8 w-8" />,
-                color: "text-green-600"
-              },
               {
-                title: "合同批量生成",
-                description: "基于标准合同模板，批量生成个性化合同文档，自动填充客户信息、金额等变量",
-                icon: <Shield className="h-8 w-8" />,
-                color: "text-purple-600"
+                title: "技术实力",
+                description: "拥有资深的技术团队和前沿的技术栈，确保项目质量",
+                icon: <Zap className="h-8 w-8" />,
+                features: ["资深技术团队", "前沿技术栈", "严格质量把控"]
               },
               {
-                title: "报告文档自动化",
-                description: "将固定格式的报告模板与数据源结合，自动生成包含不同数据的完整报告",
-                icon: <FileText className="h-8 w-8" />,
-                color: "text-orange-600"
-              },
-              {
-                title: "证书批量制作",
-                description: "批量生成各类证书、证明文件，自动填充获奖者信息、日期、编号等",
+                title: "丰富经验",
+                description: "服务过众多行业客户，积累了丰富的项目经验",
                 icon: <CheckCircle className="h-8 w-8" />,
-                color: "text-red-600"
+                features: ["200+成功项目", "多行业经验", "深度客户理解"]
               },
               {
-                title: "表格数据填充",
-                description: "将Excel数据批量填充到Word表格模板中，适用于各类统计报表生成",
-                icon: <Settings className="h-8 w-8" />,
-                color: "text-indigo-600"
+                title: "持续创新",
+                description: "紧跟技术发展趋势，持续创新产品和服务",
+                icon: <Rocket className="h-8 w-8" />,
+                features: ["技术研发投入", "产品迭代优化", "服务创新升级"]
               }
-            ].map((scenario, index) => (
-              <Card key={index} className="border-0 shadow-lg hover:shadow-xl transition-all duration-300">
+            ].map((item, index) => (
+              <Card key={index} className="border-0 shadow-lg text-center">
                 <CardHeader>
-                  <div className={`p-3 rounded-lg bg-gray-50 inline-block mb-4 ${scenario.color}`}>
-                    {scenario.icon}
+                  <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4 text-blue-600">
+                    {item.icon}
                   </div>
-                  <CardTitle className="text-xl">{scenario.title}</CardTitle>
+                  <CardTitle>{item.title}</CardTitle>
+                  <CardDescription>{item.description}</CardDescription>
                 </CardHeader>
                 <CardContent>
-                  <CardDescription className="text-base">
-                    {scenario.description}
-                  </CardDescription>
+                  <ul className="space-y-2">
+                    {item.features.map((feature, featureIndex) => (
+                      <li key={featureIndex} className="text-sm text-gray-600">
+                        • {feature}
+                      </li>
+                    ))}
+                  </ul>
                 </CardContent>
               </Card>
             ))}
           </div>
-
-          <div className="mt-12 text-center">
-            <div className="bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl p-8">
-              <h3 className="text-2xl font-bold text-gray-900 mb-4">核心技术特征</h3>
-              <p className="text-lg text-gray-700 max-w-4xl mx-auto">
-                适用于所有符合"基础格式固定、核心信息可变量替换"特征的文档场景。
-                通过自动化"重复的格式排版、固定内容录入"工作，让您专注于"差异化信息填充"，
-                大幅减少人工冗余操作，提升工作效率10倍以上。
-              </p>
-            </div>
-          </div>
         </div>
       </div>
 
       {/* CTA Section */}
-      <div className="py-20 bg-gradient-to-r from-blue-600 to-purple-600">
+      <div className="py-20 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
         <div className="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8">
-          <h2 className="text-4xl font-bold text-white mb-4">
-            开始您的文档批量处理之旅
+          <h2 className="text-4xl font-bold mb-4">
+            开启智能技术合作
           </h2>
           <p className="text-xl text-blue-100 mb-8">
-            立即体验高效、智能的文档处理方式
+            让我们共同打造卓越的技术解决方案
           </p>
-          <Button 
-            size="xl" 
-            className="bg-white text-blue-600 hover:bg-gray-100 px-12 py-4 text-xl font-semibold"
-            onClick={() => navigate('/word-preview')}
-          >
-            <Shield className="h-5 w-5 mr-2" />
-            请跟管理联系 微信 andree123654
-          </Button>
-        </div>
-      </div>
-
-      {/* Footer */}
-      <footer className="bg-gray-900 text-white py-12">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center">
-            <h3 className="text-2xl font-bold mb-4">元亨Word批量处理工具</h3>
-            <p className="text-gray-400 mb-6">
-              让每一份文档都充满个性，让批量处理变得简单
-            </p>
-            <div className="flex justify-center space-x-6">
-              <Button 
-                variant="ghost" 
-                className="text-white hover:text-blue-400"
-                onClick={() => navigate('/word-preview')}
-              >
-                立即体验
-              </Button>
-            </div>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <Button 
+              size="lg"
+              variant="secondary"
+              className="bg-white text-blue-600 hover:bg-gray-100 px-8 py-3"
+              onClick={() => navigate('/contact')}
+            >
+              <ArrowRight className="h-4 w-4 mr-2" />
+              立即咨询
+            </Button>
+            <Button 
+              size="lg"
+              variant="outline"
+              className="border-white text-white hover:bg-white/10 px-8 py-3"
+              onClick={() => navigate('/about')}
+            >
+              了解公司
+            </Button>
           </div>
         </div>
-      </footer>
+      </div>
 
       <UserInfoModal
         isOpen={showUserModal}

src/client/home/pages/SoftwareRequirementsPage.tsx

@@ -0,0 +1,408 @@
+import React from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/client/components/ui/card';
+import { Button } from '@/client/components/ui/button';
+import { Badge } from '@/client/components/ui/badge';
+import { Separator } from '@/client/components/ui/separator';
+import { 
+  Code, 
+  Database, 
+  Server, 
+  Cloud, 
+  Shield, 
+  Zap,
+  CheckCircle,
+  ArrowRight,
+  Users,
+  BarChart,
+  Settings,
+  Monitor
+} from 'lucide-react';
+
+export default function SoftwareRequirementsPage() {
+  const developmentServices = [
+    {
+      icon: <Code className="h-8 w-8" />,
+      title: "Web应用开发",
+      description: "响应式网站、管理系统、电商平台等Web应用开发",
+      technologies: ["React/Vue", "Node.js", "TypeScript", "REST API"],
+      color: "text-blue-600",
+      bgColor: "bg-blue-50"
+    },
+    {
+      icon: <Monitor className="h-8 w-8" />,
+      title: "桌面应用开发",
+      description: "跨平台桌面应用程序，支持Windows、macOS、Linux",
+      technologies: ["Electron", "React Native", "Flutter", "Java"],
+      color: "text-green-600",
+      bgColor: "bg-green-50"
+    },
+    {
+      icon: <Cloud className="h-8 w-8" />,
+      title: "云原生应用",
+      description: "基于云平台的微服务架构应用开发",
+      technologies: ["Docker", "Kubernetes", "AWS/Azure", "微服务"],
+      color: "text-purple-600",
+      bgColor: "bg-purple-50"
+    },
+    {
+      icon: <Database className="h-8 w-8" />,
+      title: "数据库设计",
+      description: "数据库架构设计、优化和迁移服务",
+      technologies: ["MySQL", "PostgreSQL", "MongoDB", "Redis"],
+      color: "text-orange-600",
+      bgColor: "bg-orange-50"
+    }
+  ];
+
+  const requirementTypes = [
+    {
+      type: "功能需求",
+      description: "系统需要实现的具体功能",
+      examples: ["用户注册登录", "数据导入导出", "报表生成", "权限管理"],
+      icon: <CheckCircle className="h-6 w-6" />
+    },
+    {
+      type: "性能需求",
+      description: "系统性能指标和要求",
+      examples: ["响应时间<2秒", "并发用户数1000+", "数据存储容量", "系统可用性"],
+      icon: <Zap className="h-6 w-6" />
+    },
+    {
+      type: "安全需求",
+      description: "系统安全性和数据保护要求",
+      examples: ["数据加密", "访问控制", "审计日志", "漏洞防护"],
+      icon: <Shield className="h-6 w-6" />
+    },
+    {
+      type: "兼容性需求",
+      description: "系统兼容性和集成要求",
+      examples: ["浏览器兼容", "移动端适配", "第三方集成", "API兼容"],
+      icon: <Settings className="h-6 w-6" />
+    }
+  ];
+
+  const developmentProcess = [
+    {
+      phase: "需求分析",
+      tasks: ["业务需求收集", "功能规格定义", "技术可行性分析", "项目计划制定"],
+      duration: "1-2周",
+      deliverables: ["需求文档", "功能清单", "技术方案"]
+    },
+    {
+      phase: "系统设计",
+      tasks: ["架构设计", "数据库设计", "界面设计", "API设计"],
+      duration: "2-3周",
+      deliverables: ["设计文档", "原型设计", "技术规范"]
+    },
+    {
+      phase: "开发实现",
+      tasks: ["编码实现", "单元测试", "代码审查", "持续集成"],
+      duration: "4-8周",
+      deliverables: ["源代码", "测试报告", "部署包"]
+    },
+    {
+      phase: "测试验收",
+      tasks: ["功能测试", "性能测试", "安全测试", "用户验收"],
+      duration: "2-3周",
+      deliverables: ["测试报告", "用户手册", "验收文档"]
+    },
+    {
+      phase: "部署运维",
+      tasks: ["系统部署", "数据迁移", "培训支持", "运维监控"],
+      duration: "1-2周",
+      deliverables: ["运行系统", "运维文档", "技术支持"]
+    }
+  ];
+
+  const technologyStack = [
+    {
+      category: "前端技术",
+      technologies: ["React 19", "TypeScript", "Tailwind CSS", "Vite"],
+      icon: <Code className="h-6 w-6" />
+    },
+    {
+      category: "后端技术",
+      technologies: ["Node.js", "Hono", "TypeORM", "MySQL"],
+      icon: <Server className="h-6 w-6" />
+    },
+    {
+      category: "云服务",
+      technologies: ["Docker", "Kubernetes", "AWS/Aliyun", "MinIO"],
+      icon: <Cloud className="h-6 w-6" />
+    },
+    {
+      category: "开发工具",
+      technologies: ["Git", "VS Code", "Jest", "ESLint"],
+      icon: <Settings className="h-6 w-6" />
+    }
+  ];
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
+      {/* Hero Section */}
+      <div className="relative overflow-hidden bg-gradient-to-r from-blue-600 to-purple-600 text-white">
+        <div className="absolute inset-0 bg-black/20" />
+        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
+          <div className="text-center">
+            <div className="inline-flex items-center px-4 py-2 rounded-full bg-white/20 backdrop-blur-sm text-sm font-medium mb-6">
+              <Code className="h-4 w-4 mr-2" />
+              软件需求分析
+            </div>
+            
+            <h1 className="text-5xl md:text-6xl font-bold mb-6">
+              专业软件开发
+            </h1>
+            
+            <p className="text-xl md:text-2xl text-blue-100 max-w-3xl mx-auto mb-8">
+              从需求分析到系统实现，我们提供全方位的软件开发服务
+            </p>
+            
+            <div className="flex flex-wrap justify-center gap-6 mt-8">
+              <div className="text-center">
+                <div className="text-3xl font-bold">100+</div>
+                <div className="text-blue-200">成功项目</div>
+              </div>
+              <div className="text-center">
+                <div className="text-3xl font-bold">50+</div>
+                <div className="text-blue-200">技术专家</div>
+              </div>
+              <div className="text-center">
+                <div className="text-3xl font-bold">98%</div>
+                <div className="text-blue-200">项目成功率</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Development Services */}
+      <div className="py-20 bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold text-gray-900 mb-4">开发服务</h2>
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+              我们提供多种类型的软件开发服务，满足不同业务需求
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 gap-8">
+            {developmentServices.map((service, index) => (
+              <Card key={index} className="border-0 shadow-lg hover:shadow-xl transition-all duration-300">
+                <CardHeader>
+                  <div className="flex items-center mb-4">
+                    <div className={`p-3 rounded-lg ${service.bgColor} ${service.color} mr-4`}>
+                      {service.icon}
+                    </div>
+                    <CardTitle className="text-xl">{service.title}</CardTitle>
+                  </div>
+                  <CardDescription className="text-base">
+                    {service.description}
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-2">
+                    <h4 className="font-semibold text-sm text-gray-600">技术栈：</h4>
+                    <div className="flex flex-wrap gap-2">
+                      {service.technologies.map((tech, techIndex) => (
+                        <Badge key={techIndex} variant="outline" className="text-xs">
+                          {tech}
+                        </Badge>
+                      ))}
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Requirement Types */}
+      <div className="py-20 bg-gray-50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold text-gray-900 mb-4">需求分类</h2>
+            <p className="text-xl text-gray-600">全面的需求分析，确保项目成功</p>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+            {requirementTypes.map((reqType, index) => (
+              <Card key={index} className="border-0 shadow-lg text-center">
+                <CardHeader>
+                  <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4 text-blue-600">
+                    {reqType.icon}
+                  </div>
+                  <CardTitle>{reqType.type}</CardTitle>
+                  <CardDescription>{reqType.description}</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-2">
+                    {reqType.examples.map((example, exampleIndex) => (
+                      <div key={exampleIndex} className="text-sm text-gray-600">
+                        • {example}
+                      </div>
+                    ))}
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Development Process */}
+      <div className="py-20 bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold text-gray-900 mb-4">开发流程</h2>
+            <p className="text-xl text-gray-600">标准化的开发流程，确保项目质量</p>
+          </div>
+
+          <div className="space-y-8">
+            {developmentProcess.map((phase, index) => (
+              <Card key={index} className="border-0 shadow-lg">
+                <CardHeader>
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center">
+                      <div className="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center text-lg font-bold mr-4">
+                        {index + 1}
+                      </div>
+                      <div>
+                        <CardTitle>{phase.phase}</CardTitle>
+                        <CardDescription>预计时长：{phase.duration}</CardDescription>
+                      </div>
+                    </div>
+                    <Badge variant="secondary">{phase.duration}</Badge>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <div className="grid md:grid-cols-2 gap-6">
+                    <div>
+                      <h4 className="font-semibold mb-2">主要任务：</h4>
+                      <ul className="space-y-1">
+                        {phase.tasks.map((task, taskIndex) => (
+                          <li key={taskIndex} className="flex items-center text-sm text-gray-600">
+                            <CheckCircle className="h-3 w-3 text-green-500 mr-2" />
+                            {task}
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                    <div>
+                      <h4 className="font-semibold mb-2">交付成果：</h4>
+                      <ul className="space-y-1">
+                        {phase.deliverables.map((deliverable, deliverableIndex) => (
+                          <li key={deliverableIndex} className="flex items-center text-sm text-gray-600">
+                            <Zap className="h-3 w-3 text-blue-500 mr-2" />
+                            {deliverable}
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Technology Stack */}
+      <div className="py-20 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold mb-4">技术栈</h2>
+            <p className="text-xl text-blue-100">我们采用前沿的技术栈，确保项目质量</p>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+            {technologyStack.map((tech, index) => (
+              <Card key={index} className="border-0 bg-white/10 backdrop-blur-sm">
+                <CardHeader className="text-center">
+                  <div className="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
+                    {tech.icon}
+                  </div>
+                  <CardTitle className="text-white">{tech.category}</CardTitle>
+                </CardHeader>
+                <CardContent className="text-center">
+                  <div className="space-y-2">
+                    {tech.technologies.map((technology, techIndex) => (
+                      <div key={techIndex} className="text-blue-100 text-sm">
+                        {technology}
+                      </div>
+                    ))}
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Quality Assurance */}
+      <div className="py-20 bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold text-gray-900 mb-4">质量保证</h2>
+            <p className="text-xl text-gray-600">严格的质量控制流程，确保软件质量</p>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-8">
+            {[
+              {
+                title: "代码质量",
+                description: "代码规范检查、单元测试、代码审查",
+                metrics: ["代码覆盖率>90%", "无严重bug", "符合编码规范"]
+              },
+              {
+                title: "性能测试",
+                description: "压力测试、负载测试、性能优化",
+                metrics: ["响应时间<2s", "并发用户1000+", "99.9%可用性"]
+              },
+              {
+                title: "安全审计",
+                description: "安全漏洞扫描、渗透测试、数据保护",
+                metrics: ["OWASP合规", "数据加密", "访问控制"]
+              }
+            ].map((qa, index) => (
+              <Card key={index} className="border-0 shadow-lg text-center">
+                <CardHeader>
+                  <CardTitle>{qa.title}</CardTitle>
+                  <CardDescription>{qa.description}</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-2">
+                    {qa.metrics.map((metric, metricIndex) => (
+                      <div key={metricIndex} className="text-sm text-gray-600">
+                        • {metric}
+                      </div>
+                    ))}
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* CTA Section */}
+      <div className="py-20 bg-gray-50">
+        <div className="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8">
+          <h2 className="text-4xl font-bold text-gray-900 mb-4">
+            开始您的软件开发项目
+          </h2>
+          <p className="text-xl text-gray-600 mb-8">
+            让我们共同打造高质量的软件解决方案
+          </p>
+          <Button 
+            size="lg"
+            className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3"
+          >
+            <ArrowRight className="h-4 w-4 mr-2" />
+            咨询开发需求
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/client/home/pages/TalentSharingPage.tsx

@@ -0,0 +1,413 @@
+import React from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/client/components/ui/card';
+import { Button } from '@/client/components/ui/button';
+import { Badge } from '@/client/components/ui/badge';
+import { Separator } from '@/client/components/ui/separator';
+import {
+  Users,
+  Briefcase,
+  GraduationCap,
+  MapPin,
+  Clock,
+  CheckCircle,
+  ArrowRight,
+  Zap,
+  Shield,
+  BarChart,
+  MessageCircle,
+  Code,
+  Palette,
+  Brain,
+  Cloud
+} from 'lucide-react';
+
+export default function TalentSharingPage() {
+  const talentCategories = [
+    {
+      icon: <Code className="h-8 w-8" />,
+      title: "软件开发工程师",
+      description: "全栈开发、前端、后端、移动端开发专家",
+      skills: ["JavaScript/TypeScript", "React/Vue", "Node.js", "数据库"],
+      demand: "高",
+      avgSalary: "15-30K",
+      color: "text-blue-600",
+      bgColor: "bg-blue-50"
+    },
+    {
+      icon: <Palette className="h-8 w-8" />,
+      title: "UI/UX设计师",
+      description: "用户体验设计、界面设计、交互设计专家",
+      skills: ["Figma/Sketch", "用户研究", "原型设计", "视觉设计"],
+      demand: "中高",
+      avgSalary: "12-25K",
+      color: "text-purple-600",
+      bgColor: "bg-purple-50"
+    },
+    {
+      icon: <Brain className="h-8 w-8" />,
+      title: "AI工程师",
+      description: "机器学习、深度学习、自然语言处理专家",
+      skills: ["Python", "TensorFlow/PyTorch", "数据分析", "算法优化"],
+      demand: "极高",
+      avgSalary: "20-40K",
+      color: "text-green-600",
+      bgColor: "bg-green-50"
+    },
+    {
+      icon: <Cloud className="h-8 w-8" />,
+      title: "运维工程师",
+      description: "系统运维、云平台管理、DevOps专家",
+      skills: ["Linux", "Docker/K8s", "AWS/Aliyun", "监控告警"],
+      demand: "中",
+      avgSalary: "15-28K",
+      color: "text-orange-600",
+      bgColor: "bg-orange-50"
+    }
+  ];
+
+  const cooperationModels = [
+    {
+      model: "项目外包",
+      description: "按项目需求外包开发，固定价格或按工时计费",
+      advantages: ["成本可控", "专业团队", "质量保证", "进度明确"],
+      suitable: "短期项目、特定功能开发",
+      icon: <Briefcase className="h-6 w-6" />
+    },
+    {
+      model: "人才派遣",
+      description: "派遣专业技术人员到客户现场工作",
+      advantages: ["灵活用工", "专业匹配", "管理简便", "成本优化"],
+      suitable: "长期项目、技术团队补充",
+      icon: <Users className="h-6 w-6" />
+    },
+    {
+      model: "技术咨询",
+      description: "提供技术方案咨询、架构设计等服务",
+      advantages: ["专家指导", "技术评估", "方案优化", "风险控制"],
+      suitable: "技术选型、系统架构设计",
+      icon: <MessageCircle className="h-6 w-6" />
+    },
+    {
+      model: "培训服务",
+      description: "技术培训、团队能力提升服务",
+      advantages: ["定制课程", "实战演练", "持续支持", "效果评估"],
+      suitable: "团队技术能力提升",
+      icon: <GraduationCap className="h-6 w-6" />
+    }
+  ];
+
+  const successStories = [
+    {
+      company: "某金融科技公司",
+      challenge: "急需AI工程师开发智能风控系统",
+      solution: "派遣3名AI工程师，6个月完成系统开发",
+      results: ["风控准确率提升30%", "人工审核减少70%", "项目提前2周完成"],
+      duration: "6个月"
+    },
+    {
+      company: "某电商平台",
+      challenge: "需要全栈开发团队重构系统",
+      solution: "外包10人团队，完成系统架构升级",
+      results: ["系统性能提升5倍", "用户体验大幅改善", "开发成本节约40%"],
+      duration: "8个月"
+    },
+    {
+      company: "某教育机构",
+      challenge: "缺乏UI/UX设计能力",
+      solution: "长期合作设计团队，提供持续设计支持",
+      results: ["产品设计质量提升", "用户满意度达95%", "设计效率提高3倍"],
+      duration: "持续合作"
+    }
+  ];
+
+  const talentAdvantages = [
+    {
+      title: "严格筛选",
+      description: "每位人才都经过严格的技术面试和背景调查",
+      icon: <Shield className="h-8 w-8" />
+    },
+    {
+      title: "专业匹配",
+      description: "根据项目需求精准匹配最合适的人才",
+      icon: <Zap className="h-8 w-8" />
+    },
+    {
+      title: "持续支持",
+      description: "项目期间提供全程技术支持和质量保障",
+      icon: <CheckCircle className="h-8 w-8" />
+    },
+    {
+      title: "灵活合作",
+      description: "支持多种合作模式，满足不同业务需求",
+      icon: <BarChart className="h-8 w-8" />
+    }
+  ];
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
+      {/* Hero Section */}
+      <div className="relative overflow-hidden bg-gradient-to-r from-blue-600 to-purple-600 text-white">
+        <div className="absolute inset-0 bg-black/20" />
+        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
+          <div className="text-center">
+            <div className="inline-flex items-center px-4 py-2 rounded-full bg-white/20 backdrop-blur-sm text-sm font-medium mb-6">
+              <Users className="h-4 w-4 mr-2" />
+              共享人才平台
+            </div>
+            
+            <h1 className="text-5xl md:text-6xl font-bold mb-6">
+              专业人才共享
+            </h1>
+            
+            <p className="text-xl md:text-2xl text-blue-100 max-w-3xl mx-auto mb-8">
+              连接优秀人才与企业需求，提供灵活高效的人才共享服务
+            </p>
+            
+            <div className="flex flex-wrap justify-center gap-6 mt-8">
+              <div className="text-center">
+                <div className="text-3xl font-bold">500+</div>
+                <div className="text-blue-200">专业人才</div>
+              </div>
+              <div className="text-center">
+                <div className="text-3xl font-bold">100+</div>
+                <div className="text-blue-200">合作企业</div>
+              </div>
+              <div className="text-center">
+                <div className="text-3xl font-bold">95%</div>
+                <div className="text-blue-200">匹配成功率</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Talent Categories */}
+      <div className="py-20 bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold text-gray-900 mb-4">人才分类</h2>
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+              我们拥有各领域的专业人才，满足不同技术需求
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 gap-8">
+            {talentCategories.map((category, index) => (
+              <Card key={index} className="border-0 shadow-lg hover:shadow-xl transition-all duration-300">
+                <CardHeader>
+                  <div className="flex items-center justify-between mb-4">
+                    <div className="flex items-center">
+                      <div className={`p-3 rounded-lg ${category.bgColor} ${category.color} mr-4`}>
+                        {category.icon}
+                      </div>
+                      <CardTitle className="text-xl">{category.title}</CardTitle>
+                    </div>
+                    <Badge variant={
+                      category.demand === "极高" ? "destructive" :
+                      category.demand === "高" ? "default" : "secondary"
+                    }>
+                      {category.demand}需求
+                    </Badge>
+                  </div>
+                  <CardDescription className="text-base">
+                    {category.description}
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-3">
+                    <div>
+                      <h4 className="font-semibold text-sm text-gray-600 mb-2">核心技能：</h4>
+                      <div className="flex flex-wrap gap-2">
+                        {category.skills.map((skill, skillIndex) => (
+                          <Badge key={skillIndex} variant="outline" className="text-xs">
+                            {skill}
+                          </Badge>
+                        ))}
+                      </div>
+                    </div>
+                    <div className="flex justify-between items-center text-sm text-gray-600">
+                      <span>平均薪资：{category.avgSalary}</span>
+                      <span>市场需求：{category.demand}</span>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Cooperation Models */}
+      <div className="py-20 bg-gray-50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold text-gray-900 mb-4">合作模式</h2>
+            <p className="text-xl text-gray-600">灵活多样的合作方式，满足不同业务场景</p>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+            {cooperationModels.map((model, index) => (
+              <Card key={index} className="border-0 shadow-lg text-center">
+                <CardHeader>
+                  <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4 text-blue-600">
+                    {model.icon}
+                  </div>
+                  <CardTitle>{model.model}</CardTitle>
+                  <CardDescription>{model.description}</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-3">
+                    <div>
+                      <h4 className="font-semibold text-sm mb-2">优势：</h4>
+                      <ul className="space-y-1 text-sm text-gray-600">
+                        {model.advantages.map((advantage, advantageIndex) => (
+                          <li key={advantageIndex}>• {advantage}</li>
+                        ))}
+                      </ul>
+                    </div>
+                    <div className="text-xs text-gray-500">
+                      适用：{model.suitable}
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Success Stories */}
+      <div className="py-20 bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold text-gray-900 mb-4">成功案例</h2>
+            <p className="text-xl text-gray-600">我们帮助众多企业解决了人才需求问题</p>
+          </div>
+
+          <div className="space-y-8">
+            {successStories.map((story, index) => (
+              <Card key={index} className="border-0 shadow-lg">
+                <CardHeader>
+                  <div className="flex items-center justify-between">
+                    <CardTitle>{story.company}</CardTitle>
+                    <Badge variant="outline">{story.duration}</Badge>
+                  </div>
+                  <CardDescription className="text-base">
+                    <strong>挑战：</strong>{story.challenge}
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="grid md:grid-cols-2 gap-6">
+                    <div>
+                      <h4 className="font-semibold mb-2">解决方案：</h4>
+                      <p className="text-gray-700">{story.solution}</p>
+                    </div>
+                    <div>
+                      <h4 className="font-semibold mb-2">成果：</h4>
+                      <ul className="space-y-1">
+                        {story.results.map((result, resultIndex) => (
+                          <li key={resultIndex} className="flex items-center text-sm text-gray-600">
+                            <CheckCircle className="h-3 w-3 text-green-500 mr-2" />
+                            {result}
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Advantages */}
+      <div className="py-20 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold mb-4">我们的优势</h2>
+            <p className="text-xl text-blue-100">为什么选择元亨科技的人才共享服务</p>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+            {talentAdvantages.map((advantage, index) => (
+              <div key={index} className="text-center">
+                <div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
+                  {advantage.icon}
+                </div>
+                <h3 className="text-xl font-semibold mb-2">{advantage.title}</h3>
+                <p className="text-blue-200">{advantage.description}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Process */}
+      <div className="py-20 bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold text-gray-900 mb-4">合作流程</h2>
+            <p className="text-xl text-gray-600">简单四步，快速启动合作</p>
+          </div>
+
+          <div className="grid md:grid-cols-4 gap-8">
+            {[
+              {
+                step: 1,
+                title: "需求沟通",
+                description: "详细了解项目需求和技术要求",
+                icon: <MessageCircle className="h-6 w-6" />
+              },
+              {
+                step: 2,
+                title: "人才匹配",
+                description: "根据需求匹配最合适的专业人才",
+                icon: <Users className="h-6 w-6" />
+              },
+              {
+                step: 3,
+                title: "面试确认",
+                description: "安排技术面试，确认合作意向",
+                icon: <CheckCircle className="h-6 w-6" />
+              },
+              {
+                step: 4,
+                title: "开始合作",
+                description: "签订合同，启动项目合作",
+                icon: <Zap className="h-6 w-6" />
+              }
+            ].map((step, index) => (
+              <div key={index} className="text-center">
+                <div className="w-16 h-16 bg-blue-600 text-white rounded-full flex items-center justify-center text-2xl font-bold mx-auto mb-4">
+                  {step.step}
+                </div>
+                <h3 className="text-xl font-semibold mb-2">{step.title}</h3>
+                <p className="text-gray-600">{step.description}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* CTA Section */}
+      <div className="py-20 bg-gray-50">
+        <div className="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8">
+          <h2 className="text-4xl font-bold text-gray-900 mb-4">
+            寻找合适的人才？
+          </h2>
+          <p className="text-xl text-gray-600 mb-8">
+            让我们帮助您快速找到最匹配的专业人才
+          </p>
+          <Button 
+            size="lg"
+            className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3"
+          >
+            <ArrowRight className="h-4 w-4 mr-2" />
+            发布人才需求
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/client/home/routes.tsx

@@ -13,55 +13,93 @@ import PricingPage from './pages/PricingPage';
 import ProfilePage from './pages/ProfilePage';
 import RechargePage from './pages/RechargePage';
 import TemplateSquare from './pages/TemplateSquare';
+import AboutPage from './pages/AboutPage';
+import AIToolsPage from './pages/AIToolsPage';
+import DesignPlanningPage from './pages/DesignPlanningPage';
+import SoftwareRequirementsPage from './pages/SoftwareRequirementsPage';
+import TalentSharingPage from './pages/TalentSharingPage';
+import ContactPage from './pages/ContactPage';
 
 export const router = createBrowserRouter([
   {
     path: '/',
-    element: <HomePage />
-  },
-  {
-    path: '/word-preview',
-    element: (
-      <ProtectedRoute>
-        <WordPreview />
-      </ProtectedRoute>
-    )
-  },
-  {
-    path: '/login',
-    element: <LoginPage />
-  },
-  {
-    path: '/register',
-    element: <RegisterPage />
-  },
-  {
-    path: '/templates',
-    element: <TemplateSquare />
-  },
-  {
-    path: '/pricing',
-    element: <PricingPage />
-  },
-  {
-    path: '/member',
-    element: (
-      <ProtectedRoute>
-        <MainLayout />
-      </ProtectedRoute>
-    ),
+    element: <MainLayout />,
     children: [
       {
         path: '',
-        element: <MemberPage />
+        element: <HomePage />
+      },
+      {
+        path: 'about',
+        element: <AboutPage />
+      },
+      {
+        path: 'ai-tools',
+        element: <AIToolsPage />
+      },
+      {
+        path: 'design-planning',
+        element: <DesignPlanningPage />
+      },
+      {
+        path: 'software-requirements',
+        element: <SoftwareRequirementsPage />
+      },
+      {
+        path: 'talent-sharing',
+        element: <TalentSharingPage />
+      },
+      {
+        path: 'contact',
+        element: <ContactPage />
       },
       {
-        path: 'profile',
-        element: <ProfilePage />
+        path: 'templates',
+        element: <TemplateSquare />
       },
       {
-        path: 'recharge',
-        element: <RechargePage />
+        path: 'pricing',
+        element: <PricingPage />
+      },
+      {
+        path: 'login',
+        element: <LoginPage />
+      },
+      {
+        path: 'register',
+        element: <RegisterPage />
+      },
+      {
+        path: 'word-preview',
+        element: (
+          <ProtectedRoute>
+            <WordPreview />
+          </ProtectedRoute>
+        )
+      },
+      {
+        path: 'member',
+        element: (
+          <ProtectedRoute>
+            <MemberPage />
+          </ProtectedRoute>
+        )
+      },
+      {
+        path: 'member/profile',
+        element: (
+          <ProtectedRoute>
+            <ProfilePage />
+          </ProtectedRoute>
+        )
+      },
+      {
+        path: 'member/recharge',
+        element: (
+          <ProtectedRoute>
+            <RechargePage />
+          </ProtectedRoute>
+        )
       },
       {
         path: '*',
@@ -70,9 +108,4 @@ export const router = createBrowserRouter([
       },
     ],
   },
-  {
-    path: '*',
-    element: <NotFoundPage />,
-    errorElement: <ErrorPage />
-  },
 ]);