diff --git a/client/src/components/ui/Navigation/index.tsx b/client/src/components/ui/Navigation/index.tsx
index 4a019f25a2382ee193855389775eea4aa0001a05..0e86c65ca1f7512b7123a39a2ba0bcc2464ea979 100644
--- a/client/src/components/ui/Navigation/index.tsx
+++ b/client/src/components/ui/Navigation/index.tsx
@@ -7,6 +7,7 @@ import background from 'images/svg/nav-bg.svg';
export default function Navigation() {
return (
<nav className="site-nav">
+ <img src={background} alt="Background" className="background" />
<NavLink to="/tasks" activeClassName="active" className="nav-link">
<span className="icon material-icons-outlined">
home
@@ -25,7 +26,6 @@ export default function Navigation() {
</span>
<span className="label">Stats</span>
</NavLink>
- <img src={background} alt="Background" className="background" />
</nav>
);
}
\ No newline at end of file
diff --git a/client/src/components/ui/Navigation/navigation.scss b/client/src/components/ui/Navigation/navigation.scss
index 5d192c40213dbd3ad8f0ab6d3994748567a1ceb9..3fea98fcbbcf3a519bc85b9640be7bd03a0d9ac8 100644
--- a/client/src/components/ui/Navigation/navigation.scss
+++ b/client/src/components/ui/Navigation/navigation.scss
@@ -9,12 +9,13 @@
display: flex;
align-items: center;
justify-content: center;
+ z-index: 200;
.background {
position: absolute;
bottom: 0;
left: 0;
- max-width: 100%;
+ width: 100%;
height: auto;
z-index: -1;
}
diff --git a/client/src/components/ui/Page/index.tsx b/client/src/components/ui/Page/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4b9a8ef9244bbcf572f49040b1e89213d3d9330c
--- /dev/null
+++ b/client/src/components/ui/Page/index.tsx
@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import './page.scss';
+
+interface Props {
+ children?: ReactNode,
+ className?: string
+}
+
+export default function Page({ children, className }: Props) {
+ return (
+ <>
+ <main className={'page-container ' + (className ?? '')}>
+ {children}
+ </main>
+ </>
+ );
+}
\ No newline at end of file
diff --git a/client/src/components/ui/Page/page.scss b/client/src/components/ui/Page/page.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f4fddeb15a496e3e50a00cd8b5197ebe44121d57
--- /dev/null
+++ b/client/src/components/ui/Page/page.scss
@@ -0,0 +1,7 @@
+.page-container {
+ max-width: 1440px;
+ min-height: 100vh;
+ margin: 0 auto;
+ background: rgba(255, 255, 255, 0.4);
+ backdrop-filter: blur(30px);
+}
diff --git a/client/src/images/svg/nav-bg.svg b/client/src/images/svg/nav-bg.svg
index f9b758d1d2d4fd62709122e286017fd8b99984c5..3256ffccbe8f509893cd79ee8d1c3806464d8d16 100644
--- a/client/src/images/svg/nav-bg.svg
+++ b/client/src/images/svg/nav-bg.svg
@@ -1,5 +1,3 @@
-<svg width="411" height="78" viewBox="0 0 411 78" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_b)">
+<svg viewBox="0 0 411 78" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M208.5 1.00001C35.5 -4.4826 -0.5 25.5 -0.5 25.5V77.5H411V27C411 27 381.5 6.48262 208.5 1.00001Z" fill="white"/>
-</g>
</svg>
diff --git a/client/src/index.scss b/client/src/index.scss
index 46b3eb5ab99157beba7219048888796cfca70a7b..fe2c1e862eb804d05c76dd804ac158e9741f49f0 100644
--- a/client/src/index.scss
+++ b/client/src/index.scss
@@ -35,13 +35,6 @@ a {
}
}
-.page-container {
- max-width: 1440px;
- margin: 0 auto;
- background: rgba(255, 255, 255, 0.4);
- backdrop-filter: blur(30px);
-}
-
.content-container {
max-width: 1280px;
width: 100%;
diff --git a/client/src/pages/Home/index.tsx b/client/src/pages/Home/index.tsx
index 3389eb88fcd25a10854f43891ecec7e5a2390d87..288517a55430972b33875e66cb9d585c95e94f27 100644
--- a/client/src/pages/Home/index.tsx
+++ b/client/src/pages/Home/index.tsx
@@ -2,6 +2,7 @@ import Project from 'components/ui/Project';
import ButtonLink from 'components/ui/ButtonLink';
import Button from 'components/ui/Button';
import TextInput from 'components/ui/TextInput';
+import Page from 'components/ui/Page';
import './home.scss';
import Logo from 'images/logo.svg';
@@ -10,158 +11,156 @@ import ImageDaniel from 'images/daniel-planoetscher.jpg';
export default function Home() {
return (<>
- <div className="page-container">
- <main>
- <section className="hero-section" id="hero">
- <div className="hero-container">
- <header>
- <a href="index.html">
- <img src={Logo} alt="Logo" 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>
+ <Page>
+ <section className="hero-section" id="hero">
+ <div className="hero-container">
+ <header>
+ <a href="index.html">
+ <img src={Logo} alt="Logo" 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 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="/register" routing={true}>Get started</ButtonLink>
- </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" routing={true}>Get started</ButtonLink>
</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
+ </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">
- <div className="project-overview">
- <div className="small-1 project-small">
- <Project status="open" name="Hello world!" percent={5} />
- </div>
- <div className="small-2 project-small">
- <Project status="suspended" name="FizzBuzz" percent={33} />
- </div>
- <div className="large project-large">
- <Project status="open" name="Array summation" percent={78} />
- </div>
+ </div>
+ <div className="preview-container">
+ <div className="project-overview">
+ <div className="small-1 project-small">
+ <Project status="open" name="Hello world!" percent={5} />
+ </div>
+ <div className="small-2 project-small">
+ <Project status="suspended" name="FizzBuzz" percent={33} />
+ </div>
+ <div className="large project-large">
+ <Project status="open" name="Array summation" percent={78} />
</div>
</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>
+ </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 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 depencies</strong> of
+ </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 depencies</strong> of
your tasks
</div>
- </div>
- <div className="feature-item">
- <span className="feature-icon material-icons">group</span>
- <h3 className="feature-title">Teambased</h3>
- <div className="feature-description">
- Distribute task within your Teams based on <strong>profession and difficulty</strong>
- </div>
+ </div>
+ <div className="feature-item">
+ <span className="feature-icon material-icons">group</span>
+ <h3 className="feature-title">Teambased</h3>
+ <div className="feature-description">
+ Distribute task within your Teams based on <strong>profession and difficulty</strong>
</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.
+ </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="Daniel Planötscher" />
- <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 className="team-list">
+ <div className="team-member">
+ <img className="team-member-image" src={ImageDaniel} width="200" height="200"
+ alt="Daniel Planötscher" />
+ <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 className="team-member">
- <img className="team-member-image" src={ImageRoland} width="200" height="200"
- alt="Roland Bernard" />
- <div className="team-member-info">
- <h4 className="team-member-title">Software Engineer</h4>
- <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 className="team-member">
+ <img className="team-member-image" src={ImageRoland} width="200" height="200"
+ alt="Roland Bernard" />
+ <div className="team-member-info">
+ <h4 className="team-member-title">Software Engineer</h4>
+ <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>
- </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.
+ </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>
- <form className="contact-form" action="mailto:dplanoetscher@unibz.it" method="GET">
- <TextInput label="Fistname" name="firstname" />
- <TextInput label="Lastname" name="lastname" />
- <TextInput label="Email" name="email" type="email" />
- <TextInput label="Subject" name="subject" />
- <TextInput label="Message" name="message" type="textarea" />
- <div className="button-container">
- <Button type="submit">Send</Button>
- </div>
- </form>
- </div>
- </section>
- </main>
+ <form className="contact-form" action="mailto:dplanoetscher@unibz.it" method="GET">
+ <TextInput label="Fistname" name="firstname" />
+ <TextInput label="Lastname" name="lastname" />
+ <TextInput label="Email" name="email" type="email" />
+ <TextInput label="Subject" name="subject" />
+ <TextInput label="Message" name="message" type="textarea" />
+ <div className="button-container">
+ <Button type="submit">Send</Button>
+ </div>
+ </form>
+ </div>
+ </section>
<footer>
<div className="content-container footer-container">
<div className="footer-copyright">
@@ -180,7 +179,7 @@ export default function Home() {
</div>
</div>
</footer>
- </div>
+ </Page>
<div className="background-container">
<div className="bubble secondary" style={{ top: '0', right: '0' }}></div>
<div className="bubble primary" style={{ top: '20%', left: '0' }}></div>
diff --git a/client/src/pages/Tasks/index.tsx b/client/src/pages/Tasks/index.tsx
index 6e12d538b58dc19f9ac96dc2076d4737cb7bb82b..367d9ff007d23f68d183cc18ecef147fda43b7f2 100644
--- a/client/src/pages/Tasks/index.tsx
+++ b/client/src/pages/Tasks/index.tsx
@@ -1,14 +1,15 @@
+import Page from 'components/ui/Page';
import './tasks.scss';
export default function Tasks() {
return (
<>
- <div className="tasks-page page-container">
+ <Page className="tasks-page">
<main className="content-container">
<h1>Tasks</h1>
<p>Hey Daniel, you have <strong>10</strong> Tasks for today.</p>
</main>
- </div>
+ </Page>
</>
);
}
\ No newline at end of file