Merge branch 'landing-page' into frontend-devel

client/src/App.tsx

@@ -6,7 +6,7 @@ import AppWrapper from 'pages/AppWrapper';
 import LoginRoute from 'components/helpers/LoginRoute';
 import ProtectedRoute from 'components/helpers/ProtectedRoute';
 
-const Home = lazy(() => import('pages/Home'));
+const Landing = lazy(() => import('pages/Landing'));
 const Login = lazy(() => import('pages/Login'));
 const Register = lazy(() => import('pages/Register'));
 const Introduction = lazy(() => import('pages/Introduction'));
@@ -20,7 +20,7 @@ export default function App() {
                     <LoginRoute path="/register" component={Register} />
                     <Route path="/introduction" component={Introduction} />
                     <ProtectedRoute path={['/tasks', '/projects', '/stats', '/teams', '/settings']} component={AppWrapper} />
-                    <Route path="/" component={Home} />
+                    <Route path="/" component={Landing} />
                 </Switch>
             </Suspense>
         </Router>

client/src/components/forms/ContactForm/contact-form.scss

-
-@use 'styles/settings' as s;
-@use 'styles/mixins' as mx;
+@use 'styles/settings'as s;
+@use 'styles/mixins'as mx;
 
 .contact-form {
     .fields {
@@ -11,19 +10,12 @@
         &.textarea {
             width: 100%;
         }
-
-        .input-field {
-            input, textarea {
-                background-color: #ffffff20;
-                color: white;
-            }
-        }
     }
 
     .submit-button {
         appearance: none;
         border: none;
-        margin: 0.5rem;
+        margin: 0;
     }
 
     .button-container {
@@ -31,5 +23,4 @@
         width: 100%;
         justify-content: flex-end;
     }
-}
-
+}
\ No newline at end of file

client/src/components/graphs/LinearProgress/index.tsx

@@ -2,13 +2,16 @@
 import './linear-progress.scss';
 
 interface Props {
-    percent: number
+    percent: number;
+    color: string;
 }
 
-export default function LinearProgress({ percent }: Props) {
+export default function LinearProgress({ percent, color }: Props) {
     return (
         <div className="linear-progress">
-            <div className="progress" style={{width: percent + '%'}}></div>
+            <div
+                className={'progress' + (color ? 'bg-gradient-horizontal-' + color : '')}
+                style={{ width: percent + '%' }}></div>
         </div>
     );
 }

client/src/components/layout/DynamicBackground/background.scss

-
-@use 'styles/settings.scss' as s;
-@use 'styles/mixins.scss' as mx;
-
-.background-container {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    left: 0;
-    top: 0;
-    z-index: -1;
-    overflow: hidden;
-
-    .bubble {
-        width: 400px;
-        height: 400px;
-        position: absolute;
-        filter: blur(200px);
-        opacity: 0.5;
-        border-radius: 50%;
-        z-index: -1;
-
-        @include mx.breakpoint(medium) {
-            width: 500px;
-            height: 500px;
-            filter: blur(500px);
-        }
-
-        @include mx.breakpoint(large) {
-            width: 600px;
-            height: 600px;
-        }
-
-        &.secondary {
-            background: s.$secondary;
-        }
-
-        &.primary {
-            background: s.$primary;
-        }
-    }
-}
-

client/src/components/layout/DynamicBackground/index.tsx

-
-import './background.scss';
-
-export default function DynamicBackground() {
-    return (
-        <div />
-    )
-}
-

client/src/components/layout/Page/index.tsx

 
 import { ReactNode } from 'react';
 
-import DynamicBackground from 'components/layout/DynamicBackground';
-
 import './page.scss';
 
 interface Props {
@@ -15,7 +13,6 @@ export default function Page({ children, className }: Props) {
         <main className={'page-container ' + (className ?? '')}>
             {children}
         </main>
-        <DynamicBackground />
     </>);
 }
 

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/layout/ProjectsSlider/projects-slider.scss

@@ -6,7 +6,7 @@
     overflow: hidden;
     white-space: nowrap;
     padding: 30px 30px;
-    margin: -30px -30px;
+    margin: -30px -42px;
     position: relative;
 
     .prev-button, .next-button {
@@ -51,14 +51,14 @@
             width: calc(50% - 24px);
         }
 
-        @include mx.breakpoint(xlarge) {
+        @include mx.breakpoint(large) {
             width: calc(33.3% - 24px);
         }
     }
 
     @include mx.breakpoint(large) {
         padding: 30px 90px;
-        margin: -30px -90px;
+        margin: -30px -102px;
 
         .prev-button {
             left: 70px;

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

@@ -23,7 +23,7 @@
 
         svg {
             height: auto;
-            width: 50%;
+            width: 60%;
         }
     }
 
@@ -37,18 +37,16 @@
         height: 100%;
         position: absolute;
         top: 0;
+        margin-top: 5px;
         left: 0;
     }
 
     .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;
-        }
     }
 
     .info {

client/src/components/ui/ProjectSlide/index.tsx

@@ -45,14 +45,17 @@ export default function ProjectSlide({ project }: ProjectSlideProps) {
                 }
             </div>
             <div className="details">
-                <AssigneeList assignees={assignees} max={3} />
+                {
+                    assignees.length > 0 &&
+                    <AssigneeList assignees={assignees} max={3} />
+                }
                 {
                     (time !== undefined && totalTime !== undefined)
                         ? (
                             <div className="progress">
-                                <LinearProgress percent={time / totalTime * 100} />
+                                <LinearProgress percent={time / totalTime * 100} color={project.color} />
                                 <div className="label">{(time / 60 / 60 / 1000).toFixed(2)}h /
-                                <strong>{(totalTime / 60 / 60 / 1000).toFixed(2)}h</strong></div>
+                                    <strong>{(totalTime / 60 / 60 / 1000).toFixed(2)}h</strong></div>
                             </div>
                         )
                         : <LoadingScreen />

client/src/components/ui/TextInput/text-input.scss

@@ -52,7 +52,7 @@
             color: s.$text;
             font-weight: s.$weight-regular;
             font-family: s.$body-font;
-            background: s.$background-input;
+            background: s.$background-white;
         }
     }
 

