refactor: P2 - redesign Products/Services/Solutions pages

- Products: Atlassian-style card grid with ProductCard
- Products detail: clean typography, consistent tokens
- Services: unified card layout, simplified interaction
- Services detail: consistent section styling
- Solutions: data-driven module rendering, clean borders

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

@@ -1,241 +1,97 @@
 'use client';
 
-import { useState, useMemo, useRef, ChangeEvent } from 'react';
-import { useInView } from 'framer-motion';
 import { SERVICES } from '@/lib/constants';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
-import { Input } from '@/components/ui/input';
-import { PageHeader } from '@/components/ui/page-header';
-import { Search, ArrowLeft, Code, BarChart3, Lightbulb, Puzzle, ChevronLeft, ChevronRight, Filter } from 'lucide-react';
 import { StaticLink } from '@/components/ui/static-link';
+import { Button } from '@/components/ui/button';
+import { ArrowRight, ArrowUpRight } from 'lucide-react';
 import { motion } from 'framer-motion';
 
-const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
-  Code,
-  BarChart3,
-  Lightbulb,
-  Puzzle,
-};
-
-const categories = ['全部', ...SERVICES.map((s) => s.title)];
-const ITEMS_PER_PAGE = 6;
-
 export default function ServicesPage() {
-  const [selectedCategory, setSelectedCategory] = useState('全部');
-  const [searchQuery, setSearchQuery] = useState('');
-  const [currentPage, setCurrentPage] = useState(1);
-  const contentRef = useRef(null);
-  const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
-  const filteredServices = useMemo(() => {
-    return SERVICES.filter((service) => {
-      const matchesCategory = selectedCategory === '全部' || service.title.includes(selectedCategory);
-      const matchesSearch =
-        service.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        service.description.toLowerCase().includes(searchQuery.toLowerCase());
-      return matchesCategory && matchesSearch;
-    });
-  }, [selectedCategory, searchQuery]);
-
-  const totalPages = Math.ceil(filteredServices.length / ITEMS_PER_PAGE);
-  const paginatedServices = useMemo(() => {
-    const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
-    const endIndex = startIndex + ITEMS_PER_PAGE;
-    return filteredServices.slice(startIndex, endIndex);
-  }, [filteredServices, 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-white">
-      <PageHeader
-        title="核心业务"
-        description="专业技术团队，为您提供全方位的数字化解决方案"
-      />
-
-      <div className="container-wide relative z-10 py-16" ref={contentRef}>
-        <div className="max-w-6xl mx-auto">
-<motion.div
+      <section className="pt-32 pb-16">
+        <div className="container-wide">
+          <motion.div
             initial={{ opacity: 0, y: 20 }}
-            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.6 }}
-            className="mb-8 space-y-4"
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+            className="max-w-3xl"
           >
-            <div className="flex flex-col md:flex-row gap-4 items-start md:items-center">
-              <div className="flex items-center gap-2 text-[#1C1C1C]">
-                <Filter className="w-5 h-5" />
-                <span className="font-medium">分类筛选：</span>
-              </div>
-              <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-[#C41E3A] hover:bg-[#A01830] text-white'
-                        : ''
-                    }
-                  >
-                    {category}
-                  </Button>
-                ))}
-              </div>
-            </div>
-
-            <div className="relative max-w-md">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[#5C5C5C] w-5 h-5" />
-              <Input
-                type="text"
-                placeholder="搜索服务..."
-                value={searchQuery}
-                onChange={handleSearchChange}
-                className="pl-10"
-                aria-label="搜索服务"
-              />
-            </div>
+            <p className="text-sm font-medium text-[#C41E3A] mb-4 tracking-wide uppercase">Services</p>
+            <h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6 tracking-tight">
+              核心业务
+            </h1>
+            <p className="text-lg text-[#595959] leading-relaxed">
+              专业技术团队，为您提供全方位的数字化解决方案
+            </p>
           </motion.div>
-
-          {paginatedServices.length === 0 ? (
-            <div className="text-center py-20">
-              <p className="text-xl text-[#5C5C5C]">没有找到相关服务</p>
-            </div>
-          ) : (
-            <>
-              <div className="grid md:grid-cols-2 gap-8">
-                {paginatedServices.map((service, index) => {
-                  const Icon = iconMap[service.icon];
-                  return (
-                    <motion.div
-                      key={service.id}
-                      initial={{ opacity: 0, y: 20 }}
-                      animate={isContentInView ? { opacity: 1, y: 0 } : {}}
-                      transition={{ duration: 0.5, delay: index * 0.1 }}
-                    >
-                      <StaticLink
-                        href={`/services/${service.id}`}
-                        className="group bg-white rounded-2xl border border-[#E5E5E5] overflow-hidden hover:shadow-xl transition-all duration-300 block h-full"
-                      >
-                        <div className="p-8">
-                          <div className="flex items-start gap-4 mb-4">
-                            <div className="w-14 h-14 rounded-xl bg-[#F5F5F5] flex items-center justify-center group-hover:bg-[#C41E3A] transition-all duration-300">
-                              {Icon && <Icon className="w-7 h-7 text-[#1C1C1C] group-hover:text-white transition-colors" />}
-                            </div>
-                            <div className="flex-1">
-                              <h3 className="text-xl font-semibold text-[#1C1C1C] mb-2 group-hover:text-[#C41E3A] transition-colors">
-                                {service.title}
-                              </h3>
-                              <p className="text-[#5C5C5C] text-sm leading-relaxed">
-                                {service.description}
-                              </p>
-                            </div>
-                          </div>
-
-                          <div className="mt-6 pt-4 border-t border-[#E5E5E5]">
-                            <div className="flex flex-wrap gap-2 mb-4">
-                              {service.features.slice(0, 3).map((feature, idx) => (
-                                <Badge key={idx} variant="secondary" className="text-xs">
-                                  {feature.split('：')[0]}
-                                </Badge>
-                              ))}
-                            </div>
-                            <div className="flex items-center text-[#C41E3A] font-medium group-hover:translate-x-2 transition-transform">
-                              了解详情
-                              <ArrowLeft className="w-4 h-4 ml-2 rotate-180" />
-                            </div>
-                          </div>
-                        </div>
-                      </StaticLink>
-                    </motion.div>
-                  );
-                })}
-              </div>
-
-              {totalPages > 1 && (
-                <div className="flex justify-center items-center gap-2 mt-8">
-                  <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-[#C41E3A] hover:bg-[#A01830] text-white'
-                          : ''
-                      }
-                    >
-                      {page}
-                    </Button>
-                  ))}
-                  
-                  <Button
-                    variant="outline"
-                    size="icon"
-                    onClick={() => handlePageChange(currentPage + 1)}
-                    disabled={currentPage === totalPages}
-                  >
-                    <ChevronRight className="w-4 h-4" />
-                  </Button>
-                </div>
-              )}
-
-              <div className="text-center mt-4 text-[#5C5C5C] text-sm">
-                显示 {paginatedServices.length} 条，共 {filteredServices.length} 条服务
-              </div>
-            </>
-          )}
         </div>
