Update registration Step

src/components/registration/RegistrationStepIndicator.js

@@ -0,0 +1,62 @@
+import React from 'react';
+
+const RegistrationStepIndicator = ({ currentStep, totalSteps = 4 }) => {
+  const steps = [
+    { number: 1, title: 'Personal Info' },
+    { number: 2, title: 'Preferences' },
+    { number: 3, title: 'Directory' },
+    { number: 4, title: 'Account' }
+  ];
+
+  return (
+    <div className="mb-8">
+      {/* Progress Bar */}
+      <div className="flex items-center justify-between relative">
+        {steps.map((step, index) => (
+          <React.Fragment key={step.number}>
+            {/* Step Circle */}
+            <div className="flex flex-col items-center relative z-10">
+              <div className={`
+                w-12 h-12 rounded-full flex items-center justify-center font-semibold text-lg
+                transition-all duration-300
+                ${currentStep === step.number
+                  ? 'bg-[#E07A5F] text-white scale-110 shadow-lg'
+                  : currentStep > step.number
+                    ? 'bg-[#81B29A] text-white'
+                    : 'bg-[#EAE0D5] text-[#6B708D]'
+                }
+              `}>
+                {currentStep > step.number ? '✓' : step.number}
+              </div>
+              <span className={`
+                text-sm mt-2 font-medium transition-colors
+                ${currentStep === step.number ? 'text-[#E07A5F]' : 'text-[#6B708D]'}
+              `}>
+                {step.title}
+              </span>
+            </div>
+
+            {/* Connecting Line */}
+            {index < steps.length - 1 && (
+              <div className="flex-1 h-1 mx-2 relative -top-6 bg-[#EAE0D5]">
+                <div
+                  className={`
+                    h-full transition-all duration-500
+                    ${currentStep > step.number ? 'bg-[#81B29A] w-full' : 'bg-transparent w-0'}
+                  `}
+                />
+              </div>
+            )}
+          </React.Fragment>
+        ))}
+      </div>
+
+      {/* Step Counter */}
+      <p className="text-center text-[#6B708D] mt-6 text-lg">
+        Step <span className="font-semibold text-[#E07A5F]">{currentStep}</span> of {totalSteps}
+      </p>
+    </div>
+  );
+};
+
+export default RegistrationStepIndicator;