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 394 additions and 0 deletions
client/src/pages/Landing/partials/Contact/index.tsx 0 → 100644
+ 38
− 0
View file @ 535ec942
import React from 'react';
import ContactForm from 'components/forms/ContactForm';
import './contact.scss';
export default function Contact() {
return (
<section className="contact-section content-container">
<header className="heading-container">
<h2>Get in touch</h2>
<p className="heading-lead">
Do you still have a question? Just contact us directly and we will be glad
to help you resolve the issue.
</p>
</header>
<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
);
}
} />
</section>
)
}
client/src/pages/Landing/partials/Features/features.scss 0 → 100644
+ 72
− 0
View file @ 535ec942
@use 'styles/mixins.scss'as mx;
@use 'styles/settings.scss'as s;
.landing-page {
.features-section {
h2 {
text-align: center;
margin-bottom: 40px;
}
strong {
color: s.$primary;
}
.feature-list {
margin: -20px;
@include mx.breakpoint(medium) {
display: flex;
justify-content: space-between;
margin: -20px;
}
}
.feature-item {
background: s.$background-white;
padding: 1.5rem 0;
display: block;
padding: 30px;
border-radius: 25px;
margin: 20px;
@include mx.breakpoint(medium) {
padding: 40px;
width: calc(100% / 3 - 40px);
}
&:hover {
transform: translateY(-10px);
box-shadow: 0 -5px 40px rgba(s.$black, 0.05);
}
}
.feature-icon {
font-size: 42px;
color: s.$primary;
background: s.$background-light;
width: 80px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 15px;
margin-bottom: 20px;
@include mx.breakpoint(medium) {
margin-bottom: 40px;
}
}
.feature-title {
margin-bottom: 10px;
@include mx.breakpoint(medium) {
margin-bottom: 20px;
}
}
}
}
\ No newline at end of file
client/src/pages/Landing/partials/Features/index.tsx 0 → 100644
+ 35
− 0
View file @ 535ec942
import React from 'react'
import './features.scss';
export default function Features() {
return (
<section className="features-section content-container">
<h2>Revolutionize your<br />planning</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>
</section>
)
}
client/src/pages/Landing/partials/Intro/index.tsx 0 → 100644
+ 31
− 0
View file @ 535ec942
import React from 'react'
import './intro.scss';
import TasksImage from 'images/preview/tasks.jpg';
import TeamsImage from 'images/preview/teams.jpg';
import ProjectsImage from 'images/preview/projects.jpg';
import ButtonLink from 'components/navigation/ButtonLink';
export default function Intro() {
return (
<section className="intro-section content-container">
<header className="heading-container">
<h1>ryoko<span className="text-primary">.</span></h1>
<div className="subtitle">Plan your projects like a journey</div>
<div className="button-container">
<ButtonLink href="/tasks">Get started</ButtonLink>
</div>
</header>
<div className="preview-images">
<div className="phone-image">
<img src={ProjectsImage} alt="Tasks preview" />
</div>
<div className="phone-image">
<img src={TasksImage} alt="Tasks preview" />
</div>
<div className="phone-image">
<img src={TeamsImage} alt="Tasks preview" />
</div>
</div>
</section>
)
}
client/src/pages/Landing/partials/Intro/intro.scss 0 → 100644
+ 116
− 0
View file @ 535ec942
@use 'styles/mixins.scss'as mx;
@use 'styles/settings.scss'as s;
.landing-page {
.intro-section {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding-top: 60px;
@include mx.breakpoint(large) {
padding-top: 175px;
}
.heading-container {
text-align: center;
width: 100%;
max-width: 580px;
margin-bottom: 30px;
@include mx.breakpoint(large) {
margin-bottom: 60px;
}
}
h1 {
font-size: 24px;
text-align: center;
@include mx.breakpoint(medium) {
font-size: 36px;
}
@include mx.breakpoint(large) {
font-size: 64px;
}
}
.subtitle {
font-weight: s.$weight-semi-bold;
font-size: 16px;
@include mx.breakpoint(medium) {
font-size: 20px;
}
@include mx.breakpoint(large) {
font-size: 36px;
}
}
.preview-images {
display: flex;
align-items: flex-start;
}
.phone-image {
display: block;
border-radius: 25px;
position: relative;
z-index: 0;
box-shadow: 0 0 40px rgba(s.$black, 0.25);
overflow: hidden;
margin: 0 10px;
border: 10px solid s.$text;
img {
display: block;
width: 100%;
}
&:before {
content: ' ';
position: absolute;
width: 25%;
background: s.$text;
left: 50%;
height: 10px;
top: -5px;
border-radius: 5px;
z-index: 2;
transform: translateX(-50%);
@include mx.breakpoint(medium) {
height: 20px;
}
}
&:nth-child(2) {
@include mx.breakpoint(medium) {
margin-top: 100px;
}
}
&:nth-child(odd) {
display: none;
@include mx.breakpoint(medium) {
display: block
}
}
@include mx.breakpoint(medium) {
width: calc(100% / 3 - 60px);
margin: 0 30px;
}
}
.button-container {
margin-top: 30px;
}
}
}
\ No newline at end of file
client/src/pages/Landing/partials/Team/index.tsx 0 → 100644
+ 52
− 0
View file @ 535ec942
import './team.scss';
import React from 'react';
import ImageRoland from 'images/roland-bernard.jpg';
import ImageDaniel from 'images/daniel-planoetscher.jpg';
import Tag from 'components/ui/Tag';
export default function Team() {
return (
<section className="team-section content-container">
<header className="heading-container">
<h2>Our Team</h2>
<p className="heading-lead">
People are what makes a project great, and here are the people that make us
great.
</p>
</header>
<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">
<Tag label="Web Developer" color="purple" />
<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">
<Tag label="Software Engineer" color="purple" />
<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>
)
}
client/src/pages/Landing/partials/Team/team.scss 0 → 100644
+ 50
− 0
View file @ 535ec942
@use 'styles/mixins.scss'as mx;
@use 'styles/settings.scss'as s;
.landing-page {
.team-section {
.heading-container {
text-align: center;
}
.team-container {
@include mx.breakpoint(large) {
display: flex;
flex-direction: column;
align-items: center;
}
}
.team-list {
margin-top: 20px;
}
.team-member {
margin: 30px 0;
@include mx.breakpoint(medium) {
background: s.$background-white;
padding: 50px;
border-radius: 25px;
display: flex;
align-items: center;
justify-content: center;
}
.tag {
margin-bottom: 10px;
padding: 2px 15px;
}
.team-member-image {
margin-right: 0;
margin-bottom: 3rem;
border-radius: 50%;
@include mx.breakpoint(medium) {
margin-right: 3rem;
margin-bottom: 0;
}
}
}
}
}
\ 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