From a064689aced498a1c110d6a2570736c0afedb387 Mon Sep 17 00:00:00 2001
From: Aakashuu <gzatrop@gmail.com>
Date: Sat, 20 Jul 2024 20:18:51 +0530
Subject: [PATCH 1/3] feat: Implemented Sign Up Organsiation Page for isse 15

---
 app/routes/OrganizationSignUpPage.tsx | 291 ++++++++++++++++++++++++++
 1 file changed, 291 insertions(+)
 create mode 100644 app/routes/OrganizationSignUpPage.tsx

diff --git a/app/routes/OrganizationSignUpPage.tsx b/app/routes/OrganizationSignUpPage.tsx
new file mode 100644
index 00000000..72c10ad8
--- /dev/null
+++ b/app/routes/OrganizationSignUpPage.tsx
@@ -0,0 +1,291 @@
+import { MetaFunction, ActionFunction, json } from "@remix-run/node";
+import { Link, Form, useActionData } from "@remix-run/react";
+import { useState } from "react";
+import { Button } from "~/components/ui/button";
+
+// Define the types for the form fields
+interface FormData {
+  companyName: string;
+  companyEmail: string;
+  industry: string;
+  organizationType: string;
+  country: string;
+  state: string;
+  address: string;
+  lga: string;
+}
+
+interface FormErrors {
+  companyName?: string;
+  companyEmail?: string;
+  industry?: string;
+  organizationType?: string;
+  country?: string;
+  state?: string;
+  address?: string;
+  lga?: string;
+}
+
+export const meta: MetaFunction = () => {
+  return [{ title: "Sign Up" }];
+};
+
+export const action: ActionFunction = async ({ request }) => {
+  const formData = await request.formData();
+  const data = Object.fromEntries(formData) as unknown as FormData;
+
+  const errors = validateForm(data);
+  if (Object.keys(errors).length > 0) {
+    return json({ errors }, { status: 400 });
+  }
+
+  console.log(data);
+  
+  // Process the valid data (e.g., save to database)
+  // ...
+
+  return json({ success: true });
+};
+
+const validateForm = (data: FormData): FormErrors => {
+  const errors: FormErrors = {};
+  if (!data.companyName) {
+    errors.companyName = "Company name is required.";
+  }
+  if (!data.companyEmail) {
+    errors.companyEmail = "Company email is required.";
+  } else if (!/\S+@\S+\.\S+/.test(data.companyEmail)) {
+    errors.companyEmail = "Email address is invalid.";
+  } else {
+    delete errors.companyEmail;
+  }
+  if (!data.industry) {
+    errors.industry = "Industry is required.";
+  }
+  if (!data.organizationType) {
+    errors.organizationType = "Organization type is required.";
+  }
+  if (!data.country) {
+    errors.country = "Country is required.";
+  }
+  if (!data.state) {
+    errors.state = "State is required.";
+  }
+  if (!data.address) {
+    errors.address = "Address is required.";
+  }
+  if (!data.lga) {
+    errors.lga = "LGA is required.";
+  }
+  return errors;
+};
+
+export default function Signup() {
+  const actionData = useActionData<{ errors?: FormErrors; success?: boolean }>();
+  const [clientErrors, setClientErrors] = useState<FormErrors>({});
+  const [formData, setFormData] = useState<FormData>({
+    companyName: "",
+    companyEmail: "",
+    industry: "",
+    organizationType: "",
+    country: "",
+    state: "",
+    address: "",
+    lga: "",
+  });
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+  
+    if (name === 'companyEmail' && /\S+@\S+\.\S+/.test(value)) {
+      const newErrors = { ...clientErrors };
+      delete newErrors.companyEmail;
+      setClientErrors(newErrors);
+    } else if (clientErrors[name as keyof FormErrors]) {
+      const newErrors = { ...clientErrors };
+      delete newErrors[name as keyof FormErrors];
+      setClientErrors(newErrors);
+    }
+  };
+  
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    const form = event.currentTarget;
+    const formData = new FormData(form);
+    const data = Object.fromEntries(formData) as unknown as FormData;
+    const errors = validateForm(data);
+
+    if (Object.keys(errors).length > 0) {
+      event.preventDefault();
+      setClientErrors(errors);
+    }
+
+    console.log(data)
+  };
+
+  return (
+    <>
+      <div className="flex items-center justify-center">
+        <div className="h-[1010px] w-[342px] mt-[80px] bg-white lg:h-[836px] lg:w-[820px] lg:mt-[208px] mx-[25px] lg:m-3 w-full max-w-mid gap-[24px]">
+          <h1 className="text-[13px] lg:text-[32px] text-[#141414]-600 mb-6 text-center font-bold hidden lg:block">Create Organisation Account</h1>
+          <h1 className="text-[24px] font-bold lg:hidden">Sign up</h1>
+          <p className="text-[13px] lg:text-[20px] text-[#525252]-400 lg:text-center">Create an account to get started with us.</p>
+          <Form method="post" className="gap-[24px]" onSubmit={handleSubmit}>
+            <div className="mb-4">
+              <label htmlFor="company_name" className="text-[13px] block text-[#0A0A0A]-400 lg:text-[20px]">Company's Name</label>
+              <input
+                id="company_name"
+                type="text"
+                name="companyName"
+                className={`rounded-[8px] border-[1px] py-[12px] px-[16px] lg:pt-[20px] lg:pr-[24px] lg:pb-[20px] lg:pl-[16px] h-[48px] lg:h-[64px] w-full ${formData.companyName ? 'border-[#F97316]' : 'border-[#CBD5E1]'} rounded mt-2`}
+                placeholder="Enter company's full name"
+                required
+                value={formData.companyName}
+                onChange={handleInputChange}
+              />
+              {(clientErrors.companyName || actionData?.errors?.companyName) && <p className="text-red-500">{clientErrors.companyName || actionData?.errors?.companyName}</p>}
+            </div>
+            <div className="mb-4">
+              <label htmlFor="email" className="text-[13px] block text-[#0A0A0A]-400 lg:text-[20px]">Company's Email Address</label>
+              <input
+                id="email"
+                type="email"
+                name="companyEmail"
+                className={`rounded-[8px] border-[1px] py-[12px] px-[16px] lg:pt-[20px] lg:pr-[24px] lg:pb-[20px] lg:pl-[16px] h-[48px] lg:h-[64px] w-full ${formData.companyEmail ? 'border-[#F97316]' : 'border-[#CBD5E1]'} rounded mt-2`}
+                placeholder="Enter company's email address"
+                required
+                value={formData.companyEmail}
+                onChange={handleInputChange}
+              />
+              {(clientErrors.companyEmail || actionData?.errors?.companyEmail) && <p className="text-red-500">{clientErrors.companyEmail || actionData?.errors?.companyEmail}</p>}
+            </div>
+            <div className="mb-4 grid lg:grid-cols-2 gap-4">
+              <div>
+                <label htmlFor="industry" className="text-[13px] block text-[#0A0A0A]-400 lg:text-[20px]">Industry</label>
+                <select
+                  id="industry"
+                  name="industry"
+                  className={`rounded-[8px] border-[1px] py-[8px] px-[12px] lg:pt-[20px] lg:pr-[24px] lg:pb-[20px] lg:pl-[16px] h-[48px] lg:h-[64px] w-full ${formData.industry ? 'border-[#F97316]' : 'border-[#CBD5E1]'} rounded mt-2 bg-white`}
+                  required
+                  value={formData.industry}
+                  onChange={handleInputChange}
+                >
+                  <option value="">Select</option>
+                  <option value="Technology">Manufacturing</option>
+                  <option value="Technology">Real Estate</option>
+                  <option value="Technology"> Retail</option>
+                  <option value="Technology">Technology</option>
+                 
+               
+                </select>
+                {(clientErrors.industry || actionData?.errors?.industry) && <p className="text-red-500">{clientErrors.industry || actionData?.errors?.industry}</p>}
+              </div>
+              <div>
+                <label htmlFor="organizationType" className="text-[13px] block text-[#0A0A0A]-400 lg:text-[20px]">Organization Type</label>
+                <select
+                  name="organizationType"
+                  id="organizationType"
+                  className={`rounded-[8px] border-[1px] py-[8px] px-[12px] lg:pt-[20px] lg:pr-[24px] lg:pb-[20px] lg:pl-[16px] h-[48px] lg:h-[64px] w-full ${formData.organizationType ? 'border-[#F97316]' : 'border-[#CBD5E1]'} rounded mt-2 bg-white`}
+                  required
+                  value={formData.organizationType}
+                  onChange={handleInputChange}
+                >
+                  <option value="">Select</option>
+                  <option value="Corporation">Corporation</option>
+                  <option value="Corporation">Limited Liability</option>
+                  <option value="Corporation">LLCs</option>
+                  <option value="Corporation">Joint Venture</option>
+                
+                </select>
+                {(clientErrors.organizationType || actionData?.errors?.organizationType) && <p className="text-red-500">{clientErrors.organizationType || actionData?.errors?.organizationType}</p>}
+              </div>
+            </div>
+            <div className="mb-4">
+              <p className="block text-[24px] lg:text-[28px] text-[#000000]-500">Company Address</p>
+            </div>
+            <div className="mb-4 grid lg:grid-cols-2 gap-4">
+              <div>
+                <label htmlFor="country" className="text-[13px] block text-[#0A0A0A]-400 lg:text-[20px]">Country</label>
+                <select
+                  name="country"
+                  id="country"
+                  className={`rounded-[8px] border-[1px] py-[8px] px-[12px] lg:pt-[20px] lg:pr-[24px] lg:pb-[20px] lg:pl-[16px] h-[48px] lg:h-[64px] w-full ${formData.country ? 'border-[#F97316]' : 'border-[#CBD5E1]'} rounded mt-2 bg-white`}
+                  required
+                  value={formData.country}
+                  onChange={handleInputChange}
+                >
+                  <option value="">Select</option>
+                  <option value="Nigeria">Nicaragua</option>
+                  <option value="Nigeria">Niger</option>
+                  <option value="Nigeria">Nigeria</option>
+                  <option value="Nigeria">North Macedonia</option>
+
+                 
+                </select>
+                {(clientErrors.country || actionData?.errors?.country) && <p className="text-red-500">{clientErrors.country || actionData?.errors?.country}</p>}
+              </div>
+              <div>
+                <label htmlFor="state" className="text-[13px] block text-[#0A0A0A]-400 lg:text-[20px]">State</label>
+                <select
+                  name="state"
+                  id="state"
+                  className={`rounded-[8px] border-[1px] py-[8px] px-[12px] lg:pt-[20px] lg:pr-[24px] lg:pb-[20px] lg:pl-[16px] h-[48px] lg:h-[64px] w-full ${formData.state ? 'border-[#F97316]' : 'border-[#CBD5E1]'} rounded mt-2 bg-white`}
+                  required
+                  value={formData.state}
+                  onChange={handleInputChange}
+                >
+                  <option value="">Select</option>
+                  <option value="Lagos">Kogi</option>
+                  <option value="Lagos">Kwara</option>
+                  <option value="Lagos">Lagos</option>
+                  <option value="Lagos">Nasarawa</option>
+      
+                </select>
+                {(clientErrors.state || actionData?.errors?.state) && <p className="text-red-500">{clientErrors.state || actionData?.errors?.state}</p>}
+              </div>
+              <div>
+                <label htmlFor="address" className="block text-[#0A0A0A]-400 lg:text-[20px]">Address</label>
+                <input
+                  name="address"
+                  id="address"
+                  className={`rounded-[8px] border-[1px] py-[8px] px-[12px] lg:pt-[20px] lg:pr-[24px] lg:pb-[20px] lg:pl-[16px] h-[48px] lg:h-[64px] w-full ${formData.address ? 'border-[#F97316]' : 'border-[#CBD5E1]'} rounded mt-2`}
+                  type="text"
+                  placeholder="Enter your company address"
+                  required
+                  value={formData.address}
+                  onChange={handleInputChange}
+                />
+                {(clientErrors.address || actionData?.errors?.address) && <p className="text-red-500">{clientErrors.address || actionData?.errors?.address}</p>}
+              </div>
+              <div className="text-[20px] lg:hidden">
+                <label htmlFor="lga" className="text-[13px] block text-[#0A0A0A]-400">LGA</label>
+                <select
+                  name="lga"
+                  id="lga"
+                  className={`rounded-[8px] border-[1px] py-[8px] px-[12px] lg:pt-[20px] lg:pr-[24px] lg:pb-[20px] lg:pl-[16px] h-[48px] lg:h-[64px] w-full ${formData.lga ? 'border-[#F97316]' : 'border-[#CBD5E1]'} rounded mt-2 bg-white`}
+                  required
+                  value={formData.lga}
+                  onChange={handleInputChange}
+                >
+                  <option value="">Select</option>
+                  <option value="Lagos Island">Lagos Island</option>
+                </select>
+                {(clientErrors.lga || actionData?.errors?.lga) && <p className="text-red-500">{clientErrors.lga || actionData?.errors?.lga}</p>}
+              </div>
+            </div>
+            <Button
+              type="submit"
+              className="lg:h-[64px] w-full bg-orange-500 text-white py-[8px] px-[16px] rounded-[8px] mt-4"
+            >
+              Create Account
+            </Button>
+            <div>
+              <p className="text-center mt-[8px] text-[14px] lg:hidden">Already Have An Account?<Link to="/login" className="mx-2 text-[#F97315]">Login</Link></p>
+            </div>
+          </Form>
+        </div>
+      </div>
+    </>
+  );
+}

