Corrected Form Layout

src/App.css

@@ -11,6 +11,13 @@
   background: #D10056;
 }
 
+.btn-R {
+  padding-inline: 3rem !important;
+  font-weight: bold !important;
+  font-size: 16px !important;
+
+}
+
 .sidebar {
   position: fixed;
   top: 0;

src/components/GetStarted/BasicInfo.tsx

@@ -1,219 +1,99 @@
 import React, { useRef, useState } from "react";
-import InputCompOne from "../shared/InputCompOne";
+import InputSection from "./InputSection";
+import OTPSection from "./OtpSection";
+import SpouseDetails from "./SpouseDetails";
+import { Button } from "..";
 
 interface Option {
   value: string;
   label: string;
 }
 
-const BasicInfo: React.FC = () => {
+interface BasicInfoProps {
+  inputValues: {
+    title: string;
+    marital: string;
+    agentId: string;
+    bvn: string;
+    firstName: string;
+    phone: string;
+    email: string;
+    surname: string;
+    dob: string;
+    secondName: string;
+    spouseBVN: string;
+  };
+  setInputValues: React.Dispatch<React.SetStateAction<any>>;
+  handleNextStep: React.MouseEventHandler<HTMLButtonElement>;
+}
+
+const BasicInfo: React.FC<BasicInfoProps> = ({
+  inputValues,
+  setInputValues,
+  handleNextStep,
+}) => {
   const [hideOTPComponent, setHideOTPComponent] = useState<boolean>(true);
-  const [inputValues, setInputValues] = useState({
-    title: "",
-    marital: "",
-    agentId: "",
-    bvn: "",
-    firstName: "",
-    phone: "",
-    email: "",
-    surname: "",
-    dob: "",
-    secondName: "",
-  });
   const inputRef = useRef<HTMLInputElement>(null);
 
-  // Array for marital status options
-  const maritalStatusOptions: Option[] = [
-    { value: "", label: "Select" },
-    { value: "single", label: "Single" },
-    { value: "married", label: "Married" },
-    { value: "divorced", label: "Divorced" },
-    { value: "widowed", label: "Widowed" },
-  ];
-
-  // Array for title options
-  const titleOptions: Option[] = [
-    { value: "", label: "Select" },
-    { value: "ms", label: "Ms" },
-    { value: "mr", label: "Mr" },
-    { value: "miss", label: "Miss" },
-    { value: "mrs", label: "Mrs" },
-  ];
-
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
-
     setInputValues((prev) => ({ ...prev, [name]: value }));
   };
 
-  const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
+  const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = e.currentTarget;
+    const { name, value } = e.target;
 
     if (name === "bvn") {
-      const regex = /^[0-9]+$/;
+      const isNumeric = /^[0-9]+$/.test(value);
 
-      if (regex.test(value)) {
+      if (isNumeric) {
-        if (value?.length === 10) {
+        if (value.length === 10) {
           setHideOTPComponent(false);
-          // secondInputRef.current?.focus();
+        } else {
-        } else setHideOTPComponent(true);
+          setHideOTPComponent(true);
+        }
       } else {
-        console.log("object not found");
+        console.log("Invalid BVN");
       }
     }
   };
 
   return (
     <>
-      <div className="mt-8 max-w-[31.5rem]">
+      {/* Header */}
-        <div className="flex flex-col gap-3">
+      <h1 className="font-semibold text-[2.375rem] text-[#5C2684] my-[.5rem]">
-          <InputCompOne
+        Let’s Get You Started
-            label="Title"
+      </h1>
-            name="title"
+      <form>
-            parentInputClass="max-w-[224px] w-full"
+        <InputSection
-            labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
+          inputValues={inputValues}
-            select
+          handleChange={handleChange}
-            selectClass="w-full h-[36px] rounded-[6px]"
+          handleInput={handleInput}
-            selectOptions={titleOptions}
+          inputRef={inputRef}
-            value={inputValues.title}
+        />
-            onChange={handleChange}
+        {!hideOTPComponent && (
-            ref={inputRef}
+          <>
-          />
+            <OTPSection
-          <InputCompOne
+              inputValues={inputValues}
-            label="Marital Status"
+              handleChange={handleChange}
-            name="marital"
+              handleInput={handleInput}
-            parentInputClass="max-w-[224px] w-full"
+              inputRef={inputRef}
-            labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
+            />
-            select
+            <SpouseDetails
-            selectClass="w-full h-[36px] rounded-[6px]"
+              inputValues={inputValues}
-            selectOptions={maritalStatusOptions}
+              handleChange={handleChange}
-            value={inputValues.marital}
+              handleInput={handleInput}
-            onChange={handleChange}
+              inputRef={inputRef}
-            onInput={handleInput}
+            />
-            ref={inputRef}
+            <Button
-          />
+              className="mt-8 btn-R"
-          <InputCompOne
+              text="Enter"
-            label="Direct Sales Agent ID"
+              type="button"
-            name="agentId"
+              onClick={handleNextStep}
-            parentInputClass="max-w-[224px] w-full"
+            />
-            labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
+          </>
-            select
+        )}
-            selectClass="w-full h-[36px] rounded-[6px]"
+      </form>
-            selectOptions={[{ value: "", label: "Select" }]}
-            value={inputValues.agentId}
-            onChange={handleChange}
-            onInput={handleInput}
-            ref={inputRef}
-          />
-          <InputCompOne
-            label="BVN"
-            name="bvn"
-            parentInputClass=" w-full"
-            labelSpan="( To get your BVN, dial *565*0# )"
-            labelSpanClass="text-[11px] text-[#7a7373]"
-            placeholder="Enter your BVN"
-            labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px] gap-[2px]"
-            input
-            inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
-            value={inputValues.bvn}
-            onChange={handleChange}
-            onInput={handleInput}
-            ref={inputRef}
-            maxLength={10}
-          />
-        </div>
-      </div>
-      {!hideOTPComponent ? (
-        <div className="flex flex-col gap-5">
-          <div className="flex justify-between items-center g4">
-            <div className="mt-8 max-w-[31.5rem] w-full">
-              <div className="flex flex-col gap-3">
-                <InputCompOne
-                  label="First Name"
-                  name="firstName"
-                  parentInputClass="w-full"
-                  labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
-                  input
-                  inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
-                  value={inputValues.firstName}
-                  onChange={handleChange}
-                  onInput={handleInput}
-                  ref={inputRef}
-                />
-                <InputCompOne
-                  label="Phone Number"
-                  name="phone"
-                  parentInputClass="w-full"
-                  labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
-                  input
-                  inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
-                  value={inputValues.phone}
-                  onChange={handleChange}
-                  onInput={handleInput}
-                  ref={inputRef}
-                />
-                <InputCompOne
-                  label="Email Address"
-                  name="email"
-                  parentInputClass="w-full"
-                  labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
-                  input
-                  inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
-                  value={inputValues.email}
-                  onChange={handleChange}
-                  onInput={handleInput}
-                  ref={inputRef}
-                />
-              </div>
-            </div>
-            <div className="mt-8 max-w-[31.5rem] w-full">
-              <div className="flex flex-col gap-3">
-                <InputCompOne
-                  label="Surname"
-                  name="surname"
-                  parentInputClass="w-full"
-                  labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
-                  input
-                  inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px] px-3"
-                  value={inputValues.surname}
-                  onChange={handleChange}
-                  onInput={handleInput}
-                  ref={inputRef}
-                />
-                <InputCompOne
-                  label="Date of Birth"
-                  name="dob"
-                  parentInputClass="w-full"
-                  labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
-                  input
-                  inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px] px-3"
-                  value={inputValues.dob}
-                  onChange={handleChange}
-                  onInput={handleInput}
-                  ref={inputRef}
-                />
-                <InputCompOne
-                  label="Second Name"
-                  name="secondName"
-                  parentInputClass="w-full"
-                  labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
-                  input
-                  inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px] px-3"
-                  value={inputValues.secondName}
-                  onChange={handleChange}
-                  onInput={handleInput}
-                  ref={inputRef}
-                />
-              </div>
-            </div>
-          </div>
-          <div className="w-full flex justify-end">
-            <button className="w-full max-w-[15.25rem] h-[36px] rounded bg-[#FBB700] rounded-2 px-4 text-[18px] text-[#282828] font-semibold disabled:text-[#282828] disabled:text-opacity-50">
-              Enter
-            </button>
-          </div>
-        </div>
-      ) : null}
     </>
   );
 };

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">
+          {step === 1 && (
-            <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
+            <BasicInfo
-              BASIC INFORMATION
+              inputValues={inputValues}
-            </p>
+              setInputValues={setInputValues}
-          </div>
+              handleNextStep={handleNextStep}
-          <BasicInfo />
+            />
+          )}
+          {step === 2 && "lol"}
         </main>
       </div>
     </div>

