feat: V2/V3组件体系与水墨雅致视觉改造

- 新增detail-v2组件库(HeroV2/V3, TrustSectionV2, CTASectionV2等)
- Hero组件水墨雅致改造:浅色宣纸底/深色墨色文字/墨韵纹理
- 方案卡片添加推荐组合徽标(Package图标)
- 独立产品页从V1组件迁移到V2/V3
- 修复why-us-section未使用导入和ESLint引号转义错误

src/components/detail/detail-case-study.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import type { CaseStudy } from '@/lib/constants/products';
+
+interface CaseStudyCardProps {
+  study: CaseStudy;
+  index: number;
+}
+
+export function CaseStudyCard({ study, index }: CaseStudyCardProps) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, margin: '-50px' }}
+      transition={{ duration: 0.5, delay: index * 0.1 }}
+      className="rounded-xl border border-gray-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md"
+    >
+      <div className="mb-3 flex items-center gap-2">
+        <span className="rounded-full bg-red-50 px-2.5 py-1 text-xs font-medium text-[#C41E3A]">
+          {study.industry}
+        </span>
+        <span className="text-sm text-gray-500">{study.client}</span>
+      </div>
+
+      <h4 className="mb-2 text-sm font-semibold text-gray-900">挑战</h4>
+      <p className="mb-4 text-sm leading-relaxed text-gray-600">{study.challenge}</p>
+
+      <h4 className="mb-2 text-sm font-semibold text-gray-900">解决方案</h4>
+      <p className="mb-4 text-sm leading-relaxed text-gray-600">{study.solution}</p>
+
+      <div className="rounded-lg bg-green-50 p-3">
+        <p className="text-sm font-medium text-green-800">{study.result}</p>
+      </div>
+    </motion.div>
+  );
+}