-      </div>
+      </section>
 
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        animate={isContentInView ? { opacity: 1, y: 0 } : {}}
-        transition={{ duration: 0.6, delay: 0.4 }}
-        className="bg-[#F5F5F5] py-16"
-      >
+      <section className="pb-20">
+        <div className="container-wide">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {SERVICES.map((service, index) => (
+              <motion.div
+                key={service.id}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.4, delay: index * 0.1, ease: [0.16, 1, 0.3, 1] }}
+              >
+                <StaticLink
+                  href={`/services/${service.id}`}
+                  className="group block p-6 rounded-xl border border-[#E5E5E5] bg-white hover:border-[#C41E3A]/40 hover:shadow-lg transition-all duration-300 h-full"
+                >
+                  <div className="flex items-start justify-between mb-4">
+                    <span className="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-[#FEF2F4] text-[#C41E3A] text-sm font-bold">
+                      {String(index + 1).padStart(2, '0')}
+                    </span>
+                    <ArrowUpRight className="w-5 h-5 text-[#595959] group-hover:text-[#C41E3A] transition-colors" />
+                  </div>
+                  <h3 className="text-lg font-semibold text-[#1C1C1C] mb-2 group-hover:text-[#C41E3A] transition-colors">
+                    {service.title}
+                  </h3>
+                  <p className="text-sm text-[#595959] leading-relaxed mb-4">
+                    {service.description}
+                  </p>
+                  <div className="flex flex-wrap gap-1.5">
+                    {service.features.slice(0, 3).map((feature, idx) => (
+                      <span
+                        key={idx}
+                        className="inline-flex items-center text-xs px-2 py-1 bg-[#F5F5F5] text-[#595959] rounded"
+                      >
+                        {feature.split('：')[0]}
+                      </span>
+                    ))}
+                  </div>
+                </StaticLink>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="bg-[#F5F5F5] py-20">
         <div className="container-wide text-center">
           <h2 className="text-3xl font-bold text-[#1C1C1C] mb-6">
             准备开始您的数字化转型之旅？
           </h2>
-          <p className="text-lg text-[#5C5C5C] mb-8 max-w-2xl mx-auto">
+          <p className="text-lg text-[#595959] mb-8 max-w-2xl mx-auto">
             让我们与您同行，共创美好未来
           </p>
-          <Button 
-            size="lg" 
+          <Button
+            size="lg"
             className="bg-[#C41E3A] hover:bg-[#A01830] text-white"
             asChild
           >
             <StaticLink href="/contact">
               立即咨询
-              <ArrowLeft className="ml-2 w-4 h-4 rotate-180" />
+              <ArrowRight className="ml-2 w-4 h-4" />
             </StaticLink>
           </Button>
         </div>
-      </motion.div>
+      </section>
     </div>
   );
 }