Footer created; The layout of the login page set.

pages/components/Footer.js

@@ -0,0 +1,9 @@
+const Footer = () => {
+    return(
+        <footer>
+            <span>&copy; 2020 Task-O!</span>
+        </footer>
+    )
+}
+
+export default Footer;

pages/components/LoginArea.js

@@ -0,0 +1,16 @@
+import Link from 'next/link';
+
+
+const LoginArea = props => {
+    const isDeveloperAccount = props.accountType === "developer"
+    return (
+        <Link href="/">
+            <span className={isDeveloperAccount ? "login-area developer-account" : "login-area company-account"}>
+                <span>Utwórz kontro {isDeveloperAccount ? 'programisty' : 'firmy'}</span>
+                {/* <span>Ikona</span> */}
+            </span>
+        </Link>
+    )
+}
+
+export default LoginArea

pages/index.js

@@ -1,10 +1,19 @@
-import "../style.css"
+import "../style.css";
-import Header from './components/Header'
+import Header from './components/Header';
+import LoginArea from './components/LoginArea';
+import Footer from './components/Footer';
 
 const Index = props => (
-    <div>
+    <div className="index">
         <Header/>
-        <p>Hello Next.js</p>
+        <div className="index-content">
+            <h2>Rejestracja do systemu Task-O!</h2>
+            <span className="login-areas">
+                <LoginArea accountType="developer"/>
+                <LoginArea accountType="company"/>
+            </span>
+        </div>
+        <Footer />
     </div>
   );
   

style.css

@@ -6,8 +6,18 @@
     font-family: sans-serif;
 }
 
+html {
+    height: 100%;
+}
+
 body {
     margin: 0;
+    height: 100%;
+}
+
+header {
+    width: 100%;
+    position: fixed;
 }
 
 nav ul {
@@ -57,3 +67,55 @@ nav ul div li a {
     background-color: #5D6CED;
     color: #FFF;
 }
+
+body div:first-child {
+    height: 100%;
+}
+
+.index-content {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.login-areas {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin: 1em;
+}
+
+.login-area {
+    margin: 1em;
+}
+
+.login-areas span {
+    display: inline-block;
+    height: 10rem;
+    width: 18rem;
+    max-width: 300px;
+    color: #FFF;
+    border-radius: 2%;
+}
+
+.developer-account span {
+    background-color: #4457F3;
+}
+
+.company-account span {
+    background-color: #FF733F;
+}
+
+footer {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    margin: .5em;
+    width: 100%;
+    color: #8F9DBE;
+    text-align: center;
+    font-size: 90%;
+}