changed file structures

src/App.jsx

 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
-import LoginPage from "./LoginPage";
-import StatusPage from "./StatusPage";
-import AgentStatus from "./AgentStatus";
-import AgentAssigned from "./AgentAssigned";
-import AgentVerified from "./AgentVerified";
-import AgentPayment from "./AgentPayment";
+import LoginPage from "./components/LoginPage";
+import StatusPage from "./components/StatusPage";
+import AgentStatus from "./components/AgentStatus";
+import AgentAssigned from "./components/AgentAssigned";
+import AgentVerified from "./components/AgentVerified";
+import AgentPayment from "./components/AgentPayment";
 
 function App() {
   return (

src/AgentAssigned.jsx → src/components/AgentAssigned.jsx

 import React from "react";
 import { useNavigate } from "react-router-dom";
-
+import FrameImage from "../assets/images/page4.svg";
 const AgentAssigned = () => {
   const navigate = useNavigate();
 
@@ -16,7 +16,7 @@ const AgentAssigned = () => {
         
         {/* Left Side - Illustration */}
         <div className="w-1/2 flex items-center justify-center p-5">
-          <img src="/page4.svg" alt="Illustration" className="w-full h-auto" />
+          <img src={FrameImage} alt="Illustration" className="w-full h-auto" />
         </div>
 
         {/* Divider */}

src/AgentPayment.jsx → src/components/AgentPayment.jsx

 import React from "react";
-
+import FrameImage from "../assets/images/page6.svg";
 const AgentPayment = () => {
   return (
     <div className="flex items-center justify-center min-h-screen" style={{ background: '#E9FAFF' }}>
@@ -13,7 +13,7 @@ const AgentPayment = () => {
         
         {/* Left Side - Illustration */}
         <div className="w-1/2 flex items-center justify-center p-5">
-          <img src="/page6.svg" alt="Verified" className="w-full h-auto" />
+        <img src={FrameImage} alt="Illustration" className="w-full h-auto" />
         </div>
 
         {/* Divider */}

src/AgentStatus.jsx → src/components/AgentStatus.jsx

 import React from "react";
 import { useNavigate } from "react-router-dom";
+import FrameImage from "../assets/images/page3.svg";
 
 const AgentStatus = () => {
   const navigate = useNavigate(); // Hook to navigate pages
@@ -15,7 +16,7 @@ const AgentStatus = () => {
       <div className="absolute top-[194px] left-[134px] bg-white p-8 rounded-[32.6px] w-[1460.608px] h-[729px] flex">
         {/* Left Side - Illustration */}
         <div className="w-1/2 flex items-center justify-center p-5">
-          <img src="/page3.svg" alt="Illustration" className="w-full h-auto" />
+        <img src={FrameImage} alt="Illustration" className="w-full h-auto" />
         </div>
 
         {/* Divider */}

src/AgentVerified.jsx → src/components/AgentVerified.jsx

 import React from "react";
 import { useNavigate } from "react-router-dom";
+import FrameImage from "../assets/images/page5.svg";
 
 const AgentVerified = () => {
   const navigate = useNavigate();
@@ -16,7 +17,7 @@ const AgentVerified = () => {
         
         {/* Left Side - Illustration */}
         <div className="w-1/2 flex items-center justify-center p-5">
-          <img src="/page5.svg" alt="Illustration" className="w-full h-auto" />
+        <img src={FrameImage} alt="Illustration" className="w-full h-auto" />
         </div>
 
         {/* Divider */}

src/LoginPage.jsx → src/components/LoginPage.jsx

@@ -2,7 +2,9 @@ import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import MailIcon from "d:/360ExtremeBrowserDownload/Mail.svg";
 import PasswordEyeIcon from "d:/360ExtremeBrowserDownload/Password eye.svg";
-import './styles.css'; // Import the CSS file
+import FrameImage from "../assets/images/Frame201.svg";
+
+import "../styles.css"; // Import the CSS file
 
 const LoginPage = () => {
   const [showPassword, setShowPassword] = useState(false);
@@ -55,7 +57,7 @@ const LoginPage = () => {
         
         {/* Left Side - Illustration */}
         <div className="w-1/2 flex items-center justify-center p-5">
-          <img src="/Frame 201.svg" alt="Illustration" className="w-full h-auto" />
+          <img src={FrameImage} alt="Illustration" className="w-full h-auto" />
         </div>
 
         {/* Divider */}

src/StatusPage.jsx → src/components/StatusPage.jsx

 import React from "react";
 import { useNavigate } from "react-router-dom";
+import FrameImage from "../assets/images/page2.svg";
 
 const StatusPage = () => {
   const navigate = useNavigate();
@@ -15,7 +16,7 @@ const StatusPage = () => {
       <div className="absolute top-[194px] left-[134px] bg-white p-8 rounded-[32.6px] w-[1460.608px] h-[729px] flex">
         {/* Left Side - Illustration */}
         <div className="w-1/2 flex items-center justify-center p-5">
-          <img src="/page2.svg" alt="Illustration" className="w-full h-auto" />
+        <img src={FrameImage} alt="Illustration" className="w-full h-auto" />
         </div>
 
         {/* Divider */}