reza added Auth

src/router.tsx

@@ -6,6 +6,7 @@ import {
   Redirect,
 } from "react-router-dom";
 
+import Auth from './views/Auth/index';
 import Home from "./views/Home/index";
 
 
@@ -16,6 +17,15 @@ function router(){
           <Route exact path={'/'}>
             <Home />
           </Route>
+          <Route exact path={'/sign-up'}>
+            <Auth page="signup" />
+          </Route>
+          <Route exact path={'/login'}>
+            <Auth page="login" />
+          </Route>
+          <Route exact path={'/profile'}>
+            <Auth page="profile" />
+          </Route>
         </Switch>
       </Router>
     );

src/views/Auth/Login/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function Login() {
+  return (
+    <div>
+      
+    </div>
+  )
+}

src/views/Auth/Profile/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function Profile() {
+  return (
+    <div>
+      
+    </div>
+  )
+}

src/views/Auth/SignUp/index.scss

@@ -0,0 +1,89 @@
+.signup {
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  font-family: numeralLight;
+  img {
+    transform: rotate(-90deg);
+  }
+  background: linear-gradient(
+    135deg,
+    hsla(0, 0%, 31%, 1) 0%,
+    hsla(0, 0%, 0%, 1) 100%
+  );
+  background: -moz-linear-gradient(
+    135deg,
+    hsla(0, 0%, 31%, 1) 0%,
+    hsla(0, 0%, 0%, 1) 100%
+  );
+  background: -webkit-linear-gradient(
+    135deg,
+    hsla(0, 0%, 31%, 1) 0%,
+    hsla(0, 0%, 0%, 1) 100%
+  );
+  .footer {
+    position: fixed;
+    bottom: 0px;
+    left: 0px;
+  }
+}
+
+@media screen and (min-width: 1441px) {
+  .signup {
+    section {
+      width: 410px;
+      b {
+        color: white;
+        font-size: 20px;
+        margin-bottom: 30px;
+        font-weight: 500;
+        p{
+          font-size: 16px;
+        }
+      }
+      input {
+        text-align: center;
+        background-color: #2a2a2a;
+        border: 1px solid #a2a2a2;
+        border-radius: 8px;
+        font-size: 23px;
+        padding: 8px 0px;
+        color: white;
+        direction: ltr;
+        &:focus {
+          border: 1px solid #84de56;
+          &::placeholder {
+            color: #84de56;
+            opacity: 0.3;
+          }
+        }
+      }
+      button {
+        margin-top: 25px;
+        background-color: #84de56;
+        color: white;
+        font-size: 20px;
+        padding: 10px 0px;
+        border: 0px;
+        border-radius: 10px;
+      }
+    }
+    &__info {
+      width: 350px;
+      margin: 20px auto 0px;
+      text-align: center;
+      color: white;
+      font-size: 13px;
+      a {
+        color: #84de56;
+      }
+    }
+    &__back {
+      margin-bottom: 60px;
+      a {
+        color: white;
+        font-size: 13px;
+      }
+    }
+  }
+}

src/views/Auth/SignUp/index.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from "react";
+import Navbar from "../../../components/Navbar/index";
+import Footer from "../../../views/Home/Footer/index";
+import { Link } from "react-router-dom";
+import arrow from "../../../assets/icons/dropdown.png";
+
+import "./index.scss";
+
+interface SignUpFields {
+  phonenumber?: String;
+  otp?: String;
+}
+
+export default function SignUp() {
+  const [level, setLevel] = useState("otp");
+  const [signUpFiels, setSignUpFiels] = useState<SignUpFields | undefined>(
+    undefined
+  );
+
+  return (
+    <div className="signup d-flex flex-column align-items-center justify-content-center">
+      <Navbar />
+      {level === "phonenumber" && (
+        <section className="d-flex flex-column">
+          <div className="signup__back d-flex justify-content-end">
+            <Link to="/sign-up" className="d-flex align-items-center">
+              بازگشت به صفحه قبل
+              <img src={arrow} />
+            </Link>
+          </div>
+          <b>
+            ثبت نام
+            <br />
+            لطفا شماره موبایل خود را وارد کنید.
+          </b>
+          <input type="text" inputMode="numeric" placeholder="09123456789" />
+          <button type="submit">ادامه</button>
+          <p className="signup__info">
+            با ثبت نام در سرویس ویدئویی دانوین قوانین
+            <Link to="/"> شرایط استفاده و حریم خصوصی </Link>
+            استفاده از سرویس های ما را می‌پذیرید
+          </p>
+        </section>
+      )}
+      {level === "otp" && (
+        <section className="d-flex flex-column">
+          <div className="signup__back d-flex justify-content-end">
+            <Link to="/sign-up" className="d-flex align-items-center">
+              بازگشت به صفحه قبل
+              <img src={arrow} />
+            </Link>
+          </div>
+          <b>
+            تاییدیه شماره موبایل
+            <br />
+            <p>
+              کد ارسال شده به شماره {signUpFiels?.phonenumber} را وارد کنید.
+            </p>
+          </b>
+          <input type="text" inputMode="numeric" />
+          <button type="submit">ادامه</button>
+          <p className="signup__info">
+            
+          </p>
+        </section>
+      )}
+      <Footer />
+    </div>
+  );
+}

src/views/Auth/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import SignUp from './SignUp/index';
+import Profile from './Profile/index';
+import Login from './Login/index';
+
+export default function Auth(props : any) {
+  const {page} = props;
+  return (
+    <>
+      { page === 'signup' && <SignUp /> }
+      { page === 'login' && <Login /> }
+      { page === 'profile' && <Profile /> }
+    </>
+  )
+}