first commit

src/components/services/ProcessSteps.tsx

@@ -0,0 +1,52 @@
+import { processStepsData, commonDescriptions } from '../../data/siteData'
+
+export default function ProcessSteps() {
+  return (
+    <section
+      className="relative"
+      id="process"
+      style={{
+        backgroundImage: "url('/src/assets/images/2.jpg')",
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+      }}
+    >
+      {/* Overlay */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{ background: 'linear-gradient(45deg, #17449e, rgba(0, 0, 0, 0.8))', opacity: 0.9 }}
+      />
+
+      <div className="container mx-auto px-4 py-24 relative z-10">
+        {/* Section Header */}
+        <div className="text-center mx-auto">
+          <h3 className="text-3xl md:text-4xl font-bold mb-4 font-sans" style={{ color: '#ffffff' }}>
+            {commonDescriptions.processTitle}
+          </h3>
+          <p className="text-white my-3">
+            {commonDescriptions.sectionDesc}
+          </p>
+        </div>
+
+        {/* Steps */}
+        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-8 mt-5 pt-3 text-center">
+          {processStepsData.map((step) => (
+            <div key={step.id} className="three-grids-columns">
+              <div className="icon mb-4">
+                <span className="inline-flex items-center justify-center w-[50px] h-[50px] rounded-full bg-secondary text-white text-2xl">
+                  {step.number}
+                </span>
+              </div>
+              <h4 className="text-[22px] font-semibold mt-5 mb-4 font-sans" style={{ color: '#ffffff' }}>
+                {step.title}
+              </h4>
+              <p className="text-white/70 leading-6">
+                {step.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}