build: 更新Next.js配置以支持静态导出并添加新依赖

更新next.config.ts文件以支持静态导出功能，并添加了多个新的依赖项到package.json中，包括UI组件库和动画库。同时生成了构建相关的文件和配置。

src/components/sections/about-section.tsx

@@ -0,0 +1,158 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { useInView } from 'framer-motion';
+import { useRef } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent } from '@/components/ui/card';
+import { Lightbulb, Users, Target, Award } from 'lucide-react';
+import { COMPANY_INFO, STATS } from '@/lib/constants';
+
+const values = [
+  {
+    icon: Lightbulb,
+    title: '创新驱动',
+    description: '持续探索前沿技术，以创新思维解决业务挑战，为客户创造差异化价值',
+  },
+  {
+    icon: Users,
+    title: '客户至上',
+    description: '深入理解客户需求，提供个性化解决方案，建立长期合作伙伴关系',
+  },
+  {
+    icon: Target,
+    title: '追求卓越',
+    description: '精益求精的工作态度，确保每个项目都达到最高质量标准',
+  },
+  {
+    icon: Award,
+    title: '诚信负责',
+    description: '恪守商业道德，对承诺负责，赢得客户和社会的信任与尊重',
+  },
+];
+
+const milestones = [
+  {
+    date: '2026年1月15日',
+    title: '公司成立',
+    description: '四川睿新致远科技有限公司在成都龙泉驿区正式成立，开始提供软件开发服务',
+  },
+];
+
+export function AboutSection() {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true, margin: '-100px' });
+
+  return (
+    <section id="about" className="py-24 bg-white" ref={ref}>
+      <div className="container-custom">
+        {/* 头部介绍 */}
+        <motion.div 
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.6 }}
+          className="max-w-4xl mx-auto"
+        >
+          <div className="text-center mb-16">
+            <Badge variant="outline" className="mb-4">
+              关于我们
+            </Badge>
+            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-black mb-6">
+              关于 {COMPANY_INFO.shortName}
+            </h2>
+            <p className="text-lg text-gray-600">
+              {COMPANY_INFO.slogan}
+            </p>
+          </div>
+
+          {/* 公司简介 */}
+          <div className="prose prose-lg max-w-none mb-16">
+            <h3 className="text-2xl font-bold text-black mb-4">公司简介</h3>
+            <p className="text-gray-600 mb-6 leading-relaxed">
+              {COMPANY_INFO.name}成立于{COMPANY_INFO.founded}年1月15日，总部位于{COMPANY_INFO.location}龙泉驿区幸福路12号。
+              公司专注于信息技术服务与解决方案，致力于为企业提供全方位的数字化转型支持。
+            </p>
+            <p className="text-gray-600 mb-6 leading-relaxed">
+              我们拥有一支经验丰富的技术团队，在软件开发、云计算、数据分析、信息安全等领域具有深厚的技术积累。
+              公司秉承"专注科技创新，驱动智慧未来"的理念，为客户提供高质量的产品和服务，助力企业在数字经济时代实现转型升级。
+            </p>
+          </div>
+
+          {/* 数据统计 */}
+          <motion.div 
+            initial={{ opacity: 0, y: 20 }}
+            animate={isInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.6, delay: 0.2 }}
+            className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-16"
+          >
+            {STATS.map((stat, idx) => (
+              <Card key={idx} className="text-center">
+                <CardContent className="pt-6">
+                  <div className="text-3xl sm:text-4xl font-bold text-black mb-2">{stat.value}</div>
+                  <div className="text-sm text-gray-600">{stat.label}</div>
+                </CardContent>
+              </Card>
+            ))}
+          </motion.div>
+
+          {/* 企业价值观 */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={isInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.6, delay: 0.3 }}
+            className="mb-16"
+          >
+            <h3 className="text-2xl font-bold text-black mb-8 text-center">企业价值观</h3>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              {values.map((value, idx) => (
+                <motion.div
+                  key={value.title}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={isInView ? { opacity: 1, y: 0 } : {}}
+                  transition={{ duration: 0.5, delay: 0.4 + idx * 0.1 }}
+                  className="flex items-start gap-4 p-6 bg-gray-50 rounded-xl"
+                >
+                  <div className="w-12 h-12 bg-black rounded-lg flex items-center justify-center flex-shrink-0">
+                    <value.icon className="w-6 h-6 text-white" />
+                  </div>
+                  <div>
+                    <h4 className="font-semibold text-black mb-2">{value.title}</h4>
+                    <p className="text-gray-600 text-sm">{value.description}</p>
+                  </div>
+                </motion.div>
+              ))}
+            </div>
+          </motion.div>
+
+          {/* 发展历程 */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={isInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.6, delay: 0.5 }}
+          >
+            <h3 className="text-2xl font-bold text-black mb-8 text-center">发展历程</h3>
+            <div className="space-y-6">
+              {milestones.map((milestone, idx) => (
+                <motion.div
+                  key={milestone.title}
+                  initial={{ opacity: 0, x: -20 }}
+                  animate={isInView ? { opacity: 1, x: 0 } : {}}
+                  transition={{ duration: 0.5, delay: 0.6 + idx * 0.1 }}
+                  className="flex flex-col md:flex-row md:items-start gap-4 p-6 bg-gray-50 rounded-xl"
+                >
+                  <div className="md:w-32 flex-shrink-0">
+                    <span className="text-sm font-medium text-gray-500">{milestone.date}</span>
+                  </div>
+                  <div className="flex-1">
+                    <h4 className="font-semibold text-black mb-1">{milestone.title}</h4>
+                    <p className="text-gray-600 text-sm">{milestone.description}</p>
+                  </div>
+                </motion.div>
+              ))}
+            </div>
+          </motion.div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}