3f79a5d190
- 精简 Hero 组件，突出'永久免费'核心价值 - 简化 Contact、CostComparison、Features 组件 - 优化 SystemFeatures 展示逻辑 - 新增 FeaturesSimple 简化版功能组件 - 优化首页布局，提升加载速度 - 代码行数优化：-127 +53 相关文档：首页终极精简版.md、首页精简重构说明.md
84 lines
4.0 KiB
TypeScript
84 lines
4.0 KiB
TypeScript
'use client'
|
|
|
|
import { ArrowRight, Play, Zap, Shield, DollarSign, Sparkles } from 'lucide-react'
|
|
|
|
export default function Hero() {
|
|
return (
|
|
<section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-b from-apple-gray-50 to-white">
|
|
{/* Background Elements */}
|
|
<div className="absolute inset-0 overflow-hidden">
|
|
<div className="absolute top-1/4 -left-20 w-96 h-96 bg-apple-blue/10 rounded-full blur-3xl animate-float" />
|
|
<div className="absolute bottom-1/4 -right-20 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-float" style={{ animationDelay: '1s' }} />
|
|
</div>
|
|
|
|
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-32 pb-20 text-center">
|
|
{/* Badge */}
|
|
<div className="inline-flex items-center space-x-2 bg-gradient-to-r from-green-500 to-emerald-600 px-6 py-3 rounded-full apple-shadow mb-8 animate-fade-in">
|
|
<Sparkles className="w-5 h-5 text-white" />
|
|
<span className="text-base text-white font-bold">
|
|
永久免费使用
|
|
</span>
|
|
</div>
|
|
|
|
{/* Main Heading */}
|
|
<h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold text-apple-gray-900 mb-6 animate-slide-up leading-tight">
|
|
电商素材管理
|
|
<br />
|
|
终于<span className="text-gradient">简单了</span>
|
|
</h1>
|
|
|
|
{/* Description */}
|
|
<p className="text-xl sm:text-2xl text-apple-gray-600 max-w-3xl mx-auto mb-12 leading-relaxed animate-slide-up font-medium" style={{ animationDelay: '0.1s' }}>
|
|
10分钟部署 · 数据私有化 · 0代码配置
|
|
</p>
|
|
|
|
{/* CTA Buttons */}
|
|
<div className="flex flex-col items-center justify-center gap-6 animate-slide-up mb-16" style={{ animationDelay: '0.2s' }}>
|
|
<a
|
|
href="http://sc.flnxi.com"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="group px-16 py-6 bg-gradient-to-r from-green-500 to-emerald-600 text-white rounded-full text-2xl font-bold button-hover apple-shadow-lg flex items-center space-x-3 hover:scale-105 transition-all"
|
|
>
|
|
<span>立即免费使用</span>
|
|
<ArrowRight className="w-7 h-7 group-hover:translate-x-2 transition-transform" />
|
|
</a>
|
|
<a
|
|
href="#features"
|
|
className="text-apple-gray-600 hover:text-apple-blue font-medium flex items-center space-x-2 group"
|
|
>
|
|
<span>查看系统功能</span>
|
|
<svg className="w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
{/* Stats - 简化为3个核心数据 */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-8 max-w-3xl mx-auto animate-fade-in" style={{ animationDelay: '0.3s' }}>
|
|
<div className="text-center">
|
|
<div className="text-5xl font-bold text-green-600 mb-2">免费</div>
|
|
<div className="text-sm text-apple-gray-600">永久使用</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="text-5xl font-bold text-apple-blue mb-2">10分钟</div>
|
|
<div className="text-sm text-apple-gray-600">完成部署</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="text-5xl font-bold text-purple-600 mb-2">100%</div>
|
|
<div className="text-sm text-apple-gray-600">数据掌控</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Scroll Indicator */}
|
|
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
|
|
<div className="w-6 h-10 border-2 border-apple-gray-300 rounded-full flex items-start justify-center p-2">
|
|
<div className="w-1.5 h-3 bg-apple-gray-400 rounded-full" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|