hiring pages added and contact no. updated at gloabal offices

components/StepsIllustrated.tsx

@@ -1,8 +1,25 @@
+import React from "react";
 import { motion } from "framer-motion";
 import { FileText, Palette, Code, Rocket } from "lucide-react";
 import { GridPattern } from "./GridPattern";
 
-const steps = [
+// Define the step interface
+interface Step {
+  title: string;
+  description: string;
+  icon: React.ComponentType<any> | React.ReactElement;
+  color?: string; // Make color optional
+  number?: string;
+  details?: string[];
+}
+
+interface StepsIllustratedProps {
+  title?: string;
+  subtitle?: string;
+  steps?: Step[];
+}
+
+const defaultSteps: Step[] = [
   {
     title: "Define Scope",
     description: "We analyze your requirements and create a detailed project roadmap with clear timelines.",
@@ -29,8 +46,25 @@ const steps = [
   }
 ];
 
-const StepCard = ({ step, index }: { step: typeof steps[0]; index: number }) => {
-  const Icon = step.icon;
+interface Step {
+  title: string;
+  description: string;
+  icon: React.ComponentType<any> | React.ReactElement;
+  color?: string; // Make color optional
+  number?: string;
+  details?: string[];
+}
+
+const StepCard = ({ step, index, totalSteps }: { step: Step; index: number; totalSteps: number }) => {
+  // Define default colors if not provided
+  const defaultColors = [
+    "from-blue-500 to-cyan-500",
+    "from-purple-500 to-pink-500", 
+    "from-green-500 to-emerald-500",
+    "from-[#E5195E] to-orange-500"
+  ];
+  
+  const color = step.color || defaultColors[index] || "from-blue-500 to-cyan-500";
   
   return (
     <motion.div
@@ -41,14 +75,21 @@ const StepCard = ({ step, index }: { step: typeof steps[0]; index: number }) =>
       className="relative group"
     >
       {/* Connection Line */}
-      {index < steps.length - 1 && (
+      {index < totalSteps - 1 && (
         <div className="hidden lg:block absolute top-16 left-full w-full h-0.5 bg-gradient-to-r from-white/20 to-transparent z-0" />
       )}
       
       <div className="relative z-10 text-center">
         <div className="mb-6">
-          <div className={`w-20 h-20 mx-auto rounded-2xl bg-gradient-to-br ${step.color} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300`}>
-            <Icon className="w-10 h-10 text-white" />
+          <div className={`w-20 h-20 mx-auto rounded-2xl bg-gradient-to-br ${color} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300`}>
+            {/* Handle both React components and JSX elements */}
+            {typeof step.icon === 'function' ? (
+              <step.icon className="w-10 h-10 text-white" />
+            ) : (
+              React.cloneElement(step.icon as React.ReactElement, { 
+                className: "w-10 h-10 text-white" 
+              })
+            )}
           </div>
           <div className="w-8 h-8 mx-auto rounded-full bg-[#E5195E] flex items-center justify-center text-white font-bold text-sm">
             {index + 1}
@@ -62,7 +103,11 @@ const StepCard = ({ step, index }: { step: typeof steps[0]; index: number }) =>
   );
 };
 
-export const StepsIllustrated = () => {
+export const StepsIllustrated = ({ title, subtitle, steps }: StepsIllustratedProps) => {
+  const finalSteps = steps ?? defaultSteps;
+  const finalTitle = title ?? "How We Turn Your Idea Into a Scalable Product";
+  const finalSubtitle = subtitle ?? "Our proven 4-step process ensures your project is delivered on time, on budget, and exceeds expectations.";
+
   return (
     <section className="relative py-20 bg-[#121212] overflow-hidden">
       <GridPattern strokeDasharray="4 2" />
@@ -76,16 +121,21 @@ export const StepsIllustrated = () => {
           className="text-center mb-16"
         >
           <h2 className="text-3xl lg:text-4xl font-semibold text-white mb-4">
-            How We Turn Your Idea Into a Scalable Product
+            {finalTitle}
           </h2>
           <p className="text-[#CCCCCC] text-lg max-w-2xl mx-auto">
-            Our proven 4-step process ensures your project is delivered on time, on budget, and exceeds expectations.
+            {finalSubtitle}
           </p>
         </motion.div>
         
         <div className="grid lg:grid-cols-4 gap-12 max-w-6xl mx-auto">
-          {steps.map((step, index) => (
-            <StepCard key={step.title} step={step} index={index} />
+          {finalSteps.map((step, index) => (
+            <StepCard 
+              key={step.title} 
+              step={step} 
+              index={index} 
+              totalSteps={finalSteps.length} // Pass the total number of steps
+            />
           ))}
         </div>
       </div>