张翔
40384ec024
- 增强服务数据模型，添加 challenges 和 outcomes 字段 - 简化统计数据配置，改为静态定义 - 重构多个页面组件，优化代码结构 - 新增产品、服务、解决方案相关的布局和组件 - 更新样式和动画配置 - 优化测试用例和类型定义 - 修复 ESLint 错误：移除不必要的 useEffect 和未使用的导入
76 lines
2.9 KiB
TypeScript
76 lines
2.9 KiB
TypeScript
'use client';
|
||
|
||
/**
|
||
* ServiceCTASection - 行动号召区域
|
||
*
|
||
* 朱砂红渐变背景，配合 FloatingElement 装饰圆形，
|
||
* InkReveal 包裹标题，FadeUp 包裹描述和按钮组。
|
||
* 主按钮链接到联系页，次按钮链接到服务列表页。
|
||
*/
|
||
import { Phone } from 'lucide-react';
|
||
import { InkReveal, FadeUp, FloatingElement, RippleButton } from '@/lib/animations';
|
||
|
||
export function ServiceCTASection() {
|
||
return (
|
||
<section className="relative py-24 md:py-32 bg-gradient-to-r from-[#C41E3A] to-[#E85D75] overflow-hidden">
|
||
{/* 右上角装饰圆形 */}
|
||
<FloatingElement amplitude={8} duration={5} delay={0.5} className="absolute -top-20 -right-20 pointer-events-none">
|
||
<div className="w-[280px] h-[280px] bg-white/10 rounded-full" />
|
||
</FloatingElement>
|
||
|
||
{/* 左下角装饰圆形 */}
|
||
<FloatingElement amplitude={6} duration={4} delay={1} className="absolute -bottom-16 -left-16 pointer-events-none">
|
||
<div className="w-[220px] h-[220px] bg-white/10 rounded-full" />
|
||
</FloatingElement>
|
||
|
||
<div className="container-wide">
|
||
<div className="max-w-3xl mx-auto text-center">
|
||
{/* 标题 */}
|
||
<InkReveal delay={0}>
|
||
<h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
|
||
免费获取企业数字化诊断报告
|
||
</h2>
|
||
</InkReveal>
|
||
|
||
{/* 描述文字 */}
|
||
<FadeUp delay={0.15}>
|
||
<p className="text-lg text-white/90 mb-10">
|
||
我们的专家团队将为您量身定制数字化转型方案，助力企业降本增效
|
||
</p>
|
||
</FadeUp>
|
||
|
||
{/* 按钮组 */}
|
||
<FadeUp delay={0.3}>
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<RippleButton
|
||
href="/contact"
|
||
rippleColor="rgba(196, 30, 58, 0.3)"
|
||
className="bg-white text-[#C41E3A] px-8 py-4 rounded-lg text-lg font-semibold inline-flex items-center justify-center w-full sm:w-auto"
|
||
>
|
||
免费获取
|
||
</RippleButton>
|
||
|
||
<RippleButton
|
||
href="/contact"
|
||
rippleColor="rgba(255, 255, 255, 0.2)"
|
||
className="bg-transparent border-2 border-white text-white px-8 py-4 rounded-lg text-lg font-semibold inline-flex items-center justify-center w-full sm:w-auto"
|
||
>
|
||
预约演示
|
||
</RippleButton>
|
||
|
||
<RippleButton
|
||
href="tel:+8613800138000"
|
||
rippleColor="rgba(255, 255, 255, 0.2)"
|
||
className="bg-transparent border-2 border-white text-white px-8 py-4 rounded-lg text-lg font-semibold inline-flex items-center justify-center w-full sm:w-auto"
|
||
>
|
||
<Phone className="w-4 h-4 mr-2" />
|
||
电话咨询
|
||
</RippleButton>
|
||
</div>
|
||
</FadeUp>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|