xiaso-flnxi-website/components/FeaturesSimple.tsx
Your Name 3f79a5d190 首页精简重构:优化用户体验和视觉呈现
- 精简 Hero 组件,突出'永久免费'核心价值
- 简化 Contact、CostComparison、Features 组件
- 优化 SystemFeatures 展示逻辑
- 新增 FeaturesSimple 简化版功能组件
- 优化首页布局,提升加载速度
- 代码行数优化:-127 +53

相关文档:首页终极精简版.md、首页精简重构说明.md
2025-12-13 22:09:05 +08:00

90 lines
2.9 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

'use client'
import {
Upload,
Search,
Users,
Shield,
Zap,
FileType
} from 'lucide-react'
const features = [
{
icon: Upload,
title: '素材上传管理',
description: '支持3DMAX、PSD、AI、CAD、C4D等6大格式。批量上传、自动缩略图、拖拽上传,单文件最大10GB。',
},
{
icon: Search,
title: '智能搜索筛选',
description: '多维度搜索,按品牌、系列、分类快速筛选。支持模糊搜索和组合条件,秒级定位所需素材。',
},
{
icon: Users,
title: '团队协作',
description: '多用户同时在线,权限管理清晰。支持点赞、收藏、评论,实时查看团队动态。',
},
{
icon: FileType,
title: '在线预览下载',
description: '图片、视频在线预览,参数一目了然。一键下载原文件,支持批量下载和下载统计。',
},
{
icon: Shield,
title: '数据私有化',
description: '部署在您的NAS上,数据100%掌控。支持内网部署,外网完全访问不到,银行级安全。',
},
{
icon: Zap,
title: '10分钟部署',
description: '一键Docker部署,自动安装所有依赖。0代码配置,全Web界面操作,新手也能轻松搞定。',
},
]
export default function FeaturesSimple() {
return (
<section id="features" className="py-20 bg-white">
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
{/* Section Header */}
<div className="text-center mb-16">
<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>
{/* Features Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{features.map((feature, index) => {
const Icon = feature.icon
return (
<div
key={feature.title}
className="bg-gradient-to-br from-white to-apple-gray-50 rounded-2xl p-8 border border-apple-gray-200 hover:border-apple-blue hover:shadow-xl transition-all duration-300"
>
{/* Icon */}
<div className="w-14 h-14 rounded-xl bg-gradient-to-br from-apple-blue to-blue-600 flex items-center justify-center mb-4">
<Icon className="w-7 h-7 text-white" strokeWidth={2} />
</div>
{/* Content */}
<h4 className="text-xl font-bold text-apple-gray-900 mb-3">
{feature.title}
</h4>
<p className="text-sm text-apple-gray-600 leading-relaxed">
{feature.description}
</p>
</div>
)
})}
</div>
</div>
</section>
)
}