116 lines
4.4 KiB
TypeScript
116 lines
4.4 KiB
TypeScript
import { Cloud, Shield, Cpu, Database, Server, Settings } from 'lucide-react';
|
||
import { ImageWithFallback } from './figma/ImageWithFallback';
|
||
|
||
const services = [
|
||
{
|
||
icon: Cloud,
|
||
title: 'Облачные решения',
|
||
description: 'Миграция и управление инфраструктурой на базе Яндекс.Облако и VK Cloud',
|
||
gradient: 'from-blue-50 to-cyan-50',
|
||
iconBg: 'bg-white',
|
||
iconColor: 'text-blue-600'
|
||
},
|
||
{
|
||
icon: Shield,
|
||
title: 'Кибербезопасность',
|
||
description: 'Комплексная защита периметра и данных с решениями Kaspersky',
|
||
gradient: 'from-violet-50 to-purple-50',
|
||
iconBg: 'bg-white',
|
||
iconColor: 'text-violet-600'
|
||
},
|
||
{
|
||
icon: Cpu,
|
||
title: 'Цифровая трансформация',
|
||
description: 'Автоматизация процессов на платформах 1С и Галактика',
|
||
gradient: 'from-emerald-50 to-teal-50',
|
||
iconBg: 'bg-white',
|
||
iconColor: 'text-emerald-600'
|
||
},
|
||
{
|
||
icon: Database,
|
||
title: 'Управление данными',
|
||
description: 'Развертывание и поддержка СУБД Postgres Pro',
|
||
gradient: 'from-orange-50 to-amber-50',
|
||
iconBg: 'bg-white',
|
||
iconColor: 'text-orange-600'
|
||
},
|
||
{
|
||
icon: Server,
|
||
title: 'Серверная инфраструктура',
|
||
description: 'Поставка и настройка оборудования Kraftway',
|
||
gradient: 'from-pink-50 to-rose-50',
|
||
iconBg: 'bg-white',
|
||
iconColor: 'text-pink-600'
|
||
},
|
||
{
|
||
icon: Settings,
|
||
title: 'Системная интеграция',
|
||
description: 'Построение корпоративной ИТ-архитектуры на Astra Linux',
|
||
gradient: 'from-indigo-50 to-blue-50',
|
||
iconBg: 'bg-white',
|
||
iconColor: 'text-indigo-600'
|
||
}
|
||
];
|
||
|
||
export function Services() {
|
||
return (
|
||
<section id="services" className="py-24 bg-white">
|
||
<div className="max-w-[1600px] mx-auto px-6 xl:px-12 2xl:px-16">
|
||
<div className="max-w-3xl mb-16">
|
||
<p className="text-sm uppercase tracking-wider text-gray-500 mb-4">
|
||
Услуги
|
||
</p>
|
||
<h2 className="text-4xl lg:text-5xl text-gray-900 mb-6">
|
||
Комплексные IT-решения для вашего бизнеса
|
||
</h2>
|
||
<p className="text-xl text-gray-600">
|
||
Полный цикл: от стратегии до технической поддержки
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
{services.map((service, index) => {
|
||
const Icon = service.icon;
|
||
const floatClasses = [
|
||
'animate-float',
|
||
'animate-float-delay-1',
|
||
'animate-float-delay-2',
|
||
'animate-float-delay-3',
|
||
'animate-float-delay-4',
|
||
'animate-float-delay-5'
|
||
];
|
||
const floatClass = floatClasses[index % 6];
|
||
|
||
return (
|
||
<div
|
||
key={index}
|
||
className="group bg-white rounded-2xl border border-gray-100 hover:border-blue-200 hover:shadow-xl transition-all duration-300 overflow-hidden"
|
||
>
|
||
<div className={`relative h-48 overflow-hidden bg-gradient-to-br ${service.gradient} flex items-center justify-center`}>
|
||
<div className={`w-20 h-20 ${service.iconBg} rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300 shadow-md ${floatClass}`}>
|
||
<Icon className={`w-10 h-10 ${service.iconColor}`} />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="p-6">
|
||
<h3 className="text-xl text-gray-900 mb-3">
|
||
{service.title}
|
||
</h3>
|
||
|
||
<p className="text-gray-600 mb-4 leading-relaxed">
|
||
{service.description}
|
||
</p>
|
||
|
||
<button className="text-blue-600 hover:text-blue-700 transition-colors inline-flex items-center gap-2">
|
||
Подробнее
|
||
<span className="transition-all">→</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
} |