unfinished sign up

src/App.js

@@ -12,6 +12,7 @@ import Footer from "./components/global/Footer";
 // IMPORT PAGES
 import Main from "./pages/Main";
 import SignIn from "./pages/SignIn";
+import SignUp from "./pages/SignUp";
 
 const App = () => {
   return (
@@ -20,6 +21,7 @@ const App = () => {
       <Routes>
         <Route path="/" element={<Main />} />
         <Route path="/sign-in" element={<SignIn />} />
+        <Route path="/sign-up" element={<SignUp />} />
       </Routes>
       <Footer />
     </div>

src/components/sign/RegForm.js

@@ -0,0 +1,50 @@
+// IMPORT MODULES
+import React from "react";
+
+const RegForm = () => {
+  return (
+    <section className="reg">
+      <form>
+        <div className="reg-top">
+          <h2 className="reg-title">Регистрация</h2>
+          <div className="reg-input-wrapper">
+            <div className="reg-input-block">
+              <label htmlFor="surname">
+                Фамилия<span>*</span>
+              </label>
+              <input type="text" placeholder="Amanow" id="surname" />
+            </div>
+            <div className="reg-input-block">
+              <label htmlFor="name">
+                Имя<span>*</span>
+              </label>
+              <input type="text" placeholder="Aman" id="name" />
+            </div>
+            <div className="reg-input-block">
+              <label htmlFor="fname">
+                Отчество<span>*</span>
+              </label>
+              <input type="text" placeholder="Amanowich" id="fname" />
+            </div>
+            <div className="reg-input-block">
+              <label htmlFor="date">
+                Дата рождения<span>*</span>
+              </label>
+              <input type="text" placeholder="дд / мм / гггг" id="date" />
+            </div>
+            <div className="reg-input-block split">
+              <div className="split-wrapper">
+                <label htmlFor="serie">
+                  Серия паспорта<span>*</span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="reg-bottom"></div>
+      </form>
+    </section>
+  );
+};
+
+export default RegForm;

src/pages/SignIn.js

@@ -5,7 +5,7 @@ import React from "react";
 import LogoBg from "../components/global/LogoBg";
 
 // IMPORT PERSONAL COMPONENTS
-import SignForm from "../components/signIn/SignForm";
+import SignForm from "../components/sign/SignForm";
 
 const SignIn = () => {
   return (

src/pages/SignUp.js

@@ -0,0 +1,19 @@
+// IMPORT IMAGES
+import React from "react";
+
+// IMPORT PERSONAL COMPONENTS
+import RegForm from "../components/sign/RegForm";
+
+const SignUp = () => {
+  return (
+    <section className="sign-up">
+      <div className="container">
+        <div className="sign-up-inner">
+          <RegForm />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default SignUp;

src/styles/_sign-up.scss

@@ -0,0 +1,3 @@
+.pass-select {
+  max-width: 10rem;
+}

src/styles/style.scss

@@ -10,3 +10,4 @@
 @import "./main";
 @import "./logo-bg";
 @import "./sing-in";
+@import "./sign-up";