Register page layout prepared.

pages/components/LoginArea.js

@@ -5,7 +5,7 @@ import { faUserCheck, faBuilding } from '@fortawesome/free-solid-svg-icons';
 const LoginArea = props => {
     const isDeveloperAccount = props.accountType === "developer"
     return (
-        <Link href="/">
+        <Link href="/register" accountType={props.accountType} >
             <span className={isDeveloperAccount ? "login-area developer-account" : "login-area company-account"}>
                 <span>Utwórz kontro {isDeveloperAccount ? 'programisty' : 'firmy'}</span>
                 <span className="account-icon">{isDeveloperAccount ? <FontAwesomeIcon icon={faUserCheck} /> : <FontAwesomeIcon icon={faBuilding} />}</span>

pages/components/RegisterForm.js

@@ -0,0 +1,43 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faUser, faBuilding, faLock } from '@fortawesome/free-solid-svg-icons';
+
+
+const RegisterForm = props => {
+    const isDeveloperAccount = props.accountType === "developer";
+    const isDeveloperIcon = <span>{isDeveloperAccount ? <FontAwesomeIcon icon={faUser} /> : <FontAwesomeIcon icon={faBuilding} /> }</span>
+    const lockIcon = <span><FontAwesomeIcon icon={faLock} /></span>
+
+    return (
+        <div>
+            <h1>Rejestracja konta programisty do systemy Task-O!</h1>
+            <form>
+                <ul>
+                    <li>
+                        {isDeveloperIcon}
+                        <input type="text" placeholder={isDeveloperAccount ? "Podaj imię" : "Podaj nazwę firmy"} />
+                    </li>
+                    <li>
+                        {isDeveloperIcon}
+                        <input type="text" placeholder={isDeveloperAccount ? "Podaj nazwisko" : "Podaj numer NIP"}/>
+                    </li>
+                    <li>
+                        {isDeveloperIcon}
+                        <input type="email" placeholder="Podaj adres e-mail" />
+                    </li>
+                    <li>
+                        {lockIcon}
+                        <input type="password" placeholder="Podaj hasło" />
+                    </li>
+                    <li>
+                        {lockIcon}
+                        <input type="password" placeholder="Powtórz hasło" />
+                    </li>
+                </ul>
+                <button>Zarejestruj się</button>
+                <button>Zaloguj się</button>
+            </form>
+        </div>
+    )
+}
+
+export default RegisterForm;

pages/index.js

@@ -6,7 +6,7 @@ import Footer from './components/Footer';
 const Index = props => (
     <div className="index">
         <Header />
-        <div className="index-content">
+        <div className="page-content-center">
             <h1>Rejestracja do systemu Task-O!</h1>
             <span className="login-areas">
                 <LoginArea accountType="developer"/>

pages/register.js

@@ -0,0 +1,8 @@
+import "../style.css";
+import RegisterForm from './components/RegisterForm';
+
+const Register = () => {
+    return <RegisterForm />
+}
+
+export default Register;

style.css

@@ -93,7 +93,7 @@ footer {
 
 /* index page */
 
-.index-content {
+.page-content-center {
     height: 100%;
     width: 100%;
     display: flex;