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

added some more sections

parent aab670ea
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 252 additions and 46 deletions
client/src/components/forms/ContactForm/contact-form.scss
+ 4
− 13
View file @ 2d80a6bb
@use 'styles/settings' as s;
@use 'styles/mixins' as mx;
@use 'styles/settings'as s;
@use 'styles/mixins'as mx;
.contact-form {
.fields {
......@@ -11,19 +10,12 @@
&.textarea {
width: 100%;
}
.input-field {
input, textarea {
background-color: #ffffff20;
color: white;
}
}
}
.submit-button {
appearance: none;
border: none;
margin: 0.5rem;
margin: 0;
}
.button-container {
......@@ -31,5 +23,4 @@
width: 100%;
justify-content: flex-end;
}
}
}
\ No newline at end of file
client/src/components/ui/Project/project.scss
+ 2
− 5
View file @ 2d80a6bb
......@@ -23,7 +23,7 @@
svg {
height: auto;
width: 50%;
width: 60%;
}
}
......@@ -37,6 +37,7 @@
height: 100%;
position: absolute;
top: 0;
margin-top: 5px;
left: 0;
}
......@@ -46,10 +47,6 @@
font-size: 16px;
text-align: center;
font-weight: s.$weight-bold;
@include mx.breakpoint(large) {
font-size: 18px;
}
}
.info {
......
client/src/components/ui/TextInput/text-input.scss
+ 1
− 1
View file @ 2d80a6bb
......@@ -52,7 +52,7 @@
color: s.$text;
font-weight: s.$weight-regular;
font-family: s.$body-font;
background: s.$background-input;
background: rgba(s.$white, 0.75);
}
}
......
client/src/pages/Landing/index.tsx
+ 4
− 0
View file @ 2d80a6bb
......@@ -5,6 +5,8 @@ import Page from 'components/layout/Page';
import Intro from './partials/Intro';
import Features from './partials/Features';
import AboutApp from './partials/AboutApp';
import Team from './partials/Team';
import Contact from './partials/Contact';
export default function LandingPage(): JSX.Element {
return (
......@@ -12,6 +14,8 @@ export default function LandingPage(): JSX.Element {
<Intro />
<Features />
<AboutApp />
<Team />
<Contact />
</Page>
)
}
client/src/pages/Landing/landing.scss
+ 8
− 0
View file @ 2d80a6bb
......@@ -2,6 +2,9 @@
@use 'styles/settings.scss'as s;
.landing-page {
width: 100%;
overflow: hidden;
section:not(:first-child) {
margin: 80px auto;
......@@ -9,4 +12,9 @@
margin: 180px auto;
}
}
.heading-lead {
font-size: 20px;
font-weight: s.$weight-semi-bold;
}
}
\ No newline at end of file
client/src/pages/Landing/partials/AboutApp/about-app.scss
+ 10
− 4
View file @ 2d80a6bb
......@@ -16,6 +16,7 @@
flex-grow: 1;
margin-bottom: 0;
}
.lead {
font-size: 18px;
font-weight: s.$weight-semi-bold;
......@@ -26,22 +27,26 @@
.preview-container {
background: rgba(s.$background-white-rgb, 0.5);
border-radius: 25px;
padding: 24px;
padding: 40px;
display: flex;
justify-content: center;
align-items: center;
@include mx.breakpoint(large) {
padding: 48px;
padding: 60px;
}
}
.project-overview {
display: grid;
grid-gap: 20px;
grid-gap: 35px;
grid-template-areas:
'small-1 large'
'small-2 large';
@include mx.breakpoint(medium) {
grid-gap: 30px;
grid-gap: 50px;
}
.small-1 {
......@@ -69,6 +74,7 @@
animation: move-up 9s ease-in infinite;
@keyframes move-up {
5%,
35% {
transform: translateY(0);
......
client/src/pages/Landing/partials/AboutApp/index.tsx
+ 2
− 2
View file @ 2d80a6bb
......@@ -25,7 +25,7 @@ export default function AboutApp() {
id: '55',
name: 'Travel app',
text: 'xxx',
color: 'yellow',
color: 'red',
status: Status.OPEN,
deadline: new Date(),
teams: [],
......@@ -36,7 +36,7 @@ export default function AboutApp() {
id: '5',
name: 'Shopping List',
text: 'xxx',
color: 'green',
color: 'orange',
status: Status.SUSPENDED,
deadline: new Date(),
teams: [],
......
client/src/pages/Landing/partials/Contact/contact.scss 0 → 100644
+ 16
− 0
View file @ 2d80a6bb
@use 'styles/mixins.scss'as mx;
@use 'styles/settings.scss'as s;
.landing-page {
.contact-section {
.heading-container {
margin-bottom: 40px;
text-align: center;
@include mx.breakpoint(medium) {
margin-bottom: 60px;
}
}
}
}
\ No newline at end of file
client/src/pages/Landing/partials/Contact/index.tsx 0 → 100644
+ 38
− 0
View file @ 2d80a6bb
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
+ 27
− 6
View file @ 2d80a6bb
......@@ -5,15 +5,20 @@
.features-section {
h2 {
text-align: center;
margin-bottom: 40px;
}
strong {
color: s.$primary;
}
.feature-list {
margin-top: 10px;
margin: -20px;
@include mx.breakpoint(medium) {
display: flex;
justify-content: space-between;
margin: 10px -20px;
margin: -20px;
}
}
......@@ -22,13 +27,19 @@
background: s.$white;
padding: 1.5rem 0;
display: block;
padding: 30px;
border-radius: 25px;
margin: 20px;
@include mx.breakpoint(medium) {
padding: 40px;
margin: 20px;
width: calc(100% / 3 - 40px);
}
&:hover {
transform: translateY(-10px);
box-shadow: 0 -5px 40px rgba(s.$black, 0.05);
}
}
.feature-icon {
......@@ -41,11 +52,21 @@
justify-content: center;
align-items: center;
border-radius: 15px;
margin-bottom: 40px;
}
margin-bottom: 20px;
@include mx.breakpoint(medium) {
margin-bottom: 40px;
}
}
.feature-title {
margin-bottom: 20px;
margin-bottom: 10px;
@include mx.breakpoint(medium) {
margin-bottom: 20px;
}
}
}
}
\ No newline at end of file
client/src/pages/Landing/partials/Intro/index.tsx
+ 9
− 3
View file @ 2d80a6bb
......@@ -16,9 +16,15 @@ export default function Intro() {
</div>
</header>
<div className="preview-images">
<img src={ProjectsImage} alt="Tasks preview" className="phone-image" />
<img src={TasksImage} alt="Tasks preview" className="phone-image" />
<img src={TeamsImage} alt="Tasks preview" className="phone-image" />
<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
+ 32
− 12
View file @ 2d80a6bb
......@@ -27,7 +27,7 @@
h1 {
font-size: 24px;
text-align: center;
@include mx.breakpoint(medium) {
font-size: 36px;
}
......@@ -52,43 +52,63 @@
}
.preview-images {
@include mx.breakpoint(medium) {
display: flex;
align-items: flex-start;
margin: -30px;
}
display: flex;
align-items: flex-start;
}
.phone-image {
display: block;
border-radius: 25px;
border: 10px solid s.$text;
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%;
height: 20px;
background: s.$text;
left: 50%;
top: 2px;
z-index: 2;
height: 10px;
top: -5px;
border-radius: 5px;
z-index: 2;
transform: translateX(-50%);
@include mx.breakpoint(medium) {
height: 20px;
}
}
&:nth-child(2) {
margin-top: 100px;
@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: 30px;
margin: 0 30px;
}
}
.button-container {
margin-top: 30px;
}
......
client/src/pages/Landing/partials/Team/index.tsx 0 → 100644
+ 52
− 0
View file @ 2d80a6bb
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">
<div className="content-container team-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>
<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>
</div>
</section>
)
}
client/src/pages/Landing/partials/Team/team.scss 0 → 100644
+ 47
− 0
View file @ 2d80a6bb
@use 'styles/mixins.scss'as mx;
@use 'styles/settings.scss'as s;
.landing-page {
.team-section {
.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.$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.
Please register or to comment