added some components to new landing page

client/src/components/layout/Page/page.scss

@@ -13,7 +13,7 @@ body {
     max-width: 1540px;
     min-height: 100vh;
     margin: 0 auto;
-    background: rgba(s.$background-white-rgb, 0.5);
+    background: rgba(s.$background-white-rgb, 0.25);
     padding-bottom: 80px;
 
     @include mx.breakpoint(xlarge) {

client/src/components/ui/Project/project.scss

@@ -41,13 +41,14 @@
     }
 
     .title {
-        margin-top: 15px;
+        margin-top: 10px;
         line-height: 1.4;
         font-size: 16px;
+        text-align: center;
         font-weight: s.$weight-bold;
 
         @include mx.breakpoint(large) {
-            font-size: 20px;
+            font-size: 18px;
         }
     }
 

client/src/pages/Landing/index.tsx

@@ -3,11 +3,15 @@ import './landing.scss';
 import React from 'react';
 import Page from 'components/layout/Page';
 import Intro from './partials/Intro';
+import Features from './partials/Features';
+import AboutApp from './partials/AboutApp';
 
 export default function LandingPage(): JSX.Element {
     return (
         <Page className="landing-page">
             <Intro />
+            <Features />
+            <AboutApp />
         </Page>
     )
 }

client/src/pages/Landing/landing.scss

@@ -2,4 +2,11 @@
 @use 'styles/settings.scss'as s;
 
 .landing-page {
+    section:not(:first-child) {
+        margin: 80px auto;
+
+        @include mx.breakpoint(large) {
+            margin: 180px auto;
+        }
+    }
 }
\ No newline at end of file

client/src/pages/Landing/partials/AboutApp/about-app.scss

+@use 'styles/mixins.scss'as mx;
+@use 'styles/settings.scss'as s;
+
+.landing-page {
+    .about-app-section {
+        @include mx.breakpoint(medium) {
+            display: flex;
+            align-items: center;
+        }
+
+        .text-container {
+            padding-right: 10%;
+            margin-bottom: 50px;
+
+            @include mx.breakpoint(medium) {
+                flex-grow: 1;
+                margin-bottom: 0;
+            }
+            .lead {
+                font-size: 18px;
+                font-weight: s.$weight-semi-bold;
+                margin-bottom: 5px;
+            }
+        }
+
+        .preview-container {
+            background: rgba(s.$background-white-rgb, 0.5);
+            border-radius: 25px;
+            padding: 24px;
+
+            @include mx.breakpoint(large) {
+                padding: 48px;
+            }
+        }
+
+        .project-overview {
+            display: grid;
+            grid-gap: 20px;
+            grid-template-areas:
+                'small-1 large'
+                'small-2 large';
+
+            @include mx.breakpoint(medium) {
+                grid-gap: 30px;
+            }
+
+            .small-1 {
+                grid-area: small-1;
+            }
+
+            .small-2 {
+                grid-area: small-2;
+
+                .project {
+                    animation-delay: 3s;
+                }
+            }
+
+            .large {
+                grid-area: large;
+
+                .project {
+                    animation-delay: 6s;
+                    height: 100%;
+                }
+            }
+
+            .project {
+                animation: move-up 9s ease-in infinite;
+
+                @keyframes move-up {
+                    5%,
+                    35% {
+                        transform: translateY(0);
+                        box-shadow: 0px 5px 25px rgba(s.$black, 0.05);
+                    }
+
+                    10%,
+                    30% {
+                        transform: translateY(-10px);
+                        box-shadow: 0px 5px 30px rgba(s.$black, 0.15);
+                    }
+                }
+
+            }
+        }
+    }
+}
\ No newline at end of file

client/src/pages/Landing/partials/AboutApp/index.tsx

+import React from 'react'
+import './about-app.scss';
+import Project from 'components/ui/Project';
+import { Status } from 'adapters/common';
+
+export default function AboutApp() {
+    return (
+        <section className="about-app-section content-container">
+            <div className="text-container">
+                <h2 className="left">Plan your projects like a journey!</h2>
+                <p className="lead">
+                    Do you want to boost your productivity and agility of your
+                    development?
+                </p>
+                <p>
+                    With ryoko you are able to effectively plan your tasks
+                    and manage your projects. It is build with developers in mind and
+                    facilitates effective collaboration.
+                </p>
+            </div>
+            <div className="preview-container">
+                <div className="project-overview">
+                    <div className="small-1">
+                        <Project demo project={{
+                            id: '55',
+                            name: 'Travel app',
+                            text: 'xxx',
+                            color: 'yellow',
+                            status: Status.OPEN,
+                            deadline: new Date(),
+                            teams: [],
+                        }} />
+                    </div>
+                    <div className="small-2">
+                        <Project demo project={{
+                            id: '5',
+                            name: 'Shopping List',
+                            text: 'xxx',
+                            color: 'green',
+                            status: Status.SUSPENDED,
+                            deadline: new Date(),
+                            teams: [],
+                        }} />
+                    </div>
+                    <div className="large">
+                        <Project demo large project={{
+                            id: '93',
+                            name: 'Redesign App',
+                            text: 'xxx',
+                            color: 'blue',
+                            status: Status.CLOSED,
+                            deadline: new Date(),
+                            teams: [],
+                        }} />
+
+                    </div>
+                </div>
+            </div>
+        </section>
+    )
+}

client/src/pages/Landing/partials/Features/features.scss

+@use 'styles/mixins.scss'as mx;
+@use 'styles/settings.scss'as s;
+
+.landing-page {
+    .features-section {
+        h2 {
+            text-align: center;
+        }
+
+        .feature-list {
+            margin-top: 10px;
+
+            @include mx.breakpoint(medium) {
+                display: flex;
+                justify-content: space-between;
+                margin: 10px -20px;
+            }
+        }
+
+
+        .feature-item {
+            background: s.$white;
+            padding: 1.5rem 0;
+            display: block;
+            border-radius: 25px;
+
+            @include mx.breakpoint(medium) {
+                padding: 40px;
+                margin: 20px;
+                width: calc(100% / 3 - 40px);
+            }
+        }
+
+        .feature-icon {
+            font-size: 42px;
+            color: s.$primary;
+            background: s.$background-light;
+            width: 80px;
+            height: 80px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: 15px;
+            margin-bottom: 40px;
+       }
+
+        .feature-title {
+            margin-bottom: 20px;
+        }
+    }
+}
\ No newline at end of file

client/src/pages/Landing/partials/Features/index.tsx

+import React from 'react'
+import './features.scss';
+
+export default function Features() {
+    return (
+        <section className="features-section content-container">
+            <h2>Revolutionize your<br />planning</h2>
+            <div className="feature-list">
+                <div className="feature-item">
+                    <span className="feature-icon material-icons">query_stats</span>
+                    <h3 className="feature-title">Analyze your productivity</h3>
+                    <div className="feature-description">
+                        Find your <strong>weaknesses and strengths</strong> by analyzing graphs
+                    </div>
+                </div>
+                <div className="feature-item">
+                    <span className="feature-icon material-icons">event</span>
+                    <h3 className="feature-title">Automatic timetables</h3>
+                    <div className="feature-description">
+                        Generate your automatic timetables based on <strong>priorities and decencies</strong> of
+                        your tasks
+                    </div>
+                </div>
+                <div className="feature-item">
+                    <span className="feature-icon material-icons">group</span>
+                    <h3 className="feature-title">Team-based</h3>
+                    <div className="feature-description">
+                        Distribute task within your Teams based on <strong>profession and difficulty</strong>
+                    </div>
+                </div>
+            </div>
+
+        </section>
+    )
+}

client/src/pages/Landing/partials/Intro/intro.scss

@@ -10,17 +10,17 @@
         padding-top: 60px;
 
         @include mx.breakpoint(large) {
-            padding-top: 150px;
+            padding-top: 175px;
         }
 
         .heading-container {
             text-align: center;
             width: 100%;
             max-width: 580px;
-            margin-bottom: 40px;
+            margin-bottom: 30px;
 
             @include mx.breakpoint(large) {
-                margin-bottom: 80px;
+                margin-bottom: 60px;
             }
         }
 
@@ -55,7 +55,7 @@
             @include mx.breakpoint(medium) {
                 display: flex;
                 align-items: flex-start;
-                margin: -20px;
+                margin: -30px;
             }
         }
 
@@ -65,7 +65,7 @@
             border: 10px solid s.$text;
             position: relative;
             z-index: 0;
-
+            box-shadow: 0 0 40px rgba(s.$black, 0.25);
 
             &:before {
                 content: ' ';
@@ -85,8 +85,8 @@
             }
 
             @include mx.breakpoint(medium) {
-                width: calc(100% / 3 - 40px);
-                margin: 20px;
+                width: calc(100% / 3 - 60px);
+                margin: 30px;
             }
         }
         .button-container {