feat(marketing): 重构营销页面与四层叙事组件体系

- 重构 About、Contact、Team 等静态营销页面
- 重构 News 新闻列表与详情页
- 重构 Products 产品目录、详情与独立产品页面
- 重构 Services 与 Solutions 服务/解决方案页面
- 重构 Detail 四层叙事组件 (Hero → Value → Trust → CTA)
- 重构 Sections 页面区块组件 (Hero, CTA, SocialProof, WhyUs 等)
- 新增 SectionHeader、ServiceCard、CaseCard 等可复用组件

src/app/(marketing)/news/[slug]/NewsDetailClient.tsx

@@ -29,7 +29,7 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
         <div className="container-wide">
           {/* Breadcrumb */}
           <nav className="flex items-center gap-2 text-sm text-[var(--color-text-muted)] mb-8">
-            <StaticLink href="/news" className="hover:text-[var(--color-brand-primary)] transition-colors duration-300">
+            <StaticLink href="/news" className="hover:text-[var(--color-brand)] transition-colors duration-300">
               新闻动态
             </StaticLink>
             <span>/</span>
@@ -42,7 +42,7 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
             transition={{ duration: 0.6, ease: EASE }}
             className="max-w-4xl"
           >
-            <Badge className="mb-4 bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary)]/20 border-0">
+            <Badge className="mb-4 bg-[var(--color-brand-bg)] text-[var(--color-brand)] hover:bg-[var(--color-brand)]/20 border-0">
               {news.category}
             </Badge>
             <h1 className="text-3xl sm:text-4xl lg:text-5xl font-semibold text-[var(--color-text-primary)] mb-5 tracking-tight leading-tight">
@@ -79,8 +79,8 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
                 />
               </div>
             ) : (
-              <div className="aspect-video bg-gradient-to-br from-[var(--color-brand-primary-bg)] to-[var(--color-bg-tertiary)] rounded-xl mb-10 flex items-center justify-center">
-                <Newspaper className="w-16 h-16 text-[var(--color-brand-primary)]/30" />
+              <div className="aspect-video bg-gradient-to-br from-[var(--color-brand-bg)] to-[var(--color-bg-tertiary)] rounded-xl mb-10 flex items-center justify-center">
+                <Newspaper className="w-16 h-16 text-[var(--color-brand)]/30" />
               </div>
             )}
 
@@ -112,14 +112,14 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
                               className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                             />
                           ) : (
-                            <div className="w-full h-full bg-gradient-to-br from-[var(--color-brand-primary-bg)] to-[var(--color-bg-tertiary)] flex items-center justify-center">
-                              <Newspaper className="w-8 h-8 text-[var(--color-brand-primary)]/30" />
+                            <div className="w-full h-full bg-gradient-to-br from-[var(--color-brand-bg)] to-[var(--color-bg-tertiary)] flex items-center justify-center">
+                              <Newspaper className="w-8 h-8 text-[var(--color-brand)]/30" />
                             </div>
                           )}
                         </div>
                         <div className="p-4">
                           <Badge variant="secondary" className="mb-2 text-xs">{related.category}</Badge>
-                          <h3 className="text-base font-semibold text-[var(--color-text-primary)] mb-1 line-clamp-2 group-hover:text-[var(--color-brand-primary)] transition-colors duration-300">
+                          <h3 className="text-base font-semibold text-[var(--color-text-primary)] mb-1 line-clamp-2 group-hover:text-[var(--color-brand)] transition-colors duration-300">
                             {related.title}
                           </h3>
                           <p className="text-sm text-[var(--color-text-muted)] line-clamp-2 leading-relaxed">{related.excerpt}</p>
@@ -140,7 +140,7 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
                 </Button>
               </StaticLink>
               <StaticLink href="/contact">
-                <Button size="lg" className="bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white">
+                <Button size="lg" className="bg-[var(--color-brand)] hover:bg-[var(--color-brand-hover)] text-white">
                   联系我们
                 </Button>
               </StaticLink>

