diff --git a/client/src/pages/Home/home.scss b/client/src/pages/Home/home.scss
deleted file mode 100644
index 478a096bf45ffe5cb45d372a7875dd113f807974..0000000000000000000000000000000000000000
--- a/client/src/pages/Home/home.scss
+++ /dev/null
@@ -1,433 +0,0 @@
-
-@use 'styles/settings.scss' as s;
-@use 'styles/mixins.scss' as mx;
-@use 'styles/functions.scss' as fn;
-
-.landing-page {
- // General
-
- h2 {
- @include mx.breakpoint(large) {
- margin: 0 auto fn.toRem(24) auto;
- max-width: 560px;
- text-align: center;
- }
- }
-
- section {
- margin-bottom: 70px;
-
- @include mx.breakpoint(large) {
- margin-bottom: 180px;
- }
-
- &.darker {
- padding: 30px 0;
- color: #f1f1f1;
- background: linear-gradient(180deg, #2E313B 0.01%, #0C0E18 100%);
-
- @include mx.breakpoint(large) {
- margin: 0 75px;
- padding: 75px 0;
- border-radius: 25px;
- }
- }
- }
-
- // Hero section
-
- header {
- display: flex;
- align-items: center;
- padding: 20px;
-
- @include mx.breakpoint(500) {
- padding-top: 80px;
- }
-
- @include mx.breakpoint(large) {
- width: 30%;
- padding-bottom: 160px;
- }
-
- nav {
- display: flex;
-
- a {
- color: s.$text;
- font-weight: s.$weight-bold;
- margin-left: 40px;
- display: none;
-
- @include mx.breakpoint(medium) {
- display: block;
- }
- }
- }
- }
-
- .hero-section {
- position: relative;
-
- .hero-container {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
-
- @include mx.breakpoint(medium) {
- height: calc(100vh - 0.5rem);
- }
-
- @include mx.breakpoint(xlarge) {
- height: calc(100vh - 6rem);
- }
-
- .text-container {
- position: relative;
- z-index: 2;
- padding-bottom: 30px;
- font-size: fn.toRem(18);
-
- @include mx.breakpoint(500) {
- width: 50%;
- }
-
- @include mx.breakpoint(medium) {
- width: 30%;
- padding-bottom: 160px;
- }
-
- .button-container {
- margin-top: 40px;
- }
- }
-
- .preview-container {
- width: 50%;
- display: flex;
- justify-content: center;
- margin: 20px 0;
- padding: 30px 0;
- border-top-right-radius: 25px;
- border-bottom-right-radius: 25px;
- background: s.$linear-gradient;
-
- @include mx.breakpoint(500) {
- right: 0;
- height: 100%;
- width: 40%;
- top: 0;
- border-bottom-left-radius: 50px;
- position: absolute;
- margin: 0;
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- }
-
- @include mx.breakpoint(large) {
- width: 45%;
- }
-
- .preview-phone {
- transform: translate(50%, 0%);
- width: 75vw;
-
- @include mx.breakpoint(500) {
- left: 0;
- top: 50%;
- transform: translate(-20%, -50%);
- position: absolute;
- width: 200px;
- }
-
- @include mx.breakpoint(medium) {
- left: 0;
- transform: translate(-30%, -50%);
- top: 50%;
- width: 300px;
- }
-
- .inner {
- padding-bottom: 177.77777777778%;
- background: url('/images/screen-design.jpg');
- background-size: 100% auto;
- background-repeat: no-repeat;
- background-position: top left;
- width: 100%;
- border: 7px solid #303030;
- border-radius: 25px;
- box-shadow: 0 0 40px rgba(s.$black, 0.15);
-
- @include mx.breakpoint(medium) {
- border-width: 10px;
- }
-
- &:before {
- content: ' ';
- position: absolute;
- width: 25%;
- height: 20px;
- background: #303030;
- left: 50%;
- top: 2px;
- border-radius: 5px;
- transform: translateX(-50%);
- }
- }
- }
- }
- }
- }
-
- // Intro Section
-
- .intro-section {
- .intro-container {
- @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;
- }
- }
-
- .preview-container {
- display: grid;
- grid-template-columns: 1fr 1fr;
- grid-template-rows: 1fr 1fr;
- grid-gap: 24px;
- justify-content: center;
- align-items: center;
- 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;
-
- .project-small {
- .project {
- width: 150px;
- height: 150px;
- }
- }
-
- .project-large {
- .project {
- width: 150px;
- height: 330px;
- }
- }
- }
-
- .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;
-
- svg {
- width: 70px;
- height: 70px;
- }
-
- @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);
- }
- }
-
- }
- }
- }
-
- //Feature section
-
- .feature-section {
- .feature-container {
- display: flex;
- flex-direction: column;
- justify-content: center;
- margin: 5rem auto;
- }
-
- .feature-list {
- margin-top: 10px;
-
- @include mx.breakpoint(medium) {
- display: flex;
- justify-content: center;
- }
- }
-
- .feature-item {
- display: flex;
- flex-direction: column;
- width: 100%;
- padding: 1.5rem 0;
-
- @include mx.breakpoint(medium) {
- padding: 20px;
- }
- }
-
- .feature-icon {
- background: s.$radial-gradient;
- background-clip: text;
- -webkit-background-clip: text;
- color: transparent;
- font-size: 5rem;
- }
-
- .feature-title {
- margin: 1rem 0;
- }
- }
-
- // Team section
-
- .team-section {
- .team-container {
- @include mx.breakpoint(large) {
- display: flex;
- flex-direction: column;
- align-items: center;
- }
- }
-
- .team-list {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- margin-top: 20px;
- }
-
- .team-member {
- text-align: left;
- margin: 3rem 0;
-
- @include mx.breakpoint(medium) {
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .team-member-title {
- font-size: fn.toRem(14);
- font-weight: s.$weight-bold;
- display: inline-block;
- padding: 2px 10px;
- text-transform: uppercase;
- background: radial-gradient(100% 1892.25% at 0% 0%, #AC42FF 0%, #8A24DA 100%);
- letter-spacing: 0.5px;
- margin-bottom: 10px;
- color: s.$white;
- border-radius: 5px;
- }
-
- .team-member-image {
- margin-right: 0;
- margin-bottom: 3rem;
- border-radius: 50%;
-
- @include mx.breakpoint(medium) {
- margin-right: 3rem;
- margin-bottom: 0;
- }
- }
- }
- }
-
- .contact-section {
- .contact-container {
- display: flex;
- flex-direction: column;
- text-align: center;
- }
-
- .contact-form {
- margin-top: 2rem;
- display: flex;
- width: 100%;
- flex-wrap: wrap;
- max-width: 960px;
- margin-left: auto;
- margin-right: auto;
-
- }
- }
-
- footer {
- .footer-container {
- padding: 100px 0;
- }
-
- .footer-copyright {
- flex: 1 1 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- }
-
- .logo {
- margin-bottom: 10px;
- }
-
- .footer-nav {
- flex: 1 1 100%;
- display: flex;
- justify-content: center;
- margin-top: 30px;
-
- a {
- padding: 5px 10px;
- }
- }
- }
-}
-
diff --git a/client/src/pages/Home/index.tsx b/client/src/pages/Home/index.tsx
deleted file mode 100644
index 3811b72a7d723933b0dcda0869ff9d99307c4c6b..0000000000000000000000000000000000000000
--- a/client/src/pages/Home/index.tsx
+++ /dev/null
@@ -1,224 +0,0 @@
-
-import { Status } from 'adapters/common';
-
-import Page from 'components/layout/Page';
-import ContactForm from 'components/forms/ContactForm';
-import ButtonLink from 'components/navigation/ButtonLink';
-import Project from 'components/ui/Project';
-
-import Logo from 'images/logo.svg';
-import ImageRoland from 'images/roland-bernard.jpg';
-import ImageDaniel from 'images/daniel-planoetscher.jpg';
-
-import './home.scss';
-
-export default function Home(): JSX.Element {
- return (
- <Page className="landing-page">
- <section className="hero-section" id="hero">
- <div className="hero-container">
- <header>
- <a href="index.html">
- <img src={Logo} alt="Go home" width="100" height="35" />
- </a>
- <nav>
- <a href="#hero">Home</a>
- <a href="#team">Team</a>
- <a href="#contact">Contact</a>
- </nav>
- </header>
- <div className="preview-container">
- <div className="preview-phone">
- <div className="inner">
- </div>
- </div>
- </div>
- <div className="content-container">
- <div className="text-container">
- <h1>ryoko</h1>
- <p>Are you feeling lost with your tasks? Maximize your productivity now with ryoko.</p>
- <div className="button-container">
- <ButtonLink href="/tasks">Get started</ButtonLink>
- </div>
- </div>
- </div>
- </div>
- </section>
- <section className="intro-section" id="intro">
- <div className="content-container">
- <div className="intro-container">
- <div className="text-container">
- <h2 className="left">Plan your projects like a journey!</h2>
- <p>
- Do you want to boost your productivity and agility of your
- development? <br />
- 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">
- <Project demo={true} project={{
- id: '55',
- name: 'Hello world',
- text: 'xxx',
- color: 'yellow',
- status: Status.OPEN,
- deadline: new Date(),
- teams: [],
- }}/>
- <Project demo={true} project={{
- id: '73',
- name: 'Project',
- text: 'xxx',
- color: 'red',
- status: Status.OPEN,
- deadline: new Date(),
- teams: [],
- }}/>
- <Project demo={true} project={{
- id: '93',
- name: 'Api routes',
- text: 'xxx',
- color: 'blue',
- status: Status.CLOSED,
- deadline: new Date(),
- teams: [],
- }}/>
- <Project demo={true} project={{
- id: '5',
- name: 'Task list',
- text: 'xxx',
- color: 'green',
- status: Status.SUSPENDED,
- deadline: new Date(),
- teams: [],
- }}/>
- </div>
- </div>
- </div>
- </section>
- <section className="feature-section">
- <div className="content-container feature-container">
- <h2>Revolutionize your productivity</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>
- </div>
- </section>
- <section className="team-section" id="team">
- <div className="content-container team-container">
- <h2>Our Team</h2>
- <p>
- People are what makes a project great, and here are the people that make us
- great.
- </p>
- <div className="team-list">
- <div className="team-member">
- <img className="team-member-image" src={ImageDaniel} width="200" height="200"
- alt="" />
- <div className="team-member-info">
- <div className="team-member-title">Web Developer</div>
- <h3 className="team-member-name">Daniel Planötscher</h3>
- <div className="team-member-description">
- Besides studying Computer Science, Daniel also enjoys taking photos and
- designing user interfaces for hobby projects, which is why he focuses on
- the FrontEnd of ryoko. Furthermore, he brings significant industry
- experience working as a web developer using state of the art tools and
- programming techniques. He is involved in the creation of modern
- websites for dozens of clients with advanced requirements.
- </div>
- </div>
- </div>
- <div className="team-member">
- <img className="team-member-image" src={ImageRoland} width="200" height="200"
- alt="" />
- <div className="team-member-info">
- <div className="team-member-title">Software Engineer</div>
- <h3 className="team-member-name">Roland Bernard</h3>
- <div className="team-member-description">
- Studying Computer Science and participating in Competitive Programming
- Competitions, Roland constitutes a integral part of our development team
- at ryoko. Like all members of our team he also has experience in the
- industry, mainly working on business management systems and software for
- the financial sector. He is also experienced in the implementation of
- development tools and infrastructure components.
- </div>
- </div>
- </div>
- </div>
- </div>
- </section>
- <section className="contact-section darker" id="contact">
- <div className="content-container contact-container">
- <h2>Get in touch</h2>
- <p>
- Do you still have a question? Just contact us directly and we will be glad
- to help you resolve the issue.
- </p>
- <ContactForm onSubmit={
- (
- firstname: string,
- basename: string,
- email: string,
- subject: string,
- message: string
- ) => {
- window.location.href = 'mailto:dplanoetscher@unibz.it'
- + '?subject='
- + encodeURIComponent(subject)
- + '&body='
- + encodeURIComponent(
- `Name: ${firstname} ${basename}\n`
- + `Email: ${email}\n`
- + 'Message:\n\n'
- + message
- );
- }
- }/>
- </div>
- </section>
- <footer>
- <div className="content-container footer-container">
- <div className="footer-copyright">
- <img src={Logo} className="logo" alt="" width="70" height="24" />
- <p>
- © <a href="index.html">ryoko</a>, 2021
- </p>
- <p>
- All rights reserved.
- </p>
- </div>
- <div className="footer-nav">
- <a href="#hero">Home</a>
- <a href="#team">Team</a>
- <a href="#contact">Contact</a>
- </div>
- </div>
- </footer>
- </Page>
- );
-}
-
-