refactor: extract sections

2026-04-04 19:28:07 +03:00
parent 18001a918f
commit 56f6ce41c1
17 changed files with 139 additions and 116 deletions
--- a/src/sections/Services.tsx
+++ b/src/sections/Services.tsx
@@ -0,0 +1,109 @@
+import { Cloud, Shield, Cpu, Database, Server, Settings } from 'lucide-react'
+
+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-400 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-linear-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>
+  )
+}