From 7df19f042f5a224ba32e9ce93889ec00f21b3f3d Mon Sep 17 00:00:00 2001
From: Rithish <rithishudayakumar@gmail.com>
Date: Tue, 25 Mar 2025 23:13:13 +0530
Subject: [PATCH] total alignment completed except responsive
---
src/assets/images/Frame 203.svg | 4 ++
src/components/AgentAssigned.jsx | 46 ++++++++++++--------
src/components/AgentPayment.jsx | 75 +++++++++++++++++---------------
src/components/AgentStatus.jsx | 50 ++++++++++++---------
src/components/AgentVerified.jsx | 49 +++++++++++++--------
src/components/LoginPage.jsx | 6 +--
src/components/StatusPage.jsx | 20 +++++----
7 files changed, 146 insertions(+), 104 deletions(-)
create mode 100644 src/assets/images/Frame 203.svg
diff --git a/src/assets/images/Frame 203.svg b/src/assets/images/Frame 203.svg
new file mode 100644
index 0000000..8999b75
--- /dev/null
+++ b/src/assets/images/Frame 203.svg
@@ -0,0 +1,4 @@
+<svg width="156" height="45" viewBox="0 0 156 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="154" height="43" rx="21.5" stroke="#0096FF" stroke-width="2"/>
+<path d="M43.4184 30L36.9791 15.3651H39.237L45.1537 28.871H43.8575L49.816 15.3651H51.9067L45.4882 30H43.4184ZM57.5772 30.1254C56.3925 30.1254 55.3471 29.8815 54.4412 29.3937C53.5491 28.9059 52.8522 28.2368 52.3505 27.3866C51.8626 26.5364 51.6187 25.5608 51.6187 24.4597C51.6187 23.3586 51.8557 22.3829 52.3295 21.5327C52.8174 20.6825 53.4794 20.0204 54.3157 19.5465C55.1659 19.0587 56.1207 18.8148 57.18 18.8148C58.2532 18.8148 59.201 19.0517 60.0233 19.5256C60.8457 19.9995 61.4868 20.6685 61.9468 21.5327C62.4206 22.3829 62.6576 23.3795 62.6576 24.5224C62.6576 24.606 62.6506 24.7036 62.6367 24.8151C62.6367 24.9266 62.6297 25.0311 62.6158 25.1287H53.1867V23.6861H61.5704L60.7551 24.1879C60.769 23.477 60.6226 22.8428 60.316 22.2853C60.0094 21.7278 59.5843 21.2957 59.0407 20.9891C58.511 20.6685 57.8908 20.5082 57.18 20.5082C56.4831 20.5082 55.8628 20.6685 55.3192 20.9891C54.7757 21.2957 54.3506 21.7348 54.0439 22.3062C53.7373 22.8638 53.584 23.5049 53.584 24.2297V24.5642C53.584 25.3029 53.7512 25.965 54.0857 26.5503C54.4342 27.1218 54.915 27.5678 55.5283 27.8884C56.1416 28.209 56.8455 28.3693 57.6399 28.3693C58.295 28.3693 58.8874 28.2578 59.417 28.0347C59.9606 27.8117 60.4345 27.4772 60.8387 27.0312L61.9468 28.3274C61.445 28.9128 60.8178 29.3589 60.0651 29.6655C59.3264 29.9721 58.4971 30.1254 57.5772 30.1254ZM65.4446 30V18.9193H67.368V21.9299L67.1799 21.1773C67.4865 20.4107 68.0022 19.8253 68.727 19.4211C69.4518 19.0169 70.3438 18.8148 71.4031 18.8148V20.7591C71.3195 20.7452 71.2358 20.7382 71.1522 20.7382C71.0825 20.7382 71.0128 20.7382 70.9431 20.7382C69.8699 20.7382 69.0197 21.0588 68.3925 21.6999C67.7653 22.3411 67.4517 23.268 67.4517 24.4806V30H65.4446ZM73.8768 30V18.9193H75.8839V30H73.8768ZM74.8803 16.7868C74.4901 16.7868 74.1625 16.6613 73.8977 16.4105C73.6468 16.1596 73.5214 15.8529 73.5214 15.4906C73.5214 15.1142 73.6468 14.8006 73.8977 14.5497C74.1625 14.2989 74.4901 14.1734 74.8803 14.1734C75.2706 14.1734 75.5912 14.2989 75.8421 14.5497C76.1069 14.7867 76.2393 15.0864 76.2393 15.4487C76.2393 15.8251 76.1138 16.1456 75.863 16.4105C75.6121 16.6613 75.2845 16.7868 74.8803 16.7868ZM80.0088 30V17.9367C80.0088 16.8495 80.3224 15.9854 80.9496 15.3442C81.5907 14.6891 82.4967 14.3616 83.6675 14.3616C84.0995 14.3616 84.5107 14.4173 84.901 14.5288C85.3052 14.6264 85.6467 14.7867 85.9254 15.0097L85.3191 16.5359C85.1101 16.3687 84.8731 16.2432 84.6083 16.1596C84.3435 16.062 84.0647 16.0132 83.772 16.0132C83.1866 16.0132 82.7406 16.1805 82.434 16.515C82.1273 16.8356 81.974 17.3164 81.974 17.9576V19.442L82.0158 20.3619V30H80.0088ZM78.1271 20.571V18.9193H85.1937V20.571H78.1271ZM87.0962 30V18.9193H89.1033V30H87.0962ZM88.0998 16.7868C87.7095 16.7868 87.3819 16.6613 87.1171 16.4105C86.8662 16.1596 86.7408 15.8529 86.7408 15.4906C86.7408 15.1142 86.8662 14.8006 87.1171 14.5497C87.3819 14.2989 87.7095 14.1734 88.0998 14.1734C88.49 14.1734 88.8106 14.2989 89.0615 14.5497C89.3263 14.7867 89.4587 15.0864 89.4587 15.4487C89.4587 15.8251 89.3333 16.1456 89.0824 16.4105C88.8315 16.6613 88.504 16.7868 88.0998 16.7868ZM97.8599 30.1254C96.6751 30.1254 95.6298 29.8815 94.7238 29.3937C93.8318 28.9059 93.1349 28.2368 92.6331 27.3866C92.1453 26.5364 91.9014 25.5608 91.9014 24.4597C91.9014 23.3586 92.1383 22.3829 92.6122 21.5327C93.1001 20.6825 93.7621 20.0204 94.5984 19.5465C95.4486 19.0587 96.4034 18.8148 97.4626 18.8148C98.5359 18.8148 99.4837 19.0517 100.306 19.5256C101.128 19.9995 101.769 20.6685 102.229 21.5327C102.703 22.3829 102.94 23.3795 102.94 24.5224C102.94 24.606 102.933 24.7036 102.919 24.8151C102.919 24.9266 102.912 25.0311 102.898 25.1287H93.4694V23.6861H101.853L101.038 24.1879C101.052 23.477 100.905 22.8428 100.599 22.2853C100.292 21.7278 99.8669 21.2957 99.3234 20.9891C98.7937 20.6685 98.1735 20.5082 97.4626 20.5082C96.7657 20.5082 96.1455 20.6685 95.6019 20.9891C95.0583 21.2957 94.6332 21.7348 94.3266 22.3062C94.02 22.8638 93.8666 23.5049 93.8666 24.2297V24.5642C93.8666 25.3029 94.0339 25.965 94.3684 26.5503C94.7169 27.1218 95.1977 27.5678 95.811 27.8884C96.4243 28.209 97.1281 28.3693 97.9226 28.3693C98.5777 28.3693 99.17 28.2578 99.6997 28.0347C100.243 27.8117 100.717 27.4772 101.121 27.0312L102.229 28.3274C101.728 28.9128 101.1 29.3589 100.348 29.6655C99.6091 29.9721 98.7798 30.1254 97.8599 30.1254ZM110.306 30.1254C109.233 30.1254 108.271 29.8885 107.421 29.4146C106.584 28.9407 105.922 28.2787 105.435 27.4284C104.947 26.5782 104.703 25.5886 104.703 24.4597C104.703 23.3307 104.947 22.348 105.435 21.5118C105.922 20.6616 106.584 19.9995 107.421 19.5256C108.271 19.0517 109.233 18.8148 110.306 18.8148C111.24 18.8148 112.083 19.0238 112.836 19.442C113.588 19.8601 114.188 20.4873 114.634 21.3236C115.094 22.1599 115.324 23.2052 115.324 24.4597C115.324 25.7141 115.101 26.7594 114.655 27.5957C114.222 28.432 113.63 29.0662 112.877 29.4982C112.125 29.9164 111.268 30.1254 110.306 30.1254ZM110.473 28.3693C111.17 28.3693 111.797 28.209 112.355 27.8884C112.926 27.5678 113.372 27.1148 113.693 26.5294C114.027 25.9301 114.195 25.2402 114.195 24.4597C114.195 23.6652 114.027 22.9822 113.693 22.4108C113.372 21.8254 112.926 21.3724 112.355 21.0518C111.797 20.7312 111.17 20.571 110.473 20.571C109.762 20.571 109.128 20.7312 108.571 21.0518C108.013 21.3724 107.567 21.8254 107.233 22.4108C106.898 22.9822 106.731 23.6652 106.731 24.4597C106.731 25.2402 106.898 25.9301 107.233 26.5294C107.567 27.1148 108.013 27.5678 108.571 27.8884C109.128 28.209 109.762 28.3693 110.473 28.3693ZM114.257 30V27.0103L114.383 24.4387L114.174 21.8672V14.487H116.181V30H114.257Z" fill="#101418"/>
+</svg>
diff --git a/src/components/AgentAssigned.jsx b/src/components/AgentAssigned.jsx
index 6f52e79..34ef7f5 100644
--- a/src/components/AgentAssigned.jsx
+++ b/src/components/AgentAssigned.jsx
@@ -7,17 +7,15 @@ const AgentAssigned = () => {
return (
<div className="flex flex-col items-center justify-center min-h-screen bg-[#E9FAFF] py-10 px-6">
- <h1 className="absolute top-[130.5px] left-[450px] text-[48.31px] font-bold text-[#030A1E] leading-none">
- OMPOI - Seller
- </h1>
- <div className="bg-white flex flex-row w-[85%] max-w-6xl rounded-3xl shadow-xl overflow-hidden border border-gray-200 p-10 relative">
+ <h1 className="absolute top-[50.5px] left-[330px] text-[48.31px] font-bold text-[#030A1E] leading-none">OMPOI - Seller</h1>
+ <div className="absolute top-[132px] left-[304px] w-[120%] max-w-7xl h-[729px] rounded-[32.6px] shadow-[0px_3.91px_11.74px_0px_#2E268414] bg-white flex flex-row overflow-hidden border border-gray-200 p-7">
{/* Left Side - Illustration */}
<div className="hidden md:flex md:w-1/2 items-center justify-center p-6">
<img
src={FrameImage}
alt="Illustration"
- className="w-[80%] h-auto cursor-pointer"
+ className="w-[100%] h-auto cursor-pointer"
onClick={() => navigate("/agent-verified")} // Navigates to AgentVerified.jsx
/>
</div>
@@ -28,26 +26,36 @@ const AgentAssigned = () => {
<div className="w-full md:w-1/2 flex flex-col justify-center px-8 py-6 relative">
<h2 className="text-3xl font-semibold text-gray-900 mb-6 text-left">Status</h2>
- <div className="w-[520px] h-[410px] relative bg-[#FFF1CC] rounded-xl shadow-[6px_6px_0px_0px_rgba(0,0,0,1.00)] overflow-hidden p-7">
+ <div className="top-[-1%] w-[572px] h-[410px] relative bg-[#FFF1CC] rounded-xl shadow-[6px_6px_0px_0px_rgba(0,0,0,1.00)] overflow-hidden p-7">
{/* Company Name */}
- <div className="text-gray-600 text-xl font-medium font-['Montserrat'] leading-loose">Company Name</div>
- <div className="text-black text-xl font-semibold font-['Montserrat']">ABCD PVT LTD</div>
+ <div className="absolute top-[17px] left-[22px] w-[183px] h-[32px] text-[#45505F] text-[22px] font-medium font-['Montserrat'] leading-[31.3px] tracking-[0.13px]">
+ Company Name
+ </div>
+ <div className="absolute top-[57px] left-[44px] w-[154px] h-[32px] text-[#000000] text-[20px] font-semibold font-['Montserrat'] leading-[31.3px] tracking-[0.13px]">
+ ABCD PVT LTD
+ </div>
+
{/* Company Address */}
- <div className="text-gray-600 text-xl font-medium font-['Montserrat'] leading-loose">Company Address</div>
- <div className="text-black text-xl font-medium font-['Montserrat']">Shop No: 45 ABC Street</div>
- <div className="text-black text-xl font-medium font-['Montserrat']">Mylapore</div>
- <div className="text-black text-xl font-medium font-['Montserrat']">Chennai - 600004</div>
-
+ <div className="absolute top-[100px] left-[28px] w-[206px] h-[32px] text-[#45505F] text-[22px] font-medium font-['Montserrat'] leading-[31.3px] tracking-[0.13px]">
+ Company Address
+ </div>
+ <div className="absolute top-[132px] left-[41px] w-[247px] h-[72px] text-[#000000] text-[20px] font-medium font-['Montserrat'] leading-[100%] tracking-[0.13px]">
+ Shop No: 45 ABC Street <br />
+ Mylapore <br />
+ Chennai - 600004
+ </div>
{/* Agent Details */}
- <div className="text-gray-600 text-xl font-semibold font-['Montserrat'] leading-loose">Agent Details</div>
- <div className="text-gray-600 text-xl font-medium font-['Montserrat']">Agent Name</div>
- <div className="text-black text-xl font-medium font-['Montserrat']">Gopal M</div>
- <div className="text-gray-600 text-xl font-medium font-['Montserrat']">Agent Number</div>
- <div className="text-black text-xl font-medium font-['Montserrat']">+91-12345 69870</div>
+ <div className="absolute top-[219px] left-[33px] w-[206px] h-[32px] text-[#45505F] text-[22px] font-semibold font-['Montserrat'] leading-[31.3px] tracking-[0.13px]">
+ Agent Details
+ </div>
+ <div className="absolute top-[255px] left-[49px] w-[206px] h-[32px] text-[#45505F] text-[22px] font-medium font-['Montserrat'] leading-[31.3px] tracking-[0.13px]">Agent Name</div>
+ <div className="absolute top-[293px] left-[49px] w-[85px] h-[24px] text-[#000000] text-[20px] font-medium font-['Montserrat'] leading-[100%] tracking-[0.13px]">Gopal M</div>
+ <div className="absolute top-[325px] left-[49px] w-[206px] h-[32px] text-[#45505F] text-[22px] font-medium font-['Montserrat'] leading-[31.3px] tracking-[0.13px]">Agent Number</div>
+ <div className="absolute top-[363px] left-[48px] w-[164px] h-[24px] text-[#000000] text-[20px] font-medium font-['Montserrat'] leading-[100%] tracking-[0.13px]">+91-12345 69870</div>
{/* Status Label (Previously Button) */}
- <div className="absolute top-[38px] left-[295px] w-[210px] h-[45px] gap-[10px] rounded-full border-2 border-[#FFD255] text-black text-lg font-medium px-[37px] py-[10px] flex items-center justify-center">
+ <div className="absolute top-[38px] left-[333px] w-[210px] h-[45px] gap-[10px] rounded-full border-4 border-[#FFD255] text-black text-lg font-medium px-[10px] py-[11px] flex items-center justify-center">
Agent Assigned
</div>
</div>
diff --git a/src/components/AgentPayment.jsx b/src/components/AgentPayment.jsx
index 97e5e9f..0d562de 100644
--- a/src/components/AgentPayment.jsx
+++ b/src/components/AgentPayment.jsx
@@ -1,80 +1,87 @@
import React from "react";
import FrameImage from "../assets/images/page6.svg";
+import Frame203 from "../assets/images/Frame 203.svg"; // Import the new image
const AgentPayment = () => {
return (
- <div className="flex items-center justify-center min-h-screen bg-[#E9FAFF] py-10 px-6">
- <h1 className="text-[32px] md:text-[48.31px] font-bold text-[#030A1E] leading-none text-center md:absolute md:top-[130.5px] md:left-[32.2%] md:translate-x-[-50%]">
+ <div className="flex flex-col items-center justify-center min-h-screen bg-[#E9FAFF] py-10 px-6">
+ <h1 className="absolute top-[50.5px] left-[330px] text-[48.31px] font-bold text-[#030A1E] leading-none">
OMPOI - Seller
</h1>
-
+
{/* Main White Box */}
- <div className="bg-white flex flex-row w-[85%] max-w-6xl rounded-3xl shadow-xl overflow-hidden border border-gray-200 p-10 relative">
-
+ <div className="absolute top-[132px] left-[304px] w-[120%] max-w-7xl h-[729px] rounded-[32.6px] shadow-[0px_3.91px_11.74px_0px_#2E268414] bg-white flex flex-row overflow-hidden border border-gray-200 p-7">
{/* Left Section - Image */}
- <div className="w-1/2 flex items-center justify-center">
- <img
- src={FrameImage}
- alt="Illustration"
- className="w-[90%] h-auto cursor-pointer"
- />
+ <div className="hidden md:flex md:w-1/2 items-center justify-center p-6">
+ <img src={FrameImage} alt="Illustration" className="w-[100%] h-auto" />
</div>
{/* Vertical Divider */}
<div className="absolute top-[10%] left-[50%] w-[2px] h-[80%] bg-[#E2E7EE]"></div>
{/* Right Section - Status */}
- <div className="w-1/2 flex flex-col justify-center px-8 relative">
- <h2 className="text-3xl font-semibold text-gray-900 mb-6">Status</h2>
+ <div className="w-full md:w-1/2 flex flex-col justify-center px-4 md:px-8 py-6 relative">
+ <h2 className="text-3xl font-semibold text-gray-900 mb-6 text-left">Status</h2>
{/* Status Box */}
- <div className="w-[520px] h-[410px] relative bg-[#E9FAFF] rounded-xl shadow-[6px_6px_0px_0px_rgba(0,0,0,1.00)] overflow-hidden p-7">
- {/* Company */}
- <div className="text-gray-600 text-xl font-medium font-['Montserrat'] leading-loose">Company Name</div>
- <div className="text-black text-xl font-semibold font-['Montserrat']">ABCD PVT LTD</div>
+ <div className="top-[-1%] w-[572px] h-[410px] relative bg-[#E9FAFF] rounded-xl shadow-[6px_6px_0px_0px_rgba(0,0,0,1.00)] overflow-hidden p-7">
+ <div className="absolute top-[17px] left-[22px] w-[183px] h-[32px] text-[#45505F] text-[22px] font-medium font-['Montserrat'] leading-[31.3px] tracking-[0.13px]">
+ Company Name
+ </div>
+ <div className="absolute top-[57px] left-[44px] w-[154px] h-[32px] text-[#000000] text-[20px] font-semibold font-['Montserrat'] leading-[31.3px] tracking-[0.13px]">
+ ABCD PVT LTD
+ </div>
- <div className="text-gray-600 text-xl font-medium font-['Montserrat'] leading-loose">Company Address</div>
- <div className="text-black text-xl font-medium font-['Montserrat']">Shop No: 45 ABC Street</div>
- <div className="text-black text-xl font-medium font-['Montserrat']">Mylapore</div>
- <div className="text-black text-xl font-medium font-['Montserrat']">Chennai - 600004</div>
+ <div className="absolute top-[100px] left-[28px] w-[206px] h-[32px] text-[#45505F] text-[22px] font-medium font-['Montserrat'] leading-[31.3px] tracking-[0.13px]">
+ Company Address
+ </div>
+ <div className="absolute top-[132px] left-[41px] w-[247px] h-[72px] text-[#000000] text-[20px] font-medium font-['Montserrat'] leading-[100%] tracking-[0.13px]">
+ Shop No: 45 ABC Street <br />
+ Mylapore <br />
+ Chennai - 600004
+ </div>
{/* Merchant ID */}
- <div className="absolute top-[238px] left-[135px] w-[298px] h-[32px] text-[#45505F] text-[22px] font-medium font-['Montserrat'] leading-[31.3px] tracking-[0.13px]">
+ <div className="absolute top-[240px] left-[167px] w-[298px] h-[32px] text-[#45505F] text-[22px] font-medium font-['Montserrat'] leading-[31.3px] tracking-[0.13px]">
Merchant ID: <span className="font-semibold">TAMIL12345</span>
</div>
- {/* Verified Badge */}
- <div className="absolute top-[30px] left-[350px] w-[156px] h-[45px] text-[#101418] text-[20px] font-medium font-['Montserrat'] leading-[100%] tracking-[0px] gap-[10px] rounded-full border-2 border-[#0096FF] px-[35px] py-[10px]">
- Verified
- </div>
-
{/* Login Message */}
- <div className="absolute top-[278px] left-[95px] w-[392px] h-[24px] text-[#000000] text-[20px] font-medium font-['Montserrat'] leading-[100%] tracking-[0.13px] text-center">
+ <div className="absolute top-[285px] left-[131px] w-[392px] h-[24px] text-[#000000] text-[20px] font-medium font-['Montserrat'] leading-[100%] tracking-[0.13px] text-center">
Login to your account to get started
</div>
+ {/* Verified Badge */}
+ <div className="absolute top-[20px] left-[375px] w-[156px] h-[45px] text-[#101418] text-[20px] font-medium font-['Montserrat'] leading-[100%] tracking-[0px] gap-[10px] rounded-full border-2 border-[#0096FF] px-[35px] py-[10px]">
+ Verified
+ </div>
+
{/* Login Button */}
- <div className="absolute top-[340px] left-[184px] w-[241px] h-[45px] gap-[10px] rounded-full bg-[#0096FF] text-white text-lg font-semibold flex items-center justify-center shadow-md hover:bg-blue-700 transition px-[37px] py-[10px]">
- <button className="w-full h-full">Login Now</button>
+ <div className="absolute top-[330px] left-[207px] w-[241px] h-[45px] gap-[10px] rounded-full bg-[#0096FF] text-white text-lg font-semibold shadow-md hover:bg-blue-700 transition flex items-center justify-center px-[37px] py-[10px]">
+ <button className="w-full h-full">
+ Login Now
+ </button>
</div>
</div>
</div>
</div>
{/* Payment Details */}
- <div className="absolute top-[407px] left-[1250px] w-[190px] h-[32px] text-[#45505F] text-[22px] font-semibold font-['Montserrat'] leading-[31.3px] tracking-[0.13px]">
+ <div className="absolute top-[408px] left-[1315px] w-[190px] h-[32px] text-[#45505F] text-[22px] font-semibold font-['Montserrat'] leading-[31.3px] tracking-[0.13px]">
Payment Details
</div>
{/* Payment ID */}
- <div className="absolute top-[446px] left-[1269px] w-[206px] h-[32px] text-[#45505F] text-[22px] font-medium font-['Montserrat'] leading-[31.3px] tracking-[0.13px]">
+ <div className="absolute top-[443px] left-[1330px] w-[206px] h-[32px] text-[#45505F] text-[22px] font-medium font-['Montserrat'] leading-[31.3px] tracking-[0.13px]">
Payment ID
</div>
{/* Payment ID Value */}
- <div className="absolute top-[500px] left-[1251px] w-[246px] h-[24px] text-[#000000] text-[20px] font-medium font-['Montserrat'] leading-[100%] tracking-[0.13px]">
- ATUWBYTY1245678HBG
+ <div className="absolute top-[485px] left-[1333px] w-[246px] h-[24px] text-[#000000] text-[20px] font-medium font-['Montserrat'] leading-[100%] tracking-[0.13px]">
+ ATUW1245678HBG
</div>
+
+
</div>
);
};
diff --git a/src/components/AgentStatus.jsx b/src/components/AgentStatus.jsx
index 4fe545c..eeabd21 100644
--- a/src/components/AgentStatus.jsx
+++ b/src/components/AgentStatus.jsx
@@ -7,46 +7,56 @@ const AgentStatus = () => {
return (
<div className="flex flex-col items-center justify-center min-h-screen bg-[#E9FAFF] py-10 px-6">
- <h1 className="absolute top-[130.5px] left-[450px] text-[48.31px] font-bold text-[#030A1E] leading-none">OMPOI - Seller</h1>
- <div className="bg-white flex flex-row w-[85%] max-w-6xl rounded-3xl shadow-xl overflow-hidden border border-gray-200 p-10 relative">
+ <h1 className="absolute top-[50.5px] left-[330px] text-[48.31px] font-bold text-[#030A1E] leading-none">OMPOI - Seller</h1>
+ <div className="absolute top-[132px] left-[304px] w-[120%] max-w-7xl h-[729px] rounded-[32.6px] shadow-[0px_3.91px_11.74px_0px_#2E268414] bg-white flex flex-row overflow-hidden border border-gray-200 p-7">
{/* Left Side - Illustration */}
<div className="hidden md:flex md:w-1/2 items-center justify-center p-6">
- <img
- src={FrameImage}
- alt="Illustration"
- className="w-[90%] h-auto cursor-pointer"
+ <img
+ src={FrameImage}
+ alt="Illustration"
+ className="w-[100%] h-auto cursor-pointer"
onClick={() => navigate("/agent-assigned")}
/>
</div>
{/* Vertical Divider */}
- <div className="absolute top-[10%] left-[50%] w-[2px] h-[80%] bg-[#E2E7EE]"></div>
+ <div className="absolute top-[12%] left-[50%] w-[2px] h-[80%] bg-[#E2E7EE]"></div>
{/* Right Side - Status Section */}
<div className="w-full md:w-1/2 flex flex-col justify-center px-8 py-6 relative">
<h2 className="text-3xl font-semibold text-gray-900 mb-6 text-left">Status</h2>
- <div className="w-[520px] h-[410px] relative bg-[#FFF1CC] rounded-xl shadow-[6px_6px_0px_0px_rgba(0,0,0,1.00)] overflow-hidden p-7">
+ <div className="top-[-1%] w-[572px] h-[410px] relative bg-[#FFF1CC] rounded-2xl shadow-[6px_6px_0px_0px_rgba(0,0,0,1.00)] overflow-hidden p-7">
{/* Company Name */}
- <div className="text-gray-600 text-xl font-medium font-['Montserrat'] leading-loose">Company Name</div>
- <div className="text-black text-xl font-semibold font-['Montserrat']">ABCD PVT LTD</div>
+ <div className="absolute top-[17px] left-[22px] w-[183px] h-[32px] text-[#45505F] text-[22px] font-medium font-['Montserrat'] leading-[31.3px] tracking-[0.13px]">
+ Company Name
+ </div>
+ <div className="absolute top-[57px] left-[44px] w-[154px] h-[32px] text-[#000000] text-[20px] font-semibold font-['Montserrat'] leading-[31.3px] tracking-[0.13px]">
+ ABCD PVT LTD
+ </div>
{/* Company Address */}
- <div className="text-gray-600 text-xl font-medium font-['Montserrat'] leading-loose">Company Address</div>
- <div className="text-black text-xl font-medium font-['Montserrat']">Shop No: 45 ABC Street</div>
- <div className="text-black text-xl font-medium font-['Montserrat']">Mylapore</div>
- <div className="text-black text-xl font-medium font-['Montserrat']">Chennai - 600004</div>
+ <div className="absolute top-[100px] left-[28px] w-[206px] h-[32px] text-[#45505F] text-[22px] font-medium font-['Montserrat'] leading-[31.3px] tracking-[0.13px]">
+ Company Address
+ </div>
+ <div className="absolute top-[132px] left-[41px] w-[247px] h-[72px] text-[#000000] text-[20px] font-medium font-['Montserrat'] leading-[100%] tracking-[0.13px]">
+ Shop No: 45 ABC Street <br />
+ Mylapore <br />
+ Chennai - 600004
+ </div>
{/* Agent Details */}
- <div className="text-gray-600 text-xl font-semibold font-['Montserrat'] leading-loose">Agent Details</div>
- <div className="text-gray-600 text-xl font-medium font-['Montserrat']">Agent Name</div>
- <div className="text-black text-xl font-medium font-['Montserrat']">Gopal M</div>
- <div className="text-gray-600 text-xl font-medium font-['Montserrat']">Agent Number</div>
- <div className="text-black text-xl font-medium font-['Montserrat']">+91-12345 69870</div>
+ <div className="absolute top-[219px] left-[33px] w-[206px] h-[32px] text-[#45505F] text-[22px] font-semibold font-['Montserrat'] leading-[31.3px] tracking-[0.13px]">
+ Agent Details
+ </div>
+ <div className="absolute top-[255px] left-[49px] w-[206px] h-[32px] text-[#45505F] text-[22px] font-medium font-['Montserrat'] leading-[31.3px] tracking-[0.13px]">Agent Name</div>
+ <div className="absolute top-[293px] left-[49px] w-[85px] h-[24px] text-[#000000] text-[20px] font-medium font-['Montserrat'] leading-[100%] tracking-[0.13px]">Gopal M</div>
+ <div className="absolute top-[325px] left-[49px] w-[206px] h-[32px] text-[#45505F] text-[22px] font-medium font-['Montserrat'] leading-[31.3px] tracking-[0.13px]">Agent Number</div>
+ <div className="absolute top-[363px] left-[48px] w-[164px] h-[24px] text-[#000000] text-[20px] font-medium font-['Montserrat'] leading-[100%] tracking-[0.13px]">+91-12345 69870</div>
{/* Status Badge - Pending Label */}
<div className="absolute top-12 right-4">
- <span className="px-9 py-1 rounded-full border-2 border-[#FFD255] text-black text-lg font-medium">
+ <span className="px-11 py-2 rounded-full border-4 border-[#FFD255] text-black text-lg font-medium">
Pending
</span>
</div>
diff --git a/src/components/AgentVerified.jsx b/src/components/AgentVerified.jsx
index 0ad7264..a7dfc07 100644
--- a/src/components/AgentVerified.jsx
+++ b/src/components/AgentVerified.jsx
@@ -8,14 +8,14 @@ const AgentVerified = () => {
return (
<div className="flex items-center justify-center min-h-screen bg-[#E9FAFF] py-10 px-6">
{/* Main White Box */}
- <div className="bg-white flex flex-row w-[85%] max-w-6xl rounded-3xl shadow-xl overflow-hidden border border-gray-200 p-10 relative">
+ <div className="absolute top-[132px] left-[304px] w-[120%] max-w-7xl h-[729px] rounded-[32.6px] shadow-[0px_3.91px_11.74px_0px_#2E268414] bg-white flex flex-row overflow-hidden border border-gray-200 p-7">
{/* Left Section - Image */}
<div className="w-1/2 flex items-center justify-center">
<img
src={FrameImage}
alt="Illustration"
- className="w-[90%] h-auto cursor-pointer"
+ className="w-[100%] h-auto cursor-pointer"
/>
</div>
@@ -27,38 +27,49 @@ const AgentVerified = () => {
<h2 className="text-3xl font-semibold text-gray-900 mb-6">Status</h2>
{/* Status Box */}
- <div className="w-[520px] h-[410px] relative bg-[#CEFFCC] rounded-xl shadow-[6px_6px_0px_0px_rgba(0,0,0,1.00)] overflow-hidden p-7">
- {/* Company */}
- <div className="text-gray-600 text-xl font-medium font-['Montserrat'] leading-loose">Company Name</div>
- <div className="text-black text-xl font-semibold font-['Montserrat']">ABCD PVT LTD</div>
-
- <div className="text-gray-600 text-xl font-medium font-['Montserrat'] leading-loose">Company Address</div>
- <div className="text-black text-xl font-medium font-['Montserrat']">Shop No: 45 ABC Street</div>
- <div className="text-black text-xl font-medium font-['Montserrat']">Mylapore</div>
- <div className="text-black text-xl font-medium font-['Montserrat']">Chennai - 600004</div>
+ <div className="top-[-1%] w-[572px] h-[410px] relative bg-[#CEFFCC] rounded-xl shadow-[6px_6px_0px_0px_rgba(0,0,0,1.00)] overflow-hidden p-7">
+ {/* Company Name */}
+ <div className="absolute top-[17px] left-[22px] w-[183px] h-[32px] text-[#45505F] text-[22px] font-medium font-['Montserrat'] leading-[31.3px] tracking-[0.13px]">
+ Company Name
+ </div>
+ <div className="absolute top-[57px] left-[44px] w-[154px] h-[32px] text-[#000000] text-[20px] font-semibold font-['Montserrat'] leading-[31.3px] tracking-[0.13px]">
+ ABCD PVT LTD
+ </div>
+
+
+ {/* Company Address */}
+ <div className="absolute top-[100px] left-[28px] w-[206px] h-[32px] text-[#45505F] text-[22px] font-medium font-['Montserrat'] leading-[31.3px] tracking-[0.13px]">
+ Company Address
+ </div>
+ <div className="absolute top-[132px] left-[41px] w-[247px] h-[72px] text-[#000000] text-[20px] font-medium font-['Montserrat'] leading-[100%] tracking-[0.13px]">
+ Shop No: 45 ABC Street <br />
+ Mylapore <br />
+ Chennai - 600004
+ </div>
{/* Verified By */}
- <div className="absolute top-[219px] left-[33px] w-[125px] h-[32px] text-[#45505F] text-[22px] font-semibold font-['Montserrat'] leading-[31.3px] tracking-[0.13px]">Verified By</div>
-
- {/* Agent Name */}
+ <div className="absolute top-[219px] left-[33px] w-[125px] h-[32px] text-[#45505F] text-[22px] font-semibold font-['Montserrat'] leading-[31.3px] tracking-[0.13px]">
+ Verified By
+ </div>
<div className="absolute top-[255px] left-[49px] w-[206px] h-[32px] text-[#45505F] text-[22px] font-medium font-['Montserrat'] leading-[31.3px] tracking-[0.13px]">Agent Name</div>
<div className="absolute top-[293px] left-[49px] w-[85px] h-[24px] text-[#000000] text-[20px] font-medium font-['Montserrat'] leading-[100%] tracking-[0.13px]">Gopal M</div>
<div className="absolute top-[325px] left-[49px] w-[206px] h-[32px] text-[#45505F] text-[22px] font-medium font-['Montserrat'] leading-[31.3px] tracking-[0.13px]">Agent Number</div>
<div className="absolute top-[363px] left-[48px] w-[164px] h-[24px] text-[#000000] text-[20px] font-medium font-['Montserrat'] leading-[100%] tracking-[0.13px]">+91-12345 69870</div>
{/* Verified Badge */}
- <div className="absolute top-[40px] left-[333px] w-[156px] h-[45px] text-[#101418] text-[20px] font-medium font-['Montserrat'] leading-[100%] tracking-[0px] gap-[10px] rounded-full border-2 border-[#22CA00] px-[35px] py-[10px]">
+ <div className="absolute top-[40px] left-[388px] w-[156px] h-[45px] text-[#101418] text-[20px] font-medium font-['Montserrat'] leading-[100%] tracking-[0px] gap-[10px] rounded-full border-2 border-[#22CA00] px-[35px] py-[10px]">
Verified
</div>
{/* Payment Section */}
- <div className="absolute top-[160px] left-[280px] w-[237px] h-[63px] text-[#45505F] text-[22px] font-semibold font-['Montserrat'] leading-[31.3px] tracking-[0.13px] text-center">
+ <div className="absolute top-[145px] left-[313px] w-[237px] h-[63px] text-[#45505F] text-[22px] font-semibold font-['Montserrat'] leading-[31.3px] tracking-[0.13px] text-center">
Pay Now To Get Your Merchant ID
</div>
- <div className="absolute top-[226px] left-[295px] w-[211px] h-[40px] gap-[21px] rounded-full bg-[#22CA00] text-white text-lg font-semibold-[37px] py-20px] flex items-center justify-center shadow-md hover:bg-green-700 transition">
+ <div className="absolute top-[209px] left-[325px] w-[211px] h-[40px] gap-[21px] rounded-full bg-[#22CA00] text-white text-lg font-semibold-[37px] py-20px] flex items-center justify-center shadow-md hover:bg-green-700 transition">
<button
onClick={() => navigate("/agent-payment")}
- className="w-full h-full"
+ className="w-full h-full text-[#FFFFFF] text-[20.91px] font-medium font-['Montserrat'] leading-[100%] tracking-[0px] text-center"
+ style={{ width: '94px', height: '25px' }}
>
Pay Now
</button>
@@ -67,7 +78,7 @@ const AgentVerified = () => {
</div>
</div>
- <h1 className="text-[32px] md:text-[48.31px] font-bold text-[#030A1E] leading-none text-center md:absolute md:top-[130.5px] md:left-[32.2%] md:translate-x-[-50%]">OMPOI - Seller</h1>
+ <h1 className="absolute top-[50.5px] left-[330px] text-[48.31px] font-bold text-[#030A1E] leading-none">OMPOI - Seller</h1>
</div>
);
};
diff --git a/src/components/LoginPage.jsx b/src/components/LoginPage.jsx
index b11f136..2c8d068 100644
--- a/src/components/LoginPage.jsx
+++ b/src/components/LoginPage.jsx
@@ -29,11 +29,11 @@ const LoginPage = () => {
return (
<div className="flex flex-col items-center justify-center min-h-screen bg-[#E9FAFF] py-10 px-6">
- <h1 className="absolute top-[130.5px] left-[450px] text-[48.31px] font-bold text-[#030A1E] leading-none">OMPOI - Seller</h1>
- <div className="bg-white flex flex-row w-[85%] max-w-6xl rounded-3xl shadow-xl overflow-hidden border border-gray-200 p-10 relative">
+ <h1 className="absolute top-[50.5px] left-[330px] text-[48.31px] font-bold text-[#030A1E] leading-none">OMPOI - Seller</h1>
+ <div className="absolute top-[132px] left-[304px] w-[120%] max-w-7xl h-[729px] rounded-[32.6px] shadow-[0px_3.91px_11.74px_0px_#2E268414] bg-white flex flex-row overflow-hidden border border-gray-200 p-7">
{/* Left Side - Illustration */}
<div className="hidden md:flex md:w-1/2 items-center justify-center p-6">
- <img src={FrameImage} alt="Illustration" className="w-[90%] h-auto" />
+ <img src={FrameImage} alt="Illustration" className="w-[100%] h-auto" />
</div>
{/* Vertical Divider */}
diff --git a/src/components/StatusPage.jsx b/src/components/StatusPage.jsx
index 33ffbcb..7500bad 100644
--- a/src/components/StatusPage.jsx
+++ b/src/components/StatusPage.jsx
@@ -7,15 +7,17 @@ const StatusPage = () => {
return (
<div className="flex flex-col items-center justify-center min-h-screen bg-[#E9FAFF] py-10 px-6">
- <h1 className="absolute top-[130.5px] left-[450px] text-[48.31px] font-bold text-[#030A1E] leading-none">OMPOI - Seller</h1>
+ <h1 className="absolute top-[50.5px] left-[330px] text-[48.31px] font-bold text-[#030A1E] leading-none">OMPOI - Seller</h1>
- <div className="bg-white flex flex-row w-[85%] max-w-6xl rounded-3xl shadow-xl overflow-hidden border border-gray-200 p-10 relative">
+ {/* Main White Box */}
+ <div className="absolute top-[132px] left-[304px] w-[120%] max-w-7xl h-[729px] rounded-[32.6px] shadow-[0px_3.91px_11.74px_0px_#2E268414] bg-white flex flex-row overflow-hidden border border-gray-200 p-7">
+
{/* Left Side - Illustration */}
- <div className="hidden md:flex md:w-1/2 items-center justify-center p-6">
+ <div className="hidden md:flex md:w-1/2 items-center justify-end p-6 pr-16">
<img
src={FrameImage}
alt="Illustration"
- className="w-[90%] h-auto cursor-pointer"
+ className="w-[100%] h-auto cursor-pointer"
onClick={() => navigate("/agent-status")}
/>
</div>
@@ -25,12 +27,12 @@ const StatusPage = () => {
{/* Right Side - Status Section */}
<div className="w-full md:w-1/2 flex flex-col justify-center px-4 md:px-8 py-6 relative">
- <h2 className="text-2xl md:text-3xl font-semibold text-gray-900 mb-6 text-center md:text-left">Status</h2>
+ <h2 className="text-3xl font-semibold text-gray-900 mb-20 text-left">Status</h2>
{/* Status Box */}
- <div className="w-[520px] h-[333px] relative bg-[#F9A78D] rounded-xl shadow-[6px_6px_0px_0px_rgba(0,0,0,1.00)] overflow-hidden p-7">
- <div className="absolute right-4 top-4 md:right-6 md:top-[37px]">
- <div className="w-32 md:w-40 h-9 md:h-11 rounded-[50px] outline outline-[3px] outline-offset-[-3px] outline-[#FF3D00] flex items-center justify-center">
+ <div className="top-[-12%] w-[572px] h-[305px] relative bg-[#F9A78D] rounded-2xl shadow-[6px_6px_0px_0px_rgba(0,0,0,1.00)] overflow-hidden p-5">
+ <div className="absolute right-10 top-4 md:right-6 md:top-[37px]">
+ <div className="w-40 md:w-40 h-9 md:h-11 rounded-[50px] outline outline-[3px] outline-offset-[-3px] outline-[#FF3D00] flex items-center justify-center">
<span className="text-[#101418] text-base md:text-[21.81px] font-medium font-['Montserrat']">
Pending
</span>
@@ -72,6 +74,6 @@ const StatusPage = () => {
</div>
</div>
);
-};
+};
export default StatusPage;
\ No newline at end of file
--
GitLab