ra/auditly
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
Ra
2025-08-24 00:48:41 -07:00
parent 9c20073755
commit f2145edf56
37 changed files with 2621 additions and 2692 deletions
Download Patch File Download Diff File Expand all files Collapse all files

228
src/pages/EmployeeQuestionnaire.tsx
View File

@@ -28,7 +28,7 @@ const AuditlyIcon: React.FC = () => (
// Progress Bar Component for Section Headers
const SectionProgressBar: React.FC<{ currentSection: number; totalSections: number }> = ({ currentSection, totalSections }) => {
return (
<div className="p-4 bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
<div className="p-4 bg-[--Neutrals-NeutralSlate100] rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
{Array.from({ length: 7 }, (_, index) => {
const isActive = index === 0; // First step is always active for section start
return (
@@ -59,14 +59,14 @@ const YesNoChoice: React.FC<{
totalSteps?: number;
}> = ({ question, value, onChange, onBack, onNext, onSkip, currentStep, totalSteps }) => {
return (
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0 inline-flex flex-col justify-center items-center gap-9">
<div className="w-[1440px] h-[810px] py-6 relative bg-[--Neutrals-NeutralSlate0] inline-flex flex-col justify-center items-center gap-9">
<div className="w-full max-w-[464px] min-w-[464px] flex flex-col justify-start items-start gap-12">
<div className="self-stretch flex flex-col justify-start items-start gap-8">
<div className="self-stretch text-center justify-start text-Neutrals-NeutralSlate950 text-2xl font-medium font-['Neue_Montreal'] leading-normal">{question}</div>
<div className="self-stretch text-center justify-start text-[--Neutrals-NeutralSlate950] text-2xl font-medium font-['Neue_Montreal'] leading-normal">{question}</div>
<div className="self-stretch inline-flex justify-center items-center gap-3">
<div
onClick={() => onChange('No')}
className={`w-20 h-20 relative rounded-[999px] overflow-hidden cursor-pointer transition-colors ${value === 'No' ? 'bg-Neutrals-NeutralSlate800' : 'bg-Neutrals-NeutralSlate100 hover:bg-Neutrals-NeutralSlate200'}`}
className={`w-20 h-20 relative rounded-[999px] overflow-hidden cursor-pointer transition-colors ${value === 'No' ? 'bg-Neutrals-NeutralSlate800' : 'bg-[--Neutrals-NeutralSlate100] hover:bg-Neutrals-NeutralSlate200'}`}
>
<div className={`absolute inset-0 flex items-center justify-center text-center text-base font-normal font-['Inter'] leading-normal ${value === 'No' ? 'text-Neutrals-NeutralSlate0' : 'text-Neutrals-NeutralSlate950'}`}>
No
@@ -74,7 +74,7 @@ const YesNoChoice: React.FC<{
</div>
<div
onClick={() => onChange('Yes')}
className={`w-20 h-20 relative rounded-[999px] overflow-hidden cursor-pointer transition-colors ${value === 'Yes' ? 'bg-Neutrals-NeutralSlate800' : 'bg-Neutrals-NeutralSlate100 hover:bg-Neutrals-NeutralSlate200'}`}
className={`w-20 h-20 relative rounded-[999px] overflow-hidden cursor-pointer transition-colors ${value === 'Yes' ? 'bg-Neutrals-NeutralSlate800' : 'bg-[--Neutrals-NeutralSlate100] hover:bg-Neutrals-NeutralSlate200'}`}
>
<div className={`absolute inset-0 flex items-center justify-center text-center text-base font-normal font-['Inter'] leading-normal ${value === 'Yes' ? 'text-Neutrals-NeutralSlate0' : 'text-Neutrals-NeutralSlate950'}`}>
Yes
@@ -86,10 +86,10 @@ const YesNoChoice: React.FC<{
{onBack && (
<button
onClick={onBack}
className="h-12 px-8 py-3.5 bg-Neutrals-NeutralSlate100 rounded-[999px] flex justify-center items-center gap-1 overflow-hidden hover:bg-Neutrals-NeutralSlate200"
className="h-12 px-8 py-3.5 bg-[--Neutrals-NeutralSlate100] rounded-[999px] flex justify-center items-center gap-1 overflow-hidden hover:bg-[--Neutrals-NeutralSlate100]"
>
<div className="px-1 flex justify-center items-center">
<div className="justify-center text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">Back</div>
<div className="justify-center text-[--Neutrals-NeutralSlate950] text-sm font-medium font-['Inter'] leading-tight">Back</div>
</div>
</button>
)}
@@ -109,21 +109,21 @@ const YesNoChoice: React.FC<{
{onSkip && (
<div
onClick={onSkip}
className="px-3 py-1.5 left-[1363px] top-[24px] absolute bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden cursor-pointer hover:bg-Neutrals-NeutralSlate200"
className="px-3 py-1.5 left-[1363px] top-[24px] absolute bg-[--Neutrals-NeutralSlate100] rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden cursor-pointer hover:bg-[--Neutrals-NeutralSlate100]"
>
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-none">Skip</div>
<div className="justify-start text-[--Neutrals-NeutralSlate500] text-sm font-medium font-['Inter'] leading-none">Skip</div>
</div>
)}
{/* Progress indicators */}
{currentStep && totalSteps && (
<>
<div className="px-3 py-1.5 left-[24px] top-[24px] absolute bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] uppercase leading-none">{currentStep} of {totalSteps}</div>
<div className="px-3 py-1.5 left-[24px] top-[24px] absolute bg-[--Neutrals-NeutralSlate100] rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
<div className="justify-start text-[--Neutrals-NeutralSlate500] text-sm font-medium font-['Inter'] uppercase leading-none">{currentStep} of {totalSteps}</div>
</div>
<div className="w-[464px] max-w-[464px] min-w-[464px] left-[488px] top-[24px] absolute flex flex-col justify-start items-center gap-4">
<SectionProgressBar currentSection={currentStep} totalSections={totalSteps} />
<div className="self-stretch text-center justify-start text-Neutrals-NeutralSlate500 text-base font-medium font-['Neue_Montreal'] leading-normal">Leadership & Organizational Structure</div>
<div className="self-stretch text-center justify-start text-[--Neutrals-NeutralSlate500] text-base font-medium font-['Neue_Montreal'] leading-normal">Leadership & Organizational Structure</div>
</div>
</>
)}
@@ -142,7 +142,7 @@ const SectionIntro: React.FC<{
}> = ({ sectionNumber, title, description, onStart, imageUrl = "https://placehold.co/560x682" }) => {
return (
<div className="w-[1440px] bg-white inline-flex justify-start items-center overflow-hidden">
<div className="flex-1 h-[810px] px-32 py-48 bg-Neutrals-NeutralSlate0 flex justify-center items-center gap-2.5 overflow-hidden">
<div className="flex-1 h-[810px] px-32 py-48 bg-[--Neutrals-NeutralSlate0] flex justify-center items-center gap-2.5 overflow-hidden">
<div className="flex-1 max-w-[464px] inline-flex flex-col justify-start items-start gap-12">
<div className="self-stretch flex flex-col justify-start items-start gap-6">
<div className="w-12 h-12 relative bg-Brand-Orange rounded-xl outline outline-2 outline-offset-[-2px] outline-blue-400 overflow-hidden">
@@ -152,11 +152,11 @@ const SectionIntro: React.FC<{
</div>
</div>
<div className="self-stretch flex flex-col justify-start items-start gap-4">
<div className="px-3 py-1.5 bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] uppercase leading-none">{sectionNumber}</div>
<div className="px-3 py-1.5 bg-[--Neutrals-NeutralSlate100] rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
<div className="justify-start text-[--Neutrals-NeutralSlate500] text-sm font-medium font-['Inter'] uppercase leading-none">{sectionNumber}</div>
</div>
<div className="self-stretch justify-start text-Neutrals-NeutralSlate800 text-5xl font-medium font-['Neue_Montreal'] leading-[48px]">{title}</div>
<div className="self-stretch justify-center text-Neutrals-NeutralSlate500 text-base font-normal font-['Inter'] leading-normal">{description}</div>
<div className="self-stretch justify-start text-[--Neutrals-NeutralSlate800] text-5xl font-medium font-['Neue_Montreal'] leading-[48px]">{title}</div>
<div className="self-stretch justify-center text-[--Neutrals-NeutralSlate500] text-base font-normal font-['Inter'] leading-normal">{description}</div>
</div>
</div>
<button
@@ -192,7 +192,7 @@ const EmployeeFormStep1: React.FC<{ onNext: (data: any) => void }> = ({ onNext }
return (
<div className="w-[1440px] bg-white inline-flex justify-start items-center overflow-hidden">
<div className="flex-1 h-[810px] px-32 py-48 bg-Neutrals-NeutralSlate0 flex justify-center items-center gap-2.5 overflow-hidden">
<div className="flex-1 h-[810px] px-32 py-48 bg-[--Neutrals-NeutralSlate0] flex justify-center items-center gap-2.5 overflow-hidden">
<div className="flex-1 max-w-[464px] inline-flex flex-col justify-start items-start gap-12">
<div className="self-stretch flex flex-col justify-start items-start gap-6">
<div className="w-12 h-12 relative bg-Brand-Orange rounded-xl outline outline-2 outline-offset-[-2px] outline-blue-400 overflow-hidden">
@@ -202,30 +202,30 @@ const EmployeeFormStep1: React.FC<{ onNext: (data: any) => void }> = ({ onNext }
</div>
</div>
<div className="self-stretch flex flex-col justify-start items-start gap-3">
<div className="self-stretch justify-start text-Neutrals-NeutralSlate950 text-2xl font-semibold font-['Inter'] leading-8">Welcome to the Auditly Employee Assessment</div>
<div className="self-stretch justify-start text-Neutrals-NeutralSlate500 text-base font-normal font-['Inter'] leading-normal">Let's learn about your role, contribution and help us get a better understand of how you work best.</div>
<div className="self-stretch justify-start text-[--Neutrals-NeutralSlate950] text-2xl font-semibold font-['Inter'] leading-8">Welcome to the Auditly Employee Assessment</div>
<div className="self-stretch justify-start text-[--Neutrals-NeutralSlate500] text-base font-normal font-['Inter'] leading-normal">Let's learn about your role, contribution and help us get a better understand of how you work best.</div>
</div>
</div>
<div className="self-stretch flex flex-col justify-start items-start gap-8">
<div className="self-stretch flex flex-col justify-start items-start gap-6">
<div className="self-stretch flex flex-col justify-start items-start gap-2">
<div className="self-stretch inline-flex justify-start items-center gap-0.5">
<div className="justify-start text-Neutrals-NeutralSlate950 text-sm font-normal font-['Inter'] leading-tight">Your Role & Output</div>
<div className="justify-start text-[--Neutrals-NeutralSlate950] text-sm font-normal font-['Inter'] leading-tight">Your Role & Output</div>
</div>
<div className="self-stretch justify-start text-Neutrals-NeutralSlate500 text-sm font-normal font-['Inter'] leading-tight">Tell us about your current role and what you work on</div>
<div className="self-stretch justify-start text-[--Neutrals-NeutralSlate500] text-sm font-normal font-['Inter'] leading-tight">Tell us about your current role and what you work on</div>
</div>
<div className="self-stretch flex flex-col justify-start items-start gap-2">
<div className="self-stretch inline-flex justify-start items-center gap-0.5">
<div className="justify-start text-Neutrals-NeutralSlate900 text-sm font-normal font-['Inter'] leading-tight">Your Name</div>
<div className="justify-start text-[--Neutrals-NeutralSlate900] text-sm font-normal font-['Inter'] leading-tight">Your Name</div>
<div className="justify-start text-Brand-Orange text-sm font-medium font-['Inter'] leading-tight">*</div>
</div>
<div className="self-stretch flex flex-col justify-start items-start gap-1">
<div className="self-stretch px-4 py-3.5 bg-Neutrals-NeutralSlate100 rounded-[999px] inline-flex justify-start items-center gap-2 overflow-hidden">
<div className="self-stretch px-4 py-3.5 bg-[--Neutrals-NeutralSlate100] rounded-[999px] inline-flex justify-start items-center gap-2 overflow-hidden">
<input
type="text"
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
className="flex-1 bg-transparent text-Neutrals-NeutralSlate950 text-sm font-normal font-['Inter'] leading-tight placeholder:text-Neutrals-NeutralSlate500 outline-none"
className="flex-1 bg-transparent text-[--Neutrals-NeutralSlate950] text-sm font-normal font-['Inter'] leading-tight placeholder:text-[--Neutrals-NeutralSlate950] outline-none"
placeholder="Enter your full name"
/>
</div>
@@ -233,16 +233,16 @@ const EmployeeFormStep1: React.FC<{ onNext: (data: any) => void }> = ({ onNext }
</div>
<div className="self-stretch flex flex-col justify-start items-start gap-2">
<div className="self-stretch inline-flex justify-start items-center gap-0.5">
<div className="justify-start text-Neutrals-NeutralSlate900 text-sm font-normal font-['Inter'] leading-tight">What is your role at the company?</div>
<div className="justify-start text-[--Neutrals-NeutralSlate900] text-sm font-normal font-['Inter'] leading-tight">What is your role at the company?</div>
<div className="justify-start text-Brand-Orange text-sm font-medium font-['Inter'] leading-tight">*</div>
</div>
<div className="self-stretch flex flex-col justify-start items-start gap-1">
<div className="self-stretch px-4 py-3.5 bg-Neutrals-NeutralSlate100 rounded-[999px] inline-flex justify-start items-center gap-2 overflow-hidden">
<div className="self-stretch px-4 py-3.5 bg-[--Neutrals-NeutralSlate100] rounded-[999px] inline-flex justify-start items-center gap-2 overflow-hidden">
<input
type="text"
value={formData.role}
onChange={(e) => setFormData({ ...formData, role: e.target.value })}
className="flex-1 bg-transparent text-Neutrals-NeutralSlate950 text-sm font-normal font-['Inter'] leading-tight placeholder:text-Neutrals-NeutralSlate500 outline-none"
className="flex-1 bg-transparent text-[--Neutrals-NeutralSlate950] text-sm font-normal font-['Inter'] leading-tight placeholder:text-[--Neutrals-NeutralSlate950] outline-none"
placeholder="e.g. Software Engineer, Marketing Manager"
/>
</div>
@@ -250,16 +250,16 @@ const EmployeeFormStep1: React.FC<{ onNext: (data: any) => void }> = ({ onNext }
</div>
<div className="self-stretch flex flex-col justify-start items-start gap-2">
<div className="self-stretch inline-flex justify-start items-center gap-0.5">
<div className="justify-start text-Neutrals-NeutralSlate900 text-sm font-normal font-['Inter'] leading-tight">What department do you work in?</div>
<div className="justify-start text-[--Neutrals-NeutralSlate900] text-sm font-normal font-['Inter'] leading-tight">What department do you work in?</div>
<div className="justify-start text-Brand-Orange text-sm font-medium font-['Inter'] leading-tight">*</div>
</div>
<div className="self-stretch flex flex-col justify-start items-start gap-1">
<div className="self-stretch px-4 py-3.5 bg-Neutrals-NeutralSlate100 rounded-[999px] inline-flex justify-start items-center gap-2 overflow-hidden">
<div className="self-stretch px-4 py-3.5 bg-[--Neutrals-NeutralSlate100] rounded-[999px] inline-flex justify-start items-center gap-2 overflow-hidden">
<input
type="text"
value={formData.department}
onChange={(e) => setFormData({ ...formData, department: e.target.value })}
className="flex-1 bg-transparent text-Neutrals-NeutralSlate950 text-sm font-normal font-['Inter'] leading-tight placeholder:text-Neutrals-NeutralSlate500 outline-none"
className="flex-1 bg-transparent text-[--Neutrals-NeutralSlate950] text-sm font-normal font-['Inter'] leading-tight placeholder:text-[--Neutrals-NeutralSlate950] outline-none"
placeholder="e.g. Engineering, Sales, Marketing"
/>
</div>
@@ -272,7 +272,7 @@ const EmployeeFormStep1: React.FC<{ onNext: (data: any) => void }> = ({ onNext }
disabled={!formData.name || !formData.role || !formData.department}
className="flex-1 px-6 py-3.5 bg-Brand-Orange rounded-[999px] inline-flex justify-center items-center gap-2 overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed"
>
<div className="justify-center text-Neutrals-NeutralSlate0 text-base font-medium font-['Inter'] leading-normal">Continue</div>
<div className="justify-center text-[--Neutrals-NeutralSlate0] text-base font-medium font-['Inter'] leading-normal">Continue</div>
</button>
</div>
</div>
@@ -292,23 +292,23 @@ const EmployeeFormStep2: React.FC<{ onNext: (data: any) => void; onBack: () => v
});
return (
<div className="w-[1440px] h-[810px] px-[488px] py-32 bg-Neutrals-NeutralSlate0 inline-flex flex-col justify-center items-center gap-9">
<div className="w-[1440px] h-[810px] px-[488px] py-32 bg-[--Neutrals-NeutralSlate0] inline-flex flex-col justify-center items-center gap-9">
<div className="w-full max-w-[464px] min-w-[464px] flex flex-col justify-start items-start gap-12">
<div className="self-stretch flex flex-col justify-start items-start gap-8">
<div className="self-stretch text-center justify-start text-Neutrals-NeutralSlate950 text-2xl font-medium font-['Neue_Montreal'] leading-normal">Personal Information</div>
<div className="self-stretch text-center justify-start text-[--Neutrals-NeutralSlate950] text-2xl font-medium font-['Neue_Montreal'] leading-normal">Personal Information</div>
<div className="self-stretch flex flex-col justify-start items-start gap-6">
<div className="self-stretch flex flex-col justify-start items-start gap-2">
<div className="self-stretch inline-flex justify-start items-center gap-0.5">
<div className="justify-start text-Neutrals-NeutralSlate900 text-sm font-normal font-['Inter'] leading-tight">Email</div>
<div className="justify-start text-[--Neutrals-NeutralSlate900] text-sm font-normal font-['Inter'] leading-tight">Email</div>
<div className="justify-start text-Brand-Orange text-sm font-medium font-['Inter'] leading-tight">*</div>
</div>
<div className="self-stretch flex flex-col justify-start items-start gap-1">
<div className="self-stretch px-4 py-3.5 bg-Neutrals-NeutralSlate100 rounded-[999px] inline-flex justify-start items-center gap-2 overflow-hidden">
<div className="self-stretch px-4 py-3.5 bg-[--Neutrals-NeutralSlate100] rounded-[999px] inline-flex justify-start items-center gap-2 overflow-hidden">
<input
type="email"
value={formData.email}
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
className="flex-1 bg-transparent text-Neutrals-NeutralSlate950 text-sm font-normal font-['Inter'] leading-tight placeholder:text-Neutrals-NeutralSlate500 outline-none"
className="flex-1 bg-transparent text-[--Neutrals-NeutralSlate950] text-sm font-normal font-['Inter'] leading-tight placeholder:text-[--Neutrals-NeutralSlate950] outline-none"
placeholder="Email@gmail.com"
/>
</div>
@@ -316,16 +316,16 @@ const EmployeeFormStep2: React.FC<{ onNext: (data: any) => void; onBack: () => v
</div>
<div className="self-stretch flex flex-col justify-start items-start gap-2">
<div className="self-stretch inline-flex justify-start items-center gap-0.5">
<div className="justify-start text-Neutrals-NeutralSlate900 text-sm font-normal font-['Inter'] leading-tight">Your Name</div>
<div className="justify-start text-[--Neutrals-NeutralSlate900] text-sm font-normal font-['Inter'] leading-tight">Your Name</div>
<div className="justify-start text-Brand-Orange text-sm font-medium font-['Inter'] leading-tight">*</div>
</div>
<div className="self-stretch flex flex-col justify-start items-start gap-1">
<div className="self-stretch px-4 py-3.5 bg-Neutrals-NeutralSlate100 rounded-[999px] inline-flex justify-start items-center gap-2 overflow-hidden">
<div className="self-stretch px-4 py-3.5 bg-[--Neutrals-NeutralSlate100] rounded-[999px] inline-flex justify-start items-center gap-2 overflow-hidden">
<input
type="text"
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
className="flex-1 bg-transparent text-Neutrals-NeutralSlate950 text-sm font-normal font-['Inter'] leading-tight placeholder:text-Neutrals-NeutralSlate500 outline-none"
className="flex-1 bg-transparent text-[--Neutrals-NeutralSlate950] text-sm font-normal font-['Inter'] leading-tight placeholder:text-[--Neutrals-NeutralSlate950] outline-none"
placeholder="John Doe"
/>
</div>
@@ -333,16 +333,16 @@ const EmployeeFormStep2: React.FC<{ onNext: (data: any) => void; onBack: () => v
</div>
<div className="self-stretch flex flex-col justify-start items-start gap-2">
<div className="self-stretch inline-flex justify-start items-center gap-0.5">
<div className="justify-start text-Neutrals-NeutralSlate900 text-sm font-normal font-['Inter'] leading-tight">What is the name of your Company and department?</div>
<div className="justify-start text-[--Neutrals-NeutralSlate900] text-sm font-normal font-['Inter'] leading-tight">What is the name of your Company and department?</div>
<div className="justify-start text-Brand-Orange text-sm font-medium font-['Inter'] leading-tight">*</div>
</div>
<div className="self-stretch flex flex-col justify-start items-start gap-1">
<div className="self-stretch px-4 py-3.5 bg-Neutrals-NeutralSlate100 rounded-[999px] inline-flex justify-start items-center gap-2 overflow-hidden">
<div className="self-stretch px-4 py-3.5 bg-[--Neutrals-NeutralSlate100] rounded-[999px] inline-flex justify-start items-center gap-2 overflow-hidden">
<input
type="text"
value={formData.company}
onChange={(e) => setFormData({ ...formData, company: e.target.value })}
className="flex-1 bg-transparent text-Neutrals-NeutralSlate950 text-sm font-normal font-['Inter'] leading-tight placeholder:text-Neutrals-NeutralSlate500 outline-none"
className="flex-1 bg-transparent text-[--Neutrals-NeutralSlate950] text-sm font-normal font-['Inter'] leading-tight placeholder:text-[--Neutrals-NeutralSlate950] outline-none"
placeholder="Doe Enterprises"
/>
</div>
@@ -353,9 +353,9 @@ const EmployeeFormStep2: React.FC<{ onNext: (data: any) => void; onBack: () => v
<div className="self-stretch inline-flex justify-start items-center gap-3">
<button
onClick={onBack}
className="flex-1 px-4 py-3.5 bg-Neutrals-NeutralSlate100 rounded-[999px] inline-flex justify-center items-center gap-1 overflow-hidden"
className="flex-1 px-4 py-3.5 bg-[--Neutrals-NeutralSlate100] rounded-[999px] inline-flex justify-center items-center gap-1 overflow-hidden"
>
<div className="justify-center text-Neutrals-NeutralSlate800 text-sm font-medium font-['Inter'] leading-tight">Back</div>
<div className="justify-center text-[--Neutrals-NeutralSlate800] text-sm font-medium font-['Inter'] leading-tight">Back</div>
</button>
<button
onClick={() => onNext(formData)}
@@ -377,7 +377,7 @@ const EmployeeFormStep3: React.FC<{ onNext: (data: any) => void; onBack: () => v
const [answer, setAnswer] = useState<string>('');
return (
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0">
<div className="w-[1440px] h-[810px] py-6 relative bg-[--Neutrals-NeutralSlate0]">
<FigmaTextArea
question="What is your current title and department?"
value={answer}
@@ -402,7 +402,7 @@ const EmployeeFormStep4: React.FC<{ onNext: (data: any) => void; onBack: () => v
const [answer, setAnswer] = useState<string>('');
return (
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0">
<div className="w-[1440px] h-[810px] py-6 relative bg-[--Neutrals-NeutralSlate0]">
<FigmaTextArea
question="Describe your typical daily tasks and responsibilities"
value={answer}
@@ -428,7 +428,7 @@ const EmployeeFormStep5: React.FC<{ onNext: (data: any) => void; onBack: () => v
const [rating, setRating] = useState<number | undefined>();
return (
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0">
<div className="w-[1440px] h-[810px] py-6 relative bg-[--Neutrals-NeutralSlate0]">
<FigmaRatingScale
question="How clearly do you understand your role and responsibilities?"
leftLabel="Not so much"
@@ -456,7 +456,7 @@ const EmployeeFormStep6: React.FC<{ onNext: (data: any) => void; onBack: () => v
const [rating, setRating] = useState<number | undefined>();
return (
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0">
<div className="w-[1440px] h-[810px] py-6 relative bg-[--Neutrals-NeutralSlate0]">
<FigmaRatingScale
question="How satisfied are you with your current work environment?"
leftLabel="Not satisfied"
@@ -484,7 +484,7 @@ const EmployeeFormStep7: React.FC<{ onNext: (data: any) => void; onBack: () => v
const [rating, setRating] = useState<number | undefined>();
return (
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0">
<div className="w-[1440px] h-[810px] py-6 relative bg-[--Neutrals-NeutralSlate0]">
<FigmaRatingScale
question="How would you rate communication within your team?"
leftLabel="Poor"
@@ -520,17 +520,17 @@ const EmployeeFormStep8: React.FC<{ onNext: (data: any) => void; onBack: () => v
];
return (
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0">
<div className="w-[1440px] h-[810px] py-6 relative bg-[--Neutrals-NeutralSlate0]">
<div className="flex flex-col items-center justify-center h-full">
<div className="w-full max-w-[464px] flex flex-col items-center gap-8">
<h2 className="text-2xl font-medium font-['Neue_Montreal'] text-Neutrals-NeutralSlate950 text-center">
<h2 className="text-2xl font-medium font-['Neue_Montreal'] text-[--Neutrals-NeutralSlate950] text-center">
What work style best describes you?
</h2>
<div className="w-full flex flex-col gap-3">
{options.map((option, index) => (
<label
key={index}
className="p-4 bg-Neutrals-NeutralSlate100 rounded-2xl flex items-center gap-3 cursor-pointer hover:bg-Neutrals-NeutralSlate200 transition-colors"
className="p-4 bg-[--Neutrals-NeutralSlate100] rounded-2xl flex items-center gap-3 cursor-pointer hover:bg-[--Neutrals-NeutralSlate100] transition-colors"
>
<input
type="radio"
@@ -540,7 +540,7 @@ const EmployeeFormStep8: React.FC<{ onNext: (data: any) => void; onBack: () => v
onChange={(e) => setSelectedOption(e.target.value)}
className="w-5 h-5 accent-Brand-Orange"
/>
<span className="text-Neutrals-NeutralSlate800 text-sm font-medium font-['Inter']">
<span className="text-[--Neutrals-NeutralSlate800] text-sm font-medium font-['Inter']">
{option}
</span>
</label>
@@ -579,7 +579,7 @@ const EmployeeFormStep10: React.FC<{ onNext: (data: any) => void; onBack: () =>
const [rating, setRating] = useState<number | undefined>();
return (
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0">
<div className="w-[1440px] h-[810px] py-6 relative bg-[--Neutrals-NeutralSlate0]">
<FigmaRatingScale
question="How would you rate your weekly output (volume & quality)?"
leftLabel="Very little"
@@ -607,7 +607,7 @@ const EmployeeFormStep11: React.FC<{ onNext: (data: any) => void; onBack: () =>
const [answer, setAnswer] = useState<string>('');
return (
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0">
<div className="w-[1440px] h-[810px] py-6 relative bg-[--Neutrals-NeutralSlate0]">
<FigmaTextArea
question="What are your top 2–3 recurring deliverables?"
value={answer}
@@ -632,7 +632,7 @@ const EmployeeFormStep12: React.FC<{ onNext: (data: any) => void; onBack: () =>
const [answer, setAnswer] = useState<string>('');
return (
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0">
<div className="w-[1440px] h-[810px] py-6 relative bg-[--Neutrals-NeutralSlate0]">
<FigmaTextArea
question="List measurable results you've produced in the last 60 days."
value={answer}
@@ -675,7 +675,7 @@ const EmployeeFormStep14: React.FC<{ onNext: (data: any) => void; onBack: () =>
const [answer, setAnswer] = useState<string>('');
return (
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0">
<div className="w-[1440px] h-[810px] py-6 relative bg-[--Neutrals-NeutralSlate0]">
<FigmaTextArea
question="If yes: What are they?"
value={answer}
@@ -699,7 +699,7 @@ const EmployeeFormStep15: React.FC<{ onNext: (data: any) => void; onBack: () =>
const [answer, setAnswer] = useState<string>('');
return (
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0">
<div className="w-[1440px] h-[810px] py-6 relative bg-[--Neutrals-NeutralSlate0]">
<FigmaTextArea
question="Who do you report to? How often do you meet/check-in?"
value={answer}
@@ -735,7 +735,7 @@ const EmployeeFormStep17: React.FC<{ onNext: (data: any) => void; onBack: () =>
const [answer, setAnswer] = useState<string>('');
return (
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0">
<div className="w-[1440px] h-[810px] py-6 relative bg-[--Neutrals-NeutralSlate0]">
<FigmaTextArea
question="Who do you work most closely with?"
value={answer}
@@ -759,7 +759,7 @@ const EmployeeFormStep18: React.FC<{ onNext: (data: any) => void; onBack: () =>
const [answer, setAnswer] = useState<string>('');
return (
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0">
<div className="w-[1440px] h-[810px] py-6 relative bg-[--Neutrals-NeutralSlate0]">
<FigmaTextArea
question="Describe any collaboration issues, if any?"
value={answer}
@@ -783,7 +783,7 @@ const EmployeeFormStep19: React.FC<{ onNext: (data: any) => void; onBack: () =>
const [rating, setRating] = useState<number | undefined>();
return (
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0">
<div className="w-[1440px] h-[810px] py-6 relative bg-[--Neutrals-NeutralSlate0]">
<FigmaRatingScale
question="How would you rate team communication overall?"
leftLabel="Poor"
@@ -811,7 +811,7 @@ const EmployeeFormStep20: React.FC<{ onNext: (data: any) => void; onBack: () =>
const [answer, setAnswer] = useState<string>('');
return (
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0">
<div className="w-[1440px] h-[810px] py-6 relative bg-[--Neutrals-NeutralSlate0]">
<FigmaTextArea
question="Do you feel supported by your team? How?"
value={answer}
@@ -847,7 +847,7 @@ const EmployeeFormStep22: React.FC<{ onNext: (data: any) => void; onBack: () =>
const [answer, setAnswer] = useState<string>('');
return (
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0">
<div className="w-[1440px] h-[810px] py-6 relative bg-[--Neutrals-NeutralSlate0]">
<FigmaTextArea
question="What tools and software do you currently use?"
value={answer}
@@ -871,7 +871,7 @@ const EmployeeFormStep23: React.FC<{ onNext: (data: any) => void; onBack: () =>
const [rating, setRating] = useState<number | undefined>();
return (
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0">
<div className="w-[1440px] h-[810px] py-6 relative bg-[--Neutrals-NeutralSlate0]">
<FigmaRatingScale
question="How effective are your current tools?"
leftLabel="Not effective"
@@ -899,7 +899,7 @@ const EmployeeFormStep24: React.FC<{ onNext: (data: any) => void; onBack: () =>
const [answer, setAnswer] = useState<string>('');
return (
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0">
<div className="w-[1440px] h-[810px] py-6 relative bg-[--Neutrals-NeutralSlate0]">
<FigmaTextArea
question="What tools or resources are you missing to do your job more effectively?"
value={answer}
@@ -935,7 +935,7 @@ const EmployeeFormStep26: React.FC<{ onNext: (data: any) => void; onBack: () =>
const [answer, setAnswer] = useState<string>('');
return (
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0">
<div className="w-[1440px] h-[810px] py-6 relative bg-[--Neutrals-NeutralSlate0]">
<FigmaTextArea
question="What are your key skills and strengths?"
value={answer}
@@ -959,7 +959,7 @@ const EmployeeFormStep27: React.FC<{ onNext: (data: any) => void; onBack: () =>
const [answer, setAnswer] = useState<string>('');
return (
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0">
<div className="w-[1440px] h-[810px] py-6 relative bg-[--Neutrals-NeutralSlate0]">
<FigmaTextArea
question="What skills would you like to develop or improve?"
value={answer}
@@ -1001,7 +1001,7 @@ const EmployeeFormStep29: React.FC<{ onNext: (data: any) => void; onBack: () =>
const [answer, setAnswer] = useState<string>('');
return (
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0">
<div className="w-[1440px] h-[810px] py-6 relative bg-[--Neutrals-NeutralSlate0]">
<FigmaTextArea
question="What are your career goals within the company?"
value={answer}
@@ -1037,7 +1037,7 @@ const EmployeeFormStep31: React.FC<{ onNext: (data: any) => void; onBack: () =>
const [answer, setAnswer] = useState<string>('');
return (
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0">
<div className="w-[1440px] h-[810px] py-6 relative bg-[--Neutrals-NeutralSlate0]">
<FigmaTextArea
question="What improvements would you suggest for the company?"
value={answer}
@@ -1061,7 +1061,7 @@ const EmployeeFormStep32: React.FC<{ onNext: (data: any) => void; onBack: () =>
const [rating, setRating] = useState<number | undefined>();
return (
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0">
<div className="w-[1440px] h-[810px] py-6 relative bg-[--Neutrals-NeutralSlate0]">
<FigmaRatingScale
question="How satisfied are you with your current job overall?"
leftLabel="Not satisfied"
@@ -1089,7 +1089,7 @@ const EmployeeFormStep33: React.FC<{ onNext: (data: any) => void; onBack: () =>
const [answer, setAnswer] = useState<string>('');
return (
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0">
<div className="w-[1440px] h-[810px] py-6 relative bg-[--Neutrals-NeutralSlate0]">
<FigmaTextArea
question="Any additional feedback or suggestions for the company?"
value={answer}
@@ -1114,15 +1114,15 @@ const EmployeeFormStep35: React.FC<{ onNext: () => void; onBack: () => void }> =
const [answer, setAnswer] = React.useState('');
return (
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0 inline-flex flex-col justify-center items-center gap-9">
<div className="w-[1440px] h-[810px] py-6 relative bg-[--Neutrals-NeutralSlate0] inline-flex flex-col justify-center items-center gap-9">
<div className="w-full max-w-[464px] min-w-[464px] flex flex-col justify-start items-start gap-12">
<div className="self-stretch flex flex-col justify-start items-start gap-8">
<div className="self-stretch text-center justify-start text-Neutrals-NeutralSlate950 text-2xl font-medium font-['Neue_Montreal'] leading-normal">If you had a magic wand, what would you change about how we operate?</div>
<div className="self-stretch min-h-40 p-5 relative bg-Neutrals-NeutralSlate100 rounded-xl inline-flex justify-start items-start gap-2.5">
<div className="self-stretch text-center justify-start text-[--Neutrals-NeutralSlate950] text-2xl font-medium font-['Neue_Montreal'] leading-normal">If you had a magic wand, what would you change about how we operate?</div>
<div className="self-stretch min-h-40 p-5 relative bg-[--Neutrals-NeutralSlate100] rounded-xl inline-flex justify-start items-start gap-2.5">
<textarea
value={answer}
onChange={(e) => setAnswer(e.target.value)}
className="flex-1 bg-transparent text-Neutrals-NeutralSlate950 text-base font-normal font-['Inter'] leading-normal placeholder:text-Neutrals-NeutralSlate500 outline-none resize-none"
className="flex-1 bg-transparent text-[--Neutrals-NeutralSlate950] text-base font-normal font-['Inter'] leading-normal placeholder:text-[--Neutrals-NeutralSlate950] outline-none resize-none"
placeholder="Type your answer...."
rows={6}
/>
@@ -1135,10 +1135,10 @@ const EmployeeFormStep35: React.FC<{ onNext: () => void; onBack: () => void }> =
<div className="self-stretch inline-flex justify-start items-start gap-2">
<button
onClick={onBack}
className="h-12 px-8 py-3.5 bg-Neutrals-NeutralSlate100 rounded-[999px] flex justify-center items-center gap-1 overflow-hidden hover:bg-Neutrals-NeutralSlate200"
className="h-12 px-8 py-3.5 bg-[--Neutrals-NeutralSlate100] rounded-[999px] flex justify-center items-center gap-1 overflow-hidden hover:bg-[--Neutrals-NeutralSlate100]"
>
<div className="px-1 flex justify-center items-center">
<div className="justify-center text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">Back</div>
<div className="justify-center text-[--Neutrals-NeutralSlate950] text-sm font-medium font-['Inter'] leading-tight">Back</div>
</div>
</button>
<button
@@ -1151,14 +1151,14 @@ const EmployeeFormStep35: React.FC<{ onNext: () => void; onBack: () => void }> =
</button>
</div>
</div>
<div className="px-3 py-1.5 left-[24px] top-[24px] absolute bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] uppercase leading-none">1 of 7</div>
<div className="px-3 py-1.5 left-[24px] top-[24px] absolute bg-[--Neutrals-NeutralSlate100] rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
<div className="justify-start text-[--Neutrals-NeutralSlate500] text-sm font-medium font-['Inter'] uppercase leading-none">1 of 7</div>
</div>
<div className="px-3 py-1.5 left-[1363px] top-[24px] absolute bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-none">Skip</div>
<div className="px-3 py-1.5 left-[1363px] top-[24px] absolute bg-[--Neutrals-NeutralSlate100] rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
<div className="justify-start text-[--Neutrals-NeutralSlate500] text-sm font-medium font-['Inter'] leading-none">Skip</div>
</div>
<div className="w-[464px] max-w-[464px] min-w-[464px] left-[488px] top-[24px] absolute flex flex-col justify-start items-center gap-4">
<div className="p-4 bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
<div className="p-4 bg-[--Neutrals-NeutralSlate100] rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
<div>
<svg width="24" height="4" viewBox="0 0 24 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="24" height="4" rx="2" fill="var(--Brand-Orange, #3399FF)" />
@@ -1195,7 +1195,7 @@ const EmployeeFormStep35: React.FC<{ onNext: () => void; onBack: () => void }> =
</svg>
</div>
</div>
<div className="self-stretch text-center justify-start text-Neutrals-NeutralSlate500 text-base font-medium font-['Neue_Montreal'] leading-normal">Leadership & Organizational Structure</div>
<div className="self-stretch text-center justify-start text-[--Neutrals-NeutralSlate500] text-base font-medium font-['Neue_Montreal'] leading-normal">Leadership & Organizational Structure</div>
</div>
</div>
);
@@ -1206,15 +1206,15 @@ const EmployeeFormStep36: React.FC<{ onNext: () => void; onBack: () => void }> =
const [answer, setAnswer] = React.useState('');
return (
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0 inline-flex flex-col justify-center items-center gap-9">
<div className="w-[1440px] h-[810px] py-6 relative bg-[--Neutrals-NeutralSlate0] inline-flex flex-col justify-center items-center gap-9">
<div className="w-full max-w-[464px] min-w-[464px] flex flex-col justify-start items-start gap-12">
<div className="self-stretch flex flex-col justify-start items-start gap-8">
<div className="self-stretch text-center justify-start text-Neutrals-NeutralSlate950 text-2xl font-medium font-['Neue_Montreal'] leading-normal">Do you believe any roles or departments are overstaffed or underperforming?</div>
<div className="self-stretch min-h-40 p-5 relative bg-Neutrals-NeutralSlate100 rounded-xl inline-flex justify-start items-start gap-2.5">
<div className="self-stretch text-center justify-start text-[--Neutrals-NeutralSlate950] text-2xl font-medium font-['Neue_Montreal'] leading-normal">Do you believe any roles or departments are overstaffed or underperforming?</div>
<div className="self-stretch min-h-40 p-5 relative bg-[--Neutrals-NeutralSlate100] rounded-xl inline-flex justify-start items-start gap-2.5">
<textarea
value={answer}
onChange={(e) => setAnswer(e.target.value)}
className="flex-1 bg-transparent text-Neutrals-NeutralSlate950 text-base font-normal font-['Inter'] leading-normal placeholder:text-Neutrals-NeutralSlate500 outline-none resize-none"
className="flex-1 bg-transparent text-[--Neutrals-NeutralSlate950] text-base font-normal font-['Inter'] leading-normal placeholder:text-[--Neutrals-NeutralSlate950] outline-none resize-none"
placeholder="Type your answer...."
rows={6}
/>
@@ -1227,10 +1227,10 @@ const EmployeeFormStep36: React.FC<{ onNext: () => void; onBack: () => void }> =
<div className="self-stretch inline-flex justify-start items-start gap-2">
<button
onClick={onBack}
className="h-12 px-8 py-3.5 bg-Neutrals-NeutralSlate100 rounded-[999px] flex justify-center items-center gap-1 overflow-hidden hover:bg-Neutrals-NeutralSlate200"
className="h-12 px-8 py-3.5 bg-[--Neutrals-NeutralSlate100] rounded-[999px] flex justify-center items-center gap-1 overflow-hidden hover:bg-[--Neutrals-NeutralSlate100]"
>
<div className="px-1 flex justify-center items-center">
<div className="justify-center text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">Back</div>
<div className="justify-center text-[--Neutrals-NeutralSlate950] text-sm font-medium font-['Inter'] leading-tight">Back</div>
</div>
</button>
<button
@@ -1243,14 +1243,14 @@ const EmployeeFormStep36: React.FC<{ onNext: () => void; onBack: () => void }> =
</button>
</div>
</div>
<div className="px-3 py-1.5 left-[24px] top-[24px] absolute bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] uppercase leading-none">1 of 7</div>
<div className="px-3 py-1.5 left-[24px] top-[24px] absolute bg-[--Neutrals-NeutralSlate100] rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
<div className="justify-start text-[--Neutrals-NeutralSlate500] text-sm font-medium font-['Inter'] uppercase leading-none">1 of 7</div>
</div>
<div className="px-3 py-1.5 left-[1363px] top-[24px] absolute bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-none">Skip</div>
<div className="px-3 py-1.5 left-[1363px] top-[24px] absolute bg-[--Neutrals-NeutralSlate100] rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
<div className="justify-start text-[--Neutrals-NeutralSlate500] text-sm font-medium font-['Inter'] leading-none">Skip</div>
</div>
<div className="w-[464px] max-w-[464px] min-w-[464px] left-[488px] top-[24px] absolute flex flex-col justify-start items-center gap-4">
<div className="p-4 bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
<div className="p-4 bg-[--Neutrals-NeutralSlate100] rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
<div>
<svg width="24" height="4" viewBox="0 0 24 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="24" height="4" rx="2" fill="var(--Brand-Orange, #3399FF)" />
@@ -1287,7 +1287,7 @@ const EmployeeFormStep36: React.FC<{ onNext: () => void; onBack: () => void }> =
</svg>
</div>
</div>
<div className="self-stretch text-center justify-start text-Neutrals-NeutralSlate500 text-base font-medium font-['Neue_Montreal'] leading-normal">Leadership & Organizational Structure</div>
<div className="self-stretch text-center justify-start text-[--Neutrals-NeutralSlate500] text-base font-medium font-['Neue_Montreal'] leading-normal">Leadership & Organizational Structure</div>
</div>
</div>
);
@@ -1298,15 +1298,15 @@ const EmployeeFormStep37: React.FC<{ onNext: () => void; onBack: () => void }> =
const [answer, setAnswer] = React.useState('');
return (
<div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0 inline-flex flex-col justify-center items-center gap-9">
<div className="w-[1440px] h-[810px] py-6 relative bg-[--Neutrals-NeutralSlate0] inline-flex flex-col justify-center items-center gap-9">
<div className="w-full max-w-[464px] min-w-[464px] flex flex-col justify-start items-start gap-12">
<div className="self-stretch flex flex-col justify-start items-start gap-8">
<div className="self-stretch text-center justify-start text-Neutrals-NeutralSlate950 text-2xl font-medium font-['Neue_Montreal'] leading-normal">Any other feedback or suggestions?</div>
<div className="self-stretch min-h-40 p-5 relative bg-Neutrals-NeutralSlate100 rounded-xl inline-flex justify-start items-start gap-2.5">
<div className="self-stretch text-center justify-start text-[--Neutrals-NeutralSlate950] text-2xl font-medium font-['Neue_Montreal'] leading-normal">Any other feedback or suggestions?</div>
<div className="self-stretch min-h-40 p-5 relative bg-[--Neutrals-NeutralSlate100] rounded-xl inline-flex justify-start items-start gap-2.5">
<textarea
value={answer}
onChange={(e) => setAnswer(e.target.value)}
className="flex-1 bg-transparent text-Neutrals-NeutralSlate950 text-base font-normal font-['Inter'] leading-normal placeholder:text-Neutrals-NeutralSlate500 outline-none resize-none"
className="flex-1 bg-transparent text-[--Neutrals-NeutralSlate950] text-base font-normal font-['Inter'] leading-normal placeholder:text-[--Neutrals-NeutralSlate950] outline-none resize-none"
placeholder="Type your answer...."
rows={6}
/>
@@ -1319,10 +1319,10 @@ const EmployeeFormStep37: React.FC<{ onNext: () => void; onBack: () => void }> =
<div className="self-stretch inline-flex justify-start items-start gap-2">
<button
onClick={onBack}
className="h-12 px-8 py-3.5 bg-Neutrals-NeutralSlate100 rounded-[999px] flex justify-center items-center gap-1 overflow-hidden hover:bg-Neutrals-NeutralSlate200"
className="h-12 px-8 py-3.5 bg-[--Neutrals-NeutralSlate100] rounded-[999px] flex justify-center items-center gap-1 overflow-hidden hover:bg-[--Neutrals-NeutralSlate100]"
>
<div className="px-1 flex justify-center items-center">
<div className="justify-center text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">Back</div>
<div className="justify-center text-[--Neutrals-NeutralSlate950] text-sm font-medium font-['Inter'] leading-tight">Back</div>
</div>
</button>
<button
@@ -1335,14 +1335,14 @@ const EmployeeFormStep37: React.FC<{ onNext: () => void; onBack: () => void }> =
</button>
</div>
</div>
<div className="px-3 py-1.5 left-[24px] top-[24px] absolute bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] uppercase leading-none">1 of 7</div>
<div className="px-3 py-1.5 left-[24px] top-[24px] absolute bg-[--Neutrals-NeutralSlate100] rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
<div className="justify-start text-[--Neutrals-NeutralSlate500] text-sm font-medium font-['Inter'] uppercase leading-none">1 of 7</div>
</div>
<div className="px-3 py-1.5 left-[1363px] top-[24px] absolute bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-none">Skip</div>
<div className="px-3 py-1.5 left-[1363px] top-[24px] absolute bg-[--Neutrals-NeutralSlate100] rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
<div className="justify-start text-[--Neutrals-NeutralSlate500] text-sm font-medium font-['Inter'] leading-none">Skip</div>
</div>
<div className="w-[464px] max-w-[464px] min-w-[464px] left-[488px] top-[24px] absolute flex flex-col justify-start items-center gap-4">
<div className="p-4 bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
<div className="p-4 bg-[--Neutrals-NeutralSlate100] rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
<div>
<svg width="24" height="4" viewBox="0 0 24 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="24" height="4" rx="2" fill="var(--Brand-Orange, #3399FF)" />
@@ -1379,7 +1379,7 @@ const EmployeeFormStep37: React.FC<{ onNext: () => void; onBack: () => void }> =
</svg>
</div>
</div>
<div className="self-stretch text-center justify-start text-Neutrals-NeutralSlate500 text-base font-medium font-['Neue_Montreal'] leading-normal">Leadership & Organizational Structure</div>
<div className="self-stretch text-center justify-start text-[--Neutrals-NeutralSlate500] text-base font-medium font-['Neue_Montreal'] leading-normal">Leadership & Organizational Structure</div>
</div>
</div>
);
@@ -1389,7 +1389,7 @@ const EmployeeFormStep37: React.FC<{ onNext: () => void; onBack: () => void }> =
const EmployeeFormStep38: React.FC<{ formData: any }> = ({ formData }) => {
return (
<div className="w-[1440px] bg-white inline-flex justify-start items-center overflow-hidden">
<div className="flex-1 h-[810px] px-32 py-48 bg-Neutrals-NeutralSlate0 flex justify-center items-center gap-2.5 overflow-hidden">
<div className="flex-1 h-[810px] px-32 py-48 bg-[--Neutrals-NeutralSlate0] flex justify-center items-center gap-2.5 overflow-hidden">
<div className="flex-1 max-w-[464px] inline-flex flex-col justify-start items-start gap-12">
<div className="self-stretch flex flex-col justify-start items-start gap-6">
<div className="w-12 h-12 relative bg-Brand-Orange rounded-xl outline outline-2 outline-offset-[-2px] outline-blue-400 overflow-hidden">
@@ -1447,8 +1447,8 @@ const EmployeeFormStep38: React.FC<{ formData: any }> = ({ formData }) => {
</div>
</div>
<div className="self-stretch flex flex-col justify-start items-start gap-4">
<div className="self-stretch justify-start text-Neutrals-NeutralSlate800 text-5xl font-medium font-['Neue_Montreal'] leading-[48px]">Thank you your form has been submitted!</div>
<div className="self-stretch justify-center text-Neutrals-NeutralSlate500 text-base font-normal font-['Inter'] leading-normal">Description about the topic and what it means.</div>
<div className="self-stretch justify-start text-[--Neutrals-NeutralSlate800] text-5xl font-medium font-['Neue_Montreal'] leading-[48px]">Thank you your form has been submitted!</div>
<div className="self-stretch justify-center text-[--Neutrals-NeutralSlate500] text-base font-normal font-['Inter'] leading-normal">Description about the topic and what it means.</div>
</div>
</div>
<div className="self-stretch px-4 py-3.5 bg-Brand-Orange rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 inline-flex justify-center items-center gap-1 overflow-hidden">
@@ -1880,7 +1880,7 @@ const EmployeeQuestionnaire: React.FC = () => {
case 38:
return (
<div className="w-[1440px] bg-white inline-flex justify-start items-center overflow-hidden">
<div className="flex-1 h-[810px] px-32 py-48 bg-Neutrals-NeutralSlate0 flex justify-center items-center gap-2.5 overflow-hidden">
<div className="flex-1 h-[810px] px-32 py-48 bg-[--Neutrals-NeutralSlate0] flex justify-center items-center gap-2.5 overflow-hidden">
<div className="flex-1 max-w-[464px] inline-flex flex-col justify-start items-start gap-12">
<div className="self-stretch flex flex-col justify-start items-start gap-6">
<div className="w-12 h-12 relative bg-Brand-Orange rounded-xl outline outline-2 outline-offset-[-2px] outline-blue-400 overflow-hidden">
@@ -1890,8 +1890,8 @@ const EmployeeQuestionnaire: React.FC = () => {
</div>
</div>
<div className="self-stretch flex flex-col justify-start items-start gap-4">
<div className="self-stretch justify-start text-Neutrals-NeutralSlate800 text-5xl font-medium font-['Neue_Montreal'] leading-[48px]">Thank you! Your assessment has been submitted!</div>
<div className="self-stretch justify-center text-Neutrals-NeutralSlate500 text-base font-normal font-['Inter'] leading-normal">Your responses have been recorded and your AI-powered performance report will be generated shortly.</div>
<div className="self-stretch justify-start text-[--Neutrals-NeutralSlate800] text-5xl font-medium font-['Neue_Montreal'] leading-[48px]">Thank you! Your assessment has been submitted!</div>
<div className="self-stretch justify-center text-[--Neutrals-NeutralSlate500] text-base font-normal font-['Inter'] leading-normal">Your responses have been recorded and your AI-powered performance report will be generated shortly.</div>
</div>
</div>
</div>