84 lines
2.9 KiB
TypeScript
84 lines
2.9 KiB
TypeScript
import React from 'react';
|
|
import { Monitor, Server, Code, Database, Globe, Shield } from 'lucide-react';
|
|
import { ServiceItem } from '../types';
|
|
import { useTranslations } from 'next-intl';
|
|
|
|
const Services: React.FC = () => {
|
|
const t = useTranslations('Services');
|
|
|
|
const services: ServiceItem[] = [
|
|
{
|
|
title: t('items.customDev.title'),
|
|
description: t('items.customDev.desc'),
|
|
icon: Code,
|
|
},
|
|
{
|
|
title: t('items.digitalTrans.title'),
|
|
description: t('items.digitalTrans.desc'),
|
|
icon: Monitor,
|
|
},
|
|
{
|
|
title: t('items.systemIntegration.title'),
|
|
description: t('items.systemIntegration.desc'),
|
|
icon: Server,
|
|
},
|
|
{
|
|
title: t('items.bigData.title'),
|
|
description: t('items.bigData.desc'),
|
|
icon: Database,
|
|
},
|
|
{
|
|
title: t('items.cloudService.title'),
|
|
description: t('items.cloudService.desc'),
|
|
icon: Globe,
|
|
},
|
|
{
|
|
title: t('items.security.title'),
|
|
description: t('items.security.desc'),
|
|
icon: Shield,
|
|
},
|
|
];
|
|
|
|
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">{t('title')} • {t('subtitle')}</h2>
|
|
<h3 className="text-3xl md:text-4xl font-serif text-feie-dark mb-6">
|
|
{t('heading')}
|
|
</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;
|