From 020fb310610b4fb2ec880ba103da6ba8743342f5 Mon Sep 17 00:00:00 2001
From: Muba006 <mubamuzeen0876@gmail.com>
Date: Tue, 18 Mar 2025 00:51:58 +0530
Subject: [PATCH] alignment pending in registertion web page
---
src/pages/Create_account.jsx | 32 ++++-----
src/pages/Seller_reg.jsx | 121 ++++++++++++++++++++++++++++++++---
src/pages/seller_login.jsx | 23 +++----
3 files changed, 140 insertions(+), 36 deletions(-)
diff --git a/src/pages/Create_account.jsx b/src/pages/Create_account.jsx
index 43e79c8..6199113 100644
--- a/src/pages/Create_account.jsx
+++ b/src/pages/Create_account.jsx
@@ -48,21 +48,21 @@ function Create_account() {
<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">
{/* 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-3" />
+ <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>
{/* Right Section - OTP Registration */}
- <div className="w-full md:w-1/2 flex flex-col items-center md:pl-0 mt-[40px] md:mt-7 p-2 md:p-15">
- <h2 className="text-[18px] md:text-[24.91px] font-semibold mb-2 self-center">
+ <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">
Merchant Registration
</h2>
- <p className="text-[16px] md:text-[12.91px] font-semibold mt-[5px] justify-center items-center self-center mb-[50px]">
+ <p className="text-[16px] md:text-[12.91px] font-semibold mt-[5px] justify-center items-center self-center mb-[10px] md:mb-[50px]">
OTP-Verification
</p>
- <form className="w-full max-w-sm" onSubmit={handleSendOtp}>
- <div className="relative mb-8">
+ <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"
@@ -71,15 +71,15 @@ function Create_account() {
Phone Number
</label>
<input
- type="text"
- id="phoneNumber"
- value={phoneNumber}
- onChange={handlePhoneNumberChange}
- maxLength="10"
- required
- className={`w-full p-2 md:p-3 border border-[#C4CFDE] rounded-[12px] mt-[-10px] text-[10px] md:text-[18px] focus:outline-none ${phoneNumberError ? "border-red-500" : "border-green-500 "} `}
- placeholder="+91"
- />
+ 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>
)}
@@ -97,7 +97,7 @@ function Create_account() {
</div>
{/* Absolute right-side design, hidden on small screens */}
- <div className="hidden md:flex mr-[-170px] mt-[-250px]">
+ <div className="hidden md:flex mr-[-170px] mt-[-300px]">
<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]" >
diff --git a/src/pages/Seller_reg.jsx b/src/pages/Seller_reg.jsx
index 887ccfb..6036807 100644
--- a/src/pages/Seller_reg.jsx
+++ b/src/pages/Seller_reg.jsx
@@ -1,15 +1,118 @@
-import React from "react";
-
-function Seller_reg() {
+import { React, useState } from "react";
+function Seller_reg () {
return (
- <>
- <div className="bg-[#E9FAFF] flex w-full h-svh justify-center md:justify-normal font-montserrat">
- <div className="m-10 md:m-20 text-[#030A1E] text-center md:text-start ">
- <p className="font-[300px] md:font-[600px] text-[24px] md:text-[48.31px] ">OMPOI-Seller</p>
+ <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>
+ 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>
+ 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" />
+ </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>
+ {/* 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>
+ </div>
</div>
</div>
- </>
+
);
-}
+};
export default Seller_reg;
diff --git a/src/pages/seller_login.jsx b/src/pages/seller_login.jsx
index de61293..4480439 100644
--- a/src/pages/seller_login.jsx
+++ b/src/pages/seller_login.jsx
@@ -46,22 +46,23 @@ function Seller_login() {
return (
<div className="flex flex-col items-center min-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">
- <h1 className="text-[48.31px] font-[700px] text-[#030A1E] self-start">OMPOI - Seller</h1>
+ <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 w-screen h-screen bg-[#FFFFFF] p-2 rounded-[32.6px] shadow-lg">
+ <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 ">
{/* Left Section - Image */}
- <div className="w-full md:w-1/2 flex justify-center md:pr-8 relative">
- <img src={key} alt="Login Illustration" className="max-w-xs md:max-w-sm p-2" />
- <div className="hidden md:block absolute right-0 top-[-7px] bottom-0 w-[1px] h-[460px] bg-[#E2E7EE] "></div>
+ <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>
{/* Right Section - Login Form */}
- <div className="w-full md:w-1/2 flex flex-col items-center md:pl-8 mt-6 md:mt-7 p-15">
- <h2 className="text-2xl font-semibold mb-10 self-center">Login</h2>
+ <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>
- <form className="w-full max-w-sm">
+ <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 ${
@@ -119,8 +120,8 @@ function Seller_login() {
</div>
<div className="flex justify-between w-full text-sm mb-8">
- <p className="text-[#030A1E] hover:underline cursor-pointer" >Forgot Password?</p>
- <p className="text-[#FFBD69] hover:underline cursor-pointer" onClick={goto} >Create an Account</p>
+ <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">
--
GitLab