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

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

src/components/sections/about-section.tsx

@@ -6,13 +6,13 @@ import { useRef } from 'react';
 import { StaticLink } from '@/components/ui/static-link';
 import { RippleButton } from '@/components/ui/ripple-button';
 import { COMPANY_INFO } from '@/lib/constants';
-import { ArrowRight, CheckCircle2 } from 'lucide-react';
+import { ArrowRight, Target, HeartHandshake, Award } from 'lucide-react';
 import { useReducedMotion } from '@/hooks/use-reduced-motion';
 
 const VALUES = [
-  { title: '务实', description: '不追逐风口，只做真正为客户创造价值的事。' },
-  { title: '陪伴', description: '交付只是开始，长期陪跑才是我们的承诺。' },
-  { title: '专业', description: '用扎实的工程能力和行业经验赢得信任。' },
+  { title: '务实', description: '不追逐风口，只做真正为客户创造价值的事。', icon: Target },
+  { title: '陪伴', description: '交付只是开始，长期陪跑才是我们的承诺。', icon: HeartHandshake },
+  { title: '专业', description: '用扎实的工程能力和行业经验赢得信任。', icon: Award },
 ];
 
 export function AboutSection() {
@@ -21,7 +21,7 @@ export function AboutSection() {
   const shouldReduceMotion = useReducedMotion();
 
   return (
-    <section id="about" role="region" aria-labelledby="about-heading" className="py-24 bg-[#FAFAFA] relative" ref={ref}>
+    <section id="about" role="region" aria-labelledby="about-heading" className="py-24 bg-[#F5F5F5] relative" ref={ref}>
       {/* 网格背景 */}
       <div className="absolute inset-0 bg-[linear-gradient(rgba(28,28,28,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(28,28,28,0.02)_1px,transparent_1px)] bg-size-[40px_40px]" />
 
@@ -34,8 +34,9 @@ export function AboutSection() {
         >
           {/* 标题 */}
           <div className="text-center mb-12">
+            <div className="w-16 h-1 bg-[var(--color-brand-primary)] rounded-full mb-6" />
             <h2 id="about-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
-              关于 <span className="tracking-tight text-[#C41E3A]" style={{ fontFamily: "var(--font-aoyagi-reisho), 'Aoyagi Reisho', 'Ma Shan Zheng', 'ZCOOL XiaoWei', 'STKaiti', 'KaiTi', serif", fontWeight: 'normal', WebkitFontSmoothing: 'antialiased', MozOsxFontSmoothing: 'grayscale', textRendering: 'optimizeLegibility' }}>{COMPANY_INFO.shortName}</span>
+              关于 <span className="tracking-tight text-[var(--color-brand-primary)]" style={{ fontFamily: "var(--font-aoyagi-reisho), 'Aoyagi Reisho', 'Ma Shan Zheng', 'ZCOOL XiaoWei', 'STKaiti', 'KaiTi', serif", fontWeight: 'normal', WebkitFontSmoothing: 'antialiased', MozOsxFontSmoothing: 'grayscale', textRendering: 'optimizeLegibility' }}>{COMPANY_INFO.shortName}</span>
             </h2>
             <p className="text-lg text-[#5C5C5C] mb-8">
               {COMPANY_INFO.slogan}
@@ -49,9 +50,9 @@ export function AboutSection() {
             transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.6, delay: 0.1 }}
             className="bg-white rounded-2xl p-8 mb-12 border border-[#E5E5E5]"
           >
-            <p className="text-lg text-[#5C5C5C] leading-relaxed text-center mb-6">
-              &ldquo;企业需要的，不是一个高高在上的&lsquo;专家&rsquo;，也不是一个做完就跑的&lsquo;卖家&rsquo;，而是一个能坐下来、一起想办法的同行者。&rdquo;
-            </p>
+            <blockquote className="text-lg text-[#5C5C5C] leading-relaxed text-center mb-6 italic">
+              <p>&ldquo;企业需要的，不是一个高高在上的&lsquo;专家&rsquo;，也不是一个做完就跑的&lsquo;卖家&rsquo;，而是一个能坐下来、一起想办法的同行者。&rdquo;</p>
+            </blockquote>
             <p className="text-[#1C1C1C] font-medium text-center">
               我们只做一件事：成为您数字化转型路上，信得过的成长伙伴。
             </p>
@@ -64,18 +65,21 @@ export function AboutSection() {
             transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.6, delay: 0.15 }}
             className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16"
           >
-            {VALUES.map((value) => (
+            {VALUES.map((value) => {
+              const Icon = value.icon;
+              return (
               <div
                 key={value.title}
                 className="bg-white rounded-xl p-6 border border-[#E5E5E5] text-center"
               >
-                <div className="w-10 h-10 bg-[#C41E3A]/10 rounded-full flex items-center justify-center mx-auto mb-3">
-                  <CheckCircle2 className="w-5 h-5 text-[#C41E3A]" />
+                <div className="w-10 h-10 bg-[var(--color-brand-primary)]/10 rounded-full flex items-center justify-center mx-auto mb-3">
+                  <Icon className="w-5 h-5 text-[var(--color-brand-primary)]" />
                 </div>
                 <h3 className="text-lg font-bold text-[#1C1C1C] mb-2">{value.title}</h3>
                 <p className="text-sm text-[#5C5C5C] leading-relaxed">{value.description}</p>
               </div>
-            ))}
+              );
+            })}
           </motion.div>
 
           {/* CTA */}
@@ -86,7 +90,7 @@ export function AboutSection() {
             className="text-center"
           >
             <StaticLink href="/about">
-              <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>