Corrected Form Layout

src/components/GetStarted/GetStarted.tsx

@@ -1,21 +1,44 @@
+import React from "react";
 import BasicInfo from "./BasicInfo";
 
 const GetStarted = () => {
+  const [step, setStep] = React.useState(1);
+
+  const handleNextStep = () => {
+    setStep(step + 1);
+  };
+
+  const handlePreviousStep = () => {
+    setStep(step - 1);
+  };
+
+  const [inputValues, setInputValues] = React.useState({
+    title: "",
+    marital: "",
+    agentId: "",
+    bvn: "",
+    firstName: "",
+    phone: "",
+    email: "",
+    surname: "",
+    dob: "",
+    secondName: "",
+    spouseBVN: "",
+  });
+
   return (
     <div className="w-full flex items-center justify-center">
       <div className="containerMode">
-        {/* Header */}
-        <h1 className="font-semibold text-[2.375rem] text-[#5C2684] my-[.5rem]">
-          Let’s Get You Started
-        </h1>
         {/* Main */}
         <main>
-          <div className="w-full rounded py-3 bg-[#5C2684] px-5">
-            <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
-              BASIC INFORMATION
-            </p>
-          </div>
-          <BasicInfo />
+          {step === 1 && (
+            <BasicInfo
+              inputValues={inputValues}
+              setInputValues={setInputValues}
+              handleNextStep={handleNextStep}
+            />
+          )}
+          {step === 2 && "lol"}
         </main>
       </div>
     </div>