init

2026-04-02 23:08:29 +03:00
commit 64ae1d9f5a
124 changed files with 18491 additions and 0 deletions
--- a/src/components/Services.tsx
+++ b/src/components/Services.tsx
@@ -0,0 +1,116 @@
+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">&rarr;</span>
+                  </button>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}