Initial commit

components/Process.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { STEPS } from '../constants';
+
+const Process: React.FC = () => {
+  return (
+    <div className="py-20 bg-brand-light">
+      <div className="container mx-auto px-6">
+        <h2 className="text-4xl font-bold text-gray-900 mb-16 text-center">Как мы работаем</h2>
+
+        <div className="relative max-w-6xl mx-auto">
+          {/* Линия связи между шагами (только на больших экранах) */}
+          <div className="hidden lg:block absolute top-9 left-0 right-0 h-1 bg-gradient-to-r from-brand-orange via-brand-orange/50 to-brand-orange" style={{ zIndex: 0 }} />
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 relative" style={{ zIndex: 1 }}>
+            {STEPS.map((step, idx) => (
+              <div key={idx} className="relative">
+                {/* Номер шага */}
+                <div className="absolute -top-4 -left-4 w-10 h-10 bg-brand-orange text-white rounded-full flex items-center justify-center font-bold text-lg shadow-lg z-10 border-4 border-brand-light">
+                  {idx + 1}
+                </div>
+                
+                {/* Карточка шага */}
+                <div className="bg-white rounded-2xl p-6 shadow-md hover:shadow-xl transition-all duration-300 hover:scale-105 h-full border-2 border-transparent hover:border-brand-orange">
+                  <div className="w-14 h-14 rounded-full bg-brand-orange/20 flex items-center justify-center text-brand-orange mb-4">
+                    <step.icon size={28} />
+                  </div>
+                  <p className="text-gray-700 leading-relaxed">
+                    {step.description}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Process;