Skip to content
Snippets Groups Projects
Commit 535ec942 authored by Planoetscher Daniel (Student Com20)'s avatar Planoetscher Daniel (Student Com20)
Browse files

Merge branch 'landing-page' into frontend-devel

parents 4cb5930a fb499e9a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 263 additions and 87 deletions
client/src/App.tsx
+ 2
− 2
View file @ 535ec942
......@@ -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
+ 4
− 13
View file @ 535ec942
@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
+ 6
− 3
View file @ 535ec942
......@@ -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 deleted 100644 → 0
+ 0
− 43
View file @ 4cb5930a
@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 deleted 100644 → 0
+ 0
− 9
View file @ 4cb5930a
import './background.scss';
export default function DynamicBackground() {
return (
<div />
)
}
client/src/components/layout/Page/index.tsx
+ 0
− 3
View file @ 535ec942
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
+ 1
− 1
View file @ 535ec942
......@@ -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
+ 3
− 3
View file @ 535ec942
......@@ -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
+ 4
− 6
View file @ 535ec942
......@@ -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
+ 6
− 3
View file @ 535ec942
......@@ -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
+ 1
− 1
View file @ 535ec942
......@@ -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/images/preview/projects.jpg 0 → 100644
+ 0
− 0
View file @ 535ec942
client/src/images/preview/projects.jpg

96.4 KiB

client/src/images/preview/tasks.jpg 0 → 100644
+ 0
− 0
View file @ 535ec942
client/src/images/preview/tasks.jpg

97.3 KiB

client/src/images/preview/teams.jpg 0 → 100644
+ 0
− 0
View file @ 535ec942
client/src/images/preview/teams.jpg

67.9 KiB

client/src/index.scss
+ 4
− 0
View file @ 535ec942
......@@ -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 0 → 100644
+ 35
− 0
View file @ 535ec942
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 0 → 100644
+ 26
− 0
View file @ 535ec942
@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 0 → 100644
+ 94
− 0
View file @ 535ec942
@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 0 → 100644
+ 61
− 0
View file @ 535ec942
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 0 → 100644
+ 16
− 0
View file @ 535ec942
@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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment