added step 4

src/Components/FundDrive.css

@@ -12,7 +12,18 @@ body {
     justify-content: center;
     padding: 40px 16px;
   }
-  
+  /* .form-field {
+    display: block;
+    margin: 10px 0;
+    padding: 8px;
+    width: 100%;
+  } */
+  .section-heading {
+    font-size: 18px;
+    font-weight: bold;
+    color: #1e293b;
+    margin: 20px 0 10px;
+  }
   .container-box {
     background: #ffffff;
     border-radius: 16px;

src/Components/FundDrive.jsx

@@ -17,6 +17,11 @@ const FundDrive = () => {
     category: "",
     pan: "",
     customCategory: "",
+    bankHolderName: "",
+    bankName: "",
+    ifscCode: "",
+    fundAmount: "",
+    accountNumber: "",
     images: []
   });
   const [isPanVerified, setIsPanVerified] = useState(false); // To track PAN verification status
@@ -103,41 +108,6 @@ const FundDrive = () => {
   //   }
   // };
 
-  //demoooooooooooooooooooooooooooooooooo//
-  // const verifyPan = async () => {
-  //   try {
-  //     const formDataForPan = new FormData();
-  //     formDataForPan.append("pan", formData.pan);
-  //     formDataForPan.append("panImage", panImage);
-  
-  //     // Using the proxy path - note we removed the full URL
-  //     const response = await axios.post(
-  //       "/api/verify-pan",  // Just use the relative path when using a proxy
-  //       formDataForPan,
-  //       {
-  //         headers: {
-  //           "Content-Type": "multipart/form-data",
-  //         },
-  //       }
-  //     );
-  
-  //     console.log("PAN verification response:", response.data);
-  //     const isValid = response.data.verified;
-  //     setIsPanVerified(isValid);
-  
-  //     if (!isValid) {
-  //       setVerificationError("PAN number and uploaded image do not match.");
-  //     }
-  
-  //     return isValid;
-  //   } catch (error) {
-  //     console.error("Error verifying PAN:", error);
-  //     setVerificationError("An error occurred during PAN verification.");
-  //     return false;
-  //   }
-  // };
-
-
 
   const verifyPan = async () => {
     try {
@@ -360,7 +330,7 @@ const FundDrive = () => {
               type="button"
               onClick={handleNext}
               className="form-button next-button"
-              disabled={!formData.name || !formData.email || !formData.phone || !formData.age || !formData.dob || !formData.pan}
+              disabled={!formData.name || !formData.email || !formData.phone || !formData.age || !formData.dob || !formData.pan || !isPanVerified} 
             >
               Next
             </button>
@@ -410,7 +380,7 @@ const FundDrive = () => {
         )}
         
         
-        {step === 3 && (
+        {/* {step === 3 && (
           <div className="upload-section-box">
             <h4>Step 3:Upload an Image</h4>
             <h3 className="upload-title">{formData.category === "Others" ? formData.customCategory : formData.category}</h3>
@@ -428,13 +398,179 @@ const FundDrive = () => {
               {formData.images.map((image, index) => (
                 <img key={index} src={URL.createObjectURL(image)} alt={`Proof ${index + 1}`} className="uploaded-image" />
               ))}
+            </div> */}
+            {step === 3 && (
+            <div className="upload-section-box">
+              <h4>Step 3: Upload an Image</h4>
+              <h3 className="upload-title">
+                {formData.category === "Others" ? formData.customCategory : formData.category}
+              </h3>
+
+              {/* Common image upload */}
+              <div className="upload-box">
+                <input
+                  type="file"
+                  multiple
+                  accept="image/*"
+                  onChange={handleImageUpload}
+                  className="file-input"
+                />
+                <p className="upload-placeholder">Click or Drag & Drop to upload images</p>
+              </div>
+
+              {/* Section-specific forms with headings */}
+              {formData.category === "Medical Fundraising" && (
+                <>
+                  <h4 className="section-heading">Upload Medical Details</h4>
+                  <input type="text" placeholder="Patient Name" className="form-field" />
+                  <input type="text" placeholder="Patient Contact Number" className="form-field" />
+                </>
+              )}
+
+              {formData.category === "Education & Scholarships" && (
+                <>
+                  <h4 className="section-heading">Upload Student Details</h4>
+                  <input type="text" placeholder="Student Name" className="form-field" />
+                  <input type="text" placeholder="Standard/Class" className="form-field" />
+                </>
+              )}
+
+              {formData.category === "Disaster Relief & Aid" && (
+                <>
+                  <h4 className="section-heading">Upload Relief Information</h4>
+                  <input type="text" placeholder="Cause/Place Affected" className="form-field" />
+                </>
+              )}
+
+              {formData.category === "Memorial & Tribute Funds" && (
+                <>
+                  <h4 className="section-heading">Upload Tribute Details</h4>
+                  <input type="text" placeholder="Person Honored" className="form-field" />
+                </>
+              )}
+
+              {[
+                "Community Development",
+                "Social Causes",
+                "Religious & Faith-Based Giving",
+                "Crowdfunding for Needs",
+                "Nonprofit & NGO Fundraising",
+              ].includes(formData.category) && (
+                <>
+                  <h4 className="section-heading">Upload Cause Information</h4>
+                  <input type="text" placeholder="Cause Details" className="form-field" />
+                </>
+              )}
+
+              {formData.category === "Others" && (
+                <>
+                  <h4 className="section-heading">Upload Custom Details</h4>
+                  <input type="text" placeholder="Describe your cause" className="form-field" />
+                  <input type="file" className="form-field" />
+                </>
+              )}
+
+              {/* Image preview */}
+              <div className="image-preview">
+                {formData.images.map((image, index) => (
+                  <img
+                    key={index}
+                    src={URL.createObjectURL(image)}
+                    alt={`Proof ${index + 1}`}
+                    className="uploaded-image"
+                  />
+                ))}
             </div>
             <div className="button-group">
               <button type="button" className="form-button back-button" onClick={handleBack}>Back</button>
-              <button type="button" className="form-button submit-button" onClick={handleSubmit} disabled={formData.images.length === 0}>Submit</button>
+              <button 
+                type="button" 
+                className="form-button next-button" 
+                onClick={handleNext} 
+                disabled={!formData.category || (formData.category === "Others" && !formData.customCategory.trim())}
+              >
+                Next
+              </button>
             </div>
           </div>
         )}
+    {step === 4 && (
+  <div className="bank-details-section-box">
+    <h4>Step 4: Banking Details</h4>
+
+    <div className="form-group">
+      <label className="form-label">Bank Account Holder Name</label>
+      <input
+        type="text"
+        placeholder="Bank Account Holder Name"
+        className="form-field"
+        value={formData.bankHolderName}
+        onChange={(e) => setFormData({ ...formData, bankHolderName: e.target.value })}
+      />
+    </div>
+
+    <div className="form-group">
+      <label className="form-label">Bank Name</label>
+      <input
+        type="text"
+        placeholder="Bank Name"
+        className="form-field"
+        value={formData.bankName}
+        onChange={(e) => setFormData({ ...formData, bankName: e.target.value })}
+      />
+    </div>
+
+    <div className="form-group">
+      <label className="form-label">Bank Account Number</label>
+      <input
+        type="text"
+        placeholder="Bank Account Number"
+        className="form-field"
+        value={formData.accountNumber}
+        onChange={(e) => setFormData({ ...formData, accountNumber: e.target.value })}
+      />
+    </div>
+
+    <div className="form-group">
+      <label className="form-label">IFSC Code</label>
+      <input
+        type="text"
+        placeholder="IFSC Code"
+        className="form-field"
+        value={formData.ifscCode}
+        onChange={(e) => setFormData({ ...formData, ifscCode: e.target.value })}
+      />
+    </div>
+    <div className="form-group">
+      <label className="form-label">Fundraising Amount</label>    
+      <input
+        type="number"
+        placeholder="Fundraising Amount"
+        className="form-field"
+        value={formData.fundAmount}
+        onChange={(e) => {
+          const value = parseInt(e.target.value, 10);
+          if (!isNaN(value) && value >= 0) {
+            setFormData({ ...formData, fundAmount: value });
+          }
+        }}
+        min="1000"
+      />
+      {formData.fundAmount > 0 && formData.fundAmount < 1000 && (
+        <p className="error-message">Minimum amount should be ₹1000</p>
+      )}
+    </div>
+    <div className="button-group">
+      <button type="button" className="form-button back-button" onClick={handleBack}>
+        Back
+      </button>
+      <button type="button" className="form-button submit-button" onClick={handleSubmit}>
+        Submit
+      </button>
+    </div>
+  </div>
+)}
+
         
       </form>
 </div>
@@ -445,25 +581,3 @@ const FundDrive = () => {
 };
 
 export default FundDrive;
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-