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,60 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { ArrowRight } from 'lucide-react';
+import type { HeroTheme } from '@/lib/constants/hero-themes';
+
+interface DetailCTASectionProps {
+  theme: HeroTheme;
+  title?: string;
+  description?: string;
+  primaryAction: { label: string; href: string };
+  secondaryAction?: { label: string; href: string };
+}
+
+export function DetailCTASection({
+  theme,
+  title = '准备好开始了吗？',
+  description = '联系我们，获取专属方案和报价',
+  primaryAction,
+  secondaryAction,
+}: DetailCTASectionProps) {
+  return (
+    <section
+      className="py-16 lg:py-20"
+      style={{
+        background: `linear-gradient(135deg, ${theme.gradientFrom}, ${theme.gradientTo})`,
+      }}
+    >
+      <div className="container-wide text-center">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5 }}
+        >
+          <h2 className="text-2xl font-bold text-white lg:text-3xl">{title}</h2>
+          <p className="mx-auto mt-3 max-w-xl text-sm text-white/70">{description}</p>
+
+          <div className="mt-8 flex flex-wrap justify-center gap-4">
+            <a
+              href={primaryAction.href}
+              className="inline-flex items-center gap-2 rounded-lg bg-white px-8 py-3 text-sm font-semibold text-gray-900 shadow-lg transition-all hover:shadow-xl"
+            >
+              {primaryAction.label}
+              <ArrowRight className="h-4 w-4" />
+            </a>
+            {secondaryAction && (
+              <a
+                href={secondaryAction.href}
+                className="inline-flex items-center rounded-lg border border-white/30 px-6 py-3 text-sm font-semibold text-white transition-all hover:bg-white/10"
+              >
+                {secondaryAction.label}
+              </a>
+            )}
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}