.

src/components/GetStarted/BasicInfo.tsx

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

src/components/GetStarted/GetStarted.tsx

@@ -1,17 +1,23 @@
 import { FC } from "react";
+import BasicInfo from "./BasicInfo";
 
 const GetStarted: FC = () => {
   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>
-        <div className="w-full rounded py-3 bg-[#5C2684] px-5">
+        {/* Main */}
-          <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
+        <main>
-            BASIC INFORMATION
+          <div className="w-full rounded py-3 bg-[#5C2684] px-5">
-          </p>
+            <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
-        </div>
+              BASIC INFORMATION
+            </p>
+          </div>
+          <BasicInfo />
+        </main>
       </div>
     </div>
   );

src/components/shared/Button.tsx

@@ -1,11 +1,17 @@
-
+import { FC } from "react";
 type ButtonProps = {
   className?: string;
   text: string;
 };
 
-const Button = ({ text, className }: ButtonProps) => {
+const Button = ({ text, className }: ButtonProps): FC => {
-  return <button className={`btn-primary uppercase text-[11px] lg:text-[13px] p-[6px] lg:px-[10px] ${className}`}>{text}</button>;
+  return (
+    <button
+      className={`btn-primary uppercase text-[11px] lg:text-[13px] p-[6px] lg:px-[10px] ${className}`}
+    >
+      {text}
+    </button>
+  );
 };
 
 export default Button;

src/components/shared/InputCompOne.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+
+interface InputCompOneProps {
+  label: string;
+  labelClass: string;
+  placeholder?: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onInput?: (e: React.FormEvent<HTMLInputElement>) => void;
+  name: string;
+  tabIndex?: number;
+  ref?: React.RefObject<HTMLInputElement>;
+  selectValue?: string;
+  parentInputClass?: string;
+  input?: boolean;
+  select?: boolean;
+  inputType?: string;
+  selectOptions?: { value: string; label: string }[];
+  icon?: string | React.ReactNode; // Type for the icon
+}
+
+const InputCompOne: React.FC<InputCompOneProps> = ({
+  label,
+  labeClass,
+  placeholder = "Placeholder",
+  value,
+  onChange,
+  onInput,
+  name,
+  tabIndex,
+  ref,
+  selectValue,
+  input,
+  select,
+  inputType = "text",
+  selectOptions,
+  icon,
+}) => {
+  return (
+    <div>
+      {label && (
+        <label htmlFor={name} className={`flex items-center ${labeClass}`}>
+          {label}
+          {/* <span>*</span> */}
+        </label>
+      )}
+      {input && (
+        <div className="flex items-center">
+          <input
+            type={inputType}
+            placeholder={placeholder}
+            value={value}
+            onChange={onChange}
+            onInput={onInput}
+            name={name}
+            tabIndex={tabIndex}
+            ref={ref}
+          />
+          {icon && (
+            <div className="">
+              {typeof icon === "string" ? <img src={icon} alt="icon" /> : icon}
+            </div>
+          )}
+        </div>
+      )}
+      {select && (
+        <div className="">
+          <select name={name} id="" value={selectValue}>
+            {selectOptions.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default InputCompOne;

src/components/shared/index.ts

@@ -1,3 +1,4 @@
 import Button from "./Button";
+import InputCompOne from "./InputCompOne";
 
-export {Button}
+export {Button, InputCompOne}