70 lines
No EOL
2.1 KiB
TypeScript
70 lines
No EOL
2.1 KiB
TypeScript
import React from 'react';
|
|
import { Monitor, Smartphone, Server, Database } from 'lucide-react';
|
|
import { useLanguage } from '../../context/LanguageContext';
|
|
|
|
const Solutions: React.FC = () => {
|
|
const { t } = useLanguage();
|
|
|
|
const solutions = [
|
|
{
|
|
icon: <Monitor className="w-16 h-16 text-white" />,
|
|
title: t('solutions.web.title'),
|
|
description: t('solutions.web.desc'),
|
|
color: 'bg-blue-600'
|
|
},
|
|
{
|
|
icon: <Smartphone className="w-16 h-16 text-white" />,
|
|
title: t('solutions.mobile.title'),
|
|
description: t('solutions.mobile.desc'),
|
|
color: 'bg-purple-600'
|
|
},
|
|
{
|
|
icon: <Server className="w-16 h-16 text-white" />,
|
|
title: t('solutions.custom.title'),
|
|
description: t('solutions.custom.desc'),
|
|
color: 'bg-green-600'
|
|
},
|
|
{
|
|
icon: <Database className="w-16 h-16 text-white" />,
|
|
title: t('solutions.database.title'),
|
|
description: t('solutions.database.desc'),
|
|
color: 'bg-red-600'
|
|
}
|
|
];
|
|
|
|
return (
|
|
<section className="py-20 bg-gray-50">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-4xl font-bold text-gray-900 mb-4">
|
|
{t('solutions.title')}
|
|
</h2>
|
|
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
|
{t('solutions.subtitle')}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{solutions.map((solution, index) => (
|
|
<div
|
|
key={index}
|
|
className="group relative overflow-hidden rounded-2xl transition-all duration-300 hover:scale-105"
|
|
>
|
|
<div className={`${solution.color} p-8 h-full`}>
|
|
<div className="mb-6">{solution.icon}</div>
|
|
<h3 className="text-2xl font-semibold text-white mb-4">
|
|
{solution.title}
|
|
</h3>
|
|
<p className="text-white/90">
|
|
{solution.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Solutions; |