From 50e212f0b88e85ecd222019a516541170b91be0f Mon Sep 17 00:00:00 2001
From: Aakash kumar <76447347+itsAakashz@users.noreply.github.com>
Date: Sun, 21 Jul 2024 00:19:11 +0530
Subject: [PATCH 2/3] feat: Implemented Sign Up Organsiation Page for isse 15

---
 app/routes/OrganizationSignUpPage.tsx | 30 +++++++++++++--------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/app/routes/OrganizationSignUpPage.tsx b/app/routes/OrganizationSignUpPage.tsx
index 72c10ad8..d676fa70 100644
--- a/app/routes/OrganizationSignUpPage.tsx
+++ b/app/routes/OrganizationSignUpPage.tsx
@@ -2,6 +2,8 @@ import { MetaFunction, ActionFunction, json } from "@remix-run/node";
 import { Link, Form, useActionData } from "@remix-run/react";
 import { useState } from "react";
 import { Button } from "~/components/ui/button";
+import { Label } from "~/components/ui/label";
+import { Input } from "~/components/ui/input";
 
 // Define the types for the form fields
 interface FormData {
@@ -39,10 +41,8 @@ export const action: ActionFunction = async ({ request }) => {
     return json({ errors }, { status: 400 });
   }
 
-  console.log(data);
   
-  // Process the valid data (e.g., save to database)
-  // ...
+  
 
   return json({ success: true });
 };
