feat: 统一全站设计风格、导航组件与文案逻辑自洽性修复

- 新增 InkGlowCard 墨韵流光卡片组件，统一全站卡片交互风格 - 新增 PageNav 面包屑组件，统一全站页面导航 - 统一色彩体系、排版层级、间距节奏和动画风格 - 修复 CTA 区品牌名称错误（诺瓦隆→睿新致遠） - 修复 ERP 产品卖点与年费制定价矛盾 - 导航下拉补充 SDS 和 OA 产品 - 统一全站数据指标为 12+年核心团队经验、6自研产品、10+团队成员 - 移除不可靠的 100%客户满意度和 30+行业专家指标 - 修复新闻时间线不合理问题，调整里程碑节奏 - 统一响应承诺为工作日快速响应 - 服务第4项重命名为行业方案实施，厘清概念 - 服务详情页效果数据改为定性描述 - 删除 cases 模块，精简代码库
2026-05-02 08:11:47 +08:00
parent 307e0a654e
commit a272e58aaa
64 changed files with 1934 additions and 2995 deletions
@@ -0,0 +1,133 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { StaticLink } from '@/components/ui/static-link';
+import { Button } from '@/components/ui/button';
+import { PageNav } from '@/components/layout/page-nav';
+import { ArrowRight, AlertTriangle, CheckCircle2, Package } from 'lucide-react';
+import type { Solution } from '@/lib/constants/solutions';
+import type { Product } from '@/lib/constants/products';
+
+interface SolutionDetailClientProps {
+  solution: Solution;
+  relatedProducts: Product[];
+}
+
+export function SolutionDetailClient({ solution, relatedProducts }: SolutionDetailClientProps) {
+  return (
+    <div className="min-h-screen bg-white">
+      <div className="pt-32 pb-16">
+        <div className="container-wide">
+          <PageNav items={[{ label: '解决方案', href: '/solutions' }, { label: solution.title }]} />
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+            className="max-w-4xl mt-8"
+          >
+            <p className="text-sm font-medium text-[#C41E3A] mb-4 tracking-wide uppercase">
+              {solution.industry}
+            </p>
+            <h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4 tracking-tight">
+              {solution.title}
+            </h1>
+            <p className="text-xl text-[#595959] mb-2">{solution.subtitle}</p>
+            <p className="text-lg text-[#595959] leading-relaxed">
+              {solution.description}
+            </p>
+          </motion.div>
+        </div>
+      </div>
+
+      <div className="container-wide pb-20">
+        <div className="max-w-4xl space-y-16">
+          <motion.section
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+          >
+            <h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 flex items-center gap-3">
+              <AlertTriangle className="w-6 h-6 text-[#C41E3A]" />
+              行业痛点
+            </h2>
+            <div className="space-y-3">
+              {solution.challenges.map((challenge, index) => (
+                <div
+                  key={index}
+                  className="flex items-start gap-3 p-4 rounded-lg border-l-4 border-[#C41E3A] bg-[#FAFAFA]"
+                >
+                  <span className="text-[#1C1C1C] text-sm">{challenge}</span>
+                </div>
+              ))}
+            </div>
+          </motion.section>
+
+          <motion.section
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.1 }}
+          >
+            <h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 flex items-center gap-3">
+              <CheckCircle2 className="w-6 h-6 text-[#C41E3A]" />
+              解决方案
+            </h2>
+            <div className="space-y-4">
+              {solution.solutions.map((sol, index) => (
+                <div key={index} className="flex items-start gap-4">
+                  <div className="w-8 h-8 bg-[#C41E3A] rounded-full flex items-center justify-center shrink-0 text-white text-sm font-bold">
+                    {index + 1}
+                  </div>
+                  <p className="text-[#1C1C1C] pt-1 leading-relaxed">{sol}</p>
+                </div>
+              ))}
+            </div>
+          </motion.section>
+
+          {relatedProducts.length > 0 && (
+            <motion.section
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5, delay: 0.2 }}
+            >
+              <h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 flex items-center gap-3">
+                <Package className="w-6 h-6 text-[#C41E3A]" />
+                相关产品
+              </h2>
+              <div className="grid md:grid-cols-2 gap-4">
+                {relatedProducts.map((product) => (
+                  <StaticLink
+                    key={product.id}
+                    href={`/products/${product.id}`}
+                    className="group block p-6 rounded-xl border border-[#E5E5E5] bg-white hover:border-[#C41E3A]/40 hover:shadow-lg transition-all duration-300"
+                  >
+                    <h3 className="text-lg font-semibold text-[#1C1C1C] mb-2 group-hover:text-[#C41E3A] transition-colors">
+                      {product.title}
+                    </h3>
+                    <p className="text-sm text-[#595959] leading-relaxed">
+                      {product.description}
+                    </p>
+                  </StaticLink>
+                ))}
+              </div>
+            </motion.section>
+          )}
+
+          <div className="flex justify-center gap-4 pt-8 border-t border-[#E5E5E5]">
+            <Button variant="outline" size="lg" asChild>
+              <StaticLink href="/contact">联系我们</StaticLink>
+            </Button>
+            <Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white" asChild>
+              <StaticLink href="/contact">
+                立即咨询
+                <ArrowRight className="ml-2 w-4 h-4" />
+              </StaticLink>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}