rosuqt · rosuqt · Mar 18, 2025
diff --git a/src/app/sign-up/EmployerSignup.tsx b/src/app/sign-up/EmployerSignup.tsx
@@ -0,0 +1,60 @@
+"use client";
+import { useState } from "react";
+import StepProgress from "./StepProgress";
+import Step1 from "./Step1";
+import Step2 from "./Step2";
+import Step3 from "./Step3";
+
+export default function App() {
+  const [currentStep, setCurrentStep] = useState(1); // Initial step
+
+  // Function to move to the next step
+  const handleNextStep = () => {
+    if (currentStep < 3) {
+      setCurrentStep(currentStep + 1); // Move to the next step
+    }
+  };
+
+  // Function to go back to the previous step
+  const handleBackStep = () => {
+    if (currentStep > 1) {
+      setCurrentStep(currentStep - 1); // Move to the previous step
+    }
+  };
+
+  return (
+    <div className="w-full max-w-2xl mx-auto p-6 bg-white rounded-lg shadow-md">
+      {/* Step Progress Bar */}
+      <StepProgress currentStep={currentStep} />
+
+      {/* Form Content */}
+      {currentStep === 1 && <Step1 onNext={() => setCurrentStep(2)} />}
+      {currentStep === 2 && <Step2 onNext={() => setCurrentStep(3)} onBack={handleBackStep} />}
+      {currentStep === 3 && <Step3 onBack={handleBackStep} />}
+
+      {/* Navigation Buttons */}
+      <div className="flex justify-between mt-6">
+        {currentStep > 1 && (
+          <button
+            onClick={handleBackStep} // Go back to previous step
+            className="px-4 py-2 border rounded-md text-gray-700"
+          >
+            Back
+          </button>
+        )}
+        {currentStep < 3 ? (
+          <button
+            onClick={handleNextStep} // Move to the next step
+            className="px-4 py-2 bg-blue-600 text-white rounded-md"
+          >
+            Next
+          </button>
+        ) : (
+          <button className="px-4 py-2 bg-green-600 text-white rounded-md">
+            Sign Up
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/sign-up/Step1.tsx b/src/app/sign-up/Step1.tsx
@@ -0,0 +1,25 @@
+interface Props {
+    onNext: () => void;
+  }
+
+  const Step1 = ({ onNext }: Props) => {
+    return (
+      <div className="mt-6">
+        <h2 className="text-xl font-semibold">Sign up to hire talent</h2>
+        <div className="grid grid-cols-2 gap-4 mt-4">
+          <input className="border p-2 rounded w-full" placeholder="First name" />
+          <input className="border p-2 rounded w-full" placeholder="Last name" />
+          <input className="border p-2 rounded w-full col-span-2" placeholder="Phone Number" />
+          <input className="border p-2 rounded w-full col-span-2" placeholder="Personal email" />
+          <input type="password" className="border p-2 rounded w-full" placeholder="Password" />
+          <input type="password" className="border p-2 rounded w-full" placeholder="Confirm Password" />
+        </div>
+        <button className="mt-6 bg-indigo-600 text-white py-2 px-4 rounded" onClick={onNext}>
+          Next →
+        </button>
+      </div>
+    );
+  };
+
+  export default Step1;
+
diff --git a/src/app/sign-up/Step2.tsx b/src/app/sign-up/Step2.tsx
@@ -0,0 +1,26 @@
+const Step2 = ({ onNext, onBack }: { onNext: () => void; onBack: () => void }) => {
+    return (
+      <div className="mt-6">
+        <h2 className="text-xl font-semibold">Company Association</h2>
+        <p className="text-gray-600 text-sm mb-4">Connect with your company to start posting jobs and managing applications.</p>
+        <div className="grid grid-cols-2 gap-4">
+          <input className="border p-2 rounded w-full" placeholder="Company" />
+          <input className="border p-2 rounded w-full" placeholder="Company Branch" />
+          <input className="border p-2 rounded w-full" placeholder="Company Role" />
+          <input className="border p-2 rounded w-full" placeholder="Job Title" />
+          <input className="border p-2 rounded w-full col-span-2" placeholder="Company Email (if applicable)" />
+        </div>
+        <div className="flex justify-between mt-6">
+          <button className="bg-gray-400 text-white py-2 px-4 rounded" onClick={onBack}>
+            ← Back
+          </button>
+          <button className="bg-indigo-600 text-white py-2 px-4 rounded" onClick={onNext}>
+            Next →
+          </button>
+        </div>
+      </div>
+    );
+  };
+
+  export default Step2;
+
diff --git a/src/app/sign-up/Step3.tsx b/src/app/sign-up/Step3.tsx
@@ -0,0 +1,28 @@
+const Step3 = ({ onBack }: { onBack: () => void }) => {
+    return (
+      <div className="mt-6">
+        <h2 className="text-xl font-semibold">Verification Agreement</h2>
+        <p className="text-gray-600 text-sm mb-4">To ensure a secure platform, please agree to the following terms.</p>
+
+        <div className="border p-4 rounded h-40 overflow-y-scroll">
+          <p className="text-sm">
+            1. Provide accurate and up-to-date information.<br />
+            2. Use the platform solely for lawful job posting and recruitment.<br />
+            3. Ensure job listings comply with labor laws.
+          </p>
+        </div>
+
+        <div className="flex justify-between mt-6">
+          <button className="bg-gray-400 text-white py-2 px-4 rounded" onClick={onBack}>
+            ← Back
+          </button>
+          <button className="bg-indigo-600 text-white py-2 px-4 rounded">
+            Sign Up
+          </button>
+        </div>
+      </div>
+    );
+  };
+
+  export default Step3;
+
diff --git a/src/app/sign-up/StepProgress.tsx b/src/app/sign-up/StepProgress.tsx
@@ -0,0 +1,51 @@
+"use client";
+import { motion } from "framer-motion";
+import { CheckCircle } from "lucide-react"; // Import CheckCircle from lucide-react
+
+interface StepProgressProps {
+  currentStep: number;
+}
+
+export default function StepProgress({ currentStep }: StepProgressProps) {
+  const steps = ["1", "2", "3"];
+
+  return (
+    <div className="flex items-center justify-center gap-4 mb-6">
+      {steps.map((step, index) => {
+        const stepNumber = index + 1;
+        const isActive = stepNumber === currentStep;
+        const isCompleted = stepNumber < currentStep;
+
+        return (
+          <div key={step} className="flex items-center">
+            {/* Animated Step Circle */}
+            <motion.div
+              className={`w-8 h-8 flex items-center justify-center rounded-full font-semibold transition-all
+                ${isCompleted ? "bg-blue-600 text-white" : ""}
+  ${isActive && !isCompleted ? "bg-blue-600 text-white" : "border-[3px] border-blue-600 text-blue-600 bg-white"}`}
+              initial={{ scale: 0.9 }}
+              animate={{ scale: isActive ? 1.3 : 1 }}
+              transition={{ type: "spring", stiffness: 200, damping: 10 }}
+            >
+              {isCompleted ? (
+                <CheckCircle className="text-blue-700" size={18} /> // Checkmark for completed steps
+              ) : (
+                stepNumber // Show number for active/incomplete steps
+              )}
+            </motion.div>
+
+            {/* Animated Step Divider (Loading Effect) */}
+            {index < steps.length - 1 && (
+              <motion.div
+                className={`h-1 bg-blue-600 rounded-full`}
+                initial={{ width: 0 }}
+                animate={{ width: isCompleted ? 40 : currentStep === stepNumber + 1 ? 40 : 0 }}
+                transition={{ duration: 0.5, ease: "easeInOut" }}
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/app/sign-up/page.tsx b/src/app/sign-up/page.tsx
@@ -0,0 +1,11 @@
+import EmployerSignup from "./EmployerSignup";
+
+export default function EmployerSignupPage() {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-100">
+      <div className="w-full max-w-3xl bg-white p-6 rounded-lg shadow-md">
+        <EmployerSignup />
+      </div>
+    </div>
+  );
+}