feat: 重构网站UI设计并优化布局结构

重构整体UI设计，采用红色主题配色方案
优化页面布局结构，将Header和Footer移至page组件
更新按钮样式和交互效果，增强视觉反馈
调整全局字体配置，使用思源黑体作为中文字体
改进各区块卡片样式，增加悬停动画效果
优化响应式设计，提升移动端体验

src/components/sections/news-section.tsx

@@ -3,7 +3,6 @@
 import { motion } from 'framer-motion';
 import { useInView } from 'framer-motion';
 import { useRef } from 'react';
-import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { ArrowRight, Calendar } from 'lucide-react';
 import { NEWS } from '@/lib/constants';
@@ -21,13 +20,13 @@ export function NewsSection() {
           transition={{ duration: 0.6 }}
           className="text-center max-w-3xl mx-auto mb-16"
         >
-          <Badge variant="outline" className="mb-4">
+          <span className="inline-block px-4 py-1.5 rounded-full bg-[#FEF2F4] text-[#C41E3A] text-sm font-medium mb-4">
             新闻动态
-          </Badge>
-          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-black mb-6">
-            最新资讯
+          </span>
+          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#1A1A1A] mb-6">
+            最新<span className="text-[#C41E3A]">资讯</span>
           </h2>
-          <p className="text-lg text-gray-600">
+          <p className="text-lg text-[#4A4A4A]">
             了解公司最新动态、行业资讯和技术分享
           </p>
         </motion.div>
@@ -40,27 +39,29 @@ export function NewsSection() {
               animate={isInView ? { opacity: 1, y: 0 } : {}}
               transition={{ duration: 0.5, delay: 0.1 + idx * 0.1 }}
             >
-              <Card className="h-full flex flex-col group hover:shadow-lg transition-shadow">
+              <Card className="h-full flex flex-col border-[#E8E0E0] bg-white hover:border-[#C41E3A]/30 hover:shadow-lg hover:shadow-[#C41E3A]/5 transition-all duration-300 hover:-translate-y-1 group">
                 <CardHeader>
                   <div className="flex items-center gap-2 mb-3">
-                    <Badge variant="secondary">{news.category}</Badge>
-                    <span className="text-sm text-gray-500 flex items-center gap-1">
+                    <span className="inline-block px-2 py-0.5 rounded-full bg-[#FEF2F4] text-[#C41E3A] text-xs font-medium">
+                      {news.category}
+                    </span>
+                    <span className="text-sm text-[#8A8A8A] flex items-center gap-1">
                       <Calendar className="w-3 h-3" />
                       {news.date}
                     </span>
                   </div>
-                  <CardTitle className="text-xl leading-tight">{news.title}</CardTitle>
+                  <CardTitle className="text-xl leading-tight text-[#1A1A1A]">{news.title}</CardTitle>
                 </CardHeader>
                 <CardContent className="flex-1 flex flex-col">
-                  <CardDescription className="text-base leading-relaxed mb-6 flex-1">
+                  <CardDescription className="text-base leading-relaxed mb-6 flex-1 text-[#6B6B6B]">
                     {news.excerpt}
                   </CardDescription>
                   <a
                     href={`/news/${news.id}`}
-                    className="inline-flex items-center text-sm font-medium text-black hover:underline"
+                    className="inline-flex items-center text-sm font-medium text-[#C41E3A] hover:text-[#A01830] transition-colors group/link"
                   >
                     阅读更多
-                    <ArrowRight className="ml-1 w-4 h-4" />
+                    <ArrowRight className="ml-1 w-4 h-4 transition-transform group-hover/link:translate-x-1" />
                   </a>
                 </CardContent>
               </Card>
@@ -68,7 +69,7 @@ export function NewsSection() {
           ))}
         </div>
 
-        {/* 查看更多 - 改为展开更多新闻 */}
+        {/* 查看更多 */}
         <motion.div 
           initial={{ opacity: 0, y: 20 }}
           animate={isInView ? { opacity: 1, y: 0 } : {}}
@@ -77,16 +78,12 @@ export function NewsSection() {
         >
           <button 
             onClick={() => {
-              const newsSection = document.getElementById('news');
-              if (newsSection) {
-                // 展开更多新闻的逻辑可以在这里添加
-                alert('更多新闻功能开发中...');
-              }
+              alert('更多新闻功能开发中...');
             }}
-            className="inline-flex items-center text-sm font-medium text-black hover:underline cursor-pointer bg-transparent border-none"
+            className="inline-flex items-center text-sm font-medium text-[#C41E3A] hover:text-[#A01830] transition-colors bg-transparent border-none cursor-pointer group"
           >
             查看全部新闻
-            <ArrowRight className="ml-1 w-4 h-4" />
+            <ArrowRight className="ml-1 w-4 h-4 transition-transform group-hover:translate-x-1" />
           </button>
         </motion.div>
       </div>