From 4e64a30f32cc8705f93bdcbe82c7a7a4ee9b3ba6 Mon Sep 17 00:00:00 2001
From: Rithish <rithishudayakumar@gmail.com>
Date: Sun, 16 Mar 2025 12:24:13 +0530
Subject: [PATCH] changed alignmets and installed montserrat font pending(1)
---
package-lock.json | 10 +++
package.json | 1 +
src/AgentAssigned.jsx | 157 ++++++++++++++++++++++++++++++---
src/AgentPayment.jsx | 177 +++++++++++++++++++++++++++++++-------
src/AgentStatus.jsx | 169 ++++++++++++++++++++++++++++++++----
src/AgentVerified.jsx | 196 +++++++++++++++++++++++++++++++++++++-----
src/LoginPage.jsx | 187 +++++++++++++++++++++++++++-------------
src/StatusPage.jsx | 101 ++++++++++++++++++++--
8 files changed, 856 insertions(+), 142 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 3d323a4..5368923 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
"my-app": "file:",
"react": "^19.0.0",
"react-dom": "^19.0.0",
+ "react-icons": "^5.5.0",
"react-router-dom": "^7.3.0"
},
"devDependencies": {
@@ -3264,6 +3265,15 @@
"react": "^19.0.0"
}
},
+ "node_modules/react-icons": {
+ "version": "5.5.0",
+ "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+ "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+ "license": "MIT",
+ "peerDependencies": {
+ "react": "*"
+ }
+ },
"node_modules/react-refresh": {
"version": "0.14.2",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
diff --git a/package.json b/package.json
index 87e21f3..f96a97e 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
"my-app": "file:",
"react": "^19.0.0",
"react-dom": "^19.0.0",
+ "react-icons": "^5.5.0",
"react-router-dom": "^7.3.0"
},
"devDependencies": {
diff --git a/src/AgentAssigned.jsx b/src/AgentAssigned.jsx
index 7845d2e..b5284a3 100644
--- a/src/AgentAssigned.jsx
+++ b/src/AgentAssigned.jsx
@@ -11,32 +11,167 @@ const AgentAssigned = () => {
OMPOI - Seller
</h1>
</div>
+
<div className="absolute top-[194px] left-[134px] bg-white p-8 rounded-[32.6px] shadow-lg w-[1460.608px] h-[729px] flex">
+
{/* 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" />
</div>
+ {/* Divider */}
+ <div className="absolute"
+ style={{
+ height: '624.67px', // Vertical height
+ width: '1.3px', // Thin border
+ top: '52.16px',
+ left: '730.3px',
+ backgroundColor: '#E2E7EE'
+ }}>
+ </div>
+
{/* Right Side - Status Section */}
<div className="w-1/2 p-10 flex flex-col justify-center">
<h2 className="absolute top-[89px] left-[794px] font-montserrat font-semibold text-[33.91px] leading-[100%]">
Status
</h2>
- <div className="absolute top-[149px] left-[788px] bg-yellow-100 p-5 rounded-[12px] border border-yellow-300 w-[610px] h-[311px]" style={{ boxShadow: "6px 6px 0px 0px #000000" }}>
- <p className="text-gray-800 font-semibold">Company Name</p>
- <p className="text-black font-bold mb-2">ABCD PVT LTD</p>
+ <div className="absolute top-[149px] left-[788px] bg-[#FFF1CC] p-5 rounded-[12px] border border-transparent w-[601px] h-[439px]" style={{ boxShadow: "6px 6px 0px 0px #000000" }}>
+ <div style={{
+ width: '183px',
+ height: '32px',
+ top: '20px',
+ left: '29px',
+ color: '#45505F',
+ fontSize: 22,
+ fontFamily: 'Montserrat',
+ fontWeight: '500',
+ lineHeight: '31.30px',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
+ Company Name
+ </div>
+ <div style={{
+ width: '154px',
+ height: '32px',
+ left: '44px',
+ top: '52px',
+ color: '#000000',
+ fontSize: 20,
+ fontFamily: 'Montserrat',
+ fontWeight: '649',
+ lineHeight: '31.30px',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
+ ABCD PVT LTD
+ </div>
- <p className="text-gray-800 font-semibold">Company Address</p>
- <p className="text-black mb-2">
+ <div style={{
+ width: '206px',
+ height: '32px',
+ top: '100px',
+ left: '28px',
+ color: '#45505F',
+ fontSize: 22,
+ fontFamily: 'Montserrat',
+ fontWeight: '500',
+ lineHeight: '31.30px',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
+ Company Address
+ </div>
+ <div style={{
+ width: '247px',
+ height: '72px',
+ top: '132px',
+ left: '41px',
+ color: '#000000',
+ fontSize: 20,
+ fontFamily: 'Montserrat',
+ fontWeight: '530',
+ lineHeight: '100%',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
Shop No: 45 ABC Street <br /> Mylapore <br /> Chennai - 600004
- </p>
+ </div>
- <p className="text-gray-800 font-semibold">Agent Details</p>
- <p className="text-gray-700">Agent Name</p>
- <p className="text-black font-bold">Gopal M</p>
- <p className="text-gray-700">Agent Number</p>
- <p className="text-black font-bold">+91-12345 69870</p>
+ <div style={{
+ width: '206px',
+ height: '32px',
+ top: '219px',
+ left: '33px',
+ color: '#45505F',
+ fontSize: 22,
+ fontFamily: 'Montserrat',
+ fontWeight: '600',
+ lineHeight: '31.30px',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
+ Agent Details
+ </div>
+ <div style={{
+ width: '206px',
+ height: '32px',
+ top: '255px',
+ left: '49px',
+ color: '#45505F',
+ fontSize: 22,
+ fontFamily: 'Montserrat',
+ fontWeight: '500',
+ lineHeight: '31.30px',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
+ Agent Name
+ </div>
+ <div style={{
+ width: '85px',
+ height: '24px',
+ top: '293px',
+ left: '49px',
+ color: '#000000',
+ fontSize: 20,
+ fontFamily: 'Montserrat',
+ fontWeight: '500',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
+ Gopal M
+ </div>
+ <div style={{
+ width: '206px',
+ height: '32px',
+ top: '325px',
+ left: '49px',
+ color: '#45505F',
+ fontSize: 22,
+ fontFamily: 'Montserrat',
+ fontWeight: '500',
+ lineHeight: '31.30px',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
+ Agent Number
+ </div>
+ <div style={{
+ width: '164px',
+ height: '24px',
+ top: '363px',
+ left: '48px',
+ color: '#000000',
+ fontSize: 20,
+ fontFamily: 'Montserrat',
+ fontWeight: '500',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
+ +91-12345 69870
+ </div>
{/* Status Badge */}
<button
diff --git a/src/AgentPayment.jsx b/src/AgentPayment.jsx
index 3483e88..5d0cfef 100644
--- a/src/AgentPayment.jsx
+++ b/src/AgentPayment.jsx
@@ -8,6 +8,7 @@ const AgentPayment = () => {
OMPOI - Seller
</h1>
</div>
+
<div className="absolute top-[194px] left-[134px] bg-white p-8 rounded-[32.6px] shadow-lg w-[1460.608px] h-[729px] flex">
{/* Left Side - Illustration */}
@@ -15,52 +16,170 @@ const AgentPayment = () => {
<img src="/page6.svg" alt="Verified" className="w-full h-auto" />
</div>
+ {/* Divider */}
+ <div className="absolute"
+ style={{
+ height: '624.67px', // Vertical height
+ width: '1.3px', // Thin border
+ top: '52.16px',
+ left: '730.3px',
+ backgroundColor: '#E2E7EE'
+ }}>
+ </div>
+
{/* Right Side - Status Section */}
<div className="w-1/2 p-10 flex flex-col justify-center">
<h2 className="absolute top-[89px] left-[794px] font-montserrat font-semibold text-[33.91px] leading-[100%]">
Status
</h2>
- <div className="absolute top-[149px] left-[788px] bg-[#E9FAFF] p-5 rounded-[12px] border border-blue-300 w-[610px] h-[439px]" style={{ boxShadow: "6px 6px 0px 0px #000000" }}>
- <div className="absolute top-[20px] left-[28px] w-[424px] h-[250px]">
- <p className="text-gray-800 font-semibold">Company Name</p>
- <p className="text-black font-bold mb-2">ABCD PVT LTD</p>
-
- <div className="flex">
- <div>
- <p className="text-gray-800 font-semibold">Company Address</p>
- <p className="text-black mb-2">
- Shop No: 45 ABC Street <br /> Mylapore <br /> Chennai - 600004
- </p>
- </div>
- <div className="ml-10">
- <p className="text-gray-800 font-semibold">Payment Details</p>
- <p className="text-gray-700">Payment ID</p>
- <p className="text-black font-bold mb-2">ATUWBYTYI245678HBG</p>
- </div>
- </div>
-
- <p className="absolute top-[238px] left-[154px] w-[298px] h-[32px] font-montserrat font-medium text-[22px] leading-[31.3px] tracking-[0.13px]">
- Merchant ID: <span className="font-montserrat font-semibold text-[22px] leading-[31.3px] tracking-[0.13px]">TAMIL12345</span>
- </p>
+ <div className="absolute top-[px] left-[788px] bg-[#E9FAFF] p-5 rounded-[12px] border-transparent w-[601px] h-[439px]" style={{ boxShadow: "6px 6px 0px 0px #000000" }}>
+ <div style={{
+ color: '#45505F',
+ top: '20px',
+ left: '33px',
+ fontSize: 22,
+ fontFamily: 'Montserrat',
+ fontWeight: '500',
+ lineHeight: '31.30px',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
+ Company Name
+ </div>
+ <div style={{
+ color: '#45505F',
+ width: '154px',
+ top: '52px',
+ left: '44px',
+ height: '32px',
+ color: '#000000',
+ fontSize: 20,
+ fontFamily: 'Montserrat',
+ fontWeight: '600',
+ lineHeight: '31.3px',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
+ ABCD PVT LTD
+ </div>
+ <div style={{
+ width: '206px',
+ top:'90px',
+ left: '28px',
+ Height: '32px',
+ color: '#45505F',
+ fontSize: 20,
+ fontFamily: 'Montserrat',
+ fontWeight: '500',
+ lineHeight: '31.30px',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
+ Company Address
+ </div>
+ <div style={{
+ width: '247px',
+ top:'132px',
+ left: '19px',
+ Height: '72px',
+ color: '#000000',
+ fontSize: 20,
+ fontFamily: 'Montserrat',
+ fontWeight: '500',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
+ Shop No: 45 ABC Street <br /> Mylapore <br /> Chennai - 600004
+ </div>
- <p className="absolute top-[278px] left-[109px] w-[392px] h-[24px] font-montserrat font-medium text-[20px] leading-[100%] tracking-[0.13px] text-center">
- Login to your account to get started
- </p>
+ <div style={{color: '#45505F', fontSize: 20, fontFamily: 'Montserrat', fontWeight: '500', lineHeight: '31.3px', letterSpacing: '0.13px', wordWrap: 'break-word', width: '298px', height: '32px', position: 'absolute', top: '238px', left: '154px'}}>
+ Merchant ID : <span style={{ color: '#45505F', fontFamily: 'Montserrat', fontWeight: '600', fontSize: '22px', lineHeight: '31.3px', letterSpacing: '0.13px' }}>TAMIL12345</span>
</div>
+ <p className="absolute" style={{ width: '392px', height: '24px', top: '278px', left: '109px', fontFamily: 'Montserrat', fontWeight: '500', fontSize: '20px', lineHeight: '100%', letterSpacing: '0.13px', textAlign: 'centre' }}>
+ Login to your account to get started
+ </p>
+
{/* Login Button */}
<button
className="absolute top-[340px] left-[184px] bg-[#0096FF] text-white font-bold rounded-full text-sm border-3 border-blue-600 cursor-pointer w-[241px] h-[45px] flex items-center justify-center font-montserrat text-[20.91px] leading-[100%] px-[37px] py-[10px] gap-[10px] shadow-md"
- style={{ borderRadius: "50px", paddingTop: "10px", paddingRight: "40px", paddingBottom: "10px", paddingLeft: "37px", gap: "10px" }}
+ style={{ borderRadius: "90px", paddingTop: "10px", paddingRight: "40px", paddingBottom: "10px", paddingLeft: "37px", gap: "10px" }}
>
Login Now
</button>
{/* Verified Badge */}
- <span className="absolute top-[23px] left-[410px] text-black rounded-full text-sm font-semibold border-2 border-[#0096FF] cursor-pointer w-[156px] h-[45px] flex items-center justify-center font-montserrat text-[20.91px] leading-[100%] px-[37px] py-[10px] gap-[10px]">
- Verified
- </span>
+ <div
+ className="absolute top-[23px] left-[410px] text-black rounded-full text-sm font-semibold border-2 border-[#0096FF] cursor-pointer w-[156px] h-[45px] flex items-center justify-center"
+ style={{
+ border: "2px solid #0096FF",
+ borderRadius: "50px",
+ paddingTop: "10px",
+ paddingRight: "37px",
+ paddingBottom: "10px",
+ paddingLeft: "37px",
+ gap: "10px"
+ }}
+ >
+ <div style={{ width:'82px', Height:'25px' , color: '#101418', fontSize: 20.91, fontFamily: 'Montserrat', fontWeight: '500', wordWrap: 'break-word' , }}>
+ Verified
+ </div>
+ </div>
+ </div>
+
+ {/* Payment Details */}
+ <div style={{
+ color: '#45505F',
+ fontSize: 22,
+ fontFamily: 'Montserrat',
+ fontWeight: '600',
+ lineHeight: '31.30px',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word',
+ width: '200px',
+ height: '32px',
+ position: 'absolute',
+ top: '230px',
+ left: '1109px'
+ }}>
+ Payment Details
+ </div>
+
+ {/* Payment ID */}
+ <div style={{
+ color: '#45505F',
+ fontSize: 22,
+ fontFamily: 'Montserrat',
+ fontWeight: '500',
+ lineHeight: '31.30px',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word',
+ width: '206px',
+ height: '32px',
+ position: 'absolute',
+ top: '264px',
+ left: '1125px'
+ }}>
+ Payment ID
+ </div>
+
+ {/* Payment ID Value */}
+ <div style={{
+ color: '#000000',
+ fontSize: 20,
+ fontFamily: 'Montserrat',
+ fontWeight: '500',
+ lineHeight: '100%',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word',
+ width: '246px',
+ height: '24px',
+ position: 'absolute',
+ top: '298px',
+ left: '1127px'
+ }}>
+ ATUWBYTY1245678HBG
</div>
</div>
</div>
diff --git a/src/AgentStatus.jsx b/src/AgentStatus.jsx
index 514edd7..58bd0e7 100644
--- a/src/AgentStatus.jsx
+++ b/src/AgentStatus.jsx
@@ -11,14 +11,22 @@ const AgentStatus = () => {
OMPOI - Seller
</h1>
</div>
+
<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="/page3.svg" alt="Illustration" className="w-full h-auto" />
+ </div>
+
+ {/* Divider */}
+ <div className="absolute"
+ style={{
+ height: '624.67px', // Vertical height
+ width: '1.3px', // Thin border
+ top: '52.16px',
+ left: '730.3px',
+ backgroundColor: '#E2E7EE'
+ }}>
</div>
{/* Right Side - Status Section */}
@@ -27,20 +35,144 @@ const AgentStatus = () => {
Status
</h2>
- <div className="absolute top-[149px] left-[788px] bg-yellow-100 p-5 rounded-[12px] border border-yellow-300 w-[610px] h-[311px]" style={{ boxShadow: "6px 6px 0px 0px #000000" }}>
- <p className="text-gray-800 font-semibold">Company Name</p>
- <p className="text-black font-bold mb-2">ABCD PVT LTD</p>
+ <div className="absolute top-[149px] left-[788px] bg-[#FFF1CC] p-5 rounded-[12px] border border-transparent w-[610px] h-[439px]" style={{ boxShadow: "6px 6px 0px 0px #000000" }}>
+ <div style={{
+ width: '183px',
+ height: '32px',
+ top: '20px',
+ left: '33px',
+ color: '#45505F',
+ fontSize: 22,
+ fontFamily: 'Montserrat',
+ fontWeight: '500',
+ lineHeight: '31.30px',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
+ Company Name
+ </div>
+ <div style={{
+ width: '154px',
+ height: '32px',
+ left: '44px',
+ top: '52px',
+ color: 'black',
+ fontSize: 20,
+ fontFamily: 'Montserrat',
+ fontWeight: '600',
+ lineHeight: '31.30px',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
+ ABCD PVT LTD
+ </div>
- <p className="text-gray-800 font-semibold">Company Address</p>
- <p className="text-black mb-2">
+ <div style={{
+ width: '206px',
+ height: '32px',
+ top: '100px',
+ left: '28px',
+ color: '#45505F',
+ fontSize: 22,
+ fontFamily: 'Montserrat',
+ fontWeight: '500',
+ lineHeight: '31.30px',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
+ Company Address
+ </div>
+ <div style={{
+ width: '247px',
+ height: '72px',
+ top: '132px',
+ left: '41px',
+ color: 'black',
+ fontSize: 20,
+ fontFamily: 'Montserrat',
+ fontWeight: '500',
+ lineHeight: '100%',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
Shop No: 45 ABC Street <br /> Mylapore <br /> Chennai - 600004
- </p>
+ </div>
- <p className="text-gray-800 font-semibold">Agent Details</p>
- <p className="text-gray-700">Agent Name</p>
- <p className="text-black font-bold">Gopal M</p>
- <p className="text-gray-700">Agent Number</p>
- <p className="text-black font-bold">+91-12345 69870</p>
+ <div style={{
+ width: '206px',
+ height: '32px',
+ top: '219px',
+ left: '33px',
+ color: '#45505F',
+ fontSize: 22,
+ fontFamily: 'Montserrat',
+ fontWeight: '600',
+ lineHeight: '31.30px',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
+ Agent Details
+ </div>
+ <div style={{
+ width: '206px',
+ height: '32px',
+ top: '255px',
+ left: '49px',
+ color: '#45505F',
+ fontSize: 22,
+ fontFamily: 'Montserrat',
+ fontWeight: '500',
+ lineHeight: '31.30px',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
+ Agent Name
+ </div>
+ <div style={{
+ width: '85px',
+ height: '24px',
+ top: '293px',
+ left: '49px',
+ color: 'black',
+ fontSize: 20,
+ fontFamily: 'Montserrat',
+ fontWeight: '500',
+ lineHeight: '100%',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
+ Gopal M
+ </div>
+ <div style={{
+ width: '206px',
+ height: '32px',
+ top: '323px',
+ left: '49px',
+ color: '#45505F',
+ fontSize: 22,
+ fontFamily: 'Montserrat',
+ fontWeight: '500',
+ lineHeight: '31.3px',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
+ Agent Number
+ </div>
+ <div style={{
+ width: '164px',
+ height: '24px',
+ top: '363px',
+ left: '48px',
+ color: '#000000',
+ fontSize: 20,
+ fontFamily: 'Montserrat',
+ fontWeight: '500',
+ lineHeight: '100%',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
+ +91-12345 69870
+ </div>
{/* Status Badge - Clickable Button */}
<button
@@ -49,6 +181,11 @@ const AgentStatus = () => {
style={{ border: "3px solid #FFD255", backgroundColor: "transparent" }}
>
<span style={{
+ width: '91px',
+ height: '25px',
+ top: '10px',
+ left: '38px',
+ color: '#101418',
fontFamily: 'Montserrat',
fontWeight: 500,
fontSize: '20.91px',
diff --git a/src/AgentVerified.jsx b/src/AgentVerified.jsx
index 0b9b8ba..1943f38 100644
--- a/src/AgentVerified.jsx
+++ b/src/AgentVerified.jsx
@@ -11,37 +11,183 @@ const AgentVerified = () => {
OMPOI - Seller
</h1>
</div>
+
<div className="absolute top-[194px] left-[134px] bg-white p-8 rounded-[32.6px] shadow-lg w-[1460.608px] h-[729px] flex">
+
{/* 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" />
</div>
+ {/* Divider */}
+ <div className="absolute"
+ style={{
+ height: '624.67px', // Vertical height
+ width: '1.3px', // Thin border
+ top: '52.16px',
+ left: '730.3px',
+ backgroundColor: '#E2E7EE'
+ }}>
+ </div>
+
{/* Right Side - Status Section */}
<div className="w-1/2 p-10 flex flex-col justify-center">
<h2 className="absolute top-[89px] left-[794px] font-montserrat font-semibold text-[33.91px] leading-[100%]">
Status
</h2>
- <div className="absolute top-[149px] left-[788px] bg-green-100 p-5 rounded-[12px] border border-green-300 w-[610px] h-[311px]" style={{ boxShadow: "6px 6px 0px 0px #000000" }}>
- <p className="text-gray-800 font-semibold">Company Name</p>
- <p className="text-black font-bold mb-2">ABCD PVT LTD</p>
+ <div className="absolute top-[149px] left-[788px] bg-[#DFFFD6] p-5 rounded-[12px] border border-transparent w-[601px] h-[439px]" style={{ boxShadow: "6px 6px 0px 0px #000000" }}>
+ <div style={{
+ width: '183px',
+ top: '20px',
+ left: '33px',
+ height: '32px',
+ color: '#45505F',
+ fontSize: 22,
+ fontFamily: 'Montserrat',
+ fontWeight: '500',
+ lineHeight: '31.30px',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
+ Company Name
+ </div>
+ <div style={{
+ width: '154px',
+ top: '52px',
+ height: '32px',
+ left: '44px',
+ color: '#000000',
+ fontSize: 20,
+ fontFamily: 'Montserrat',
+ fontWeight: '600',
+ lineHeight: '31.30px',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
+ ABCD PVT LTD
+ </div>
- <p className="text-gray-800 font-semibold">Company Address</p>
- <p className="text-black mb-2">
+ <div style={{
+ width: '206px',
+ height: '32px',
+ top: '100px',
+ left: '28px',
+ color: '#45505F',
+ fontSize: 22,
+ fontFamily: 'Montserrat',
+ fontWeight: '500',
+ lineHeight: '31.30px',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
+ Company Address
+ </div>
+ <div style={{
+ color: '#000000',
+ width: '247px',
+ height: '72px',
+ top: '132px',
+ left: '44px',
+ fontSize: 20,
+ fontFamily: 'Montserrat',
+ fontWeight: '500',
+ lineHeight: '100%',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
Shop No: 45 ABC Street <br /> Mylapore <br /> Chennai - 600004
- </p>
+ </div>
- <p className="text-gray-800 font-semibold">Verified By</p>
- <p className="text-gray-700">Agent Name</p>
- <p className="text-black font-bold">Gopal M</p>
- <p className="text-gray-700">Agent Number</p>
- <p className="text-black font-bold">+91-12345 69870</p>
+ <div style={{
+ width: '125px',
+ top: '219px',
+ left: '33px',
+ height: '32px',
+ color: '#45505F',
+ fontSize: 22,
+ fontFamily: 'Montserrat',
+ fontWeight: '600',
+ lineHeight: '31.3px',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
+ Verified By
+ </div>
+ <div style={{
+ width: '206px',
+ height: '32px',
+ top: '255px',
+ left: '49px',
+ color: '#45505F',
+ fontSize: 22,
+ fontFamily: 'Montserrat',
+ fontWeight: '500',
+ lineHeight: '31.30px',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
+ Agent Name
+ </div>
+ <div style={{
+ width: '85px',
+ height: '24px',
+ left: '49px',
+ top: '293px',
+ color: '#000000',
+ fontSize: 20,
+ fontFamily: 'Montserrat',
+ fontWeight: '549',
+ lineHeight: '100%',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
+ Gopal M
+ </div>
+ <div style={{
+ width: '206px',
+ height: '32px',
+ top: '325px',
+ left: '20px',
+ color: '#45505F',
+ fontSize: 22,
+ fontFamily: 'Montserrat',
+ fontWeight: '500',
+ lineHeight: '31.30px',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
+ Agent Number
+ </div>
+ <div style={{
+ color: 'black',
+ fontSize: 20,
+ fontFamily: 'Montserrat',
+ fontWeight: '500',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
+ +91-12345 69870
+ </div>
{/* Verified Badge */}
- <span
- className="absolute top-[23px] left-[354px] text-black rounded-full text-sm font-semibold cursor-pointer w-[243px] h-[45px] flex items-center justify-center"
- style={{ border: "3px solid #22CA00", backgroundColor: "transparent" }}
+ <div
+ className="absolute text-black rounded-full text-sm font-semibold cursor-pointer flex items-center justify-center"
+ style={{
+ width: '156px',
+ height: '45px',
+ top: '23px',
+ left: '410px',
+ borderRadius: '50px',
+ borderWidth: '3px',
+ paddingTop: '10px',
+ paddingRight: '37px',
+ paddingBottom: '10px',
+ paddingLeft: '37px',
+ gap: '10px',
+ border: '3px solid #22CA00',
+ backgroundColor: 'transparent'
+ }}
>
<span style={{
fontFamily: 'Montserrat',
@@ -49,26 +195,36 @@ const AgentVerified = () => {
fontSize: '20.91px',
lineHeight: '100%',
letterSpacing: '0px',
- width: '169px',
- height: '25px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}>
Verified
</span>
- </span>
+ </div>
{/* Payment Section */}
<div className="absolute top-[156px] left-[321px] text-center" style={{ width: '245px', height: '63px' }}>
- <p className="text-gray-800 font-montserrat font-semibold" style={{ fontSize: '26px', lineHeight: '31.3px', letterSpacing: '0.13px', textAlign: 'center' }}>
+ <div style={{width: '100%', textAlign: 'center', color: '#45505F', fontSize: 26, fontFamily: 'Montserrat', fontWeight: '600', lineHeight: '31.30px', letterSpacing: '0.13px', wordWrap: 'break-word'}}>
Pay Now To Get Your Merchant ID
- </p>
+ </div>
<button
onClick={() => navigate("/agent-payment")}
className="mt-2 bg-green-600 text-white rounded-full text-sm font-semibold border-3 border-green-600 cursor-pointer w-[241px] h-[45px] flex items-center justify-center font-montserrat text-[20.91px] leading-[100%] px-[37px] py-[10px] gap-[10px] shadow-md hover:bg-green-700"
>
- Pay Now
+ <div style={{
+ width: '94px',
+ height: '25px',
+ fontFamily: 'Montserrat',
+ fontWeight: '500',
+ fontSize: '20.91px',
+ lineHeight: '100%',
+ letterSpacing: '0px',
+ textAlign: 'center',
+ color: 'white'
+ }}>
+ Pay Now
+ </div>
</button>
</div>
</div>
diff --git a/src/LoginPage.jsx b/src/LoginPage.jsx
index 689b437..efea4cd 100644
--- a/src/LoginPage.jsx
+++ b/src/LoginPage.jsx
@@ -2,7 +2,6 @@ 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 Line2 from "d:/360ExtremeBrowserDownload/Line 2.svg";
import './styles.css'; // Import the CSS file
const LoginPage = () => {
@@ -26,7 +25,6 @@ const LoginPage = () => {
return;
}
- // Validate the URL before navigating
const allowedUrls = ["/status"];
const targetUrl = "/status";
@@ -44,79 +42,152 @@ const LoginPage = () => {
OMPOI - Seller
</h1>
</div>
- <div className="absolute bg-white p-8 flex" style={{ width: '1460.608px', height: '729px', top: '194px', left: '134px', borderRadius: '32.6px', boxShadow: '0px 3.91px 11.74px 0px #2E268414' }}>
+
+ <div className="absolute bg-white p-8 flex"
+ style={{
+ width: '1460.608px',
+ height: '729px',
+ top: '194px',
+ left: '134px',
+ borderRadius: '32.6px',
+ boxShadow: '0px 3.91px 11.74px 0px #2E268414'
+ }}>
+
{/* 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="/Frame 201.svg" alt="Illustration" className="w-full h-auto" />
</div>
{/* Divider */}
- <div className="absolute" style={{ width: '624.6708374023443px', top: '52.16px', left: '730.3px', transform: 'rotate(-90deg)', borderWidth: '1.3px', border: '1.3px solid #E2E7EE' }}>
- <img
- src={Line2}
- alt="Line Divider"
- className="w-full h-auto"
- />
+ <div className="absolute"
+ style={{
+ height: '624.67px',
+ width: '1.3px',
+ top: '52.16px',
+ left: '730.3px',
+ backgroundColor: '#E2E7EE',
+ transform: 'rotate(0deg)'
+ }}>
</div>
{/* Right Side - Login Form */}
<div className="w-1/2 p-10 flex flex-col justify-center">
- <div style={{ width: '231px', height: '41px', top: '105px', left: '996px', position: 'absolute', fontFamily: 'Montserrat', fontWeight: '600', fontSize: '33.91px', lineHeight: '100%', letterSpacing: '0px', color: '#101418' }}>
+ <div style={{
+ width: '231px',
+ height: '41px',
+ top: '105px',
+ left: '996px',
+ position: 'absolute',
+ fontFamily: 'Montserrat',
+ fontWeight: '600',
+ fontSize: '33.91px',
+ lineHeight: '100%',
+ letterSpacing: '0px',
+ color: '#101418'
+ }}>
Check Status
</div>
-
- <div className="mb-4">
- <label className="block text-gray-600 mb-1">Email ID</label>
- <div className="relative">
- <input
- type="email"
- placeholder="Enter Email ID"
- value={email}
- onChange={(e) => setEmail(e.target.value)}
- className="w-full pl-4 pr-10 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400"
- />
- <img
- src={MailIcon}
- alt="Mail Icon"
- className="absolute right-3 top-3 w-5 h-5"
- />
- </div>
- {emailError && <p className="text-red-500 text-sm mt-1">{emailError}</p>}
- </div>
- <div className="mb-4">
- <label className="block text-gray-600 mb-1">Password</label>
- <div className="relative">
- <input
- type={showPassword ? "text" : "password"}
- placeholder="Enter your password"
- className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400"
- />
- <img
- src={PasswordEyeIcon}
- alt="Password Eye Icon"
- className="absolute right-3 top-3 w-5 h-5 cursor-pointer"
- onClick={togglePasswordVisibility}
- />
- </div>
- </div>
+ {/* Email Input */}
+<div className="mb-4" style={{ width: '65%' }}>
+ <label className="block text-[#101418] text-[16px] font-medium mb-2">
+ Email ID
+ </label>
+ <div className="relative">
+ <input
+ type="email"
+ placeholder="Enter Email ID"
+ value={email}
+ onChange={(e) => setEmail(e.target.value)}
+ className="w-full px-4 py-3 border border-[#E2E7EE] rounded-xl bg-transparent text-[#45505F]
+ placeholder:text-[#A1A9B8] focus:outline-none focus:ring-2 focus:ring-blue-400"
+ />
+ <img
+ src={MailIcon}
+ alt="Mail Icon"
+ className="absolute right-4 top-4 w-5 h-5"
+ />
+ </div>
+ {emailError && <p className="text-red-500 text-sm mt-1">{emailError}</p>}
+</div>
+
+{/* Password Input */}
+<div className="mb-4" style={{ width: '65%' }}>
+ <label className="block text-[#101418] text-[16px] font-medium mb-2">
+ Password
+ </label>
+ <div className="relative">
+ <input
+ type={showPassword ? "text" : "password"}
+ placeholder="Enter your password"
+ className="w-full px-4 py-3 border border-[#E2E7EE] rounded-xl bg-transparent text-[#45505F]
+ placeholder:text-[#A1A9B8] focus:outline-none focus:ring-2 focus:ring-blue-400"
+ />
+ <img
+ src={PasswordEyeIcon}
+ alt="Password Eye Icon"
+ className="absolute right-4 top-4 w-5 h-5 cursor-pointer"
+ onClick={togglePasswordVisibility}
+ />
+ </div>
+</div>
+
+{/* Forgot Password and Create Account Links */}
+<div className="flex justify-between text-sm mb-6 w-[65%]">
+ <a href="#" className="text-[#101418] font-semibold">Forgot Password?</a>
+ <a href="#" className="text-[#FFBD69] font-semibold">Create an Account</a>
+</div>
- <div className="flex justify-between text-sm mb-6">
- <a href="#" className="text-gray-500">Forgot Password?</a>
- <a href="#" className="text-orange-500 font-medium">Create an Account</a>
- </div>
- <div style={{ width: '222.44px', height: '61.8px', top: '524.08px', left: '984.24px', position: 'absolute', borderRadius: '34.76px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+ {/* Check Status Button */}
+ <div style={{
+ width: '300.44px',
+ height: '61.80px',
+ top: '524.08px',
+ left: '984.24px',
+ position: 'absolute',
+ borderRadius: '34.76px',
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ paddingTop: '13.9px',
+ paddingRight: '41.71px',
+ paddingBottom: '13.9px',
+ paddingLeft: '41.71px',
+ gap: '13.9px'
+ }}>
<button
onClick={handleCheckStatusClick}
- className="w-full bg-transparent text-orange-500 py-2 rounded-full hover:bg-orange-500 hover:text-white transition animated-button"
- style={{ fontSize: '22.24px', fontFamily: 'Montserrat', fontWeight: '500', lineHeight: '33.37px', letterSpacing: '0.14px', wordWrap: 'break-word', border: '2.13px solid #FFBD69' }}
+ className="w-full bg-transparent text-[#030A1E] py-2 rounded-full hover:bg-orange-500 hover:text-white transition animated-button"
+ style={{
+ fontSize: '22.24px',
+ fontFamily: 'Montserrat',
+ fontWeight: '500',
+ lineHeight: '33.37px',
+ letterSpacing: '0.14px',
+ textAlign: 'center',
+ border: '2.13px solid #FFBD69'
+ }}
>
- Check Status
+ <div style={{
+ textAlign: 'center',
+ color: '#030A1E',
+ fontSize: '22.24px',
+ fontFamily: 'Montserrat',
+ fontWeight: '500',
+ lineHeight: '33.37px',
+ letterSpacing: '0.14px',
+ wordWrap: 'break-word',
+ width: '100%',
+ height: '34px',
+ background: 'transparent',
+ borderRadius: '34.76px',
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center'
+ }}>
+ Check Status
+ </div>
</button>
</div>
</div>
diff --git a/src/StatusPage.jsx b/src/StatusPage.jsx
index 3d6c4d0..fa00769 100644
--- a/src/StatusPage.jsx
+++ b/src/StatusPage.jsx
@@ -18,23 +18,108 @@ const StatusPage = () => {
<img src="/page2.svg" alt="Illustration" className="w-full h-auto" />
</div>
+ {/* Divider */}
+ <div className="absolute"
+ style={{
+ height: '624.67px', // Height instead of width since it's vertical
+ width: '1.3px', // Thin line
+ top: '52.16px',
+ left: '730.3px',
+ backgroundColor: '#E2E7EE',
+ transform: 'rotate(0deg)' // No need to rotate a vertical line
+ }}>
+ </div>
+
{/* Right Side - Status Section */}
<div className="w-1/2 p-10 flex flex-col justify-center">
<h2 className="absolute top-[89px] left-[794px] font-montserrat font-semibold text-[33.91px] leading-[100%]">
Status
</h2>
- <div className="absolute top-[149px] left-[788px] bg-[#F9A78D] p-5 rounded-[12px] border border-orange-500 w-[610px] h-[311px]" style={{ boxShadow: "6px 6px 0px 0px #000000" }}>
- <p className="text-gray-800 font-semibold">Company Name</p>
- <p className="text-black font-bold mb-2">ABCD PVT LTD</p>
+ <div className="absolute top-[149px] left-[788px] bg-[#F9A78D] p-5 rounded-[12px] border border-transparent w-[610px] h-[311px]" style={{ boxShadow: "6px 6px 0px 0px #000000" }}>
+ <div style={{
+ color: '#45505F',
+ fontSize: 22,
+ fontFamily: 'Montserrat',
+ fontWeight: '500',
+ lineHeight: '31.30px',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
+ Company Name
+ </div>
+ <div style={{
+ width: '154px',
+ height: '32px',
+ top: '52px',
+ left: '33px',
+ color: '#000000',
+ fontSize: 20,
+ fontFamily: 'Montserrat',
+ fontWeight: '600',
+ lineHeight: '31.30px',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
+ ABCD PVT LTD
+ </div>
- <p className="text-gray-800 font-semibold">Company Address</p>
- <p className="text-black mb-2">
+ <div style={{
+ width: '206px',
+ height: '32px',
+ top: '100px',
+ left: '28px',
+ color: '#45505F',
+ fontSize: 22,
+ fontFamily: 'Montserrat',
+ fontWeight: '500',
+ lineHeight: '31.30px',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
+ Company Address
+ </div>
+ <div style={{
+ color: 'black',
+ fontSize: 20,
+ fontFamily: 'Montserrat',
+ fontWeight: '549',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
Shop No: 45 ABC Street <br /> Mylapore <br /> Chennai - 600004
- </p>
+ </div>
- <p className="text-gray-800 font-semibold">Agent Details</p>
- <p className="text-black">Not Available</p>
+ <div style={{
+ width: '206px',
+ height: '32px',
+ top: '219px',
+ left: '33px',
+ color: '#45505F',
+ fontSize: 22,
+ fontFamily: 'Montserrat',
+ fontWeight: '500',
+ lineHeight: '31.3px',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
+ Agent Details
+ </div>
+ <div style={{
+ width: '136px',
+ height: '24px',
+ top: '251px',
+ left: '33px',
+ color: 'black',
+ fontSize: 20,
+ fontFamily: 'Montserrat',
+ fontWeight: '500',
+ lineHeight: '100%',
+ letterSpacing: '0.13px',
+ wordWrap: 'break-word'
+ }}>
+ Not Available
+ </div>
{/* Pending Button with Navigation */}
<button
--
GitLab