Add files via upload

src/Components/All Routes/AllRoutes.jsx

@@ -13,7 +13,7 @@ import Profile from "../Profile/Profile";
 import Login from "../Profile/Login";
 import Supplier from "../Supplier/Supplier";
 import Footer from "../Footer/Footer";
-
+import StartSellingLogin from "../Supplier/StartSelling_LoginPage";
 export default function AllRoutes() {
   return (
     <>
@@ -26,6 +26,7 @@ export default function AllRoutes() {
         <Route path="/profile" element={<Profile />} />
         <Route path="/login" element={<Login />} />
         <Route path="/supplier" element={<Supplier />} />
+        <Route path="/StartSellingLogin" element={<StartSellingLogin />} />
       </Routes>
       <Routes>
         <Route path="/checkout" element={<Checkout />} />

src/Components/Supplier/StartSelling_LoginPage.css

@@ -0,0 +1,46 @@
+.StartSelling_Main_Division {
+  display: flex;
+  justify-content: flex-start;
+  width: 100vw;
+  height: 100vh;
+  border: 2px solid red;
+}
+.StartSelling_Login_First_Div_Meesho_Background {
+  height: 100%;
+  width: 50%;
+}
+.StartSelling_Login_First_Div_image {
+  height: 100%;
+  width: 100%;
+}
+.StartSellingLoginForm {
+  display: flex;
+  justify-content: center;
+  width: 50%;
+}
+.StartSellingLoginForm_Box {
+  text-align: center;
+  border: 2px solid whitesmoke;
+  width: 80%;
+  height: 70%;
+  margin-top: 10%;
+}
+.StartSellingLoginForm_Email {
+  text-align: center;
+  min-width: 80%;
+  min-height: 3rem;
+  margin-bottom: 10%;
+}
+.LoginForm_Submission {
+  display: flex;
+  justify-content: space-evenly;
+}
+.Blue-colour-text {
+  color: rgb(55, 43, 226);
+}
+.Login_FormSubmit {
+  background-color: rgb(75, 75, 134);
+  color: white;
+  min-width: 5rem;
+  min-height: 2.2rem;
+}

src/Components/Supplier/StartSelling_LoginPage.jsx

@@ -0,0 +1,70 @@
+import React from "react";
+import meesho from "./meesho_full_background.jpg";
+import "./StartSelling_LoginPage.css";
+import { useState } from "react";
+const StartSellingLogin = () => {
+  let success = "Login Successful!";
+  let fail = "Login Failed Please Enter the Correct Details";
+  const [email, setEmail] = useState("");
+  const [pass, setPass] = useState("");
+  const myFunction = () => {
+    var x = document.getElementById("myInput");
+    if (x.type === "password") {
+      x.type = "text";
+    } else {
+      x.type = "password";
+    }
+  };
+  const handleSubmit = e => {
+    e.preventDefault();
+    let mail = localStorage.getItem("Email").replace(/"/g, "");
+    let pa = localStorage.getItem("Password").replace(/"/g, "");
+    alert(pass == pa && mail == email ? success : fail);
+  };
+  return (
+    <div className="StartSelling_Main_Division">
+      <div className="StartSelling_Login_First_Div_Meesho_Background">
+        <img
+          src={meesho}
+          alt=""
+          className="StartSelling_Login_First_Div_image"
+        ></img>
+      </div>
+      <div className="StartSellingLoginForm">
+        <div className="StartSellingLoginForm_Box">
+          <form onSubmit={handleSubmit}>
+            <h2>Login to your supplier panel</h2>
+            <br />
+            <input
+              type="email"
+              className="StartSellingLoginForm_Email"
+              placeholder="Email"
+              value={email}
+              onChange={event => setEmail(event.target.value)}
+            />
+            <br />
+            <input
+              type="password"
+              id="myInput"
+              className="StartSellingLoginForm_Email"
+              placeholder="Password"
+              value={pass}
+              onChange={event => setPass(event.target.value)}
+            />
+            <br />
+            <input type="checkbox" onClick={myFunction} />
+            Show Password
+            <br />
+            <br />
+            <br />
+            <div className="LoginForm_Submission">
+              <div className="Blue-colour-text">Forgot Password ?</div>
+              <button className="Login_FormSubmit">Log In</button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default StartSellingLogin;

src/Components/Supplier/Supplier.jsx

@@ -6,6 +6,8 @@ import img3 from "./main-img-3.png";
 import img4 from "./main-img-4.png";
 import img5 from "./main-img-5.png";
 import numimg from "./numbers.png";
+import SupplierForm from "./SupplierForm";
+
 import "./supplier.css";
 let images = [img1, img1, img2, img3, img4, img5];
 let data = [
@@ -42,6 +44,7 @@ let data = [
 ];
 export default function Supplier() {
   let [ind, setInd] = React.useState(0);
+  let [show, setShow] = React.useState(true);
   return (
     <>
       <main id="supplier-navigation">
@@ -70,26 +73,36 @@ export default function Supplier() {
             <p onClick={() => setInd(4)}> Shipping &amp; Returns</p>
             <p onClick={() => setInd(5)}>Grow Business</p>
           </div>
-          <button>Login</button>
-          <button>Start Selling</button>
+          <Link to="/StartSellingLogin">
+            <button>Login</button>
+          </Link>
+          <button onClick={() => setShow(!show)}>Start Selling</button>
         </nav>
         <h1>Meesho Supplier Page</h1>
       </main>
-      <article id="supplier-form">
-        <div>
-          {" "}
-          <h1>
-            {data[ind][0]} <span>{data[ind][1]}</span>
-          </h1>
-          <p style={{ lineHeight: "150%", fontSize: "14px" }}>{data[ind][2]}</p>
-          <p id="form-para">
-            +91 <input type="text" placeholder="Enter Your Mobile Number" />{" "}
-            <button>Start Selling</button>
-          </p>
-        </div>
-        <img src={images[ind]} alt="" />
-      </article>
-      <img src={numimg} alt="" />
+      {show ? (
+        <>
+          <article id="supplier-form">
+            <div>
+              {" "}
+              <h1>
+                {data[ind][0]} <span>{data[ind][1]}</span>
+              </h1>
+              <p style={{ lineHeight: "150%", fontSize: "14px" }}>
+                {data[ind][2]}
+              </p>
+              <p id="form-para">
+                +91 <input type="text" placeholder="Enter Your Mobile Number" />{" "}
+                <button>Start Selling</button>
+              </p>
+            </div>
+            <img src={images[ind]} alt="" />
+          </article>
+          <img src={numimg} alt="" />{" "}
+        </>
+      ) : (
+        <SupplierForm />
+      )}
     </>
   );
 }