diff --git a/src/app/sign-up/EmployerSignup.tsx b/src/app/sign-up/EmployerSignup.tsx new file mode 100644 index 0000000..32d8768 --- /dev/null +++ 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 ( +
+ {/* Step Progress Bar */} + + + {/* Form Content */} + {currentStep === 1 && setCurrentStep(2)} />} + {currentStep === 2 && setCurrentStep(3)} onBack={handleBackStep} />} + {currentStep === 3 && } + + {/* Navigation Buttons */} +
+ {currentStep > 1 && ( + + )} + {currentStep < 3 ? ( + + ) : ( + + )} +
+
+ ); +} diff --git a/src/app/sign-up/Step1.tsx b/src/app/sign-up/Step1.tsx new file mode 100644 index 0000000..19d1861 --- /dev/null +++ b/src/app/sign-up/Step1.tsx @@ -0,0 +1,25 @@ +interface Props { + onNext: () => void; + } + + const Step1 = ({ onNext }: Props) => { + return ( +
+

Sign up to hire talent

+
+ + + + + + +
+ +
+ ); + }; + + export default Step1; + \ No newline at end of file diff --git a/src/app/sign-up/Step2.tsx b/src/app/sign-up/Step2.tsx new file mode 100644 index 0000000..806114c --- /dev/null +++ b/src/app/sign-up/Step2.tsx @@ -0,0 +1,26 @@ +const Step2 = ({ onNext, onBack }: { onNext: () => void; onBack: () => void }) => { + return ( +
+

Company Association

+

Connect with your company to start posting jobs and managing applications.

+
+ + + + + +
+
+ + +
+
+ ); + }; + + export default Step2; + \ No newline at end of file diff --git a/src/app/sign-up/Step3.tsx b/src/app/sign-up/Step3.tsx new file mode 100644 index 0000000..df73907 --- /dev/null +++ b/src/app/sign-up/Step3.tsx @@ -0,0 +1,28 @@ +const Step3 = ({ onBack }: { onBack: () => void }) => { + return ( +
+

Verification Agreement

+

To ensure a secure platform, please agree to the following terms.

+ +
+

+ 1. Provide accurate and up-to-date information.
+ 2. Use the platform solely for lawful job posting and recruitment.
+ 3. Ensure job listings comply with labor laws. +

+
+ +
+ + +
+
+ ); + }; + + export default Step3; + \ No newline at end of file diff --git a/src/app/sign-up/StepProgress.tsx b/src/app/sign-up/StepProgress.tsx new file mode 100644 index 0000000..02872a8 --- /dev/null +++ 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 ( +
+ {steps.map((step, index) => { + const stepNumber = index + 1; + const isActive = stepNumber === currentStep; + const isCompleted = stepNumber < currentStep; + + return ( +
+ {/* Animated Step Circle */} + + {isCompleted ? ( + // Checkmark for completed steps + ) : ( + stepNumber // Show number for active/incomplete steps + )} + + + {/* Animated Step Divider (Loading Effect) */} + {index < steps.length - 1 && ( + + )} +
+ ); + })} +
+ ); +} diff --git a/src/app/sign-up/page.tsx b/src/app/sign-up/page.tsx new file mode 100644 index 0000000..6d62bcc --- /dev/null +++ b/src/app/sign-up/page.tsx @@ -0,0 +1,11 @@ +import EmployerSignup from "./EmployerSignup"; + +export default function EmployerSignupPage() { + return ( +
+
+ +
+
+ ); +}