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

- 新增detail-v2组件库(HeroV2/V3, TrustSectionV2, CTASectionV2等) - Hero组件水墨雅致改造:浅色宣纸底/深色墨色文字/墨韵纹理 - 方案卡片添加推荐组合徽标(Package图标) - 独立产品页从V1组件迁移到V2/V3 - 修复why-us-section未使用导入和ESLint引号转义错误
2026-06-07 16:19:44 +08:00
parent 2d602c0e57
commit 724a00f582
32 changed files with 3690 additions and 87 deletions
@@ -0,0 +1,98 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { ArrowRight, MessageCircle, Download } from 'lucide-react';
+import type { HeroTheme } from '@/lib/constants/hero-themes';
+import { DESIGN_SYSTEM } from '@/lib/constants/design-system';
+
+interface DetailCTASectionV2Props {
+  theme: HeroTheme;
+  title?: string;
+  description?: string;
+  primaryAction: { label: string; href: string };
+  secondaryAction?: { label: string; href: string };
+}
+
+export function DetailCTASectionV2({
+  theme,
+  title = '准备好开始了吗？',
+  description = '联系我们，获取专属方案和报价',
+  primaryAction,
+  secondaryAction,
+}: DetailCTASectionV2Props) {
+  return (
+    <section
+      className="relative py-24 lg:py-32 overflow-hidden"
+      style={{
+        background: `linear-gradient(135deg, ${theme.gradientFrom}, ${theme.gradientTo})`,
+      }}
+    >
+      <div className="absolute inset-0">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,_rgba(255,255,255,0.05)_0%,_transparent_60%)]" />
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_50%,_rgba(196,30,58,0.08)_0%,_transparent_50%)]" />
+        <div
+          className="absolute inset-0 opacity-[0.02]"
+          style={{
+            backgroundImage: `url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 20c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10-4.477-10-10-10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
+          }}
+        />
+      </div>
+
+      <div className="container-wide relative">
+        <motion.div
+          initial={{ opacity: 0, y: 32 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: '-100px' }}
+          transition={{ duration: 0.8, ease: [0.4, 0, 0.2, 1] }}
+          className="max-w-3xl mx-auto text-center"
+        >
+          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-sm text-white/90 text-sm font-medium mb-6 border border-white/20">
+            <MessageCircle className="w-4 h-4" />
+            免费咨询
+          </div>
+
+          <h2 className={`${DESIGN_SYSTEM.typography.hero.title} text-white mb-6`}>
+            {title}
+          </h2>
+          
+          <p className="text-lg md:text-xl text-white/70 mb-12 max-w-2xl mx-auto leading-relaxed">
+            {description}
+          </p>
+
+          <div className="flex flex-col sm:flex-row items-center justify-center gap-5">
+            <motion.a
+              href={primaryAction.href}
+              whileHover={{ scale: 1.02, y: -2 }}
+              whileTap={{ scale: 0.98 }}
+              className="group relative inline-flex items-center gap-3 px-10 py-4 bg-white text-gray-900 font-bold rounded-xl shadow-2xl hover:shadow-3xl transition-all duration-300"
+            >
+              <span>{primaryAction.label}</span>
+              <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
+              <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-white to-gray-50 opacity-0 group-hover:opacity-100 transition-opacity" />
+            </motion.a>
+
+            {secondaryAction && (
+              <a
+                href={secondaryAction.href}
+                className="group inline-flex items-center gap-2.5 px-8 py-4 text-white font-semibold rounded-xl border-2 border-white/25 hover:bg-white/10 hover:border-white/40 backdrop-blur-sm transition-all duration-300"
+              >
+                <Download className="w-5 h-5 group-hover:animate-bounce" />
+                {secondaryAction.label}
+              </a>
+            )}
+          </div>
+
+          <motion.p
+            initial={{ opacity: 0 }}
+            whileInView={{ opacity: 1 }}
+            viewport={{ once: true }}
+            transition={{ delay: 0.5, duration: 0.6 }}
+            className="mt-10 text-sm text-white/50"
+          >
+            平均响应时间 &lt; 2小时 · 7×24小时技术支持 · 无需预付费用
+          </motion.p>
+        </motion.div>
+      </div>
+    </section>
+  );
+}