@@ -128,13 +128,13 @@ export default function Signup() {
     <>
       <div className="flex items-center justify-center">
         <div className="h-[1010px] w-[342px] mt-[80px] bg-white lg:h-[836px] lg:w-[820px] lg:mt-[208px] mx-[25px] lg:m-3 w-full max-w-mid gap-[24px]">
-          <h1 className="text-[13px] lg:text-[32px] text-[#141414]-600 mb-6 text-center font-bold hidden lg:block">Create Organisation Account</h1>
+          <h1 className="text-[13px] lg:text-[32px] text-[#141414]-600 mb-6 text-center hidden lg:block">Create Organisation Account</h1>
           <h1 className="text-[24px] font-bold lg:hidden">Sign up</h1>
           <p className="text-[13px] lg:text-[20px] text-[#525252]-400 lg:text-center">Create an account to get started with us.</p>
           <Form method="post" className="gap-[24px]" onSubmit={handleSubmit}>
             <div className="mb-4">
-              <label htmlFor="company_name" className="text-[13px] block text-[#0A0A0A]-400 lg:text-[20px]">Company's Name</label>
-              <input
+              <Label htmlFor="company_name" className="text-[13px] block text-[#0A0A0A]-400 lg:text-[20px]">Company's Name</Label>
+              <Input
                 id="company_name"
                 type="text"
                 name="companyName"
@@ -147,8 +147,8 @@ export default function Signup() {
               {(clientErrors.companyName || actionData?.errors?.companyName) && <p className="text-red-500">{clientErrors.companyName || actionData?.errors?.companyName}</p>}
             </div>
             <div className="mb-4">
-              <label htmlFor="email" className="text-[13px] block text-[#0A0A0A]-400 lg:text-[20px]">Company's Email Address</label>
-              <input
+              <Label htmlFor="email" className="text-[13px] block text-[#0A0A0A]-400 lg:text-[20px]">Company's Email Address</Label>
+              <Input
                 id="email"
                 type="email"
                 name="companyEmail"
@@ -162,7 +162,7 @@ export default function Signup() {
             </div>
             <div className="mb-4 grid lg:grid-cols-2 gap-4">
               <div>
-                <label htmlFor="industry" className="text-[13px] block text-[#0A0A0A]-400 lg:text-[20px]">Industry</label>
+                <Label htmlFor="industry" className="text-[13px] block text-[#0A0A0A]-400 lg:text-[20px]">Industry</Label>
                 <select
                   id="industry"
                   name="industry"
@@ -182,7 +182,7 @@ export default function Signup() {
                 {(clientErrors.industry || actionData?.errors?.industry) && <p className="text-red-500">{clientErrors.industry || actionData?.errors?.industry}</p>}
               </div>
               <div>
-                <label htmlFor="organizationType" className="text-[13px] block text-[#0A0A0A]-400 lg:text-[20px]">Organization Type</label>
+                <Label htmlFor="organizationType" className="text-[13px] block text-[#0A0A0A]-400 lg:text-[20px]">Organization Type</Label>
                 <select
                   name="organizationType"
                   id="organizationType"
@@ -206,7 +206,7 @@ export default function Signup() {
             </div>
             <div className="mb-4 grid lg:grid-cols-2 gap-4">
               <div>
-                <label htmlFor="country" className="text-[13px] block text-[#0A0A0A]-400 lg:text-[20px]">Country</label>
+                <Label htmlFor="country" className="text-[13px] block text-[#0A0A0A]-400 lg:text-[20px]">Country</Label>
                 <select
                   name="country"
                   id="country"
@@ -226,7 +226,7 @@ export default function Signup() {
                 {(clientErrors.country || actionData?.errors?.country) && <p className="text-red-500">{clientErrors.country || actionData?.errors?.country}</p>}
               </div>
               <div>
-                <label htmlFor="state" className="text-[13px] block text-[#0A0A0A]-400 lg:text-[20px]">State</label>
+                <Label htmlFor="state" className="text-[13px] block text-[#0A0A0A]-400 lg:text-[20px]">State</Label>
                 <select
                   name="state"
                   id="state"
@@ -245,8 +245,8 @@ export default function Signup() {
                 {(clientErrors.state || actionData?.errors?.state) && <p className="text-red-500">{clientErrors.state || actionData?.errors?.state}</p>}
               </div>
               <div>
-                <label htmlFor="address" className="block text-[#0A0A0A]-400 lg:text-[20px]">Address</label>
-                <input
+                <Label htmlFor="address" className="block text-[#0A0A0A]-400 lg:text-[20px]">Address</Label>
+                <Input
                   name="address"
                   id="address"
                   className={`rounded-[8px] border-[1px] py-[8px] px-[12px] lg:pt-[20px] lg:pr-[24px] lg:pb-[20px] lg:pl-[16px] h-[48px] lg:h-[64px] w-full ${formData.address ? 'border-[#F97316]' : 'border-[#CBD5E1]'} rounded mt-2`}
@@ -259,7 +259,7 @@ export default function Signup() {
                 {(clientErrors.address || actionData?.errors?.address) && <p className="text-red-500">{clientErrors.address || actionData?.errors?.address}</p>}
               </div>
               <div className="text-[20px] lg:hidden">
-                <label htmlFor="lga" className="text-[13px] block text-[#0A0A0A]-400">LGA</label>
+                <Label htmlFor="lga" className="text-[13px] block text-[#0A0A0A]-400">LGA</Label>
                 <select
                   name="lga"
                   id="lga"

From 63495cb3dc779ea40d634ca33adc6591793068d5 Mon Sep 17 00:00:00 2001
From: Aakash kumar <76447347+itsAakashz@users.noreply.github.com>
Date: Sun, 21 Jul 2024 02:41:00 +0530
Subject: [PATCH 3/3] Lint fix for OrganizationSignUpPage.tsx

---
 app/routes/OrganizationSignUpPage.tsx | 192 ++++++++++++++++++--------
 1 file changed, 138 insertions(+), 54 deletions(-)

diff --git a/app/routes/OrganizationSignUpPage.tsx b/app/routes/OrganizationSignUpPage.tsx
index d676fa70..93204a61 100644
--- a/app/routes/OrganizationSignUpPage.tsx
+++ b/app/routes/OrganizationSignUpPage.tsx
@@ -1,9 +1,10 @@
-import { MetaFunction, ActionFunction, json } from "@remix-run/node";
-import { Link, Form, useActionData } from "@remix-run/react";
+import { ActionFunction, json, MetaFunction } from "@remix-run/node";
+import { Form, Link, useActionData } from "@remix-run/react";
 import { useState } from "react";
+
 import { Button } from "~/components/ui/button";
-import { Label } from "~/components/ui/label";
 import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
 
 // Define the types for the form fields
 interface FormData {
@@ -41,9 +42,6 @@ export const action: ActionFunction = async ({ request }) => {
     return json({ errors }, { status: 400 });
   }
 
-  
-  
-
   return json({ success: true });
 };
 
@@ -54,10 +52,10 @@ const validateForm = (data: FormData): FormErrors => {
   }
   if (!data.companyEmail) {
     errors.companyEmail = "Company email is required.";
-  } else if (!/\S+@\S+\.\S+/.test(data.companyEmail)) {
-    errors.companyEmail = "Email address is invalid.";
-  } else {
+  } else if (/\S+@\S+\.\S+/.test(data.companyEmail)) {
     delete errors.companyEmail;
+  } else {
+    errors.companyEmail = "Email address is invalid.";
   }
   if (!data.industry) {
     errors.industry = "Industry is required.";
@@ -81,7 +79,10 @@ const validateForm = (data: FormData): FormErrors => {
 };
 
 export default function Signup() {
-  const actionData = useActionData<{ errors?: FormErrors; success?: boolean }>();
+  const actionData = useActionData<{
+    errors?: FormErrors;
+    success?: boolean;
+  }>();
   const [clientErrors, setClientErrors] = useState<FormErrors>({});
   const [formData, setFormData] = useState<FormData>({
     companyName: "",
@@ -94,11 +95,13 @@ export default function Signup() {
     lga: "",
   });
 
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
-    const { name, value } = e.target;
+  const handleInputChange = (
+    event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>,
+  ) => {
+    const { name, value } = event.target;
     setFormData({ ...formData, [name]: value });
-  
-    if (name === 'companyEmail' && /\S+@\S+\.\S+/.test(value)) {
+
+    if (name === "companyEmail" && /\S+@\S+\.\S+/.test(value)) {
       const newErrors = { ...clientErrors };
       delete newErrors.companyEmail;
       setClientErrors(newErrors);
@@ -108,7 +111,6 @@ export default function Signup() {
       setClientErrors(newErrors);
     }
   };
-  
 
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     const form = event.currentTarget;
@@ -121,52 +123,82 @@ export default function Signup() {
       setClientErrors(errors);
     }
 
-    console.log(data)
+    console.log(data);
   };
 
   return (
     <>
       <div className="flex items-center justify-center">
-        <div className="h-[1010px] w-[342px] mt-[80px] bg-white lg:h-[836px] lg:w-[820px] lg:mt-[208px] mx-[25px] lg:m-3 w-full max-w-mid gap-[24px]">
-          <h1 className="text-[13px] lg:text-[32px] text-[#141414]-600 mb-6 text-center hidden lg:block">Create Organisation Account</h1>
+        <div className="max-w-mid mx-[25px] mt-[80px] h-[1010px] w-[342px] w-full gap-[24px] bg-white lg:m-3 lg:mt-[208px] lg:h-[836px] lg:w-[820px]">
+          <h1 className="text-[#141414]-600 mb-6 hidden text-center text-[13px] lg:block lg:text-[32px]">
+            Create Organisation Account
+          </h1>
           <h1 className="text-[24px] font-bold lg:hidden">Sign up</h1>
-          <p className="text-[13px] lg:text-[20px] text-[#525252]-400 lg:text-center">Create an account to get started with us.</p>
+          <p className="text-[#525252]-400 text-[13px] lg:text-center lg:text-[20px]">
+            Create an account to get started with us.
+          </p>
           <Form method="post" className="gap-[24px]" onSubmit={handleSubmit}>
             <div className="mb-4">
-              <Label htmlFor="company_name" className="text-[13px] block text-[#0A0A0A]-400 lg:text-[20px]">Company's Name</Label>
+              <Label
+                htmlFor="company_name"
+                className="text-[#0A0A0A]-400 block text-[13px] lg:text-[20px]"
+              >
+                Company Name
+              </Label>
               <Input
                 id="company_name"
                 type="text"
                 name="companyName"
-                className={`rounded-[8px] border-[1px] py-[12px] px-[16px] lg:pt-[20px] lg:pr-[24px] lg:pb-[20px] lg:pl-[16px] h-[48px] lg:h-[64px] w-full ${formData.companyName ? 'border-[#F97316]' : 'border-[#CBD5E1]'} rounded mt-2`}
+                className={`h-[48px] w-full rounded-[8px] border-[1px] px-[16px] py-[12px] lg:h-[64px] lg:pb-[20px] lg:pl-[16px] lg:pr-[24px] lg:pt-[20px] ${formData.companyName ? "border-[#F97316]" : "border-[#CBD5E1]"} mt-2 rounded`}
                 placeholder="Enter company's full name"
                 required
                 value={formData.companyName}
                 onChange={handleInputChange}
               />
-              {(clientErrors.companyName || actionData?.errors?.companyName) && <p className="text-red-500">{clientErrors.companyName || actionData?.errors?.companyName}</p>}
+              {(clientErrors.companyName ||
+                actionData?.errors?.companyName) && (
+                <p className="text-red-500">
+                  {clientErrors.companyName || actionData?.errors?.companyName}
+                </p>
+              )}
             </div>
             <div className="mb-4">
-              <Label htmlFor="email" className="text-[13px] block text-[#0A0A0A]-400 lg:text-[20px]">Company's Email Address</Label>
+              <Label
+                htmlFor="email"
+                className="text-[#0A0A0A]-400 block text-[13px] lg:text-[20px]"
+              >
+                Company Email Address
+              </Label>
               <Input
                 id="email"
                 type="email"
                 name="companyEmail"
-                className={`rounded-[8px] border-[1px] py-[12px] px-[16px] lg:pt-[20px] lg:pr-[24px] lg:pb-[20px] lg:pl-[16px] h-[48px] lg:h-[64px] w-full ${formData.companyEmail ? 'border-[#F97316]' : 'border-[#CBD5E1]'} rounded mt-2`}
+                className={`h-[48px] w-full rounded-[8px] border-[1px] px-[16px] py-[12px] lg:h-[64px] lg:pb-[20px] lg:pl-[16px] lg:pr-[24px] lg:pt-[20px] ${formData.companyEmail ? "border-[#F97316]" : "border-[#CBD5E1]"} mt-2 rounded`}
                 placeholder="Enter company's email address"
                 required
                 value={formData.companyEmail}
                 onChange={handleInputChange}
               />
-              {(clientErrors.companyEmail || actionData?.errors?.companyEmail) && <p className="text-red-500">{clientErrors.companyEmail || actionData?.errors?.companyEmail}</p>}
+              {(clientErrors.companyEmail ||
+                actionData?.errors?.companyEmail) && (
+                <p className="text-red-500">
+                  {clientErrors.companyEmail ||
+                    actionData?.errors?.companyEmail}
+                </p>
+              )}
             </div>
-            <div className="mb-4 grid lg:grid-cols-2 gap-4">
+            <div className="mb-4 grid gap-4 lg:grid-cols-2">
               <div>
-                <Label htmlFor="industry" className="text-[13px] block text-[#0A0A0A]-400 lg:text-[20px]">Industry</Label>
+                <Label
+                  htmlFor="industry"
+                  className="text-[#0A0A0A]-400 block text-[13px] lg:text-[20px]"
+                >
+                  Industry
+                </Label>
                 <select
                   id="industry"
                   name="industry"
-                  className={`rounded-[8px] border-[1px] py-[8px] px-[12px] lg:pt-[20px] lg:pr-[24px] lg:pb-[20px] lg:pl-[16px] h-[48px] lg:h-[64px] w-full ${formData.industry ? 'border-[#F97316]' : 'border-[#CBD5E1]'} rounded mt-2 bg-white`}
+                  className={`h-[48px] w-full rounded-[8px] border-[1px] px-[12px] py-[8px] lg:h-[64px] lg:pb-[20px] lg:pl-[16px] lg:pr-[24px] lg:pt-[20px] ${formData.industry ? "border-[#F97316]" : "border-[#CBD5E1]"} mt-2 rounded bg-white`}
                   required
                   value={formData.industry}
                   onChange={handleInputChange}
@@ -176,17 +208,24 @@ export default function Signup() {
                   <option value="Technology">Real Estate</option>
                   <option value="Technology"> Retail</option>
                   <option value="Technology">Technology</option>
-                 
-               
                 </select>
-                {(clientErrors.industry || actionData?.errors?.industry) && <p className="text-red-500">{clientErrors.industry || actionData?.errors?.industry}</p>}
+                {(clientErrors.industry || actionData?.errors?.industry) && (
+                  <p className="text-red-500">
+                    {clientErrors.industry || actionData?.errors?.industry}
+                  </p>
+                )}
               </div>
               <div>
-                <Label htmlFor="organizationType" className="text-[13px] block text-[#0A0A0A]-400 lg:text-[20px]">Organization Type</Label>
+                <Label
+                  htmlFor="organizationType"
+                  className="text-[#0A0A0A]-400 block text-[13px] lg:text-[20px]"
+                >
+                  Organization Type
+                </Label>
                 <select
                   name="organizationType"
                   id="organizationType"
-                  className={`rounded-[8px] border-[1px] py-[8px] px-[12px] lg:pt-[20px] lg:pr-[24px] lg:pb-[20px] lg:pl-[16px] h-[48px] lg:h-[64px] w-full ${formData.organizationType ? 'border-[#F97316]' : 'border-[#CBD5E1]'} rounded mt-2 bg-white`}
+                  className={`h-[48px] w-full rounded-[8px] border-[1px] px-[12px] py-[8px] lg:h-[64px] lg:pb-[20px] lg:pl-[16px] lg:pr-[24px] lg:pt-[20px] ${formData.organizationType ? "border-[#F97316]" : "border-[#CBD5E1]"} mt-2 rounded bg-white`}
                   required
                   value={formData.organizationType}
                   onChange={handleInputChange}
@@ -196,21 +235,33 @@ export default function Signup() {
                   <option value="Corporation">Limited Liability</option>
                   <option value="Corporation">LLCs</option>
                   <option value="Corporation">Joint Venture</option>
-                
                 </select>
-                {(clientErrors.organizationType || actionData?.errors?.organizationType) && <p className="text-red-500">{clientErrors.organizationType || actionData?.errors?.organizationType}</p>}
+                {(clientErrors.organizationType ||
+                  actionData?.errors?.organizationType) && (
+                  <p className="text-red-500">
+                    {clientErrors.organizationType ||
+                      actionData?.errors?.organizationType}
+                  </p>
+                )}
               </div>
             </div>
             <div className="mb-4">
-              <p className="block text-[24px] lg:text-[28px] text-[#000000]-500">Company Address</p>
+              <p className="text-[#000000]-500 block text-[24px] lg:text-[28px]">
+                Company Address
+              </p>
             </div>
-            <div className="mb-4 grid lg:grid-cols-2 gap-4">
+            <div className="mb-4 grid gap-4 lg:grid-cols-2">
               <div>
-                <Label htmlFor="country" className="text-[13px] block text-[#0A0A0A]-400 lg:text-[20px]">Country</Label>
+                <Label
+                  htmlFor="country"
+                  className="text-[#0A0A0A]-400 block text-[13px] lg:text-[20px]"
+                >
+                  Country
+                </Label>
                 <select
                   name="country"
                   id="country"
-                  className={`rounded-[8px] border-[1px] py-[8px] px-[12px] lg:pt-[20px] lg:pr-[24px] lg:pb-[20px] lg:pl-[16px] h-[48px] lg:h-[64px] w-full ${formData.country ? 'border-[#F97316]' : 'border-[#CBD5E1]'} rounded mt-2 bg-white`}
+                  className={`h-[48px] w-full rounded-[8px] border-[1px] px-[12px] py-[8px] lg:h-[64px] lg:pb-[20px] lg:pl-[16px] lg:pr-[24px] lg:pt-[20px] ${formData.country ? "border-[#F97316]" : "border-[#CBD5E1]"} mt-2 rounded bg-white`}
                   required
                   value={formData.country}
                   onChange={handleInputChange}
@@ -220,17 +271,24 @@ export default function Signup() {
                   <option value="Nigeria">Niger</option>
                   <option value="Nigeria">Nigeria</option>
                   <option value="Nigeria">North Macedonia</option>
-
-                 
                 </select>
-                {(clientErrors.country || actionData?.errors?.country) && <p className="text-red-500">{clientErrors.country || actionData?.errors?.country}</p>}
+                {(clientErrors.country || actionData?.errors?.country) && (
+                  <p className="text-red-500">
+                    {clientErrors.country || actionData?.errors?.country}
+                  </p>
+                )}
               </div>
               <div>
-                <Label htmlFor="state" className="text-[13px] block text-[#0A0A0A]-400 lg:text-[20px]">State</Label>
+                <Label
+                  htmlFor="state"
+                  className="text-[#0A0A0A]-400 block text-[13px] lg:text-[20px]"
+                >
+                  State
+                </Label>
                 <select
                   name="state"
                   id="state"
-                  className={`rounded-[8px] border-[1px] py-[8px] px-[12px] lg:pt-[20px] lg:pr-[24px] lg:pb-[20px] lg:pl-[16px] h-[48px] lg:h-[64px] w-full ${formData.state ? 'border-[#F97316]' : 'border-[#CBD5E1]'} rounded mt-2 bg-white`}
+                  className={`h-[48px] w-full rounded-[8px] border-[1px] px-[12px] py-[8px] lg:h-[64px] lg:pb-[20px] lg:pl-[16px] lg:pr-[24px] lg:pt-[20px] ${formData.state ? "border-[#F97316]" : "border-[#CBD5E1]"} mt-2 rounded bg-white`}
                   required
                   value={formData.state}
                   onChange={handleInputChange}
@@ -240,30 +298,47 @@ export default function Signup() {
                   <option value="Lagos">Kwara</option>
                   <option value="Lagos">Lagos</option>
                   <option value="Lagos">Nasarawa</option>
-      
                 </select>
-                {(clientErrors.state || actionData?.errors?.state) && <p className="text-red-500">{clientErrors.state || actionData?.errors?.state}</p>}
+                {(clientErrors.state || actionData?.errors?.state) && (
+                  <p className="text-red-500">
+                    {clientErrors.state || actionData?.errors?.state}
+                  </p>
+                )}
               </div>
               <div>
-                <Label htmlFor="address" className="block text-[#0A0A0A]-400 lg:text-[20px]">Address</Label>
+                <Label
+                  htmlFor="address"
+                  className="text-[#0A0A0A]-400 block lg:text-[20px]"
+                >
+                  Address
+                </Label>
                 <Input
                   name="address"
                   id="address"
-                  className={`rounded-[8px] border-[1px] py-[8px] px-[12px] lg:pt-[20px] lg:pr-[24px] lg:pb-[20px] lg:pl-[16px] h-[48px] lg:h-[64px] w-full ${formData.address ? 'border-[#F97316]' : 'border-[#CBD5E1]'} rounded mt-2`}
+                  className={`h-[48px] w-full rounded-[8px] border-[1px] px-[12px] py-[8px] lg:h-[64px] lg:pb-[20px] lg:pl-[16px] lg:pr-[24px] lg:pt-[20px] ${formData.address ? "border-[#F97316]" : "border-[#CBD5E1]"} mt-2 rounded`}
                   type="text"
                   placeholder="Enter your company address"
                   required
                   value={formData.address}
                   onChange={handleInputChange}
                 />
-                {(clientErrors.address || actionData?.errors?.address) && <p className="text-red-500">{clientErrors.address || actionData?.errors?.address}</p>}
+                {(clientErrors.address || actionData?.errors?.address) && (
+                  <p className="text-red-500">
+                    {clientErrors.address || actionData?.errors?.address}
+                  </p>
+                )}
               </div>
               <div className="text-[20px] lg:hidden">
-                <Label htmlFor="lga" className="text-[13px] block text-[#0A0A0A]-400">LGA</Label>
+                <Label
+                  htmlFor="lga"
+                  className="text-[#0A0A0A]-400 block text-[13px]"
+                >
+                  LGA
+                </Label>
                 <select
                   name="lga"
                   id="lga"
-                  className={`rounded-[8px] border-[1px] py-[8px] px-[12px] lg:pt-[20px] lg:pr-[24px] lg:pb-[20px] lg:pl-[16px] h-[48px] lg:h-[64px] w-full ${formData.lga ? 'border-[#F97316]' : 'border-[#CBD5E1]'} rounded mt-2 bg-white`}
+                  className={`h-[48px] w-full rounded-[8px] border-[1px] px-[12px] py-[8px] lg:h-[64px] lg:pb-[20px] lg:pl-[16px] lg:pr-[24px] lg:pt-[20px] ${formData.lga ? "border-[#F97316]" : "border-[#CBD5E1]"} mt-2 rounded bg-white`}
                   required
                   value={formData.lga}
                   onChange={handleInputChange}
@@ -271,17 +346,26 @@ export default function Signup() {
                   <option value="">Select</option>
                   <option value="Lagos Island">Lagos Island</option>
                 </select>
-                {(clientErrors.lga || actionData?.errors?.lga) && <p className="text-red-500">{clientErrors.lga || actionData?.errors?.lga}</p>}
+                {(clientErrors.lga || actionData?.errors?.lga) && (
+                  <p className="text-red-500">
+                    {clientErrors.lga || actionData?.errors?.lga}
+                  </p>
+                )}
               </div>
             </div>
             <Button
               type="submit"
-              className="lg:h-[64px] w-full bg-orange-500 text-white py-[8px] px-[16px] rounded-[8px] mt-4"
+              className="mt-4 w-full rounded-[8px] bg-orange-500 px-[16px] py-[8px] text-white lg:h-[64px]"
             >
               Create Account
             </Button>
             <div>
-              <p className="text-center mt-[8px] text-[14px] lg:hidden">Already Have An Account?<Link to="/login" className="mx-2 text-[#F97315]">Login</Link></p>
+              <p className="mt-[8px] text-center text-[14px] lg:hidden">
+                Already Have An Account?
+                <Link to="/login" className="mx-2 text-[#F97315]">
+                  Login
+                </Link>
+              </p>
             </div>
           </Form>
         </div>