From 1ceb1bec557e25dca0fec1b68e61a047e1f1ed0a Mon Sep 17 00:00:00 2001
From: Rithish <rithishudayakumar@gmail.com>
Date: Thu, 20 Mar 2025 23:54:26 +0530
Subject: [PATCH] 6 page alignment completed
---
src/components/AgentAssigned.jsx | 226 +++++----------------------
src/components/AgentPayment.jsx | 220 +++++++-------------------
src/components/AgentStatus.jsx | 228 +++++----------------------
src/components/AgentVerified.jsx | 257 ++++++-------------------------
src/components/LoginPage.jsx | 211 +++++++------------------
src/components/StatusPage.jsx | 183 +++++++---------------
6 files changed, 295 insertions(+), 1030 deletions(-)
diff --git a/src/components/AgentAssigned.jsx b/src/components/AgentAssigned.jsx
index 3f264cf..6f52e79 100644
--- a/src/components/AgentAssigned.jsx
+++ b/src/components/AgentAssigned.jsx
@@ -1,199 +1,55 @@
import React from "react";
import { useNavigate } from "react-router-dom";
import FrameImage from "../assets/images/page4.svg";
+
const AgentAssigned = () => {
const navigate = useNavigate();
return (
- <div className="flex items-center justify-center min-h-screen" style={{ background: '#E9FAFF' }}>
- <div className="absolute top-[66px] left-[139px]">
- <h1 className="font-montserrat font-bold text-[48.31px] leading-[100%]">
- 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">
+ <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">
{/* Left Side - Illustration */}
- <div className="w-1/2 flex items-center justify-center p-5">
- <img src={FrameImage} 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 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"
+ onClick={() => navigate("/agent-verified")} // Navigates to AgentVerified.jsx
+ />
</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-[#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>
-
- <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
- </div>
-
- <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
+
+ {/* Vertical Divider */}
+ <div className="absolute top-[10%] left-[50%] w-[2px] h-[80%] bg-[#E2E7EE]"></div>
+
+ <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">
+ {/* 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>
+
+ {/* 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>
+
+ {/* 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>
+
+ {/* 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">
+ Agent Assigned
</div>
-
- {/* Status Badge */}
- <button
- 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: "2px solid #FFD255", backgroundColor: "transparent" }}
- onClick={() => navigate("/agent-verified")}
- >
- <span style={{
- fontFamily: 'Montserrat',
- fontWeight: 500,
- fontSize: '20.91px',
- lineHeight: '100%',
- letterSpacing: '0px',
- width: '169px',
- height: '25px',
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center'
- }}>
- Agent Assigned
- </span>
- </button>
</div>
</div>
</div>
diff --git a/src/components/AgentPayment.jsx b/src/components/AgentPayment.jsx
index fcdfd1d..97e5e9f 100644
--- a/src/components/AgentPayment.jsx
+++ b/src/components/AgentPayment.jsx
@@ -1,187 +1,79 @@
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' }}>
- <div className="absolute top-[66px] left-[139px]">
- <h1 className="font-montserrat font-bold text-[48.31px] leading-[100%]">
- 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">
+ <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%]">
+ 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">
- {/* Left Side - Illustration */}
- <div className="w-1/2 flex items-center justify-center p-5">
- <img src={FrameImage} 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'
- }}>
+ {/* 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>
- {/* 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>
+ {/* Vertical Divider */}
+ <div className="absolute top-[10%] left-[50%] w-[2px] h-[80%] bg-[#E2E7EE]"></div>
- <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
+ {/* 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>
+
+ {/* 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="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>
+
+ {/* 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]">
+ Merchant ID: <span className="font-semibold">TAMIL12345</span>
</div>
- <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>
+ {/* 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>
- <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 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">
Login to your account to get started
- </p>
+ </div>
{/* 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: "90px", paddingTop: "10px", paddingRight: "40px", paddingBottom: "10px", paddingLeft: "37px", gap: "10px" }}
- >
- Login Now
- </button>
-
- {/* Verified Badge */}
- <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 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>
</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 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]">
+ 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 */}
+ <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]">
+ 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>
+ {/* 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>
</div>
);
diff --git a/src/components/AgentStatus.jsx b/src/components/AgentStatus.jsx
index e5b19b3..4fe545c 100644
--- a/src/components/AgentStatus.jsx
+++ b/src/components/AgentStatus.jsx
@@ -1,201 +1,55 @@
-import React from "react";
+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
+ const navigate = useNavigate();
return (
- <div className="flex items-center justify-center min-h-screen" style={{ background: '#E9FAFF' }}>
- <div className="absolute top-[66px] left-[139px]">
- <h1 className="font-montserrat font-bold text-[48.31px] leading-[100%]">
- OMPOI - Seller
- </h1>
- </div>
-
- <div className="absolute top-[194px] left-[134px] bg-white p-8 rounded-[32.6px] w-[1460.608px] h-[729px] flex">
+ <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">
+
{/* Left Side - Illustration */}
- <div className="w-1/2 flex items-center justify-center p-5">
- <img src={FrameImage} alt="Illustration" className="w-full h-auto" />
+ <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"
+ onClick={() => navigate("/agent-assigned")}
+ />
</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>
-
+
+ {/* Vertical Divider */}
+ <div className="absolute top-[10%] left-[50%] w-[2px] h-[80%] bg-[#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-[#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>
-
- <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
- </div>
-
- <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
- onClick={() => navigate("/agent-assigned")}
- className="absolute top-[30px] left-[416px] text-black px-4 py-1 rounded-full text-sm font-semibold cursor-pointer w-[167px] h-[44px]"
- 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',
- lineHeight: '100%',
- letterSpacing: '0px'
- }}>
+ <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">
+ {/* 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>
+
+ {/* 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>
+
+ {/* 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>
+
+ {/* 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">
Pending
</span>
- </button>
+ </div>
</div>
</div>
</div>
diff --git a/src/components/AgentVerified.jsx b/src/components/AgentVerified.jsx
index b9bf57c..0ad7264 100644
--- a/src/components/AgentVerified.jsx
+++ b/src/components/AgentVerified.jsx
@@ -6,233 +6,70 @@ const AgentVerified = () => {
const navigate = useNavigate();
return (
- <div className="flex items-center justify-center min-h-screen" style={{ background: '#E9FAFF' }}>
- <div className="absolute top-[66px] left-[139px]">
- <h1 className="font-montserrat font-bold text-[48.31px] leading-[100%]">
- 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">
+ <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">
- {/* Left Side - Illustration */}
- <div className="w-1/2 flex items-center justify-center p-5">
- <img src={FrameImage} alt="Illustration" className="w-full h-auto" />
+ {/* 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>
- {/* 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-[#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>
-
- <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
- </div>
-
- <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>
+ {/* 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>
+
+ {/* 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>
+
+ {/* 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-[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 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',
- fontWeight: 500,
- fontSize: '20.91px',
- lineHeight: '100%',
- letterSpacing: '0px',
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center'
- }}>
- Verified
- </span>
+ <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]">
+ Verified
</div>
{/* Payment Section */}
- <div className="absolute top-[156px] left-[321px] text-center" style={{ width: '245px', height: '63px' }}>
- <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
- </div>
+ <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">
+ 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">
<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"
+ className="w-full h-full"
>
- <div style={{
- width: '94px',
- height: '25px',
- fontFamily: 'Montserrat',
- fontWeight: '500',
- fontSize: '20.91px',
- lineHeight: '100%',
- letterSpacing: '0px',
- textAlign: 'center',
- color: 'white'
- }}>
- Pay Now
- </div>
+ Pay Now
</button>
</div>
</div>
</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>
</div>
);
};
-export default AgentVerified;
+export default AgentVerified;
\ No newline at end of file
diff --git a/src/components/LoginPage.jsx b/src/components/LoginPage.jsx
index 9d87666..b11f136 100644
--- a/src/components/LoginPage.jsx
+++ b/src/components/LoginPage.jsx
@@ -1,11 +1,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 MailIcon from "d:/360ExtremeBrowserDownload/Mail.svg";
import FrameImage from "../assets/images/Frame201.svg";
-import "../styles.css"; // Import the CSS file
-
const LoginPage = () => {
const [showPassword, setShowPassword] = useState(false);
const [email, setEmail] = useState("");
@@ -26,170 +24,69 @@ const LoginPage = () => {
setEmailError("Please enter a valid email address.");
return;
}
-
- const allowedUrls = ["/status"];
- const targetUrl = "/status";
-
- if (allowedUrls.includes(targetUrl)) {
- navigate(targetUrl);
- } else {
- console.error("Invalid URL redirection attempt");
- }
+ navigate("/status");
};
return (
- <div className="flex items-center justify-center min-h-screen" style={{ background: '#E9FAFF' }}>
- <div className="absolute top-[66px] left-[139px]">
- <h1 className="font-montserrat font-bold text-[48.31px] leading-[100%]">
- 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="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">
{/* Left Side - Illustration */}
- <div className="w-1/2 flex items-center justify-center p-5">
- <img src={FrameImage} alt="Illustration" className="w-full h-auto" />
+ <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" />
</div>
- {/* Divider */}
- <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'
- }}>
- Check Status
+ {/* Vertical Divider */}
+ <div className="absolute top-[10%] left-[50%] w-[2px] h-[80%] bg-[#E2E7EE]"></div>
+
+ {/* Right Side - Form */}
+ <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-">Check Status</h2>
+
+ <div className="mb-4 w-full relative">
+ <label htmlFor="email" className="text-[12px] md:text-[18px] text-[#45505F] p-[0.5px] bg-white relative top-1 left-4 px-1">Email ID</label>
+ <input
+ type="email"
+ id="email"
+ placeholder="Enter Email ID"
+ value={email}
+ onChange={(e) => setEmail(e.target.value)}
+ className="w-full p-2 md:p-3 border border-[#C4CFDE] rounded-[12px] text-[12px] md:text-[18px] focus:outline-none"
+ required
+ />
+ <img src={MailIcon} alt="Mail Icon" className="absolute right-3 top-8 md:top-10 w-5 h-5" />
+ {emailError && <p className="text-red-500 text-sm mt-1">{emailError}</p>}
+ </div>
+
+ {/* Password Input */}
+ <div className="mb-4 w-full relative">
+ <label htmlFor="password" className="text-[12px] md:text-[18px] text-[#45505F] p-[0.5px] bg-white relative top-1 left-4 px-1">Password</label>
+ <input
+ type={showPassword ? "text" : "password"}
+ id="password"
+ placeholder="Enter your password"
+ className="w-full p-2 md:p-3 border border-[#C4CFDE] rounded-[12px] text-[12px] md:text-[18px] focus:outline-none"
+ required
+ />
+ <img
+ src={PasswordEyeIcon}
+ alt="Password Eye Icon"
+ className="absolute right-3 top-5 md:top-10 w-5 h-5 cursor-pointer"
+ onClick={togglePasswordVisibility}
+ />
</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>
-
-
- {/* 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
+ <div className="flex flex-col md:flex-row justify-between text-sm mb-6">
+ <span className="text-gray-900 font-semibold cursor-pointer text-center md:text-left">Forgot Password?</span>
+ <span className="text-orange-400 font-semibold cursor-pointer text-center md:text-right">Create an Account</span>
+ </div>
+
+ <div className="flex justify-center">
+ <button
onClick={handleCheckStatusClick}
- 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'
- }}
+ className="w-46 px-7 py-1 md:py-2 rounded-[34.76px] outline outline-2 outline-offset-[-1.07px] outline-[#FFBD69] inline-flex justify-center items-center gap-3.5 bg-transparent text-slate-950 text-xl md:text-2xl font-medium font-['Montserrat'] leading-loose tracking-tight hover:bg-orange-500 hover:text-white transition"
>
- <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>
+ Check Status
</button>
</div>
</div>
diff --git a/src/components/StatusPage.jsx b/src/components/StatusPage.jsx
index 678e769..33ffbcb 100644
--- a/src/components/StatusPage.jsx
+++ b/src/components/StatusPage.jsx
@@ -6,138 +6,67 @@ const StatusPage = () => {
const navigate = useNavigate();
return (
- <div className="flex items-center justify-center min-h-screen" style={{ background: '#E9FAFF' }}>
- <div className="absolute top-[66px] left-[139px]">
- <h1 className="font-montserrat font-bold text-[48.31px] leading-[100%]">
- OMPOI - Seller
- </h1>
- </div>
-
- <div className="absolute top-[194px] left-[134px] bg-white p-8 rounded-[32.6px] w-[1460.608px] h-[729px] flex">
+ <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">
{/* Left Side - Illustration */}
- <div className="w-1/2 flex items-center justify-center p-5">
- <img src={FrameImage} 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 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"
+ onClick={() => navigate("/agent-status")}
+ />
</div>
+
+ {/* Vertical Divider */}
+ <div className="absolute top-[10%] left-[50%] w-[2px] h-[80%] bg-[#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-[#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 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>
+
+ {/* 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">
+ <span className="text-[#101418] text-base md:text-[21.81px] font-medium font-['Montserrat']">
+ Pending
+ </span>
+ </div>
</div>
-
- <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
- </div>
-
- <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 className="mt-16 md:mt-0 space-y-6">
+ <div>
+ <div className="text-gray-600 text-lg md:text-xl font-medium font-['Montserrat'] leading-loose tracking-tight">
+ Company Name
+ </div>
+ <div className="text-black text-lg md:text-xl font-semibold font-['Montserrat'] leading-loose tracking-tight">
+ ABCD PVT LTD
+ </div>
+ </div>
+
+ <div>
+ <div className="text-gray-600 text-lg md:text-xl font-medium font-['Montserrat'] leading-loose tracking-tight">
+ Company Address
+ </div>
+ <div className="text-black text-lg md:text-xl font-medium font-['Montserrat'] tracking-tight">
+ Shop No: 45 ABC Street <br />
+ Mylapore <br />
+ Chennai - 600004
+ </div>
+ </div>
+
+ <div>
+ <div className="text-gray-600 text-lg md:text-xl font-medium font-['Montserrat'] leading-loose tracking-tight">
+ Agent Details
+ </div>
+ <div className="text-black text-lg md:text-xl font-medium font-['Montserrat'] tracking-tight">
+ Not Available
+ </div>
+ </div>
</div>
-
- {/* Pending Button with Navigation */}
- <button
- onClick={() => navigate("/agent-status")}
- className="absolute top-[30px] left-[416px] text-black px-3 py-1 rounded-full text-sm border-3 w-[167px] h-[44px] flex items-center justify-center"
- style={{ border: "3px solid #FF3D00", backgroundColor: "transparent" }}
- >
- <span style={{
- fontFamily: 'Montserrat',
- fontWeight: 500,
- fontSize: '20.91px',
- lineHeight: '100%',
- letterSpacing: '0px'
- }}>
- Pending
- </span>
- </button>
</div>
</div>
</div>
@@ -145,4 +74,4 @@ const StatusPage = () => {
);
};
-export default StatusPage;
+export default StatusPage;
\ No newline at end of file
--
GitLab