src/app/(marketing)/news/[slug]/page.tsx

@@ -1,23 +1,24 @@
+import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
-import { NEWS, COMPANY_INFO } from '@/lib/constants';
-import { NewsDetailClient } from './NewsDetailClient';
+import { COMPANY_INFO } from '@/lib/constants';
+import { getPublishedItemBySlug, getPublishedItems, getAllPublishedSlugs } from '@/lib/cms/data-server';
+import type { NewsItem } from '@/lib/constants/news';
+import NewsDetailContentV3 from '../news-detail-content-v3';
 
 export async function generateStaticParams() {
-  return NEWS.map((news) => ({
-    slug: news.id,
-  }));
+  const slugs = await getAllPublishedSlugs('news');
+  return slugs.map((s) => ({ slug: s.slug }));
 }
 
-export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
   const { slug } = await params;
-  const news = NEWS.find((n) => n.id === slug);
-  
-  if (!news) {
-    return {
-      title: '新闻未找到',
-    };
+  const item = await getPublishedItemBySlug('news', slug);
+
+  if (!item) {
+    return { title: '新闻未找到' };
   }
 
+  const news = { ...item.data, title: item.data.title || item.title } as unknown as NewsItem;
   return {
     title: `${news.title} - ${COMPANY_INFO.displayName}`,
     description: news.excerpt,
@@ -26,12 +27,20 @@ export async function generateMetadata({ params }: { params: Promise<{ slug: str
 
 export default async function NewsDetailPage({ params }: { params: Promise<{ slug: string }> }) {
   const { slug } = await params;
-  const news = NEWS.find((n) => n.id === slug);
+  const item = await getPublishedItemBySlug('news', slug);
 
-  if (!news) {
+  if (!item) {
     notFound();
   }
 
-  const serializedNews = JSON.parse(JSON.stringify(news));
-  return <NewsDetailClient news={serializedNews} />;
-}
+  const news = { ...item.data, title: item.data.title || item.title } as unknown as NewsItem;
+
+  // Fetch related news by same category
+  const allNews = await getPublishedItems('news');
+  const relatedNews = allNews
+    .filter((n) => n.slug !== slug && (n.data as Record<string, unknown>).category === (item.data as Record<string, unknown>).category)
+    .slice(0, 3)
+    .map((n) => ({ ...n.data, title: n.data.title || n.title } as unknown as NewsItem));
+
+  return <NewsDetailContentV3 news={JSON.parse(JSON.stringify(news))} relatedNews={JSON.parse(JSON.stringify(relatedNews))} />;
+}

src/app/(marketing)/news/page.tsx

@@ -1,229 +1,16 @@
-'use client';
+import { Metadata } from 'next';
+import { COMPANY_INFO } from '@/lib/constants';
+import { getPublishedItems } from '@/lib/cms/data-server';
+import type { NewsItem } from '@/lib/constants/news';
+import NewsContentV3 from './news-content-v3';
 
-import { useState, useMemo, ChangeEvent, useEffect } from 'react';
-import { motion } from 'framer-motion';
-import { useReducedMotion } from '@/hooks/use-reduced-motion';
-import { NEWS, COMPANY_INFO } from '@/lib/constants';
-import { Badge } from '@/components/ui/badge';
-import { Input } from '@/components/ui/input';
-import { Button } from '@/components/ui/button';
-import { StaticLink } from '@/components/ui/static-link';
-import { LoadingState } from '@/components/ui/loading-state';
-import { InkCard } from '@/components/ui/ink-wash';
-import { Search, Calendar, ChevronLeft, ChevronRight, ArrowRight, Newspaper } from 'lucide-react';
+export const metadata: Metadata = {
+  title: `新闻动态 - ${COMPANY_INFO.displayName}`,
+  description: `了解${COMPANY_INFO.displayName}的最新动态、行业洞察与技术创新。`,
+};
 
-const EASE = [0.25, 1, 0.5, 1] as const;
-
-const categories = ['全部', '公司新闻', '研发动态'];
-const ITEMS_PER_PAGE = 9;
-
-export default function NewsListPage() {
-  const shouldReduceMotion = useReducedMotion();
-  const [selectedCategory, setSelectedCategory] = useState('全部');
-  const [searchQuery, setSearchQuery] = useState('');
-  const [currentPage, setCurrentPage] = useState(1);
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    const timer = setTimeout(() => setIsLoading(false), 600);
-    return () => clearTimeout(timer);
-  }, []);
-
-  const filteredNews = useMemo(() => {
-    return NEWS.filter((newsItem) => {
-      const matchesCategory = selectedCategory === '全部' || newsItem.category === selectedCategory;
-      const matchesSearch =
-        newsItem.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        newsItem.excerpt.toLowerCase().includes(searchQuery.toLowerCase());
-      return matchesCategory && matchesSearch;
-    });
-  }, [selectedCategory, searchQuery]);
-
-  const totalPages = Math.ceil(filteredNews.length / ITEMS_PER_PAGE);
-  const paginatedNews = useMemo(() => {
-    const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
-    return filteredNews.slice(startIndex, startIndex + ITEMS_PER_PAGE);
-  }, [filteredNews, currentPage]);
-
-  const handlePageChange = (page: number) => {
-    setCurrentPage(page);
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  };
-
-  const handleCategoryChange = (category: string) => {
-    setSelectedCategory(category);
-    setCurrentPage(1);
-  };
-
-  const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setSearchQuery(e.target.value);
-    setCurrentPage(1);
-  };
-
-  return (
-    <div className="min-h-screen bg-[var(--color-bg-primary)]">
-      {/* Hero */}
-      <section className="relative pt-32 pb-12 overflow-hidden">
-        <div className="container-wide relative z-10">
-          <motion.div
-            initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6, ease: EASE }}
-            className="max-w-3xl"
-          >
-            <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)] text-xs font-medium border border-[var(--color-brand-primary)]/10 mb-6">
-              新闻动态
-            </div>
-            <p className="text-base sm:text-lg text-[var(--color-text-muted)] mb-3">
-              了解行业趋势，把握数字化脉搏
-            </p>
-            <h1 className="text-4xl md:text-5xl lg:text-6xl tracking-tight mb-6 leading-[1.12]">
-              新闻<span className="text-[var(--color-brand-primary)] font-calligraphy">动态</span>
-            </h1>
-            <p className="text-base sm:text-lg text-[var(--color-text-muted)] max-w-lg leading-relaxed">
-              {COMPANY_INFO.displayName}最新动态、产品更新与行业洞察
-            </p>
-          </motion.div>
-        </div>
-      </section>
-
-      {/* Filters + List */}
-      <section className="pb-16 md:pb-24">
-        <div className="container-wide">
-          <motion.div
-            initial={shouldReduceMotion ? {} : { opacity: 0, y: 16 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.5, ease: EASE }}
-            className="mb-10 space-y-4"
-          >
-            <div className="flex flex-wrap gap-2">
-              {categories.map((category) => (
-                <Button
-                  key={category}
-                  variant={selectedCategory === category ? 'default' : 'outline'}
-                  onClick={() => handleCategoryChange(category)}
-                  className={
-                    selectedCategory === category
-                      ? 'bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white'
-                      : ''
-                  }
-                >
-                  {category}
-                </Button>
-              ))}
-            </div>
-
-            <div className="relative max-w-md">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[var(--color-text-muted)] w-5 h-5" />
-              <Input
-                type="text"
-                placeholder="搜索新闻..."
-                value={searchQuery}
-                onChange={handleSearchChange}
-                className="pl-10"
-                aria-label="搜索新闻"
-              />
-            </div>
-          </motion.div>
-
-          {paginatedNews.length === 0 ? (
-            <div className="text-center py-20">
-              <Newspaper className="w-12 h-12 text-[var(--color-border)] mx-auto mb-4" />
-              <p className="text-lg text-[var(--color-text-muted)]">没有找到相关新闻</p>
-            </div>
-          ) : (
-            <LoadingState isLoading={isLoading} variant="list">
-              <>
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
-                  {paginatedNews.map((newsItem, index) => (
-                    <motion.div
-                      key={newsItem.id}
-                      initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
-                      whileInView={{ opacity: 1, y: 0 }}
-                      viewport={{ once: true }}
-                      transition={{ duration: 0.5, delay: index * 0.08, ease: EASE }}
-                    >
-                      <StaticLink href={`/news/${newsItem.id}`}>
-                        <InkCard padding="none" interactive className="h-full overflow-hidden group">
-                          {newsItem.image ? (
-                            <div className="aspect-video bg-[var(--color-bg-tertiary)] overflow-hidden">
-                              <img
-                                src={newsItem.image}
-                                alt={newsItem.title}
-                                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
-                              />
-                            </div>
-                          ) : (
-                            <div className="aspect-video bg-gradient-to-br from-[var(--color-brand-primary-bg)] to-[var(--color-bg-tertiary)] flex items-center justify-center">
-                              <Newspaper className="w-12 h-12 text-[var(--color-brand-primary)]/30" />
-                            </div>
-                          )}
-                          <div className="p-6">
-                            <div className="flex items-center gap-2 mb-3">
-                              <Badge variant="secondary" className="text-xs">{newsItem.category}</Badge>
-                              <div className="flex items-center gap-1 text-xs text-[var(--color-text-muted)]">
-                                <Calendar className="w-3 h-3" />
-                                {newsItem.date}
-                              </div>
-                            </div>
-                            <h3 className="text-lg font-semibold text-[var(--color-text-primary)] mb-2 line-clamp-2 group-hover:text-[var(--color-brand-primary)] transition-colors duration-300">
-                              {newsItem.title}
-                            </h3>
-                            <p className="text-sm text-[var(--color-text-muted)] line-clamp-3 mb-4 leading-relaxed">
-                              {newsItem.excerpt}
-                            </p>
-                            <div className="flex items-center text-[var(--color-brand-primary)] text-sm font-medium">
-                              阅读更多
-                              <ArrowRight className="ml-1 w-4 h-4 group-hover:translate-x-1 transition-transform duration-300" />
-                            </div>
-                          </div>
-                        </InkCard>
-                      </StaticLink>
-                    </motion.div>
-                  ))}
-                </div>
-
-                {totalPages > 1 && (
-                  <div className="flex justify-center items-center gap-2 mt-10">
-                    <Button
-                      variant="outline"
-                      size="icon"
-                      onClick={() => handlePageChange(currentPage - 1)}
-                      disabled={currentPage === 1}
-                    >
-                      <ChevronLeft className="w-4 h-4" />
-                    </Button>
-                    {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
-                      <Button
-                        key={page}
-                        variant={currentPage === page ? 'default' : 'outline'}
-                        size="icon"
-                        onClick={() => handlePageChange(page)}
-                        className={
-                          currentPage === page
-                            ? 'bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white'
-                            : ''
-                        }
-                      >
-                        {page}
-                      </Button>
-                    ))}
-                    <Button
-                      variant="outline"
-                      size="icon"
-                      onClick={() => handlePageChange(currentPage + 1)}
-                      disabled={currentPage === totalPages}
-                    >
-                      <ChevronRight className="w-4 h-4" />
-                    </Button>
-                  </div>
-                )}
-              </>
-            </LoadingState>
-          )}
-        </div>
-      </section>
-    </div>
-  );
-}
+export default async function NewsListPage() {
+  const items = await getPublishedItems('news');
+  const news = items.map((item) => ({ ...item.data, title: item.data.title || item.title } as unknown as NewsItem));
+  return <NewsContentV3 news={news} />;
+}