nextcloud
/
nextcloud.com
зеркало из https://github.com/nextcloud/nextcloud.com.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

implement pricing page feedback 

Signed-off-by: Jos Poortvliet <jospoortvliet@gmail.com>
This commit is contained in:
Jos Poortvliet 2020-12-18 20:04:52 +01:00
Родитель 13c4fdbbbe
Коммит a93c9d2fe2
8 изменённых файлов: 128 добавлений и 109 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

29
assets/css/custom.css
Просмотреть файл

@ -5567,15 +5567,15 @@ footer.page-footer {
transition: transform 500ms ease; transition: transform 500ms ease;
transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px);
opacity: 0; opacity: 0;
margin-top: 0px !important; } margin-top: 0px !important;
height: 100px; }
.second-menu .menu.hidedPrincipalNavigation { .second-menu .menu.hidedPrincipalNavigation {
transform: translate3d(0px, -100px, 0px); } transform: translate3d(0px, -100px, 0px); }
.second-menu .menu .buttons { .second-menu .menu .buttons {
text-transform: uppercase; text-transform: uppercase;
font-size: 14px; font-size: 13px;
font-weight: 600; font-weight: 600;
padding: 40px 0 30px 0; padding: 30px 0 20px 0; }
border-bottom: solid 1px #e4e4e4; }
@media (max-width: 991px) { @media (max-width: 991px) {
.second-menu .menu .buttons { .second-menu .menu .buttons {
padding: 30px 0 25px 0; } } padding: 30px 0 25px 0; } }
@ -5599,13 +5599,17 @@ footer.page-footer {
.second-menu .menu .buttons a:hover { .second-menu .menu .buttons a:hover {
text-decoration: none; text-decoration: none;
color: #0082c9; } color: #0082c9; }
.second-menu .menu .buttons .button {
min-height: 40px !important;
height: 40px !important;
min-width: 100px !important; }
.second-menu .menu .buttons .btn-primary { .second-menu .menu .buttons .btn-primary {
float: right; float: right;
font-size: 14px; font-size: 13px;
padding: 8px 20px; padding: 0 15px 0 15px;
margin-left: 20px; margin: -9px 0px 0px 10px;
margin-top: -5px; color: white;
color: white; } line-height: 45px; }
@media (max-width: 768px) { @media (max-width: 768px) {
.second-menu .menu .buttons .btn-primary { .second-menu .menu .buttons .btn-primary {
margin-top: 10px; } } margin-top: 10px; } }
@ -5618,12 +5622,9 @@ footer.page-footer {
float: right; float: right;
font-size: 14px; font-size: 14px;
padding: 0 20px 0 20px; padding: 0 20px 0 20px;
margin: -9px 0px 0px 20px; margin: -5px 0px 0px 10px;
/* margin-left: 20px; */
/* margin-top: -5px; */
color: white; color: white;
height: 40px; line-height: 40px; }
line-height: 50px; }
@media (max-width: 768px) { @media (max-width: 768px) {
.second-menu .menu .buttons .button--blue { .second-menu .menu .buttons .button--blue {
margin-top: 10px; } } margin-top: 10px; } }

28
assets/css/modules/secondmenu.scss
Просмотреть файл

@ -22,6 +22,7 @@
transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px);
opacity: 0; opacity: 0;
margin-top: 0px !important; margin-top: 0px !important;
height: 100px;
&.hidedPrincipalNavigation { &.hidedPrincipalNavigation {
transform: translate3d(0px, -100px, 0px); transform: translate3d(0px, -100px, 0px);
@ -29,10 +30,10 @@
.buttons { .buttons {
text-transform: uppercase; text-transform: uppercase;
font-size: 14px; font-size: 13px;
font-weight: 600; font-weight: 600;
padding: 40px 0 30px 0; padding: 30px 0 20px 0;
border-bottom: solid 1px #e4e4e4;
@media (max-width: $break-big) { @media (max-width: $break-big) {
padding: 30px 0 25px 0; padding: 30px 0 25px 0;
@ -71,14 +72,18 @@
color: $nextcloud-blue; color: $nextcloud-blue;
} }
} }
.button {
min-height: 40px !important;
height: 40px !important;
min-width: 100px !important;
}
.btn-primary { .btn-primary {
float: right; float: right;
font-size: 14px; font-size: 13px;
padding: 8px 20px; padding: 0 15px 0 15px;
margin-left: 20px; margin: -9px 0px 0px 10px;
margin-top: -5px;
color: white; color: white;
line-height: 45px;
@media (max-width: $break-small) { @media (max-width: $break-small) {
margin-top: 10px; margin-top: 10px;
@ -98,12 +103,9 @@
float: right; float: right;
font-size: 14px; font-size: 14px;
padding: 0 20px 0 20px; padding: 0 20px 0 20px;
margin: -9px 0px 0px 20px; margin: -5px 0px 0px 10px;
/* margin-left: 20px; */
/* margin-top: -5px; */
color: white; color: white;
height: 40px; line-height: 40px;
line-height: 50px;
@media (max-width: $break-small) { @media (max-width: $break-small) {
margin-top: 10px; margin-top: 10px;

11
assets/css/pages/order.css
Просмотреть файл

@ -29,6 +29,17 @@
background-color: transparent; background-color: transparent;
position: absolute; } position: absolute; }
/* gradient behind transparent nav */
.nav:not(.scrolled) {
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
/* IE6-9 */ }
.buy-background { .buy-background {
background-image: url("../../img/headers/enterprise.jpg"); background-image: url("../../img/headers/enterprise.jpg");
background-position: center 0 right 0; background-position: center 0 right 0;

1
assets/css/pages/order.scss
Просмотреть файл

@ -1,5 +1,6 @@
@import '../variables'; @import '../variables';
@import '../modules/transparent-navbar'; @import '../modules/transparent-navbar';
@import '../modules/transparent-gradient';
.buy-background { .buy-background {
background-image: url("../../img/headers/enterprise.jpg"); background-image: url("../../img/headers/enterprise.jpg");

75
assets/css/pages/pricing.css
Просмотреть файл

@ -49,36 +49,33 @@
.pricing-background .menu { .pricing-background .menu {
margin-top: -100px; } margin-top: -100px; }
.plans { .section--plans {
margin-top: 133px; margin-top: 133px;
/* Tooltips */ /* Tooltips */
/* Tooltip text */ /* Tooltip text */
/* Show the tooltip text when you mouse over the tooltip container */ } /* Show the tooltip text when you mouse over the tooltip container */ }
.plans h1 { .section--plans h1 {
margin-bottom: 10px; } margin-bottom: 40px; }
.plans h3 { .section--plans h3 {
font-size: 1.8em; font-size: 1.8em;
margin-bottom: 45px; } margin-bottom: 45px; }
.plans .table-column { .section--plans .table-column {
cursor: default; cursor: default;
border-radius: 8px; border-radius: 8px;
border: solid 1px #eeeeee; border: solid 1px #eeeeee;
padding: 0px; padding: 0px;
width: 31%; width: 31%;
margin-left: 1%; margin: 20px 1% 50px 1%; }
margin-right: 1%;
margin-bottom: 50px; }
@media (max-width: 991px) { @media (max-width: 991px) {
.plans .table-column { .section--plans .table-column {
width: 80%; width: 80%;
margin: auto; margin: 20px auto 60px auto; } }
margin-bottom: 60px; } } .section--plans .table-column .table-header {
.plans .table-column .table-header {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
width: 100%; width: 100%;
border-radius: 7px 7px 0px 0px; } border-radius: 7px 7px 0px 0px; }
.plans .table-column .table-header h1 { .section--plans .table-column .table-header h1 {
text-align: center; text-align: center;
color: #2a2a36; color: #2a2a36;
font-size: 22px; font-size: 22px;
@ -88,7 +85,7 @@
margin: 0px; margin: 0px;
padding-top: 42px; padding-top: 42px;
letter-spacing: 0; } letter-spacing: 0; }
.plans .table-column .table-header h2 { .section--plans .table-column .table-header h2 {
font-size: 18px; font-size: 18px;
font-weight: 300; font-weight: 300;
text-align: center; text-align: center;
@ -98,24 +95,24 @@
margin: 0px; margin: 0px;
padding-top: 0px; padding-top: 0px;
padding-bottom: 29px; } padding-bottom: 29px; }
.plans .table-column .basic { .section--plans .table-column .basic {
background-color: #f9f9f9; } background-color: #f9f9f9; }
.plans .table-column .standard { .section--plans .table-column .standard {
background-color: #c4e1f7; } background-color: #c4e1f7; }
.plans .table-column .premium { .section--plans .table-column .premium {
background-color: #178ecd; } background-color: #178ecd; }
.plans .table-column .premium h1 { .section--plans .table-column .premium h1 {
color: white !important; } color: white !important; }
.plans .table-column .premium h2 { .section--plans .table-column .premium h2 {
color: white !important; } color: white !important; }
.plans .table-column .highlight { .section--plans .table-column .highlight {
box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.16); } box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.16); }
.plans .table-content { .section--plans .table-content {
margin: 15px; margin: 15px;
padding: 0px; padding: 0px;
margin-left: 30px; margin-left: 30px;
margin-right: 30px; } margin-right: 30px; }
.plans .table-content h1 { .section--plans .table-content h1 {
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
font-style: normal; font-style: normal;
@ -126,44 +123,44 @@
letter-spacing: 0; letter-spacing: 0;
margin-top: 25px; margin-top: 25px;
margin-bottom: 0px; } margin-bottom: 0px; }
.plans .table-content .button--large { .section--plans .table-content .button--large {
margin-top: 30px; margin-top: 30px;
margin-bottom: 30px; margin-bottom: 30px;
width: 100%; } width: 100%; }
.plans .line { .section--plans .line {
width: 100%; width: 100%;
border: solid 1px #eeeeee; border: solid 1px #eeeeee;
margin-top: -5px; margin-top: -5px;
margin-bottom: 15px; } margin-bottom: 15px; }
.plans .hyperlink { .section--plans .hyperlink {
color: #555555; } color: #555555; }
.plans .list li { .section--plans .list li {
font-size: 18px; font-size: 18px;
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
line-height: 1.2; line-height: 1.2;
height: 50px; } height: 50px; }
.plans .list .check { .section--plans .list .check {
list-style-image: url("../../img/enterprise/check.svg"); list-style-image: url("../../img/enterprise/check.svg");
list-style-position: inside; list-style-position: inside;
color: #555555; } color: #555555; }
.plans .list .nocheck { .section--plans .list .nocheck {
list-style-image: url("../../img/enterprise/nocheck.svg"); list-style-image: url("../../img/enterprise/nocheck.svg");
list-style-position: inside; list-style-position: inside;
color: #b1b1b1; } color: #b1b1b1; }
.plans .list .nocheck a { .section--plans .list .nocheck a {
color: #b1b1b1; color: #b1b1b1;
text-decoration: none; } text-decoration: none; }
.plans .list .optional { .section--plans .list .optional {
list-style-image: url("../../img/enterprise/optional.svg"); list-style-image: url("../../img/enterprise/optional.svg");
list-style-position: inside; list-style-position: inside;
color: #555555; } color: #555555; }
.plans .list .ball { .section--plans .list .ball {
list-style-image: url("../../img/enterprise/blank.svg"); list-style-image: url("../../img/enterprise/blank.svg");
list-style-position: inside; list-style-position: inside;
color: #555555; } color: #555555; }
.plans .overinfo .infotext { .section--plans .overinfo .infotext {
visibility: hidden; visibility: hidden;
/* width: 200px; */ /* width: 200px; */
background-color: #555555; background-color: #555555;
@ -179,9 +176,9 @@
/* top: 100%; */ /* top: 100%; */
/* left: 50%; */ /* left: 50%; */
/* margin-left: -100px; */ } /* margin-left: -100px; */ }
.plans .overinfo:hover .infotext { .section--plans .overinfo:hover .infotext {
visibility: visible; } visibility: visible; }
.plans .overinfo .infotext::after { .section--plans .overinfo .infotext::after {
content: " "; content: " ";
position: absolute; position: absolute;
bottom: 100%; bottom: 100%;
@ -191,11 +188,17 @@
border-width: 5px; border-width: 5px;
border-style: solid; border-style: solid;
border-color: transparent transparent #555555 transparent; } border-color: transparent transparent #555555 transparent; }
.plans .overinfo .infotext { .section--plans .overinfo .infotext {
opacity: 0; opacity: 0;
transition: opacity 0.5s; } transition: opacity 0.5s; }
.plans .overinfo:hover .infotext { .section--plans .overinfo:hover .infotext {
opacity: 1; } opacity: 1; }
.section--plans .datasheet {
margin-bottom: 50px; }
.section--plans .datasheet h4 {
margin-bottom: 10px; }
.section--plans .datasheet .button {
margin: 0; }
.form-mail { .form-mail {
height: 30px; height: 30px;

22
assets/css/pages/pricing.scss
Просмотреть файл

@ -15,10 +15,10 @@
} }
} }
.plans { .section--plans {
margin-top: 133px; margin-top: 133px;
h1 { h1 {
margin-bottom: 10px; margin-bottom: 40px;
} }
h3 { h3 {
font-size: 1.8em; font-size: 1.8em;
@ -30,13 +30,10 @@
border: solid 1px #eeeeee; border: solid 1px #eeeeee;
padding: 0px; padding: 0px;
width: 31%; width: 31%;
margin-left: 1%; margin: 20px 1% 50px 1%;
margin-right: 1%;
margin-bottom: 50px;
@media (max-width: $break-big) { @media (max-width: $break-big) {
width: 80%; width: 80%;
margin: auto; margin: 20px auto 60px auto;
margin-bottom: 60px;
} }
.table-header { .table-header {
padding: 0px; padding: 0px;
@ -220,8 +217,15 @@
.overinfo:hover .infotext { .overinfo:hover .infotext {
opacity: 1; opacity: 1;
} }
.datasheet {
margin-bottom: 50px;
h4 {
margin-bottom: 10px;
}
.button {
margin: 0;
}
}
} }
.form-mail { .form-mail {

62
page-pricing.php
Просмотреть файл

@ -1,5 +1,5 @@
<head> <head>
<link href="<?php echo get_template_directory_uri(); ?>/assets/css/pages/pricing.css?v=8" rel="stylesheet"> <link href="<?php echo get_template_directory_uri(); ?>/assets/css/pages/pricing.css?v=9" rel="stylesheet">
<script> <script>
require(["require.config"], function() { require(["require.config"], function() {
require(["pages/pricing", "modules/submenu", "bootstrap"]) require(["pages/pricing", "modules/submenu", "bootstrap"])
@ -23,21 +23,20 @@
<a href="#options"><?php echo $l->t('options');?></a> <a href="#options"><?php echo $l->t('options');?></a>
<a href="#discounts"><?php echo $l->t('discounts');?></a> <a href="#discounts"><?php echo $l->t('discounts');?></a>
<a class="button button--blue" href="<?php echo home_url('faq') ?>"><?php echo $l->t('FAQ');?></a> <a class="button button--blue" href="<?php echo home_url('faq') ?>"><?php echo $l->t('FAQ');?></a>
<a class="button button--blue" href="<?php echo home_url('enterprise/order') ?>"><?php echo $l->t('Order online');?></a> <a class="button button--blue" href="<?php echo home_url('enterprise/order') ?>"><?php echo $l->t('Order');?></a>
<a class="button button--blue" href="<?php echo home_url('buy') ?>"><?php echo $l->t('get a quote');?></a> <a class="button button--blue" href="<?php echo home_url('buy') ?>"><?php echo $l->t('Quote');?></a>
<a class="button button--blue" href="<?php echo home_url('trial') ?>"><?php echo $l->t('Start a trial');?></a> <a class="button button--blue" href="<?php echo home_url('trial') ?>"><?php echo $l->t('Trial');?></a>
<a class="button button--blue" href="<?php echo home_url('enterprise') ?>"><?php echo $l->t('enterprise offering');?></a> <a class="button button--blue" href="<?php echo home_url('enterprise') ?>"><?php echo $l->t('Enterprise');?></a>
</div> </div>
</div> </div>
</section> </section>
<section class="section--plans"> <section class="section--plans">
<a name="plans" id="plans"></a> <a name="plans" id="plans"></a>
<div class="container plans"> <div class="container">
<div class="row"> <div class="row">
<div class="col-md-8 col-md-offset-2"> <div class="col-md-8 col-md-offset-2">
<h1 class="header"><?php echo $l->t('Plans and Pricing<br> <h1 class="header"><?php echo $l->t('Plans and Pricing');?></h1>
for Nextcloud Enterprise');?></h1>
<h3 class="text-center"><?php echo $l->t('Successfully host your private cloud');?><br /> <a class="hyperlink" href="<?php echo home_url('enterprise') ?>"><?php echo $l->t('with Nextcloud Enterprise.');?></a></h3> <h3 class="text-center"><?php echo $l->t('Successfully host your private cloud');?><br /> <a class="hyperlink" href="<?php echo home_url('enterprise') ?>"><?php echo $l->t('with Nextcloud Enterprise.');?></a></h3>
<p class="section--paragraph text-center"><?php echo $l->t('Run a Proof of Concept or trial for free with Nextcloud Enterprise.');?> <a class="hyperlink" href="<?php echo home_url('trial') ?>"><?php echo $l->t('Request a trial!');?></a></p> <p class="section--paragraph text-center"><?php echo $l->t('Run a Proof of Concept or trial for free with Nextcloud Enterprise.');?> <a class="hyperlink" href="<?php echo home_url('trial') ?>"><?php echo $l->t('Request a trial!');?></a></p>
</div> </div>
@ -205,6 +204,29 @@
</div> </div>
</div> </div>
</div> </div>
<div class="container datasheet">
<div class="row">
<!-- <div style="width: 600px; margin-left: auto; margin-right:auto;"> -->
<div class="col-md-12">
<div class="text-center">
<form name="whitepaper" method="post" action="<?php echo home_url('whitepaper-submit') ?>">
<div class="newsletter">
<input type="hidden" name="newsletter" value="0" />
<!-- <input type="checkbox" name="newsletter" value="1"> <small>Sign me up for the Nextcloud newsletter</small><br/> -->
<input type="hidden" name="moreinfo" value="0" />
<h4><?php echo $l->t('Get the pricing data sheets for more information');?></h4>
<input type="checkbox" name="moreinfo" value="1"> <small><?php echo $l->t('Subscribe me to the monthly Nextcloud newsletter');?></small>
</div>
<label for="email">
<input type="hidden" name="segmentId" value="15">
<input class="form-mail" type="text" name="email" maxlength="80" placeholder=" Enter your email "> <input class="button button--white button--small" type="submit" value=" Get the data sheets "> <br />
<small><?php echo $l->t('(We do not use your email for anything else. See our');?> <a class="hyperlink" href="<?php echo home_url('privacy') ?>"><?php echo $l->t('privacy policy.)');?></a></small>
</label>
</form>
</div>
</div>
</div>
</div>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
@ -218,30 +240,6 @@
</div> </div>
</div> </div>
</div> </div>
<div class="container ">
<div class="row">
<!-- <div style="width: 600px; margin-left: auto; margin-right:auto;"> -->
<div class="col-md-12">
<form name="whitepaper" method="post" action="<?php echo home_url('whitepaper-submit') ?>">
<label for="email">
<p>
<?php echo $l->t('For more details, download our subscription data sheets: ');?>
<input type="hidden" name="segmentId" value="15">
<input class="form-mail" type="text" name="email" maxlength="80" placeholder=" Enter your email ">
</p>
</label>
<div class="newsletter">
<input type="hidden" name="newsletter" value="0" />
<!-- <input type="checkbox" name="newsletter" value="1"> <small>Sign me up for the Nextcloud newsletter</small><br/> -->
<input type="hidden" name="moreinfo" value="0" />
<input type="checkbox" name="moreinfo" value="1"> <small><?php echo $l->t('Subscribe me to the monthly Nextcloud newsletter');?></small>
<small><?php echo $l->t('(We do not use your email for anything else. See our');?> <a class="hyperlink" href="<?php echo home_url('privacy') ?>"><?php echo $l->t('privacy policy.)');?></a></small>
</div>
<input class="button button--white button--small" type="submit" value=" Get the data sheets ">
</form>
</div>
</div>
</div>
</section> </section>
<section class="section--others quote"> <section class="section--others quote">

9
page-whitepaper-submit.php
Просмотреть файл

@ -46,7 +46,7 @@ try {
} }
$email_to = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL); $email_to = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
if(!filter_var($email_to, FILTER_VALIDATE_EMAIL)) { if(!filter_var($email_to, FILTER_VALIDATE_EMAIL)) {
throw new HintException('The email address supplied is invalid.'); throw new HintException('The email address is invalid or missing.');
} }
$newsletter = (int)$_POST['moreinfo']; $newsletter = (int)$_POST['moreinfo'];
$whitepaper_nr = (int)$_POST['segmentId']; $whitepaper_nr = (int)$_POST['segmentId'];
@ -116,10 +116,9 @@ try {
?> ?>
<section class="section--whitepaper"> <section class="section--whitepaper">
<div class="container text-center"> <div class="container text-center">
<h3>Sorry, there was an error with the form you submitted</h3> <p>Sorry, there was an error with the form you submitted.<br />
<p>Did you fill in all mandatory fields?<br /> The error(s) detected:<br/>
The error(s) detected include:<br/> <h3><?php echo htmlentities($e->getHint()); ?></h3>
<?php echo htmlentities($e->getHint()); ?>
</p> </p>
<p>Please use the back key to go to <br/>the previous page and fix the issue, or <br /> <a href="https://nextcloud.com/contact">contact us with the error message.</a></p> <p>Please use the back key to go to <br/>the previous page and fix the issue, or <br /> <a href="https://nextcloud.com/contact">contact us with the error message.</a></p>
</div> </div>