diff --git a/src/pages/Create_account.jsx b/src/pages/Create_account.jsx
index 6199113656c243c1399816b8fbde98efe757e420..b81c4c08697bc50a5a9c74656ea6e5a168a96be6 100644
--- a/src/pages/Create_account.jsx
+++ b/src/pages/Create_account.jsx
@@ -37,67 +37,67 @@ function Create_account() {
};
return (
<>
- <div className="flex flex-col items-center min-h-screen bg-[#E9FAFF] p-4 font-montserrat">
+ <div className="flex flex-col items-center h-screen bg-[#E9FAFF] px-6 py-4 font-montserrat">
{/* Header */}
<div className="w-full text-left max-w-6xl px-2 md:px-0 mb-6 mt-6 ml-30 flex">
- <h1 className="text-[20px] md:text-[48.31px] font-bold text-[#030A1E] relative">
+ <h1 className="text-4xl font-font-primary font-bold text-[#030A1E] mb-6 text-left w-full max-w-[90%]">
OMPOI - Seller
</h1>
</div>
- <div className="flex flex-col md:flex-row items-center justify-center w-full max-w-2xl md:max-w-5xl bg-[#FFFFFF] p-2 rounded-[32.6px] shadow-lg relative">
+ <div className="bg-[#FFFFFF] p-6 rounded-[32.6px] shadow-lg w-[90%] h-[85%] flex flex-col md:flex-row py-8 mb-5 ">
{/* Left Section - Image */}
- <div className="w-fit md:w-1/2 flex justify-center md:pr-8 relative gap-1 md:gap-0">
- <img src={reg} alt="Login Illustration" className="max-w-xs md:max-w-lg p-1" />
- <div className="hidden md:block absolute right-0 top-[7px] bottom-0 w-[1px] h-[400px] bg-[#E2E7EE]" />
+ <div className="hidden md:flex w-1/2 items-center justify-center p-4 min-w-[300px]">
+ <img src={reg} alt="Login Illustration" className="w-[80%] lg:w-[80%] xl:w-[80%]" />
</div>
+ <div className="w-[1px] bg-[#C4CFDE] hidden md:block" />
{/* Right Section - OTP Registration */}
- <div className="w-full md:w-1/2 flex flex-col justify-center items-center mt-[40px] md:mt-7 p-2 md:p-5">
- <h2 className="text-[18px] md:text-[20px] font-semibold mb-2 self-center">
+ <div className="w-full md:w-1/2 flex flex-col items-center justify-start p-6 text-[#030A1E] mt-12">
+ <h2 className="text-4xl md:text-3xl font-font-primary font-semibold text-[7DEBD9] mb-3 -mt-6 md:mb-6">
Merchant Registration
</h2>
- <p className="text-[16px] md:text-[12.91px] font-semibold mt-[5px] justify-center items-center self-center mb-[10px] md:mb-[50px]">
+ <p className="text-3xl md:text-2xl font-bold mt-[5px] justify-center items-center self-center mb-3 md:mb-15">
OTP-Verification
</p>
- <form className=" " onSubmit={handleSendOtp}>
- <div className=" ml-[200px] justify-center items-center mb-8">
- <label
- className={`text-[10px] md:text-[18px] text-[#8B9BB1] p-[0.5px] px-1 relative top-1 left-6 bg-white ${
- phoneNumberError ? "text-red-500" : "text-green-500"
- }`}
- >
- Phone Number
- </label>
- <input
- type="text"
- id="phoneNumber"
- value={phoneNumber}
- onChange={handlePhoneNumberChange}
- maxLength="10"
- required
- className={`w-[280px] p-2 md:p-3 mr-[20rem] border border-[#C4CFDE] rounded-[12px] mt-[-10px] text-[10px] md:text-[18px] focus:outline-none ${phoneNumberError ? "border-red-500" : "border-green-500 "} `}
- placeholder="+91"
- />
- {phoneNumberError && (
- <p className="text-red-500 text-[10px] mt-1">{phoneNumberError} <Infoicon /> </p>
- )}
+ <form className="w-full max-w-md " onSubmit={handleSendOtp}>
+ <div className="relative w-full mb-8">
+ <div className="relative border-2 rounded-lg border-[#C4CFDE] bg-transparent">
+ <label
+ className={`absolute -top-3 left-4 px-2 bg-[#C4CFDE] border border-[#C4CFDE] rounded-md text-sm text-[#45505F] font-font-primary font-medium ${
+ phoneNumberError ? "text-red-500" : "text-green-500"
+ }`}
+ >
+ Phone Number
+ </label>
+ <input
+ type="text"
+ id="phoneNumber"
+ value={phoneNumber}
+ onChange={handlePhoneNumberChange}
+ maxLength="10"
+ required
+ className={`w-full h-14 px-3 pr-12 bg-transparent text-[#45505F] text-lg focus:outline-none font-font-primary ${phoneNumberError ? "border-red-500" : "border-green-500 "} `}
+ placeholder="+91"
+ />
+ {phoneNumberError && (
+ <p className="text-red-500 text-[10px] mt-1">{phoneNumberError} <Infoicon /> </p>
+ )}
+ </div>
+
</div>
<div className="flex justify-center items-center">
<button
type="submit"
- className="w-30 md:w-52 px-2 md:px-10 bg-[#fdba74] text-[#020617] py-1.5 md:py-3.5 rounded-[20.8px] md:rounded-[32.6px] mb-14 font-semibold focus:outline-none"
+ className="w-[100%] md:w-48 h-14 text-[#030A1E] rounded-full bg-[#FFBD69] shadow-md hover:bg-orange-500 transition text-lg font-font-primary font-extrabold"
>
Send OTP
</button>
</div>
</form>
- </div>
-
- {/* Absolute right-side design, hidden on small screens */}
- <div className="hidden md:flex mr-[-170px] mt-[-300px]">
+ <div className="hidden md:flex ml-[128%] mt-[-65%]">
<div className="border-[2px] border-[#171451] right-5 w-10 h-10 bg-[#E2E7EE] rounded-full" />
<div className="rounded-full bg-[#171451] p-1 w-5 h-5 mx-[-30px] my-[10px] ">
<div className="w-[1px] h-[120px] mt-[25px] ml-[5px] bg-[#D1D5DB] border-dotted border-[1px]" >
@@ -115,6 +115,10 @@ function Create_account() {
</div>
</div>
</div>
+ </div>
+
+ {/* Absolute right-side design, hidden on small screens */}
+
</div>
</>
);
diff --git a/src/pages/Seller_reg.jsx b/src/pages/Seller_reg.jsx
index 603680701ac39b0046ef6002061d9c10df5158e5..0a457977366a37349a723f3b374fcf15215e8584 100644
--- a/src/pages/Seller_reg.jsx
+++ b/src/pages/Seller_reg.jsx
@@ -1,118 +1,185 @@
import { React, useState } from "react";
-function Seller_reg () {
+function Seller_reg() {
return (
- <div className="min-h-screen flex items-center justify-center bg-[#E9FAFF] p-4 font-montserrat">
- <div className="text-[#030A1E] "><p className="text-[28px] font-semibold m-5">OMPOI-Seller</p>
- <div className="bg-white p-8 rounded-[32.7px] shadow-lg w-full max-w-5xl flex flex-col md:flex-row gap-6">
- {/* Left Section */}
- <div className="w-full md:w-1/2">
- <h2 className="text-lg font-semibold m-1">Enter Your Company Details</h2>
- <label className="text-[#030A1E] top-4 p-[0.5px] left-8 relative bg-white" >Company Name</label>
- <input type="text" className="w-full focus:outline-none text-[#C4CFDE] border-2 m-1 rounded-[12px] font-semibold text-[15px] p-3 border-[#C4CFDE]" placeholder="ABCD Enterprises Pvt. Ltd./" />
- <label className="top-4 text-[#030A1E] p-[0.5px] left-8 relative bg-white">GST Numbwer</label>
- <input type="text" className="p-2 w-full focus:outline-none text-[#C4CFDE] border-2 m-1 rounded-[12px] border-[#C4CFDE] " placeholder="GST Number" />
- <label className="top-4 text-[#030A1E] p-[0.5px] left-8 relative bg-white">Owner Name</label>
- <input type="text" className="p-2 w-full focus:outline-none text-[#C4CFDE] border-2 m-1 rounded-[12px] border-[#C4CFDE]" placeholder="Owner Name" />
- <div className="flex flex-col md:flex-row mt-3 ml-3 mr-3 gap-5 md:gap-40">
- <span className="text-[#030A1E] ">Category</span>
- <span className="text-[#030A1E] ">Type of Seller</span>
- </div>
- <div className="flex flex-col md:flex-row mt-3 ml-3 mr-3 gap-4">
- <select className="w-full focus:outline-none border-[#C4CFDE] text-[#C4CFDE] border-2 m-1 p-2 rounded-[12px] ">
- <option value="" disabled hidden>
+ <div className="">
+ <div className="flex flex-col items-center h-screen bg-[#E9FAFF] px-6 py-4 font-montserrat ">
+ <h1 className="text-4xl font-font-primary font-bold text-[#030A1E] mb-6 text-left w-full max-w-[90%]">
+ OMPOI-Seller
+ </h1>
+ <div className="bg-[#FFFFFF] p-6 rounded-[32.6px] shadow-lg w-[90%] h-[85%] flex flex-col md:flex-row py-[-12%] ">
+ {/* Left Section */}
+ <div className="w-full md:w-1/2">
+ <h2 className="text-lg font-semibold m-1">
+ Enter Your Company Details
+ </h2>
+ <label className="text-[#030A1E] top-4 p-[0.5px] left-8 relative bg-white">
+ Company Name
+ </label>
+ <input
+ type="text"
+ className="w-[80%] focus:outline-none text-[#C4CFDE] border-2 m-1 rounded-[12px] font-semibold text-[15px] p-3 border-[#C4CFDE]"
+ placeholder="ABCD Enterprises Pvt. Ltd./"
+ />
+ <label className="top-4 text-[#030A1E] p-[0.5px] left-8 relative bg-white">
+ GST Numbwer
+ </label>
+ <input
+ type="text"
+ className="w-[80%] focus:outline-none text-[#C4CFDE] border-2 m-1 rounded-[12px] font-semibold text-[15px] p-3 border-[#C4CFDE]"
+ placeholder="GST Number"
+ />
+ <label className="top-4 text-[#030A1E] p-[0.5px] left-8 relative bg-white">
+ Owner Name
+ </label>
+ <input
+ type="text"
+ className="p-2 w-full focus:outline-none text-[#C4CFDE] border-2 m-1 rounded-[12px] border-[#C4CFDE]"
+ placeholder="Owner Name"
+ />
+ <div className="flex flex-col md:flex-row mt-3 ml-3 mr-3 gap-5 md:gap-40">
+ <span className="text-[#030A1E] ">Category</span>
+ <span className="text-[#030A1E] ">Type of Seller</span>
+ </div>
+ <div className="flex flex-col md:flex-row mt-3 ml-3 mr-3 gap-4">
+ <select className="w-full focus:outline-none border-[#C4CFDE] text-[#C4CFDE] border-2 m-1 p-2 rounded-[12px] ">
+ <option value="" disabled hidden>
Select Category
- </option>
- <option value="item1" className="text-[#030A1E] ">items1</option>
- <option value="item2" className="text-[#030A1E] ">items2</option>
- <option value="item3" className="text-[#030A1E] ">items3</option>
- <option value="item4" className="text-[#030A1E] ">items4</option>
-
- </select>
- <select className="w-full focus:outline-none border-[#C4CFDE] text-[#C4CFDE] border-2 m-1 p-2 rounded-[12px]">
- <option value="" disabled hidden>
+ </option>
+ <option value="item1" className="text-[#030A1E] ">
+ items1
+ </option>
+ <option value="item2" className="text-[#030A1E] ">
+ items2
+ </option>
+ <option value="item3" className="text-[#030A1E] ">
+ items3
+ </option>
+ <option value="item4" className="text-[#030A1E] ">
+ items4
+ </option>
+ </select>
+ <select className="w-full focus:outline-none border-[#C4CFDE] text-[#C4CFDE] border-2 m-1 p-2 rounded-[12px]">
+ <option value="" disabled hidden>
Select Type
- </option>
- <option value="items1" className="text-[#030A1E] ">items1</option>
- <option value="items2" className="text-[#030A1E] ">items2</option>
- <option value="items3" className="text-[#030A1E] ">items3</option>
- <option value="items4" className="text-[#030A1E] ">items4</option>
- </select>
- </div>
- <div className="mt-[-10px]">
- <label className="top-9 text-[#030A1E] p-[0.5px] left-8 relative bg-white">Alternative Number</label>
- <div className="relative inset-y-0 left-0 top-[35px] pl-3 flex items-center pointer-events-none">
- <span className="text-[#030A1E] sm:text-sm">+91</span>
- </div>
- <input type="text" className="p-2 w-full focus:outline-none text-[#C4CFDE] border-2 m-1 rounded-[12px] border-[#C4CFDE]" placeholder=" 1234567876" />
- <label className="top-4 text-[#030A1E] p-[0.5px] left-8 relative bg-white">Email</label>
- <input type="text" className="p-2 w-full focus:outline-none text-[#C4CFDE] border-2 m-1 rounded-[12px] border-[#C4CFDE]" placeholder="jhon@abcd.com" />
+ </option>
+ <option value="items1" className="text-[#030A1E] ">
+ items1
+ </option>
+ <option value="items2" className="text-[#030A1E] ">
+ items2
+ </option>
+ <option value="items3" className="text-[#030A1E] ">
+ items3
+ </option>
+ <option value="items4" className="text-[#030A1E] ">
+ items4
+ </option>
+ </select>
</div>
- </div>
-
- {/* Middle Separator */}
- <div className="hidden md:block w-px bg-gray-300"></div>
-
- {/* Right Section */}
- <div className="w-full md:w-1/2">
- <h2 className="text-lg font-semibold">Billing Details</h2>
- <label className="top-4 text-[#030A1E] p-[0.5px] left-8 relative bg-white">Address</label>
- <input type="text" className="p-8 w-full focus:outline-none text-[#C4CFDE] border-2 m-1 rounded-[12px] border-[#C4CFDE]" placeholder="Address" />
- <div className="flex flex-col md:flex-row mt-3 ml-3 mr-3 gap-40">
- <span className="text-[#030A1E] ">Location</span>
- <label className="top-7 text-[#030A1E] p-[0.5px] left-8 relative bg-white">Password</label>
- </div>
- <div className="flex flex-col md:flex-row justify-between mt-3 mb-3 gap-6">
- <select className="w-full focus:outline-none border-[#C4CFDE] text-[#C4CFDE] border-2 m-1 p-2 rounded-[12px]">
- <option value="" disabled hidden>
- Select Type
- </option>
- <option value="items1" className="text-[#030A1E] ">items1</option>
- <option value="items2" className="text-[#030A1E] ">items2</option>
- <option value="items3" className="text-[#030A1E] ">items3</option>
- <option value="items4" className="text-[#030A1E] ">items4</option>
- </select>
- <input className="p-2 w-full focus:outline-none text-[#C4CFDE] border-2 m-1 rounded-[12px] border-[#C4CFDE]" type="text" placeholder="" />
- </div>
- <h2 className="text-lg font-semibold mt-4">Bank Details</h2>
- <div className="flex flex-col md:flex-row mt-3 ml-3 mr-3 gap-40">
- <label className="top-7 text-[#030A1E] p-[0.5px] left-6 relative bg-white">Bank Name</label>
- <label className="top-7 text-[#030A1E] p-[0.5px] left-6 relative bg-white">IFSC Code</label>
+ <div className="mt-[-10px]">
+ <label className="top-9 text-[#030A1E] p-[0.5px] left-8 relative bg-white">
+ Alternative Number
+ </label>
+ <div className="relative inset-y-0 left-0 top-[35px] pl-3 flex items-center pointer-events-none">
+ <span className="text-[#030A1E] sm:text-sm">+91</span>
</div>
- <div className="flex flex-col md:flex-row justify-between mt-3 mb-3 gap-6">
- <input type="text" className="p-2 w-full focus:outline-none text-[#C4CFDE] border-2 m-1 rounded-[12px] border-[#C4CFDE]" placeholder="Union Bank" />
-
- <input type="text" className="p-2 w-full focus:outline-none text-[#C4CFDE] border-2 m-1 rounded-[12px] border-[#C4CFDE]" placeholder="Union Bank" />
- </div>
- <input className="input" placeholder="Account Number" />
- <div className="border-dashed border-2 border-gray-300 p-4 text-center mt-4">
- <input type="file" className="hidden" />
- Drag your file(s) or <span className="text-blue-500 cursor-pointer">browse</span>
+ <input
+ type="text"
+ className="p-2 w-full focus:outline-none text-[#C4CFDE] border-2 m-1 rounded-[12px] border-[#C4CFDE]"
+ placeholder=" 1234567876"
+ />
+ <label className="top-4 text-[#030A1E] p-[0.5px] left-8 relative bg-white">
+ Email
+ </label>
+ <input
+ type="text"
+ className="p-2 w-full focus:outline-none text-[#C4CFDE] border-2 m-1 rounded-[12px] border-[#C4CFDE]"
+ placeholder="jhon@abcd.com"
+ />
+ </div>
</div>
- <button className="bg-[#fdba74] text-white w-full py-2 mt-4 rounded-[30px]">Register Now</button>
- </div>
- </div>
- </div>
- {/* Absolute right-side design, hidden on small screens */}
- <div className="hidden md:flex mr-[-10s0px] mt-[-320px] ml-10 ">
- <div className="border-[2px] border-[#171451] right-5 w-10 h-10 bg-[#E2E7EE] rounded-full">
- <div className="rounded-full bg-[#171451] p-1 w-5 h-5 mx-[8px] my-[8px] ">
- <div className="w-[1px] h-[120px] mt-[25px] ml-[5px] bg-[#D1D5DB] border-dotted border-[1px] ">
- <div className="border-[2px] border-[#D1D5DB] right-5 w-10 h-10 mt-[120px] ml-[-20px] bg-[#E2E7EE] rounded-full ">
- <div className="rounded-full bg-[#D1D5DB] p-1 w-5 h-5 mx-[8px] my-[8px] ">
- <div className="w-[1px] h-[120px] mt-[25px] ml-[5px] bg-[#D1D5DB] border-dotted border-[1px] ">
- <div className="border-[2px] border-[#D1D5DB] right-5 w-10 h-10 mt-[120px] ml-[-20px] bg-[#E2E7EE] rounded-full ">
- <div className="rounded-full bg-[#D1D5DB] p-1 w-5 h-5 mx-[8px] my-[8px] "></div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
+
+ {/* Middle Separator */}
+ <div className="hidden md:block w-px bg-gray-300"></div>
+
+ {/* Right Section */}
+ <div className="w-full md:w-1/2">
+ <h2 className="text-lg font-semibold">Billing Details</h2>
+ <label className="top-4 text-[#030A1E] p-[0.5px] left-8 relative bg-white">
+ Address
+ </label>
+ <input
+ type="text"
+ className="p-8 w-full focus:outline-none text-[#C4CFDE] border-2 m-1 rounded-[12px] border-[#C4CFDE]"
+ placeholder="Address"
+ />
+ <div className="flex flex-col md:flex-row mt-3 ml-3 mr-3 gap-40">
+ <span className="text-[#030A1E] ">Location</span>
+ <label className="top-7 text-[#030A1E] p-[0.5px] left-8 relative bg-white">
+ Password
+ </label>
+ </div>
+ <div className="flex flex-col md:flex-row justify-between mt-3 mb-3 gap-6">
+ <select className="w-full focus:outline-none border-[#C4CFDE] text-[#C4CFDE] border-2 m-1 p-2 rounded-[12px]">
+ <option value="" disabled hidden>
+ Select Type
+ </option>
+ <option value="items1" className="text-[#030A1E] ">
+ items1
+ </option>
+ <option value="items2" className="text-[#030A1E] ">
+ items2
+ </option>
+ <option value="items3" className="text-[#030A1E] ">
+ items3
+ </option>
+ <option value="items4" className="text-[#030A1E] ">
+ items4
+ </option>
+ </select>
+ <input
+ className="p-2 w-full focus:outline-none text-[#C4CFDE] border-2 m-1 rounded-[12px] border-[#C4CFDE]"
+ type="text"
+ placeholder=""
+ />
</div>
+ <h2 className="text-lg font-semibold mt-4">Bank Details</h2>
+ <div className="flex flex-col md:flex-row mt-3 ml-3 mr-3 gap-40">
+ <label className="top-7 text-[#030A1E] p-[0.5px] left-6 relative bg-white">
+ Bank Name
+ </label>
+ <label className="top-7 text-[#030A1E] p-[0.5px] left-6 relative bg-white">
+ IFSC Code
+ </label>
+ </div>
+ <div className="flex flex-col md:flex-row justify-between mt-3 mb-3 gap-6">
+ <input
+ type="text"
+ className="p-2 w-full focus:outline-none text-[#C4CFDE] border-2 m-1 rounded-[12px] border-[#C4CFDE]"
+ placeholder="Union Bank"
+ />
+
+ <input
+ type="text"
+ className="p-2 w-full focus:outline-none text-[#C4CFDE] border-2 m-1 rounded-[12px] border-[#C4CFDE]"
+ placeholder="Union Bank"
+ />
+ </div>
+ <input className="input" placeholder="Account Number" />
+ <div className="border-dashed border-2 border-gray-300 p-4 text-center mt-4">
+ <input type="file" className="hidden" />
+ Drag your file(s) or{" "}
+ <span className="text-blue-500 cursor-pointer">browse</span>
+ </div>
+ <button className="bg-[#fdba74] text-white w-full py-2 mt-4 rounded-[30px]">
+ Register Now
+ </button>
</div>
</div>
+ </div>
+ </div>
);
-};
+}
export default Seller_reg;
diff --git a/src/pages/Send_otp.jsx b/src/pages/Send_otp.jsx
index 99d7776569de2102405b210ee60cdf63842580e9..7b0d1e73b0b200022bbe31192476e7fcb89244a3 100644
--- a/src/pages/Send_otp.jsx
+++ b/src/pages/Send_otp.jsx
@@ -63,7 +63,7 @@ function Send_otp() {
const phone = location.state?.phone || "No Phone Number Provided";
return (
<>
- <div className="flex flex-col items-center min-h-screen bg-[#E9FAFF] p-4 font-montserrat">
+ <div className="flex flex-col items-center h-screen bg-[#E9FAFF] p-4 font-montserrat">
{/* Header */}
<div className="w-full text-left max-w-6xl px-2 md:px-0 mb-6 mt-6 ml-30 flex">
<h1 className="text-[20px] md:text-[48.31px] font-bold text-[#030A1E] relative">
@@ -71,27 +71,27 @@ function Send_otp() {
</h1>
</div>
- <div className="flex flex-col md:flex-row items-center justify-center w-full max-w-2xl md:max-w-5xl bg-[#FFFFFF] p-2 rounded-[32.6px] shadow-lg relative">
+ <div className="bg-[#FFFFFF] p-6 rounded-[32.6px] shadow-lg w-[90%] h-[85%] flex flex-col md:flex-row py-8 mb-15 ">
{/* Left Section - Image */}
- <div className="w-fit md:w-1/2 flex justify-center md:pr-8 relative gap-1 md:gap-0">
+ <div className="hidden md:flex w-1/2 items-center justify-center p-4 min-w-[300px]">
<img
src={reg}
alt="Login Illustration"
- className="max-w-xs md:max-w-lg p-3"
+ className="w-[80%] lg:w-[80%] xl:w-[80%]"
/>
- <div className="hidden md:block absolute right-0 top-[7px] bottom-0 w-[1px] h-[400px] bg-[#E2E7EE]" />
- </div>
+ </div>
+ <div className="w-[1px] bg-[#C4CFDE] hidden md:block" />
{/* Right Section - OTP Registration */}
- <div className="w-full md:w-1/2 flex flex-col items-center md:pl-0 mt-[40px] md:mt-[70px] p-2 md:p-6">
- <h2 className="text-[18px] md:text-[24.91px] font-semibold mb-[2px] self-center">
+ <div className="w-full md:w-1/2 flex flex-col items-center justify-start p-6 text-[#030A1E] mt-5">
+ <h2 className="text-[18px] md:text-[20px] font-font-primary font-semibold text-[7DEBD9] mb-3 -mt-3 md:mb-6">
Merchant Registration
</h2>
- <p className="text-[16px] md:text-[12.91px] font-semibold mt-[5px] justify-center items-center self-center mb-[18px]">
+ <p className="text-[16px] md:text-[18px] font-font-primary font-semibold text-[7DEBD9] mb-3 -mt-6 md:mb-13">
OTP-Verification
</p>
- <div className="text-[10px] md:text-[12.91px] font-[10px] mt-[5px] justify-center items-center self-center mb-[5px]">
- <span className="text-black">
+ <div className="text-[15px] md:text-[10px] font-font-primary font-semibold text-[7DEBD9] mb-3 -mt-6 md:mb-5">
+ <span className="text-black mt-[10px]">
We Will send you a one time password on
</span>
<br />
@@ -101,7 +101,7 @@ function Send_otp() {
</p>
</span>
<br />
- <div className="mb-[20px]">
+ <div className="mb-[5px]">
<p className="text-center">
<strong>+91 {phone}</strong>
</p>
@@ -116,13 +116,14 @@ function Send_otp() {
value={digit}
onChange={(e) => handleOtpChange(index, e.target.value)}
maxLength="1"
- className="w-5 md:w-10 h-5 md:h-10 rounded-full bg-[#D1D5DB] border-[2px] ml-[5px] md:ml-[10px] border-[#fdba74] hover:border-orange-500 focus:outline-none text-center "
+ className="w-full md:w-10 h-14 md:h-10 text-center rounded-full bg-[#D1D5DB] border-[2px] ml-[5px] md:ml-[10px] border-[#fdba74] hover:border-orange-500 focus:outline-none text-[#45505F] text-lg
+ font-font-primary"
/>))}
- {message.text && <p className={`mt-4 ml-4 text-[10px] font-semibold ${message.color}`}>{message.text} <Infoicon /> </p>}
+ {message.text && <p className={`mt-2 ml-2 text-[10px] font-semibold ${message.color}`}>{message.text} <Infoicon /> </p>}
</div>
</div>
<div className="mb-[10px]">
- <p className="text-[16px] md:text-[20px] font-semibold text-[#675B5B]">
+ <p className="text-[16px] md:text-[15px] font-semibold text-[#675B5B]">
{`00:${countdown < 10 ? `0${countdown}` : countdown}`}
</p>
</div>
@@ -140,36 +141,37 @@ function Send_otp() {
Send Otp
</p>
</div>
- <div>
+ <div className="flex justify-center items-center mt-[-3%] mb-[20px] ">
<button
onClick={verifyOtp}
type="submit"
- className="w-30 md:w-52 px-2 md:px-10 text-[15px] md:text-[20px] bg-[#FFBD69] text-[#030A1E] py-1.5 md:py-3.5 rounded-[20.8px] md:rounded-[32.6px] mb-8 font-semibold focus:outline-none"
+ className="w-[100%] md:w-48 h-14 text-[#030A1E] rounded-full bg-[#FFBD69] shadow-md hover:bg-orange-500 transition text-lg font-font-primary font-extrabold "
>
Verify Otp
</button>
</div>
- </div>
-
- {/* Absolute right-side design, hidden on small screens */}
- <div className="hidden md:flex mr-[-170px] mt-[-320px] ">
- <div className="border-[2px] border-[#171451] right-5 w-10 h-10 bg-[#E2E7EE] rounded-full">
- <div className="rounded-full bg-[#171451] p-1 w-5 h-5 mx-[8px] my-[8px] ">
- <div className="w-[1px] h-[120px] mt-[25px] ml-[5px] bg-[#D1D5DB] border-dotted border-[1px] ">
+ <div className="hidden md:flex ml-[128%] mt-[-70%]">
+ <div className="border-[2px] border-[#171451] right-5 w-10 h-10 bg-[#E2E7EE] rounded-full" />
+ <div className="rounded-full bg-[#171451] p-1 w-5 h-5 mx-[-30px] my-[10px] ">
+ <div className="w-[1px] h-[120px] mt-[25px] ml-[5px] bg-[#D1D5DB] border-dotted border-[1px]" >
<div className="border-[2px] border-[#D1D5DB] right-5 w-10 h-10 mt-[120px] ml-[-20px] bg-[#E2E7EE] rounded-full ">
- <div className="rounded-full bg-[#D1D5DB] p-1 w-5 h-5 mx-[8px] my-[8px] ">
- <div className="w-[1px] h-[120px] mt-[25px] ml-[5px] bg-[#D1D5DB] border-dotted border-[1px] ">
- <div className="border-[2px] border-[#D1D5DB] right-5 w-10 h-10 mt-[120px] ml-[-20px] bg-[#E2E7EE] rounded-full ">
- <div className="rounded-full bg-[#D1D5DB] p-1 w-5 h-5 mx-[8px] my-[8px] "></div>
- </div>
+ <div className="rounded-full bg-[#D1D5DB] p-1 w-5 h-5 mx-[8px] my-[8px] ">
+ <div className="w-[1px] h-[120px] mt-[25px] ml-[5px] bg-[#D1D5DB] border-dotted border-[1px] ">
+ <div className=" border-[2px] border-[#D1D5DB] right-5 w-10 h-10 mt-[120px] ml-[-20px] bg-[#E2E7EE] rounded-full ">
+ <div className="rounded-full bg-[#D1D5DB] p-1 w-5 h-5 mx-[8px] my-[8px] ">
+ </div>
</div>
</div>
+ </div>
</div>
</div>
</div>
</div>
- </div>
</div>
+ </div>
+
+ {/* Absolute right-side design, hidden on small screens */}
+
</div>
</>
);
diff --git a/src/pages/seller_login.jsx b/src/pages/seller_login.jsx
index 448043900b66617ec0d98ad67765325f9ba8cde7..7f927e2ceb398861a2916da02c00636981b4c8b3 100644
--- a/src/pages/seller_login.jsx
+++ b/src/pages/seller_login.jsx
@@ -44,92 +44,94 @@ function Seller_login() {
};
return (
- <div className="flex flex-col items-center min-h-screen bg-[#E9FAFF] p-4 font-montserrat">
+ <div className="flex flex-col items-center h-screen bg-[#E9FAFF] px-6 py-4 font-montserrat">
{/* Header */}
- <div className="w-full text-left max-w-6xl px-2 md:px-0 mb-4 mt-4 ml-10">
- <h1 className="text-[20px] text-center md:text-start md:text-[48.31px] font-[700px] text-[#030A1E] self-start">OMPOI - Seller</h1>
- </div>
-
- <div className="flex flex-col md:flex-row items-center justify-center min-w-9/10 min-h-9/10
- mb-10 bg-[#FFFFFF] p-5 rounded-[32.6px] shadow-lg ">
+ <h1 className="text-4xl font-font-primary font-bold text-[#030A1E] mb-8 text-left w-full max-w-[90%]">OMPOI - Seller</h1>
+ <div className="bg-[#FFFFFF] p-10 rounded-[32.6px] shadow-lg w-[90%] h-[85%] flex flex-col md:flex-row py-[-12%] ">
{/* Left Section - Image */}
- <div className="w-full md:w-1/2 flex justify-start ml-10 relative">
- <img src={key} alt="Login Illustration" className="max-w-xs md:w-lg p-2" />
- <div className="hidden md:block absolute right-0 top-[-7px] bottom-0 w-[1px] left-[450px] h-[400px] bg-[#E2E7EE] "></div>
+ <div className="hidden md:flex w-1/2 items-center justify-center p-4 min-w-[300px]">
+ <img src={key} alt="Login Illustration" className="w-[80%] lg:w-[80%] xl:w-[80%]" />
</div>
+ <div className="w-[1px] bg-[#C4CFDE] hidden md:block "></div>
{/* Right Section - Login Form */}
- <div className="w-full md:w-3/4 h-1/3 flex flex-col items-center md:pl-8 mt-6 md:mt-7">
- <h2 className="text-2xl font-semibold mb-0 self-center p-5 ">Login</h2>
+ <div className="w-full md:w-1/2 flex flex-col items-center justify-start p-6 text-[#030A1E] mt-12">
+ <h2 className="text-4xl md:text-3xl font-font-primary font-semibold text-[7DEBD9] mb-10 -mt-10 md:mb-10 ">Login</h2>
- <form className="w-full max-w-3/4 p-4">
- <div className="relative mb-8">
- <label
- className={`text-[10px] md:text-[18px] text-[#8B9BB1] p-[0.5px] px-1 relative top-1 left-6 bg-white ${
- merchantIdError ? "text-red-500" : "text-green-500"
- }`}
- >
- Merchant ID
- </label>
- <input
- type="text"
- id="merchantId"
- className={`w-full p-2 md:p-3 border border-[#C4CFDE] rounded-[12px] mt-[-10px] text-[10px] md:text-[18px] focus:outline-none ${
- merchantIdError ? "border-red-500" : "border-green-500 "
- }`}
- required
- placeholder="Enter ID"
- value={merchantId}
- onChange={(e) => {
- setMerchantId(e.target.value);
- validateMerchantId(e.target.value);
- }}
- />
- <span className="flex inset-y-0 justify-end">
- <img src={icon} alt="icon" className="relative items-center w-3 md:w-5 h-3 md:h-5 mt-[-25px] md:mt-[-35px] mr-[12px] md:mr-[20px]" />
- </span>
- {merchantIdError && <p className="text-red-500 text-[10px]">{merchantIdError} <Infoicon /> </p>}
+ <form className="w-full max-w-md">
+ <div className="relative w-full mb-8">
+ <div className="relative border-2 rounded-lg border-[#C4CFDE] bg-transparent">
+ <label
+ className={`absolute -top-3 left-4 px-2 bg-[#C4CFDE] border border-[#C4CFDE] rounded-md text-sm text-[#45505F] font-font-primary font-medium ${
+ merchantIdError ? "text-red-500" : "text-green-500"
+ }`}
+ >
+ Merchant ID
+ </label>
+ <input
+ type="text"
+ id="merchantId"
+ className={`w-full h-14 px-3 pr-12 bg-transparent text-[#45505F] text-lg focus:outline-none font-font-primary ${
+ merchantIdError ? "border-red-500" : "border-green-500 "
+ }`}
+ required
+ placeholder="Enter ID"
+ value={merchantId}
+ onChange={(e) => {
+ setMerchantId(e.target.value);
+ validateMerchantId(e.target.value);
+ }}
+ />
+ <span className="flex inset-y-0 justify-end">
+ <img src={icon} alt="icon" className="relative items-center w-3 md:w-5 h-3 md:h-5 mt-[-25px] md:mt-[-35px] mr-[12px] md:mr-[20px]" />
+ </span>
+ {merchantIdError && <p className="text-red-500 text-[10px]">{merchantIdError} <Infoicon /> </p>}
+ </div>
</div>
- <div className="relative mb-4">
- <label
- className={`text-[10px] md:text-[18px] text-[#8B9BB1] p-[0.5px] px-1 relative top-1 left-6 bg-white ${
- passwordError ? "text-red-500" : "text-green-500"
- }`}
- >
- Password
- </label>
- <input
- type={showPassword ? "text" : "password"}
- id="password"
- className={`w-full p-2 md:p-3 border border-[#C4CFDE] rounded-[12px] mt-[-10px] text-[10px] md:text-[18px] focus:outline-none ${
- passwordError ? "border-red-500" : "border-green-500 "
- }`}
- required
- placeholder="Enter your password"
- value={password}
- onChange={(e) => {
- setPassword(e.target.value);
- validatePassword(e.target.value);
- }}
- />
- <span className="flex inset-y-0 justify-end cursor-pointer" onClick={() => setShowPassword(!showPassword)}>
- <img src={showPassword ? icon2 : icon1} alt="icon" className="relative items-center w-3 md:w-5 h-3 md:h-5 mt-[-25px] md:mt-[-35px] mr-[12px] md:mr-[20px]" />
- </span>
- {passwordError && <p className="text-red-500 text-[10px]">{passwordError} <Infoicon /></p>}
+ <div className="relative w-full mb-2">
+ <div className="relative border-2 rounded-lg border-[#C4CFDE] bg-transparent ">
+ <label
+ className={`absolute -top-3 left-4 px-2 bg-[#C4CFDE] border border-[#C4CFDE] rounded-md text-sm font-font-primary font-medium text-[#C4CFDE] ${
+ passwordError ? "text-red-500" : "text-green-500"
+ }`}
+ >
+ Password
+ </label>
+ <input
+ type={showPassword ? "text" : "password"}
+ id="password"
+ className={`w-full h-14 px-4 pr-12 bg-transparent text-[#45505F] text-lg focus:outline-none font-font-primary ${
+ passwordError ? "border-red-500" : "border-green-500 "
+ }`}
+ required
+ placeholder="Enter your password"
+ value={password}
+ onChange={(e) => {
+ setPassword(e.target.value);
+ validatePassword(e.target.value);
+ }}
+ />
+ <span className="flex inset-y-0 justify-end cursor-pointer" onClick={() => setShowPassword(!showPassword)}>
+ <img src={showPassword ? icon2 : icon1} alt="icon" className="relative items-center w-3 md:w-5 h-3 md:h-5 mt-[-25px] md:mt-[-35px] mr-[12px] md:mr-[20px]" />
+ </span>
+ {passwordError && <p className="text-red-500 text-[10px]">{passwordError} <Infoicon /></p>}
+ </div>
</div>
- <div className="flex justify-between w-full text-sm mb-8">
+
+ <div className="flex justify-between w-full text-sm mb-4">
<p className="text-[#030A1E] text-[10px] md:text-[12px] hover:underline cursor-pointer" >Forgot Password?</p>
<p className="text-[#FFBD69] text-[10px] md:text-[12px] hover:underline cursor-pointer" onClick={goto} >Create an Account</p>
</div>
- <div className="flex justify-center items-center">
- <button className="w-52 px-10 bg-yellow-500 text-[#020617] py-3.5 rounded-[32.6px] mb-5 mt-2 font-semibold">
+ <div className="mt-8 flex justify-center">
+ <button className="p-4 w-[100%] md:w-48 h-14 text-[#030A1E] rounded-full bg-[#FFBD69] shadow-md hover:bg-orange-500 transition text-lg font-font-primary font-extrabold">
Sign in
</button>
</div>
- <div className="flex justify-center items-center">
- <button className="w-52 px-10 border border-[#fdba74] text-[#020617] py-3.5 rounded-[32.6px] font-semibold">
+ {/*Check Status button */}
+ <div className="mt-3 flex justify-center">
+ <button className="p-4 w-[100%] md:w-48 h-14 text-[#030A1E] font-bold rounded-full bg-[#FFffff] border-[#FFBD69] border-2 shadow-md hover:bg-orange-500 transition text-lg font-font-primary md:font-extrabold">
Check Status
</button>
</div>