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

changes to nav, added page component

parent 156d4286
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 155 additions and 139 deletions
client/src/components/ui/Navigation/index.tsx
+ 1
− 1
View file @ 7d76dd65
......@@ -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
client/src/components/ui/Navigation/navigation.scss
+ 2
− 1
View file @ 7d76dd65
......@@ -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;
}
......
client/src/components/ui/Page/index.tsx 0 → 100644
+ 17
− 0
View file @ 7d76dd65
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
client/src/components/ui/Page/page.scss 0 → 100644
+ 7
− 0
View file @ 7d76dd65
.page-container {
max-width: 1440px;
min-height: 100vh;
margin: 0 auto;
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(30px);
}
client/src/images/svg/nav-bg.svg
+ 1
− 3
View file @ 7d76dd65
<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>
client/src/index.scss
+ 0
− 7
View file @ 7d76dd65
......@@ -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%;
......
client/src/pages/Home/index.tsx
+ 124
− 125
View file @ 7d76dd65
......@@ -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>
......
client/src/pages/Tasks/index.tsx
+ 3
− 2
View file @ 7d76dd65
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
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