From 83e5c790aabc8ddde99cd6d45d9fcf545864f290 Mon Sep 17 00:00:00 2001
From: Muba006 <mubamuzeen0876@gmail.com>
Date: Tue, 11 Mar 2025 15:16:17 +0530
Subject: [PATCH] building a seller-login page finsh a design 80percent balance
finshed
---
src/App.jsx | 2 +
src/assets/seller-login/eye.svg | 3 ++
src/assets/seller-login/mail.svg | 4 ++
src/pages/Create_account.jsx | 12 +++++
src/pages/seller_login.jsx | 90 +++++++++++++++++++++++++++-----
5 files changed, 98 insertions(+), 13 deletions(-)
create mode 100644 src/assets/seller-login/eye.svg
create mode 100644 src/assets/seller-login/mail.svg
create mode 100644 src/pages/Create_account.jsx
diff --git a/src/App.jsx b/src/App.jsx
index d9e5e6f..c07f85d 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,6 +1,7 @@
import React from "react";
import Landing from "./pages/Landing";
import Seller_login from "./pages/seller_login";
+import Create_account from "./pages/Create_account";
import { Route, Routes } from "react-router-dom";
function App() {
@@ -8,6 +9,7 @@ function App() {
<>
<Routes>
<Route path="/seller-login" element={<Seller_login />} />
+ <Route path="/create-account" element={<Create_account />} />
<Route path="/" element={<Landing />} />
</Routes>
diff --git a/src/assets/seller-login/eye.svg b/src/assets/seller-login/eye.svg
new file mode 100644
index 0000000..b99a13d
--- /dev/null
+++ b/src/assets/seller-login/eye.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.3743 0.592098C22.9568 0.183537 22.2858 0.187233 21.8729 0.600411L17.625 4.85055C15.9336 3.94485 14.054 3.44962 12.1003 3.44962C7.2019 3.44962 2.76985 6.56269 0.598807 11.4526C0.477924 11.7249 0.477924 12.0356 0.598807 12.3079C1.57943 14.5166 3.02135 16.3628 4.75917 17.7233L0.817631 21.667C0.401593 22.0833 0.405382 22.7567 0.826032 23.1683C1.24357 23.5769 1.91452 23.5732 2.32748 23.16L6.57534 18.9099C8.26687 19.8156 10.1465 20.3109 12.1003 20.3109C16.9986 20.3109 21.4307 17.1978 23.6017 12.3079C23.7226 12.0356 23.7226 11.7249 23.6017 11.4526C22.6211 9.24385 21.1791 7.39762 19.4412 6.03706L23.3827 2.09343C23.7988 1.67716 23.795 1.00371 23.3743 0.592098ZM16.0528 6.42366C14.8152 5.86009 13.4777 5.55737 12.1003 5.55737C8.20254 5.55737 4.62504 7.98126 2.72421 11.8803C3.59511 13.6668 4.81796 15.1435 6.26231 16.2194L8.46502 14.0155C8.09639 13.3893 7.88495 12.6594 7.88495 11.8802C7.88495 9.55212 9.77221 7.66486 12.1003 7.66486C12.8787 7.66486 13.6078 7.87585 14.2336 8.24378L16.0528 6.42366ZM15.7355 9.7448L17.938 7.54112C19.3824 8.61699 20.6054 10.0938 21.4763 11.8803C19.5755 15.7794 15.998 18.2033 12.1003 18.2033C10.7227 18.2033 9.38514 17.9006 8.14746 17.3369L9.96685 15.5165C10.5927 15.8845 11.3218 16.0955 12.1003 16.0955C14.4283 16.0955 16.3156 14.2082 16.3156 11.8802C16.3156 11.1009 16.1041 10.371 15.7355 9.7448ZM12.6368 9.84146C12.4655 9.79652 12.2857 9.77258 12.1003 9.77258C10.9363 9.77258 9.99267 10.7162 9.99267 11.8802C9.99267 12.066 10.0167 12.2462 10.0618 12.4178L12.6368 9.84146ZM11.5636 13.9189L14.1387 11.3424C14.1839 11.5141 14.208 11.6944 14.208 11.8802C14.208 13.0443 13.2644 13.9879 12.1003 13.9879C11.9148 13.9879 11.735 13.9639 11.5636 13.9189Z" fill="#8B9BB1"/>
+</svg>
diff --git a/src/assets/seller-login/mail.svg b/src/assets/seller-login/mail.svg
new file mode 100644
index 0000000..7279407
--- /dev/null
+++ b/src/assets/seller-login/mail.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.97611 1.83539H20.4159C21.5461 1.83539 22.4708 2.7048 22.4708 3.76741V15.3595C22.4708 16.4221 21.5461 17.2916 20.4159 17.2916H3.97611C2.84588 17.2916 1.92114 16.4221 1.92114 15.3595V3.76741C1.92114 2.7048 2.84588 1.83539 3.97611 1.83539Z" stroke="#8B9BB1" stroke-width="2.12136" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.4708 3.76746L12.196 10.5295L1.92114 3.76746" stroke="#8B9BB1" stroke-width="2.12136" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/pages/Create_account.jsx b/src/pages/Create_account.jsx
new file mode 100644
index 0000000..45b7ac3
--- /dev/null
+++ b/src/pages/Create_account.jsx
@@ -0,0 +1,12 @@
+import React from 'react'
+
+const Create_account = () => {
+ return (
+ <div>
+ <h1 className='text-9xl'> Hello</h1>
+
+ </div>
+ )
+}
+
+export default Create_account
diff --git a/src/pages/seller_login.jsx b/src/pages/seller_login.jsx
index 0e53058..329a610 100644
--- a/src/pages/seller_login.jsx
+++ b/src/pages/seller_login.jsx
@@ -1,19 +1,83 @@
-import React from 'react';
+import React from "react";
import key from "../assets/seller-login/first!.svg";
+import icon2 from "../assets/seller-login/eye.svg";
+import icon from "../assets/seller-login/mail.svg";
+import { useNavigate } from "react-router-dom";
function Seller_login() {
- return (
- <>
- <div className="relative bg-[#E9FAFF] p-4 flex flex-col md:flex-row font-montserrat" >
- <div className="relative w-full" >
- <h2 className="font-bold text-[15px] md:text-5xl px-2 md:px-16 py-3 md:py-10 ">OMPOI-Seller</h2>
- <div className=" bg-[#FFFFFF] grid grid-cols-1 md:grid-cols-2 gap-4 p-4 items-center shadow-lg rounded-[15.3px] md:rounded-[32.6px] ">
- <img src={key} alt="illutration" className="size-[180px] md:size-[480px] px-4 md:px-12" />
- <div><hr className="bg-[#E2E7EE] rotate-90 "></hr></div>
- <div className="flex flex-col p-4 bg-[#FFFFFF] border-none"></div>
+ const navigate = useNavigate();
+ const goto = () => {
+ navigate("/create-account");
+ }
+ return (
+ <>
+ <div className="relative bg-[#E9FAFF] p-4 flex flex-col md:flex-row font-montserrat">
+ <div className="relative w-full">
+ <h2 className="font-bold text-[15px] md:text-5xl px-2 md:px-10 py-3 md:py-10 ">
+ OMPOI-Seller
+ </h2>
+ <div className=" bg-[#FFFFFF] grid grid-cols-1 md:grid-cols-3 items-center justify-center gap-3 p-10 shadow-lg rounded-[15.3px] md:rounded-[32.6px] left-[10px] right-[10px] ">
+ <img
+ src={key}
+ alt="illutration"
+ className="size-full md:size-[380px] px-4 md:px-12"
+ />
+ <div className="hidden md:flex bg-[#E2E7EE] w-[3px] h-full ml-[180px] "></div>
+ <div className="flex flex-col p-4 bg-[#FFFFFF] border-none">
+ <form className="mt-0 md:mt-[-150px] ml-0 md:ml-[-150px] ">
+ <div className="flex justify-center items-center mt-[70px]">
+ <div className="font-[600px] text-center text-[16.48px] mt-[50px] md:text-[33.91px] mb-[15px] md:mb-[30px] ">LOGIN</div>
</div>
+ <div>
+ <label
+ htmlFor="merchant_id"
+ className="text-[10px] md:text-[18px] text-[#45505F] p-[0.5px] bg-white relative top-1 left-6 px-1"
+ >
+ Merchant ID
+ </label>
+ <input
+ type="text"
+ className="w-full p-2 md:p-3 border border-[#C4CFDE] rounded-[12px] mt-[-10px] text-[10px] md:text-[18px] focus:outline-none"
+ placeholder="Enter id"
+ required
+ />
+ <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>
+ <br />
+ <div>
+ <label
+ htmlFor="password"
+ className="text-[10px] md:text-[18px] text-[#45505F] p-[0.5px] bg-white relative top-1 left-6 px-1 "
+ >
+ Password
+ </label>
+ <input
+ type="text"
+ className="w-full p-2 md:p-3 border border-[#C4CFDE] rounded-[12px] mt-[-10px] text-[10px] md:text-[18px] focus:outline-none"
+ placeholder="Enter your password"
+ required
+ />
+ <span className="flex inset-y-0 justify-end ">
+ <img src={icon2} 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>
+ <div className="flex flex-col md:flex-row gap-1 md:gap-3 items-center justify-center md:justify-between p-3 md:p-4">
+ <span className="relative font-[300px] md:font-[600px] text-[10px] md:text-[18.26px] ">Forgot Password</span>
+ <span className="relative font-[300px] md:font-[600px] text-[10px] md:text-[18.26px] cursor-pointer hover:text-[#FFBD69] " onClick={goto}>Create Account</span>
+ </div>
+ <div className="flex justify-center p-4">
+ <button className="bg-[#FFBD69] pb-[13.04px] pt-[13.04px] pr-[39.12px] pl-[39.12px] w-full h-flt rounded-[32.60px] inline-flex justify-center items-center text-[20.87px] font-[800px] ">Sign in</button>
+ </div>
+ <div className="flex justify-center p-4">
+ <button className="bg-white pb-[13.04px] pt-[13.04px] pr-[39.12px] pl-[39.12px] w-fit h-fit rounded-[32.60px] border-[#FFBD69] border-2 inline-flex justify-center items-center ">check Status</button>
+ </div>
+ </div>
+ </div>
+ </form>
</div>
+ </div>
</div>
- </>
- )
+ </div>
+ </>
+ );
}
-export default Seller_login;
\ No newline at end of file
+export default Seller_login;
--
GitLab