张翔
1f591fe2b4
- 完善产品页面布局与交互 - 优化服务详情页用户体验 - 增强新闻模块内容展示 - 改进团队页面设计 - 优化全局样式和响应式布局 - 添加分页组件支持 - 提升性能与SEO优化 - 修复已知问题与改进代码质量
68 lines
2.6 KiB
TypeScript
68 lines
2.6 KiB
TypeScript
'use client';
|
||
|
||
/**
|
||
* ServiceCTASection - 行动号召区域
|
||
*
|
||
* 朱砂红渐变背景，配合 FloatingElement 装饰圆形，
|
||
* InkReveal 包裹标题，FadeUp 包裹描述和按钮组。
|
||
* 主按钮链接到联系页，次按钮链接到服务列表页。
|
||
*/
|
||
import { InkReveal, FadeUp, FloatingElement } from '@/lib/animations';
|
||
import { RippleButton } from '@/components/ui/ripple-button';
|
||
|
||
export function ServiceCTASection() {
|
||
return (
|
||
<section className="relative py-24 md:py-32 bg-gradient-to-r from-[var(--color-brand-primary)] 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"
|
||
variant="secondary"
|
||
rippleColor="rgba(196, 30, 58, 0.3)"
|
||
className="bg-white text-[var(--color-brand-primary)] 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>
|
||
</div>
|
||
</FadeUp>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|