538 lines
25 KiB
TypeScript
538 lines
25 KiB
TypeScript
'use client'
|
||
|
||
import { Check, Star, Sparkles, Zap, TrendingUp, AlertCircle } from 'lucide-react'
|
||
import { useSession } from 'next-auth/react'
|
||
import { useRouter } from 'next/navigation'
|
||
import { useState } from 'react'
|
||
|
||
const freeFeatures = [
|
||
{ text: '✅ 永久免费使用，0成本体验', highlight: true },
|
||
{ text: '✅ 10人团队协作', highlight: true },
|
||
{ text: '✅ 100个素材上传限制', highlight: true },
|
||
{ text: '✅ 支持全格式素材（3D/图片/音视频/文档/压缩包）', highlight: true },
|
||
{ text: '✅ 10分钟Docker一键部署' },
|
||
{ text: '✅ 0代码配置，可视化操作' },
|
||
{ text: '✅ 基于企业NAS存储，数据私有化' },
|
||
{ text: '✅ 内外网高速访问' },
|
||
{ text: '✅ 基础权限管理' },
|
||
{ text: '⚠️ 不支持AI功能' },
|
||
{ text: '⚠️ 不支持高级权限（部门隔离）' },
|
||
]
|
||
|
||
const standardFeatures = [
|
||
{ text: '永久使用权，买断制', highlight: true },
|
||
{ text: '无限团队人数', highlight: true },
|
||
{ text: '无限素材数量', highlight: true },
|
||
{ text: '免费版所有功能' },
|
||
{ text: 'AI智能体（Gemini集成）' },
|
||
{ text: '高级权限管理（部门隔离、角色分配）' },
|
||
{ text: '网站品牌LOGO自定义', highlight: true },
|
||
{ text: '主题颜色自定义', highlight: true },
|
||
{ text: '模板管理 + 自定义字段' },
|
||
{ text: '数据分析报表' },
|
||
{ text: '永久免费功能更新' },
|
||
]
|
||
|
||
const customFeatures = [
|
||
'包含标准版所有功能',
|
||
'✨ UI界面深度定制（完全匹配企业VI）',
|
||
'✨ 专属功能模块开发',
|
||
'✨ 第三方系统集成对接（ERP/CRM/OA）',
|
||
'✨ 私有化部署方案设计',
|
||
'✨ 专属开发团队支持',
|
||
'✨ 长期技术维护服务',
|
||
]
|
||
|
||
export default function Pricing() {
|
||
const { data: session, status } = useSession()
|
||
const router = useRouter()
|
||
const [purchasing, setPurchasing] = useState<string | null>(null)
|
||
|
||
const handlePurchaseClick = async (e: React.MouseEvent<HTMLAnchorElement>, productType: string) => {
|
||
e.preventDefault()
|
||
|
||
if (status === 'loading') {
|
||
return
|
||
}
|
||
|
||
if (status !== 'authenticated' || !session) {
|
||
// 未登录，跳转到登录页
|
||
router.push('/auth/signin?callbackUrl=' + encodeURIComponent('/#pricing'))
|
||
return
|
||
}
|
||
|
||
// 定制版跳转到联系部分
|
||
if (productType === 'custom') {
|
||
window.location.href = '#contact'
|
||
return
|
||
}
|
||
|
||
// 创建支付订单
|
||
setPurchasing(productType)
|
||
try {
|
||
const response = await fetch('/api/payment/create', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({
|
||
productType,
|
||
paymentMethod: 'alipay', // 默认支付宝，可以后续添加选择
|
||
}),
|
||
})
|
||
|
||
const data = await response.json()
|
||
|
||
if (!response.ok) {
|
||
if (data.redirect) {
|
||
// 定制版等需要跳转的情况
|
||
window.location.href = data.redirect
|
||
return
|
||
}
|
||
alert(data.message || '创建订单失败，请稍后重试')
|
||
setPurchasing(null)
|
||
return
|
||
}
|
||
|
||
if (data.success && data.paymentUrl && data.paymentParams) {
|
||
// 创建表单并提交到易支付
|
||
const form = document.createElement('form')
|
||
form.method = 'POST'
|
||
form.action = data.paymentUrl
|
||
form.target = '_blank'
|
||
|
||
// 添加支付参数
|
||
Object.keys(data.paymentParams).forEach((key) => {
|
||
const input = document.createElement('input')
|
||
input.type = 'hidden'
|
||
input.name = key
|
||
input.value = data.paymentParams[key]
|
||
form.appendChild(input)
|
||
})
|
||
|
||
document.body.appendChild(form)
|
||
form.submit()
|
||
document.body.removeChild(form)
|
||
|
||
// 跳转到支付结果页面
|
||
setTimeout(() => {
|
||
router.push(`/payment/success?order_no=${data.orderNo}`)
|
||
}, 1000)
|
||
}
|
||
} catch (error) {
|
||
console.error('创建支付订单错误:', error)
|
||
alert('创建订单失败，请稍后重试')
|
||
setPurchasing(null)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<section id="pricing" className="py-20 bg-gradient-to-b from-apple-gray-50 to-white relative overflow-hidden">
|
||
<div className="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
{/* Section Header */}
|
||
<div className="text-center mb-12">
|
||
<div className="inline-flex items-center space-x-2 bg-gradient-to-r from-green-500 to-emerald-600 text-white px-4 py-2 rounded-full mb-4">
|
||
<TrendingUp className="w-4 h-4" />
|
||
<span className="text-sm font-semibold">
|
||
比云存储方案节省99%成本
|
||
</span>
|
||
</div>
|
||
<h2 className="text-4xl sm:text-5xl font-bold text-apple-gray-900 mb-4">
|
||
简单透明的价格方案
|
||
</h2>
|
||
<p className="text-xl text-apple-gray-600 max-w-2xl mx-auto">
|
||
免费版永久使用 · 标准版推广期超值特惠 · 一次付费永久使用
|
||
</p>
|
||
</div>
|
||
|
||
{/* Pricing Comparison */}
|
||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 max-w-7xl mx-auto mb-12">
|
||
{/* Free Edition */}
|
||
<div className="relative bg-gradient-to-br from-white to-green-50 rounded-3xl p-8 border-2 border-green-200 apple-shadow hover:scale-[1.02] transition-all duration-300">
|
||
{/* Badge */}
|
||
<div className="absolute -top-4 left-1/2 -translate-x-1/2">
|
||
<div className="flex items-center space-x-2 bg-gradient-to-r from-green-500 to-emerald-600 text-white px-6 py-2 rounded-full text-sm font-bold apple-shadow">
|
||
<Sparkles className="w-4 h-4" />
|
||
<span>永久免费</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Header */}
|
||
<div className="text-center mb-8 mt-4">
|
||
<h4 className="text-3xl font-bold text-apple-gray-900 mb-4">
|
||
免费版
|
||
</h4>
|
||
|
||
{/* Price */}
|
||
<div className="mb-4">
|
||
<div className="flex items-baseline justify-center space-x-2 mb-2">
|
||
<span className="text-6xl font-bold bg-gradient-to-r from-green-500 to-emerald-600 bg-clip-text text-transparent">
|
||
¥0
|
||
</span>
|
||
</div>
|
||
<div className="flex items-center justify-center space-x-2 text-green-600 font-semibold mb-2">
|
||
<Zap className="w-4 h-4" />
|
||
<span>永久免费，0成本体验</span>
|
||
</div>
|
||
<p className="text-apple-gray-500 text-sm">
|
||
适合小团队试用和体验
|
||
</p>
|
||
</div>
|
||
|
||
{/* Quick Stats */}
|
||
<div className="grid grid-cols-2 gap-3 mb-6">
|
||
<div className="bg-green-50 rounded-xl p-3 border border-green-200">
|
||
<div className="text-2xl font-bold text-green-600">10人</div>
|
||
<div className="text-xs text-apple-gray-600">团队人数</div>
|
||
</div>
|
||
<div className="bg-green-50 rounded-xl p-3 border border-green-200">
|
||
<div className="text-2xl font-bold text-green-600">100个</div>
|
||
<div className="text-xs text-apple-gray-600">素材数量</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Features */}
|
||
<div className="space-y-3 mb-8">
|
||
{freeFeatures.map((feature, index) => (
|
||
<div
|
||
key={index}
|
||
className={`flex items-start space-x-3 ${feature.highlight ? 'bg-green-50 p-3 rounded-xl border border-green-200' : ''}`}
|
||
>
|
||
<Check className={`w-5 h-5 flex-shrink-0 mt-0.5 ${feature.highlight ? 'text-green-600' : 'text-green-500'}`} />
|
||
<span className={`text-sm ${feature.highlight ? 'font-semibold text-apple-gray-900' : 'text-apple-gray-700'}`}>
|
||
{feature.text}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* CTA Button */}
|
||
<a
|
||
href="http://sc.flnxi.com"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="block w-full py-4 bg-gradient-to-r from-green-500 to-emerald-600 text-white text-center rounded-full font-bold text-lg button-hover apple-shadow-lg"
|
||
>
|
||
立即免费体验
|
||
</a>
|
||
|
||
<p className="text-center text-sm text-apple-gray-500 mt-4">
|
||
无需注册，立即可用
|
||
</p>
|
||
</div>
|
||
|
||
{/* Standard Edition */}
|
||
<div className="relative bg-gradient-to-br from-white to-blue-50 rounded-3xl p-8 border-2 border-blue-200 apple-shadow-lg hover:scale-[1.02] transition-all duration-300">
|
||
{/* Popular Badge */}
|
||
<div className="absolute -top-4 left-1/2 -translate-x-1/2">
|
||
<div className="flex items-center space-x-2 bg-gradient-to-r from-green-500 to-emerald-600 text-white px-6 py-2 rounded-full text-sm font-bold apple-shadow">
|
||
<Star className="w-4 h-4 fill-current" />
|
||
<span>🔥 99%客户选择</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Header */}
|
||
<div className="text-center mb-8 mt-4">
|
||
<h4 className="text-3xl font-bold text-apple-gray-900 mb-4">
|
||
标准版
|
||
</h4>
|
||
|
||
{/* Price */}
|
||
<div className="mb-4">
|
||
<div className="flex items-baseline justify-center space-x-2 mb-2">
|
||
<span className="text-2xl text-apple-gray-400 line-through">¥4,999</span>
|
||
<span className="text-6xl font-bold bg-gradient-to-r from-red-500 to-orange-600 bg-clip-text text-transparent">
|
||
¥599
|
||
</span>
|
||
</div>
|
||
<div className="flex items-center justify-center space-x-2 text-red-600 font-semibold mb-2">
|
||
<Zap className="w-4 h-4" />
|
||
<span>🔥 推广期限时特惠，立省¥4,400</span>
|
||
</div>
|
||
<p className="text-apple-gray-500 text-sm">
|
||
买断制 · 永久使用 · 无任何后续费用
|
||
</p>
|
||
</div>
|
||
|
||
{/* Quick Stats */}
|
||
<div className="grid grid-cols-3 gap-3 mb-6">
|
||
<div className="bg-blue-50 rounded-xl p-3 border border-blue-200">
|
||
<div className="text-2xl font-bold text-apple-blue">∞</div>
|
||
<div className="text-xs text-apple-gray-600">无限人数</div>
|
||
</div>
|
||
<div className="bg-green-50 rounded-xl p-3 border border-green-200">
|
||
<div className="text-2xl font-bold text-green-600">∞</div>
|
||
<div className="text-xs text-apple-gray-600">无限素材</div>
|
||
</div>
|
||
<div className="bg-purple-50 rounded-xl p-3 border border-purple-200">
|
||
<div className="text-2xl font-bold text-purple-600">AI</div>
|
||
<div className="text-xs text-apple-gray-600">智能功能</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Features */}
|
||
<div className="space-y-3 mb-8">
|
||
{standardFeatures.map((feature, index) => (
|
||
<div
|
||
key={index}
|
||
className={`flex items-start space-x-3 ${feature.highlight ? 'bg-green-50 p-3 rounded-xl border border-green-200' : ''}`}
|
||
>
|
||
<Check className={`w-5 h-5 flex-shrink-0 mt-0.5 ${feature.highlight ? 'text-green-600' : 'text-green-500'}`} />
|
||
<span className={`${feature.highlight ? 'font-semibold text-apple-gray-900' : 'text-apple-gray-700'}`}>
|
||
{feature.text}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* CTA Button */}
|
||
<a
|
||
href="#contact"
|
||
onClick={(e) => handlePurchaseClick(e, 'standard')}
|
||
className="block w-full py-4 bg-gradient-to-r from-apple-blue to-blue-600 text-white text-center rounded-full font-bold text-lg button-hover apple-shadow-lg cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
|
||
>
|
||
{purchasing === 'standard' ? (
|
||
<span className="flex items-center justify-center">
|
||
<svg className="animate-spin h-5 w-5 mr-3" viewBox="0 0 24 24">
|
||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
|
||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
||
</svg>
|
||
正在创建订单...
|
||
</span>
|
||
) : status === 'authenticated' ? '立即购买' : status === 'loading' ? '加载中...' : '登录后购买'}
|
||
</a>
|
||
|
||
<p className="text-center text-sm text-apple-gray-500 mt-4">
|
||
支持对公转账 / 微信 / 支付宝
|
||
</p>
|
||
</div>
|
||
|
||
{/* Custom Edition */}
|
||
<div className="relative bg-gradient-to-br from-white to-purple-50 rounded-3xl p-8 border-2 border-purple-200 apple-shadow">
|
||
{/* Badge */}
|
||
<div className="absolute -top-4 left-1/2 -translate-x-1/2">
|
||
<div className="flex items-center space-x-2 bg-gradient-to-r from-purple-500 to-pink-600 text-white px-6 py-2 rounded-full text-sm font-bold apple-shadow">
|
||
<Sparkles className="w-4 h-4" />
|
||
<span>企业定制</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Header */}
|
||
<div className="text-center mb-8 mt-4">
|
||
<h4 className="text-3xl font-bold text-apple-gray-900 mb-4">
|
||
定制版
|
||
</h4>
|
||
|
||
{/* Price */}
|
||
<div className="mb-6">
|
||
<div className="text-4xl font-bold text-purple-600 mb-2">
|
||
沟通
|
||
</div>
|
||
<p className="text-apple-gray-600 text-sm">
|
||
根据需求定制报价 · 专属技术团队服务
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Features */}
|
||
<div className="space-y-3 mb-8">
|
||
{customFeatures.map((feature, index) => (
|
||
<div key={index} className="flex items-start space-x-3">
|
||
<Check className="w-5 h-5 text-purple-500 flex-shrink-0 mt-0.5" />
|
||
<span className="text-apple-gray-700">{feature}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* CTA Button */}
|
||
<a
|
||
href="#contact"
|
||
onClick={(e) => handlePurchaseClick(e, 'custom')}
|
||
className="block w-full py-4 bg-gradient-to-r from-purple-500 to-pink-600 text-white text-center rounded-full font-bold text-lg button-hover apple-shadow-lg cursor-pointer"
|
||
>
|
||
{status === 'loading' ? '加载中...' : session ? '咨询定制方案' : '登录后咨询'}
|
||
</a>
|
||
|
||
<p className="text-center text-sm text-apple-gray-500 mt-4">
|
||
1-3个工作日内回复报价方案
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 增值服务 */}
|
||
<div className="grid md:grid-cols-2 gap-8 mb-12">
|
||
{/* 支付测试 */}
|
||
<div className="bg-gradient-to-br from-green-50 to-emerald-50 rounded-3xl p-8 border-2 border-green-200 apple-shadow-lg">
|
||
<div className="flex flex-col md:flex-row items-center gap-6">
|
||
{/* 左侧图标和价格 */}
|
||
<div className="flex-shrink-0 text-center md:text-left">
|
||
<div className="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl flex items-center justify-center mx-auto md:mx-0 mb-3">
|
||
<svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>
|
||
</div>
|
||
<div className="text-3xl font-bold text-green-600 mb-1">¥0.1</div>
|
||
<div className="text-sm text-apple-gray-600">测试专用</div>
|
||
</div>
|
||
|
||
{/* 右侧内容 */}
|
||
<div className="flex-1">
|
||
<h4 className="text-2xl font-bold text-apple-gray-900 mb-3">
|
||
🧪 支付测试
|
||
</h4>
|
||
<p className="text-apple-gray-700 mb-4">
|
||
用于测试支付功能，金额仅<strong>0.1元</strong>，方便验证支付流程是否正常。
|
||
</p>
|
||
<div className="grid grid-cols-1 gap-3 mb-4">
|
||
<div className="flex items-center text-sm text-apple-gray-700">
|
||
<Check className="w-4 h-4 text-green-600 mr-2 flex-shrink-0" />
|
||
<span>测试支付流程</span>
|
||
</div>
|
||
<div className="flex items-center text-sm text-apple-gray-700">
|
||
<Check className="w-4 h-4 text-green-600 mr-2 flex-shrink-0" />
|
||
<span>验证签名功能</span>
|
||
</div>
|
||
<div className="flex items-center text-sm text-apple-gray-700">
|
||
<Check className="w-4 h-4 text-green-600 mr-2 flex-shrink-0" />
|
||
<span>检查回调通知</span>
|
||
</div>
|
||
</div>
|
||
<a
|
||
href="#contact"
|
||
onClick={(e) => handlePurchaseClick(e, 'test')}
|
||
className="block w-full py-3 bg-gradient-to-r from-green-500 to-emerald-600 text-white text-center rounded-full font-semibold button-hover apple-shadow disabled:opacity-50 disabled:cursor-not-allowed"
|
||
>
|
||
{purchasing === 'test' ? (
|
||
<span className="flex items-center justify-center">
|
||
<svg className="animate-spin h-5 w-5 mr-2" viewBox="0 0 24 24">
|
||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
|
||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
||
</svg>
|
||
正在创建订单...
|
||
</span>
|
||
) : status === 'authenticated' ? '测试支付' : status === 'loading' ? '加载中...' : '登录后测试'}
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 远程部署服务 */}
|
||
<div className="bg-gradient-to-br from-orange-50 to-amber-50 rounded-3xl p-8 border-2 border-orange-200 apple-shadow-lg">
|
||
<div className="flex flex-col md:flex-row items-center gap-6">
|
||
{/* 左侧图标和标题 */}
|
||
<div className="flex-shrink-0 text-center md:text-left">
|
||
<div className="w-16 h-16 bg-gradient-to-br from-orange-500 to-amber-600 rounded-2xl flex items-center justify-center mx-auto md:mx-0 mb-3">
|
||
<svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||
</svg>
|
||
</div>
|
||
<div className="text-3xl font-bold text-orange-600 mb-1">¥299</div>
|
||
<div className="text-sm text-apple-gray-600">可选增值服务</div>
|
||
</div>
|
||
|
||
{/* 右侧内容 */}
|
||
<div className="flex-1">
|
||
<h4 className="text-2xl font-bold text-apple-gray-900 mb-3">
|
||
🎯 远程部署服务
|
||
</h4>
|
||
<p className="text-apple-gray-700 mb-4">
|
||
不懂技术？没时间折腾？我们的技术团队为您提供<strong>1对1远程部署服务</strong>，
|
||
30分钟内帮您完成系统安装配置，确保正常运行。
|
||
</p>
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-4">
|
||
<div className="flex items-center text-sm text-apple-gray-700">
|
||
<Check className="w-4 h-4 text-orange-600 mr-2 flex-shrink-0" />
|
||
<span>远程连接您的服务器</span>
|
||
</div>
|
||
<div className="flex items-center text-sm text-apple-gray-700">
|
||
<Check className="w-4 h-4 text-orange-600 mr-2 flex-shrink-0" />
|
||
<span>安装Docker和依赖环境</span>
|
||
</div>
|
||
<div className="flex items-center text-sm text-apple-gray-700">
|
||
<Check className="w-4 h-4 text-orange-600 mr-2 flex-shrink-0" />
|
||
<span>配置NAS存储和数据库</span>
|
||
</div>
|
||
<div className="flex items-center text-sm text-apple-gray-700">
|
||
<Check className="w-4 h-4 text-orange-600 mr-2 flex-shrink-0" />
|
||
<span>系统启动并测试功能</span>
|
||
</div>
|
||
<div className="flex items-center text-sm text-apple-gray-700">
|
||
<Check className="w-4 h-4 text-orange-600 mr-2 flex-shrink-0" />
|
||
<span>7天内免费二次调试</span>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center justify-between bg-white rounded-xl p-4 border border-orange-200">
|
||
<div>
|
||
<div className="text-sm text-apple-gray-600 mb-1">
|
||
💡 推荐：<strong className="text-orange-600">标准版 + 远程部署</strong>
|
||
</div>
|
||
<div className="text-xs text-apple-gray-500">
|
||
¥599（软件）+ ¥299（部署）= ¥898，省时省心
|
||
</div>
|
||
</div>
|
||
<a
|
||
href="#contact"
|
||
onClick={(e) => handlePurchaseClick(e, 'deployment')}
|
||
className="px-6 py-2 bg-gradient-to-r from-orange-500 to-amber-600 text-white rounded-full font-semibold text-sm button-hover apple-shadow whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed"
|
||
>
|
||
{purchasing === 'deployment' ? '处理中...' : '立即购买'}
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 外网带宽服务 */}
|
||
<div className="bg-gradient-to-br from-blue-50 to-cyan-50 rounded-3xl p-8 border-2 border-blue-200 apple-shadow-lg">
|
||
<div className="flex flex-col md:flex-row items-center gap-6">
|
||
{/* 左侧图标和价格 */}
|
||
<div className="flex-shrink-0 text-center md:text-left">
|
||
<div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-600 rounded-2xl flex items-center justify-center mx-auto md:mx-0 mb-3">
|
||
<svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||
</svg>
|
||
</div>
|
||
<div className="text-3xl font-bold text-blue-600 mb-1">¥189<span className="text-lg">/月</span></div>
|
||
<div className="text-sm text-apple-gray-600">按月付费</div>
|
||
</div>
|
||
|
||
{/* 右侧内容 */}
|
||
<div className="flex-1">
|
||
<h4 className="text-2xl font-bold text-apple-gray-900 mb-3">
|
||
⚡ 30M外网带宽服务
|
||
</h4>
|
||
<p className="text-apple-gray-700 mb-4">
|
||
为没有公网IP或带宽不足的企业提供<strong>30M独享外网访问服务</strong>，
|
||
让您的团队随时随地高速访问素材系统。
|
||
</p>
|
||
<div className="grid grid-cols-1 gap-3 mb-4">
|
||
<div className="flex items-center text-sm text-apple-gray-700">
|
||
<Check className="w-4 h-4 text-blue-600 mr-2 flex-shrink-0" />
|
||
<span>30M独享带宽，高速稳定</span>
|
||
</div>
|
||
<div className="flex items-center text-sm text-apple-gray-700">
|
||
<Check className="w-4 h-4 text-blue-600 mr-2 flex-shrink-0" />
|
||
<span>支持外网访问，随时随地办公</span>
|
||
</div>
|
||
<div className="flex items-center text-sm text-apple-gray-700">
|
||
<Check className="w-4 h-4 text-blue-600 mr-2 flex-shrink-0" />
|
||
<span>支持手机、平板、电脑多端访问</span>
|
||
</div>
|
||
</div>
|
||
<a
|
||
href="#contact"
|
||
className="block w-full py-3 bg-gradient-to-r from-blue-500 to-cyan-600 text-white text-center rounded-full font-semibold button-hover apple-shadow"
|
||
>
|
||
了解详情
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|