94 lines
4.5 KiB
TypeScript
94 lines
4.5 KiB
TypeScript
import Link from "next/link";
|
||
import { ArrowRight, Play, MessageCircle, Zap } from 'lucide-react';
|
||
|
||
export default function Cta() {
|
||
return (
|
||
<section className="px-6 py-20 bg-gradient-to-r from-accent via-blue-600 to-purple-600 text-white relative overflow-hidden">
|
||
{/* 背景装饰 */}
|
||
<div className="absolute inset-0 bg-black/10"></div>
|
||
<div className="absolute top-0 left-0 w-full h-full">
|
||
<div className="absolute top-10 left-10 w-20 h-20 bg-white/10 rounded-full"></div>
|
||
<div className="absolute top-32 right-20 w-16 h-16 bg-white/5 rounded-full"></div>
|
||
<div className="absolute bottom-20 left-1/4 w-12 h-12 bg-white/10 rounded-full"></div>
|
||
<div className="absolute bottom-10 right-10 w-24 h-24 bg-white/5 rounded-full"></div>
|
||
</div>
|
||
|
||
<div className="relative max-w-screen-xl mx-auto text-center">
|
||
<div className="mb-8">
|
||
<h2 className="text-4xl md:text-5xl font-bold mb-6">
|
||
准备好加速您的
|
||
<span className="block text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-orange-300">
|
||
云服务了吗？
|
||
</span>
|
||
</h2>
|
||
<p className="text-xl text-blue-100 max-w-3xl mx-auto leading-relaxed">
|
||
立即开始免费试用，体验全球领先的云加速服务。
|
||
无需信用卡，15 天免费试用，专业技术支持。
|
||
</p>
|
||
</div>
|
||
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
|
||
<a
|
||
href="/contact"
|
||
className="group bg-white text-accent px-8 py-4 rounded-xl font-semibold text-lg hover:bg-gray-100 transition-all duration-300 shadow-lg hover:shadow-xl flex items-center"
|
||
>
|
||
立即免费试用
|
||
<ArrowRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||
</a>
|
||
|
||
<a
|
||
href="/pricing"
|
||
className="group border-2 border-white text-white px-8 py-4 rounded-xl font-semibold text-lg hover:bg-white hover:text-accent transition-all duration-300 flex items-center"
|
||
>
|
||
查看定价方案
|
||
<Play className="ml-2 w-5 h-5 group-hover:scale-110 transition-transform" />
|
||
</a>
|
||
</div>
|
||
|
||
{/* 特色亮点 */}
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
|
||
<div className="flex flex-col items-center text-center">
|
||
<div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mb-4">
|
||
<Zap className="w-8 h-8 text-yellow-300" />
|
||
</div>
|
||
<h3 className="text-lg font-semibold mb-2">15 天免费试用</h3>
|
||
<p className="text-blue-100 text-sm">无需信用卡，立即开始体验</p>
|
||
</div>
|
||
|
||
<div className="flex flex-col items-center text-center">
|
||
<div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mb-4">
|
||
<MessageCircle className="w-8 h-8 text-green-300" />
|
||
</div>
|
||
<h3 className="text-lg font-semibold mb-2">专业技术支持</h3>
|
||
<p className="text-blue-100 text-sm">7×24 小时专家团队支持</p>
|
||
</div>
|
||
|
||
<div className="flex flex-col items-center text-center">
|
||
<div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mb-4">
|
||
<ArrowRight className="w-8 h-8 text-purple-300" />
|
||
</div>
|
||
<h3 className="text-lg font-semibold mb-2">快速部署</h3>
|
||
<p className="text-blue-100 text-sm">5 分钟内完成配置部署</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 信任指标 */}
|
||
<div className="mt-16 pt-8 border-t border-white/20">
|
||
<p className="text-blue-200 text-sm mb-4">已有超过 10,000+ 企业选择我们</p>
|
||
<div className="flex flex-wrap justify-center items-center gap-8 opacity-80">
|
||
<div className="text-2xl font-bold">99.9%</div>
|
||
<div className="text-gray-300">•</div>
|
||
<div className="text-2xl font-bold">50+</div>
|
||
<div className="text-gray-300">•</div>
|
||
<div className="text-2xl font-bold">24/7</div>
|
||
<div className="text-gray-300">•</div>
|
||
<div className="text-2xl font-bold">15天</div>
|
||
</div>
|
||
<p className="text-blue-200 text-xs mt-2">
|
||
可用性保障 • 全球节点 • 技术支持 • 免费试用
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
} |