mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-21 01:12:14 +00:00
- homepage illustrations part 1
This commit is contained in:
Peter Papp
@@ -1,22 +1,28 @@
|
||||
<template>
|
||||
<div id="o-nas" class="oasis-about-us container">
|
||||
<div class="title-wrapper container">
|
||||
<h3 class="main-title-sm">
|
||||
Kto Jsme?
|
||||
</h3>
|
||||
<h4 class="sub-title-sm">
|
||||
Jsme česká společnost, která pro fyzické a právnické osoby (živnostníky a firmy) poskytuje cloudové uložiště dle evropské směrnice (GDPR) a následného zákona o zpracování osobních údajů (zákon 110/2019 sb.).
|
||||
</h4>
|
||||
<div id="o-nas" class="oasis-about-us">
|
||||
<div class="container">
|
||||
<div class="content-wrapper">
|
||||
<div class="title-wrapper">
|
||||
<h3 class="main-title-sm">
|
||||
Kto Jsme?
|
||||
</h3>
|
||||
<h4 class="sub-title-sm">
|
||||
Jsme česká společnost, která pro fyzické a právnické osoby (živnostníky a firmy) poskytuje cloudové uložiště dle evropské směrnice (GDPR) a následného zákona o zpracování osobních údajů (zákon 110/2019 sb.).
|
||||
</h4>
|
||||
</div>
|
||||
<ul class="info-list">
|
||||
<li v-for="(item, i) in infoList" :key="i" class="info-list-item">
|
||||
<check-icon size="30" class="icon" />
|
||||
<p class="description">{{ item }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
<router-link :to="{name: 'SignUp'}" class="base-button theme-color">
|
||||
Vyzkouset OasisDrive
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="info-list">
|
||||
<li v-for="(item, i) in infoList" :key="i" class="info-list-item">
|
||||
<check-icon size="30" class="icon" />
|
||||
<p class="description">{{ item }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
<router-link :to="{name: 'SignUp'}" class="base-button theme-color">
|
||||
Vyzkouset OasisDrive
|
||||
</router-link>
|
||||
|
||||
<img src="/oasis/about-us-background.svg" alt="oasis-about-us" class="hero">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -46,6 +52,55 @@
|
||||
@import '@assets/oasis/_homepage';
|
||||
@import '@assets/oasis/_responsive';
|
||||
|
||||
.content-wrapper {
|
||||
margin-bottom: -860px;
|
||||
padding-left: 22%;
|
||||
}
|
||||
|
||||
.hero {
|
||||
width: 100%;
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
|
||||
.oasis-about-us {
|
||||
padding-top: 150px;
|
||||
|
||||
.sub-title-sm {
|
||||
max-width: 890px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-list {
|
||||
margin: 65px 0;
|
||||
|
||||
.info-list-item {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
margin-bottom: 40px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-top: 5px;
|
||||
margin-right: 15px;
|
||||
|
||||
polyline {
|
||||
color: $pink;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
max-width: 700px;
|
||||
@include font-size(24);
|
||||
color: $text-primary;
|
||||
font-weight: 800;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
.info-list {
|
||||
margin: 65px 0;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div id="kontakt-a-podpora" class="oasis-contact">
|
||||
<div class="container">
|
||||
<div class="container content-position">
|
||||
<div class="title-wrapper">
|
||||
<h3 class="main-title-sm">
|
||||
Kontakt a Podpora
|
||||
@@ -69,7 +69,6 @@
|
||||
</button>
|
||||
</ValidationObserver>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -134,6 +133,74 @@
|
||||
@import '@assets/oasis/_homepage';
|
||||
@import '@assets/oasis/_responsive';
|
||||
|
||||
.oasis-contact {
|
||||
background: $theme-bg-dark;
|
||||
padding-top: 90px;
|
||||
padding-bottom: 90px;
|
||||
|
||||
.title-wrapper {
|
||||
margin-bottom: 65px;
|
||||
}
|
||||
|
||||
.main-title-sm {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.sub-title-sm {
|
||||
color: $text-dark-subtitle;
|
||||
max-width: 750px;
|
||||
}
|
||||
|
||||
.info-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
gap: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
width: 100%;
|
||||
|
||||
.block-wrapper {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: $pink;
|
||||
margin-top: 5px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
background: $theme-bg-light;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
padding: 13px 20px;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
color: $text-dark-secondary;
|
||||
@include font-size(16);
|
||||
font-weight: 600;
|
||||
width: 100%;
|
||||
|
||||
&.is-error {
|
||||
border-color: $pink;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $text-dark-subtitle;
|
||||
@include font-size(16);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
.oasis-contact {
|
||||
|
||||
|
||||
@@ -32,6 +32,8 @@
|
||||
<router-link :to="{name: 'SignUp'}" class="base-button theme-color cta">
|
||||
Vyzkouset OasisDrive
|
||||
</router-link>
|
||||
|
||||
<img src="/oasis/wave-background.svg" alt="oasis wave background" class="wave-background">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -96,6 +98,133 @@
|
||||
@import '@assets/oasis/_homepage';
|
||||
@import '@assets/oasis/_responsive';
|
||||
|
||||
.oasis-features {
|
||||
background: $theme-bg-dark;
|
||||
padding-top: 85px;
|
||||
position: relative;
|
||||
|
||||
.title-wrapper {
|
||||
margin-bottom: 90px;
|
||||
}
|
||||
|
||||
.main-title-sm {
|
||||
color: white;
|
||||
max-width: 690px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.sub-title-sm {
|
||||
margin: 0 auto;
|
||||
color: $text-dark-subtitle;
|
||||
}
|
||||
|
||||
.features-box {
|
||||
margin-bottom: -230px;
|
||||
}
|
||||
|
||||
.cta {
|
||||
top: 300px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wave-background {
|
||||
transform: translateY(100%);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 0;
|
||||
bottom: 3px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.features-box {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
position: relative;
|
||||
display: grid;
|
||||
z-index: 1;
|
||||
gap: 60px;
|
||||
|
||||
.box {
|
||||
background: $theme-bg-light;
|
||||
box-shadow: 0 22px 34px -20px #232142;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
padding: 40px 25px 45px;
|
||||
display: block;
|
||||
|
||||
.box-title {
|
||||
color: white;
|
||||
margin-top: 22px;
|
||||
margin-bottom: 25px;
|
||||
@include font-size(32);
|
||||
}
|
||||
|
||||
.box-description {
|
||||
color: $text-dark-secondary;
|
||||
@include font-size(19);
|
||||
line-height: 1.55;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.box-more-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
margin-left: 5px;
|
||||
|
||||
polyline {
|
||||
color: $theme;
|
||||
@include transition(150ms);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
@include font-size(17);
|
||||
color: $theme;
|
||||
font-weight: 700;
|
||||
@include transition(150ms);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
span, polyline {
|
||||
color: lighten($theme, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
|
||||
.box-icon {
|
||||
rect, path {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
|
||||
.box-icon {
|
||||
line, polyline, path {
|
||||
color: $cyan;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
|
||||
.box-icon {
|
||||
path {
|
||||
color: $pink;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
.features-box {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
@@ -22,6 +22,8 @@
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<img src="/oasis/header-image.svg" alt="OasisDrive" class="hero">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -50,4 +52,25 @@
|
||||
@import '@assets/oasis/_components';
|
||||
@import '@assets/oasis/_homepage';
|
||||
@import '@assets/oasis/_responsive';
|
||||
|
||||
.oasis-header {
|
||||
margin-top: -110px;
|
||||
padding-top: 250px;
|
||||
background: linear-gradient(180deg, rgba(149, 189, 230, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
|
||||
|
||||
.main-title {
|
||||
max-width: 820px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
width: 100%;
|
||||
margin-top: -100px;
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -98,6 +98,40 @@
|
||||
@import '@assets/oasis/_homepage';
|
||||
@import '@assets/oasis/_responsive';
|
||||
|
||||
.oasis-navigation {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
padding: 5px 0;
|
||||
z-index: 10;
|
||||
@include transition(150ms);
|
||||
margin-top: 35px;
|
||||
|
||||
&.white {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.log-in, .logo {
|
||||
width: 235px;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.log-in {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
.oasis-navigation.navigation {
|
||||
margin-top: 10px;
|
||||
|
||||
@@ -10,27 +10,31 @@
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<ul class="pricing-box container">
|
||||
<li v-for="(plan, i) in pricing" :key="i" class="box">
|
||||
<folder-icon size="34" class="pricing-icon" />
|
||||
<div class="container">
|
||||
<img src="/oasis/trees.svg" alt="oasis-trees" class="trees">
|
||||
|
||||
<h5 class="pricing-data">
|
||||
{{ plan.data.attributes.capacity_formatted }}
|
||||
</h5>
|
||||
<b class="pricing-name">
|
||||
{{ plan.data.attributes.name }}
|
||||
</b>
|
||||
<p class="pricing-description">
|
||||
{{ plan.data.attributes.description }}
|
||||
</p>
|
||||
<router-link :to="{name: 'SignUp'}" :class="{'base-button': i == 1,'theme-button': i !== 1, }">
|
||||
{{ plan.data.attributes.price }}/{{ $t('global.monthly_ac') }}
|
||||
</router-link>
|
||||
<small v-if="plan.data.attributes.tax_rates.length > 0" class="pricing-vat">
|
||||
{{ $t('page_pricing_tables.vat_excluded') }}
|
||||
</small>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="pricing-box">
|
||||
<li v-for="(plan, i) in pricing" :key="i" class="box">
|
||||
<folder-icon size="34" class="pricing-icon" />
|
||||
|
||||
<h5 class="pricing-data">
|
||||
{{ plan.data.attributes.capacity_formatted }}
|
||||
</h5>
|
||||
<b class="pricing-name">
|
||||
{{ plan.data.attributes.name }}
|
||||
</b>
|
||||
<p class="pricing-description">
|
||||
{{ plan.data.attributes.description }}
|
||||
</p>
|
||||
<router-link :to="{name: 'SignUp'}" :class="{'base-button': i == 1,'theme-button': i !== 1, }">
|
||||
{{ plan.data.attributes.price }}/{{ $t('global.monthly_ac') }}
|
||||
</router-link>
|
||||
<small v-if="plan.data.attributes.tax_rates.length > 0" class="pricing-vat">
|
||||
{{ $t('page_pricing_tables.vat_excluded') }}
|
||||
</small>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -112,6 +116,87 @@
|
||||
@import '@assets/oasis/_homepage';
|
||||
@import '@assets/oasis/_responsive';
|
||||
|
||||
.trees {
|
||||
margin-bottom: -90px;
|
||||
margin-left: 250px;
|
||||
}
|
||||
|
||||
.pricing-box {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
max-width: 1325px;
|
||||
margin: 0 auto;
|
||||
|
||||
.box {
|
||||
background: white;
|
||||
box-shadow: 0 5px 333px -22px #1B253935;
|
||||
border-radius: 12px;
|
||||
display: block;
|
||||
padding: 38px 40px 35px;
|
||||
z-index: 1;
|
||||
|
||||
&:nth-child(2) {
|
||||
z-index: 2;
|
||||
padding: 55px 40px 20px;
|
||||
background: $theme-bg-light;
|
||||
margin-top: -40px;
|
||||
margin-bottom: -40px;
|
||||
|
||||
.pricing-name, .pricing-data {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.pricing-description {
|
||||
color: $text-dark-secondary;
|
||||
margin-bottom: 70px;
|
||||
}
|
||||
|
||||
.pricing-data {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.pricing-vat {
|
||||
color: $text-dark-subtitle;
|
||||
}
|
||||
}
|
||||
|
||||
.pricing-icon {
|
||||
margin-bottom: 45px;
|
||||
|
||||
path {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
.pricing-data {
|
||||
@include font-size(50);
|
||||
font-weight: 900;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.pricing-name {
|
||||
@include font-size(24);
|
||||
font-weight: 800;
|
||||
margin-bottom: 30px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pricing-description {
|
||||
@include font-size(19);
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.pricing-vat {
|
||||
@include font-size(12);
|
||||
color: $text-secondary;
|
||||
display: block;
|
||||
font-weight: 300;
|
||||
opacity: 0.45;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
.pricing-box {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
Reference in New Issue
Block a user