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

removed old homepage

parent 535ec942
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
client/src/pages/Home/home.scss deleted 100644 → 0
+ 0
− 433
View file @ 535ec942
@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;
}
}
}
}
client/src/pages/Home/index.tsx deleted 100644 → 0
+ 0
− 224
View file @ 535ec942
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>
&copy; <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>
);
}
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