81 lines
3.1 KiB
TypeScript
81 lines
3.1 KiB
TypeScript
import React from 'react';
|
||
import { Monitor, Server, Code, Database, Globe, Shield } from 'lucide-react';
|
||
import { ServiceItem } from '../types';
|
||
|
||
const services: ServiceItem[] = [
|
||
{
|
||
title: '定制软件开发',
|
||
description: '根据企业独特需求，打造专属的Web应用、移动端APP及桌面软件，优化业务流程。',
|
||
icon: Code,
|
||
},
|
||
{
|
||
title: '企业数字化转型',
|
||
description: '提供全方位的数字化咨询与落地实施方案，助力传统企业实现智能化升级。',
|
||
icon: Monitor,
|
||
},
|
||
{
|
||
title: '系统集成服务',
|
||
description: '打破信息孤岛，实现异构系统间的数据互通与功能协同，提升整体运营效率。',
|
||
icon: Server,
|
||
},
|
||
{
|
||
title: '大数据分析',
|
||
description: '挖掘数据价值，提供可视化报表与智能决策支持，让数据成为企业的核心资产。',
|
||
icon: Database,
|
||
},
|
||
{
|
||
title: '云服务与部署',
|
||
description: '提供安全可靠的云端架构设计、迁移及运维服务，保障业务的高可用性。',
|
||
icon: Globe,
|
||
},
|
||
{
|
||
title: '信息安全保障',
|
||
description: '构建多层次的安全防护体系，保护企业核心数据资产不受威胁。',
|
||
icon: Shield,
|
||
},
|
||
];
|
||
|
||
const Services: React.FC = () => {
|
||
return (
|
||
<section id="services" className="py-24 bg-white">
|
||
<div className="container mx-auto px-6">
|
||
<div className="text-center max-w-3xl mx-auto mb-16">
|
||
<h2 className="text-sm font-bold tracking-widest text-feie-gold uppercase mb-3">核心业务 • Services</h2>
|
||
<h3 className="text-3xl md:text-4xl font-serif text-feie-dark mb-6">
|
||
全方位技术解决方案
|
||
</h3>
|
||
<div className="w-16 h-1 bg-feie-dark mx-auto"></div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
{services.map((service, index) => (
|
||
<div
|
||
key={index}
|
||
className="group p-8 border border-gray-100 bg-feie-cream/30 hover:bg-feie-dark hover:border-feie-dark transition-all duration-500 rounded-sm relative overflow-hidden"
|
||
>
|
||
<div className="absolute top-0 right-0 w-24 h-24 bg-feie-gold/10 rounded-bl-full -mr-4 -mt-4 transition-all duration-500 group-hover:bg-feie-gold/20"></div>
|
||
|
||
<service.icon
|
||
className="w-10 h-10 text-feie-gold mb-6 group-hover:text-feie-gold transition-colors duration-300"
|
||
strokeWidth={1.5}
|
||
/>
|
||
|
||
<h4 className="text-xl font-serif font-bold text-feie-dark mb-4 group-hover:text-feie-white transition-colors duration-300">
|
||
{service.title}
|
||
</h4>
|
||
|
||
<p className="text-gray-600 font-light leading-relaxed group-hover:text-gray-300 transition-colors duration-300">
|
||
{service.description}
|
||
</p>
|
||
|
||
<div className="mt-6 w-8 h-px bg-feie-gold group-hover:w-full transition-all duration-500"></div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default Services;
|