client/src/index.scss

@@ -184,6 +184,10 @@ h4 {
     }
 }
 
+.text-primary {
+    color: s.$primary;
+}
+
 @each $key,
 $color in s.$themeDarkMap {
     .bg-dark-#{$key} {

client/src/pages/Landing/index.tsx

+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';
+import Team from './partials/Team';
+import Contact from './partials/Contact';
+import Logo from 'images/logo.svg';
+
+export default function LandingPage(): JSX.Element {
+    return (
+        <Page className="landing-page">
+            <Intro />
+            <Features />
+            <AboutApp />
+            <Team />
+            <Contact />
+            <footer>
+                <div className="content-container footer-container">
+                    <div className="footer-copyright">
+                        <img src={Logo} className="logo" alt="" width="70" height="24" />
+                        <p>
+                            &copy; <a href="index.html">ryoko</a>, 2021
+                        </p>
+                        <p>
+                            All rights reserved.
+                        </p>
+                    </div>
+                </div>
+            </footer>
+        </Page>
+    )
+}

client/src/pages/Landing/landing.scss

+@use 'styles/mixins.scss'as mx;
+@use 'styles/settings.scss'as s;
+
+.landing-page {
+    width: 100%;
+    overflow: hidden;
+
+    section:not(:first-child) {
+        margin: 80px auto;
+
+        @include mx.breakpoint(large) {
+            margin: 180px auto;
+        }
+    }
+
+    .heading-lead {
+        font-size: 20px;
+        font-weight: s.$weight-semi-bold;
+    }
+    footer {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+    }
+}
\ 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: 40px;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            @include mx.breakpoint(large) {
+                padding: 60px;
+            }
+        }
+
+        .project-overview {
+            display: grid;
+            grid-gap: 35px;
+            grid-template-areas:
+                'small-1 large'
+                'small-2 large';
+
+            @include mx.breakpoint(medium) {
+                grid-gap: 50px;
+            }
+
+            .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: 'red',
+                            status: Status.OPEN,
+                            deadline: new Date(),
+                            teams: [],
+                        }} />
+                    </div>
+                    <div className="small-2">
+                        <Project demo project={{
+                            id: '5',
+                            name: 'Shopping List',
+                            text: 'xxx',
+                            color: 'orange',
+                            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/Contact/contact.scss

+@use 'styles/mixins.scss'as mx;
+@use 'styles/settings.scss'as s;
+
+.landing-page {
+    .contact-section {
+        .heading-container {
+            margin-bottom: 40px;
+            text-align: center;
+
+            @include mx.breakpoint(medium) {
+                margin-bottom: 60px;
+
+            }
+        }
+    }
+}
\ No newline at end of file