src/components/GetStarted/InputSection.tsx

@@ -0,0 +1,133 @@
+import React from "react";
+import InputCompOne from "../shared/InputCompOne";
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+interface InputSectionProps {
+  inputValues: {
+    title: string;
+    marital: string;
+    agentId: string;
+    bvn: string;
+  };
+  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleInput: (e: React.FormEvent<HTMLInputElement>) => void;
+  inputRef: React.RefObject<HTMLInputElement>;
+}
+
+const InputSection: React.FC<InputSectionProps> = ({
+  inputValues,
+  handleChange,
+  handleInput,
+  inputRef,
+}) => {
+  const basicInfoInputFields = [
+    {
+      label: "Title",
+      name: "title",
+      parentInputClass: "max-w-[224px] w-full",
+      labelClass:
+        "font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]",
+      select: true,
+      selectClass: "w-full h-[36px] rounded-[6px]",
+      selectOptions: titleOptions,
+      value: inputValues.title,
+    },
+    {
+      label: "Marital Status",
+      name: "marital",
+      parentInputClass: "max-w-[224px] w-full",
+      labelClass:
+        "font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]",
+      select: true,
+      selectClass: "w-full h-[36px] rounded-[6px]",
+      selectOptions: maritalStatusOptions,
+      value: inputValues.marital,
+      onInput: handleInput,
+    },
+    {
+      label: "Direct Sales Agent ID",
+      name: "agentId",
+      parentInputClass: "max-w-[224px] w-full",
+      labelClass:
+        "font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]",
+      select: true,
+      selectClass: "w-full h-[36px] rounded-[6px]",
+      selectOptions: [{ value: "", label: "Select" }],
+      value: inputValues.agentId,
+      onInput: handleInput,
+    },
+    {
+      label: "BVN",
+      name: "bvn",
+      parentInputClass: " w-full",
+      labelSpan: "( To get your BVN, dial *565*0# )",
+      labelSpanClass: "text-[11px] text-[#7a7373]",
+      placeholder: "Enter your BVN",
+      labelClass:
+        "font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px] gap-[2px]",
+      input: true,
+      inputClass: "w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]",
+      value: inputValues.bvn,
+      onInput: handleInput,
+      maxLength: 10,
+    },
+  ];
+
+  return (
+    <>
+      <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>
+      <div className="mt-8 grid grid-cols-2">
+        <div className="flex flex-col gap-4 max-w-[15.6875rem]">
+          {basicInfoInputFields.map((field, index) => (
+            <InputCompOne
+              key={index}
+              label={field.label}
+              name={field.name}
+              parentInputClass={field.parentInputClass}
+              labelClass={field.labelClass}
+              select={field.select}
+              selectClass={field.selectClass}
+              selectOptions={field.selectOptions}
+              value={field.value}
+              onChange={handleChange}
+              onInput={field.onInput}
+              placeholder={field.placeholder}
+              labelSpan={field.labelSpan}
+              labelSpanClass={field.labelSpanClass}
+              input={field.input}
+              inputClass={field.inputClass}
+              maxLength={field.maxLength}
+              ref={inputRef}
+            />
+          ))}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default InputSection;
+
+const maritalStatusOptions: Option[] = [
+  { value: "", label: "Select" },
+  { value: "single", label: "Single" },
+  { value: "married", label: "Married" },
+  { value: "divorced", label: "Divorced" },
+  { value: "widowed", label: "Widowed" },
+];
+
+const titleOptions: Option[] = [
+  { value: "", label: "Select" },
+  { value: "ms", label: "Ms" },
+  { value: "mr", label: "Mr" },
+  { value: "miss", label: "Miss" },
+  { value: "mrs", label: "Mrs" },
+];

src/components/GetStarted/OtpSection.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import InputCompOne from "../shared/InputCompOne";
+
+interface OTPSectionProps {
+  inputValues: {
+    firstName: string;
+    phone: string;
+    email: string;
+    surname: string;
+    dob: string;
+    secondName: string;
+  };
+  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleInput: (e: React.FormEvent<HTMLInputElement>) => void;
+  inputRef: React.RefObject<HTMLInputElement>;
+}
+
+const OTPSection: React.FC<OTPSectionProps> = ({
+  inputValues,
+  handleChange,
+  handleInput,
+  inputRef,
+}) => {
+  return (
+    <div className="mt-5">
+      <div className="grid grid-cols-2 gap-4">
+        <InputCompOne
+          parentClass="max-w-[20.3125rem]"
+          label="First Name"
+          name="firstName"
+          parentInputClass="w-full"
+          labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+          input
+          inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
+          value={inputValues.firstName}
+          onChange={handleChange}
+          onInput={handleInput}
+          ref={inputRef}
+        />
+        <InputCompOne
+          parentClass="max-w-[20.3125rem]"
+          label="Phone Number"
+          name="phone"
+          parentInputClass="w-full"
+          labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+          input
+          inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
+          value={inputValues.phone}
+          onChange={handleChange}
+          onInput={handleInput}
+          ref={inputRef}
+        />
+        <InputCompOne
+          parentClass="max-w-[20.3125rem]"
+          label="Email Address"
+          name="email"
+          parentInputClass="w-full"
+          labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+          input
+          inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
+          value={inputValues.email}
+          onChange={handleChange}
+          onInput={handleInput}
+          ref={inputRef}
+        />
+
+        <InputCompOne
+          parentClass="max-w-[20.3125rem]"
+          label="Surname"
+          name="surname"
+          parentInputClass="w-full"
+          labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+          input
+          inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem] px-3"
+          value={inputValues.surname}
+          onChange={handleChange}
+          onInput={handleInput}
+          ref={inputRef}
+        />
+        <InputCompOne
+          parentClass="max-w-[20.3125rem]"
+          label="Date of Birth"
+          name="dob"
+          parentInputClass="w-full"
+          labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+          input
+          inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem] px-3"
+          value={inputValues.dob}
+          onChange={handleChange}
+          onInput={handleInput}
+          ref={inputRef}
+        />
+        <InputCompOne
+          parentClass="max-w-[20.3125rem]"
+          label="Second Name"
+          name="secondName"
+          parentInputClass="w-full"
+          labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+          input
+          inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem] px-3"
+          value={inputValues.secondName}
+          onChange={handleChange}
+          onInput={handleInput}
+          ref={inputRef}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default OTPSection;

src/components/GetStarted/SpouseDetails.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { InputCompOne } from "..";
+
+interface SpouseDetailsProps {
+  inputValues: {
+    spouseBVN: string;
+  };
+  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleInput: (e: React.FormEvent<HTMLInputElement>) => void;
+  inputRef: React.RefObject<HTMLInputElement>;
+}
+
+const SpouseDetails: React.FC<SpouseDetailsProps> = ({
+  inputValues,
+  handleChange,
+  handleInput,
+  inputRef,
+}) => {
+  return (
+    <>
+      <div className="w-full rounded py-3 bg-[#5C2684] px-5 mt-5">
+        <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
+          SPOUSE DETAILS ( If not applicable, please move to the next stage )
+        </p>
+      </div>
+      <div className="mt-8 grid grid-cols-2">
+        <div className="flex flex-col gap-4 max-w-[15.6875rem]">
+          <InputCompOne
+            parentClass="max-w-[20.3125rem]"
+            label="BVN"
+            name="firstName"
+            parentInputClass="w-full"
+            labelSpan="( To get your BVN, dial *565*0# )"
+            labelSpanClass="text-[11px] text-[#7a7373]"
+            labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
+            input
+            inputClass="w-full h-[2.25rem] bg-[#EFEFEF] px-[.125rem] rounded-[.375rem]"
+            value={inputValues.firstName}
+            onChange={handleChange}
+            onInput={handleInput}
+            ref={inputRef}
+          />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default SpouseDetails;

src/components/Header/Header.tsx

@@ -5,6 +5,7 @@ import { _lowerMenuItems } from "../../utils/data";
 import Sidebar from "./Sidebar";
 import { Link } from "react-router-dom";
 import HeaderMenuItem from "./HeaderMenuItem";
+import { RouteHandler } from "../../router/routes";
 
 export type LowerMenuItem = {
   name: string;
@@ -50,20 +51,25 @@ const Header: React.FC<HiddenMenuItems> = ({
         {!hideMenu && (
           <div className="flex flex-col-reverse lg:flex-col grow lg:grow-0 justify-between items-end">
             <ul className="flex gap-0 lg:gap-[10px] items-center justify-end w-full flex-wrap">
-              {["Open An Account", "Internet Banking", "Contact Us"].map(
+              {[
-                (text: string) => (
+                { text: "Open An Account", href: RouteHandler.getStarted },
-                  <li key={text} className="hidden sm:flex">
+                {
-                    <a href="#">
+                  text: "Internet Banking",
-                      <Button
+                  href: RouteHandler.businessBanking,
-                        className={
+                },
-                          text === "Open An Account" ? "btn-active" : ""
+                { text: "Contact Us", href: RouteHandler.cooperateBanking },
-                        }
+              ].map((item: { text: string; href: string }) => (
-                        text={text}
+                <li key={item.text} className="hidden sm:flex">
-                      />
+                  <a href={item.href}>
-                    </a>
+                    <Button
-                  </li>
+                      className={
-                )
+                        item.text === "Open An Account" ? "btn-active" : ""
-              )}
+                      }
+                      text={item.text}
+                    />
+                  </a>
+                </li>
+              ))}
               <li className="w-full lg:w-fit">
                 <SearchInput
                   onChange={handleSearchChange}
@@ -71,6 +77,7 @@ const Header: React.FC<HiddenMenuItems> = ({
                 />
               </li>
             </ul>
+
             <div className="flex lg:hidden">
               <svg
                 xmlns="http://www.w3.org/2000/svg"

src/components/InternetBanking/InternetBanking.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const InternetBanking = () => {
+  return (
+    <div>InternetBanking</div>
+  )
+}
+
+export default InternetBanking

src/components/InternetBanking/index.ts

@@ -0,0 +1,3 @@
+import InternetBanking from "./InternetBanking";
+
+export { InternetBanking };

src/layouts/GetStartedLayout.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Footer, Header } from "../components";
+
+interface GetStartedLayoutProps {
+  children: ReactNode;
+}
+
+const GetStartedLayout: React.FC<GetStartedLayoutProps> = ({ children }) => {
+  return (
+    <div className="relative">
+      <Header hideSidebar={true} hideMenu={true} />
+      <div className="flex flex-col min-h-[85vh] justify-between">
+        {children}
+        <div className="self-end w-full">
+          <Footer />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GetStartedLayout;

src/layouts/index.ts

@@ -1,3 +1,4 @@
 import HomeLayout from "./HomeLayout";
 import LetsGetStartedLayout from "./LetsGetStartedLayout";
-export { HomeLayout, LetsGetStartedLayout };
+import GetStartedLayout from "./GetStartedLayout";
+export { HomeLayout, LetsGetStartedLayout, GetStartedLayout };

src/pages/GetStartedPage.tsx

@@ -1,17 +1,12 @@
 import React from "react";
 import { GetStarted as Main, Header, Footer } from "../components";
+import { GetStartedLayout } from "../layouts";
 
 const GetStartedPage: React.FC = () => {
   return (
-    <div className="relative">
+   <GetStartedLayout>
-      <Header hideSidebar={true} hideMenu={true} />
+    <Main />
-      <div className="flex flex-col min-h-[85vh] justify-between">
+   </GetStartedLayout>
-        <Main />
-        <div className="self-end w-full">
-          <Footer />
-        </div>
-      </div>
-    </div>
   );
 };
 

src/pages/InternetBankingPage.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { HomeLayout } from '../layouts'
+
+const InternetBankingPage: React.FC = () => {
+  return (
+    <HomeLayout>InternetBankingPage</HomeLayout>
+  )
+}
+
+export default InternetBankingPage