feat: 完成网站功能开发与优化

- 完善产品页面布局与交互
- 优化服务详情页用户体验
- 增强新闻模块内容展示
- 改进团队页面设计
- 优化全局样式和响应式布局
- 添加分页组件支持
- 提升性能与SEO优化
- 修复已知问题与改进代码质量

src/components/sections/services-section.tsx

@@ -31,11 +31,11 @@ export function ServicesSection() {
           initial={{ opacity: 0, y: 20 }}
           animate={isInView ? { opacity: 1, y: 0 } : {}}
           transition={{ duration: 0.6 }}
-          className="text-left max-w-3xl mx-auto mb-16"
+          className="text-center max-w-3xl mx-auto mb-16"
         >
-          <div className="w-16 h-1 bg-[#C41E3A] rounded-full mb-6" />
+          <div className="w-16 h-1 bg-[var(--color-brand-primary)] rounded-full mb-6" />
           <h2 id="services-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4">
-            我们的 <span className="text-[#C41E3A] font-calligraphy">核心业务</span>
+            我们的 <span className="text-[var(--color-brand-primary)] font-calligraphy">核心业务</span>
           </h2>
           <p className="text-lg text-[#5C5C5C] max-w-2xl">
             专业技术团队，为您提供全方位的数字化解决方案
@@ -43,23 +43,23 @@ export function ServicesSection() {
         </motion.div>
 
         {SERVICES.length > 0 ? (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+          <div className="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-6">
             {SERVICES.map((service) => {
               const Icon = iconMap[service.icon];
               return (
                 <InkCard
                   key={service.id}
-                  className="rounded-xl border border-[#E5E5E5] bg-white p-6 hover:border-[#C41E3A] transition-colors"
+                  className="rounded-xl border border-[#E5E5E5] bg-white p-6 hover:border-[var(--color-brand-primary)] transition-colors"
                 >
                   <StaticLink href={`/services/${service.id}`}>
                     <Card className="p-0 h-full border-0 shadow-none bg-transparent group cursor-pointer">
                       <CardContent className="p-0">
-                        <div className="w-12 h-12 rounded-xl bg-[#F5F5F5] flex items-center justify-center mb-4 group-hover:bg-[#C41E3A] transition-all duration-300">
+                        <div className="w-12 h-12 rounded-xl bg-[#F5F5F5] flex items-center justify-center mb-4 group-hover:bg-[var(--color-brand-primary)] transition-all duration-300">
                           {Icon && <Icon className="w-6 h-6 text-[#1C1C1C] group-hover:text-white transition-colors" />}
                         </div>
-                        <h3 className="text-xl font-semibold text-[#1C1C1C] mb-3 group-hover:text-[#C41E3A] transition-colors">{service.title}</h3>
+                        <h3 className="text-xl font-semibold text-[#1C1C1C] mb-3 group-hover:text-[var(--color-brand-primary)] transition-colors">{service.title}</h3>
                         <p className="text-[#5C5C5C] text-sm leading-relaxed">{service.description}</p>
-                        <div className="mt-4 flex items-center text-[#C41E3A] text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity">
+                        <div className="mt-4 flex items-center text-[var(--color-brand-primary)] text-sm font-medium opacity-0 md:group-hover:opacity-100 md:opacity-0 transition-opacity">
                           了解详情
                           <ArrowRight className="ml-1 w-4 h-4" />
                         </div>
@@ -83,7 +83,7 @@ export function ServicesSection() {
           className="text-center mt-12"
         >
           <StaticLink href="/services">
-            <RippleButton className="inline-flex items-center gap-2 px-6 py-2.5 border border-[#E5E5E5] rounded-lg text-sm font-medium text-[#1C1C1C] hover:border-[#C41E3A] hover:text-[#C41E3A] transition-colors">
+            <RippleButton className="inline-flex items-center gap-2 px-6 py-2.5 border border-[#E5E5E5] rounded-lg text-sm font-medium text-[#1C1C1C] hover:border-[var(--color-brand-primary)] hover:text-[var(--color-brand-primary)] transition-colors">
               查看全部服务
               <ArrowRight className="w-4 h-4" />
             </RippleButton>