implement pricing page feedback
Signed-off-by: Jos Poortvliet <jospoortvliet@gmail.com>
This commit is contained in:
Jos Poortvliet
Родитель
13c4fdbbbe
Коммит
a93c9d2fe2
|
|
@ -5567,15 +5567,15 @@ footer.page-footer {
|
|||
transition: transform 500ms ease;
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
opacity: 0;
|
||||
margin-top: 0px !important; }
|
||||
margin-top: 0px !important;
|
||||
height: 100px; }
|
||||
.second-menu .menu.hidedPrincipalNavigation {
|
||||
transform: translate3d(0px, -100px, 0px); }
|
||||
.second-menu .menu .buttons {
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
padding: 40px 0 30px 0;
|
||||
border-bottom: solid 1px #e4e4e4; }
|
||||
padding: 30px 0 20px 0; }
|
||||
@media (max-width: 991px) {
|
||||
.second-menu .menu .buttons {
|
||||
padding: 30px 0 25px 0; } }
|
||||
|
|
@ -5599,13 +5599,17 @@ footer.page-footer {
|
|||
.second-menu .menu .buttons a:hover {
|
||||
text-decoration: none;
|
||||
color: #0082c9; }
|
||||
.second-menu .menu .buttons .button {
|
||||
min-height: 40px !important;
|
||||
height: 40px !important;
|
||||
min-width: 100px !important; }
|
||||
.second-menu .menu .buttons .btn-primary {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
padding: 8px 20px;
|
||||
margin-left: 20px;
|
||||
margin-top: -5px;
|
||||
color: white; }
|
||||
font-size: 13px;
|
||||
padding: 0 15px 0 15px;
|
||||
margin: -9px 0px 0px 10px;
|
||||
color: white;
|
||||
line-height: 45px; }
|
||||
@media (max-width: 768px) {
|
||||
.second-menu .menu .buttons .btn-primary {
|
||||
margin-top: 10px; } }
|
||||
|
|
@ -5618,12 +5622,9 @@ footer.page-footer {
|
|||
float: right;
|
||||
font-size: 14px;
|
||||
padding: 0 20px 0 20px;
|
||||
margin: -9px 0px 0px 20px;
|
||||
/* margin-left: 20px; */
|
||||
/* margin-top: -5px; */
|
||||
margin: -5px 0px 0px 10px;
|
||||
color: white;
|
||||
height: 40px;
|
||||
line-height: 50px; }
|
||||
line-height: 40px; }
|
||||
@media (max-width: 768px) {
|
||||
.second-menu .menu .buttons .button--blue {
|
||||
margin-top: 10px; } }
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
transform: translate3d(0px, 0px, 0px);
|
||||
opacity: 0;
|
||||
margin-top: 0px !important;
|
||||
height: 100px;
|
||||
|
||||
&.hidedPrincipalNavigation {
|
||||
transform: translate3d(0px, -100px, 0px);
|
||||
|
|
@ -29,10 +30,10 @@
|
|||
|
||||
.buttons {
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
padding: 40px 0 30px 0;
|
||||
border-bottom: solid 1px #e4e4e4;
|
||||
padding: 30px 0 20px 0;
|
||||
|
||||
|
||||
@media (max-width: $break-big) {
|
||||
padding: 30px 0 25px 0;
|
||||
|
|
@ -71,14 +72,18 @@
|
|||
color: $nextcloud-blue;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
min-height: 40px !important;
|
||||
height: 40px !important;
|
||||
min-width: 100px !important;
|
||||
}
|
||||
.btn-primary {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
padding: 8px 20px;
|
||||
margin-left: 20px;
|
||||
margin-top: -5px;
|
||||
font-size: 13px;
|
||||
padding: 0 15px 0 15px;
|
||||
margin: -9px 0px 0px 10px;
|
||||
color: white;
|
||||
line-height: 45px;
|
||||
|
||||
@media (max-width: $break-small) {
|
||||
margin-top: 10px;
|
||||
|
|
@ -98,12 +103,9 @@
|
|||
float: right;
|
||||
font-size: 14px;
|
||||
padding: 0 20px 0 20px;
|
||||
margin: -9px 0px 0px 20px;
|
||||
/* margin-left: 20px; */
|
||||
/* margin-top: -5px; */
|
||||
margin: -5px 0px 0px 10px;
|
||||
color: white;
|
||||
height: 40px;
|
||||
line-height: 50px;
|
||||
line-height: 40px;
|
||||
|
||||
@media (max-width: $break-small) {
|
||||
margin-top: 10px;
|
||||
|
|
|
|||
|
|
@ -29,6 +29,17 @@
|
|||
background-color: transparent;
|
||||
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 {
|
||||
background-image: url("../../img/headers/enterprise.jpg");
|
||||
background-position: center 0 right 0;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@import '../variables';
|
||||
@import '../modules/transparent-navbar';
|
||||
@import '../modules/transparent-gradient';
|
||||
|
||||
.buy-background {
|
||||
background-image: url("../../img/headers/enterprise.jpg");
|
||||
|
|
|
|||
|
|
@ -49,36 +49,33 @@
|
|||
.pricing-background .menu {
|
||||
margin-top: -100px; }
|
||||
|
||||
.plans {
|
||||
.section--plans {
|
||||
margin-top: 133px;
|
||||
/* Tooltips */
|
||||
/* Tooltip text */
|
||||
/* Show the tooltip text when you mouse over the tooltip container */ }
|
||||
.plans h1 {
|
||||
margin-bottom: 10px; }
|
||||
.plans h3 {
|
||||
.section--plans h1 {
|
||||
margin-bottom: 40px; }
|
||||
.section--plans h3 {
|
||||
font-size: 1.8em;
|
||||
margin-bottom: 45px; }
|
||||
.plans .table-column {
|
||||
.section--plans .table-column {
|
||||
cursor: default;
|
||||
border-radius: 8px;
|
||||
border: solid 1px #eeeeee;
|
||||
padding: 0px;
|
||||
width: 31%;
|
||||
margin-left: 1%;
|
||||
margin-right: 1%;
|
||||
margin-bottom: 50px; }
|
||||
margin: 20px 1% 50px 1%; }
|
||||
@media (max-width: 991px) {
|
||||
.plans .table-column {
|
||||
.section--plans .table-column {
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
margin-bottom: 60px; } }
|
||||
.plans .table-column .table-header {
|
||||
margin: 20px auto 60px auto; } }
|
||||
.section--plans .table-column .table-header {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
width: 100%;
|
||||
border-radius: 7px 7px 0px 0px; }
|
||||
.plans .table-column .table-header h1 {
|
||||
.section--plans .table-column .table-header h1 {
|
||||
text-align: center;
|
||||
color: #2a2a36;
|
||||
font-size: 22px;
|
||||
|
|
@ -88,7 +85,7 @@
|
|||
margin: 0px;
|
||||
padding-top: 42px;
|
||||
letter-spacing: 0; }
|
||||
.plans .table-column .table-header h2 {
|
||||
.section--plans .table-column .table-header h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
|
|
@ -98,24 +95,24 @@
|
|||
margin: 0px;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 29px; }
|
||||
.plans .table-column .basic {
|
||||
.section--plans .table-column .basic {
|
||||
background-color: #f9f9f9; }
|
||||
.plans .table-column .standard {
|
||||
.section--plans .table-column .standard {
|
||||
background-color: #c4e1f7; }
|
||||
.plans .table-column .premium {
|
||||
.section--plans .table-column .premium {
|
||||
background-color: #178ecd; }
|
||||
.plans .table-column .premium h1 {
|
||||
.section--plans .table-column .premium h1 {
|
||||
color: white !important; }
|
||||
.plans .table-column .premium h2 {
|
||||
.section--plans .table-column .premium h2 {
|
||||
color: white !important; }
|
||||
.plans .table-column .highlight {
|
||||
.section--plans .table-column .highlight {
|
||||
box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.16); }
|
||||
.plans .table-content {
|
||||
.section--plans .table-content {
|
||||
margin: 15px;
|
||||
padding: 0px;
|
||||
margin-left: 30px;
|
||||
margin-right: 30px; }
|
||||
.plans .table-content h1 {
|
||||
.section--plans .table-content h1 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
|
|
@ -126,44 +123,44 @@
|
|||
letter-spacing: 0;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 0px; }
|
||||
.plans .table-content .button--large {
|
||||
.section--plans .table-content .button--large {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
width: 100%; }
|
||||
.plans .line {
|
||||
.section--plans .line {
|
||||
width: 100%;
|
||||
border: solid 1px #eeeeee;
|
||||
margin-top: -5px;
|
||||
margin-bottom: 15px; }
|
||||
.plans .hyperlink {
|
||||
.section--plans .hyperlink {
|
||||
color: #555555; }
|
||||
.plans .list li {
|
||||
.section--plans .list li {
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 1.2;
|
||||
height: 50px; }
|
||||
.plans .list .check {
|
||||
.section--plans .list .check {
|
||||
list-style-image: url("../../img/enterprise/check.svg");
|
||||
list-style-position: inside;
|
||||
color: #555555; }
|
||||
.plans .list .nocheck {
|
||||
.section--plans .list .nocheck {
|
||||
list-style-image: url("../../img/enterprise/nocheck.svg");
|
||||
list-style-position: inside;
|
||||
color: #b1b1b1; }
|
||||
.plans .list .nocheck a {
|
||||
.section--plans .list .nocheck a {
|
||||
color: #b1b1b1;
|
||||
text-decoration: none; }
|
||||
.plans .list .optional {
|
||||
.section--plans .list .optional {
|
||||
list-style-image: url("../../img/enterprise/optional.svg");
|
||||
list-style-position: inside;
|
||||
color: #555555; }
|
||||
.plans .list .ball {
|
||||
.section--plans .list .ball {
|
||||
list-style-image: url("../../img/enterprise/blank.svg");
|
||||
list-style-position: inside;
|
||||
color: #555555; }
|
||||
.plans .overinfo .infotext {
|
||||
.section--plans .overinfo .infotext {
|
||||
visibility: hidden;
|
||||
/* width: 200px; */
|
||||
background-color: #555555;
|
||||
|
|
@ -179,9 +176,9 @@
|
|||
/* top: 100%; */
|
||||
/* left: 50%; */
|
||||
/* margin-left: -100px; */ }
|
||||
.plans .overinfo:hover .infotext {
|
||||
.section--plans .overinfo:hover .infotext {
|
||||
visibility: visible; }
|
||||
.plans .overinfo .infotext::after {
|
||||
.section--plans .overinfo .infotext::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
|
|
@ -191,11 +188,17 @@
|
|||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent #555555 transparent; }
|
||||
.plans .overinfo .infotext {
|
||||
.section--plans .overinfo .infotext {
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s; }
|
||||
.plans .overinfo:hover .infotext {
|
||||
.section--plans .overinfo:hover .infotext {
|
||||
opacity: 1; }
|
||||
.section--plans .datasheet {
|
||||
margin-bottom: 50px; }
|
||||
.section--plans .datasheet h4 {
|
||||
margin-bottom: 10px; }
|
||||
.section--plans .datasheet .button {
|
||||
margin: 0; }
|
||||
|
||||
.form-mail {
|
||||
height: 30px;
|
||||
|
|
|
|||
|
|
@ -15,10 +15,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.plans {
|
||||
.section--plans {
|
||||
margin-top: 133px;
|
||||
h1 {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.8em;
|
||||
|
|
@ -30,13 +30,10 @@
|
|||
border: solid 1px #eeeeee;
|
||||
padding: 0px;
|
||||
width: 31%;
|
||||
margin-left: 1%;
|
||||
margin-right: 1%;
|
||||
margin-bottom: 50px;
|
||||
margin: 20px 1% 50px 1%;
|
||||
@media (max-width: $break-big) {
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
margin-bottom: 60px;
|
||||
margin: 20px auto 60px auto;
|
||||
}
|
||||
.table-header {
|
||||
padding: 0px;
|
||||
|
|
@ -220,8 +217,15 @@
|
|||
.overinfo:hover .infotext {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
.datasheet {
|
||||
margin-bottom: 50px;
|
||||
h4 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.button {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-mail {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<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>
|
||||
require(["require.config"], function() {
|
||||
require(["pages/pricing", "modules/submenu", "bootstrap"])
|
||||
|
|
@ -23,21 +23,20 @@
|
|||
<a href="#options"><?php echo $l->t('options');?></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('enterprise/order') ?>"><?php echo $l->t('Order online');?></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('trial') ?>"><?php echo $l->t('Start a 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/order') ?>"><?php echo $l->t('Order');?></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('Trial');?></a>
|
||||
<a class="button button--blue" href="<?php echo home_url('enterprise') ?>"><?php echo $l->t('Enterprise');?></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section--plans">
|
||||
<a name="plans" id="plans"></a>
|
||||
<div class="container plans">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<h1 class="header"><?php echo $l->t('Plans and Pricing<br>
|
||||
for Nextcloud Enterprise');?></h1>
|
||||
<h1 class="header"><?php echo $l->t('Plans and Pricing');?></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>
|
||||
<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>
|
||||
|
|
@ -205,6 +204,29 @@
|
|||
</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="row">
|
||||
<div class="col-md-12">
|
||||
|
|
@ -218,30 +240,6 @@
|
|||
</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 class="section--others quote">
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ try {
|
|||
}
|
||||
$email_to = filter_var($_POST['email'], FILTER_SANITIZE_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'];
|
||||
$whitepaper_nr = (int)$_POST['segmentId'];
|
||||
|
|
@ -116,10 +116,9 @@ try {
|
|||
?>
|
||||
<section class="section--whitepaper">
|
||||
<div class="container text-center">
|
||||
<h3>Sorry, there was an error with the form you submitted</h3>
|
||||
<p>Did you fill in all mandatory fields?<br />
|
||||
The error(s) detected include:<br/>
|
||||
<?php echo htmlentities($e->getHint()); ?>
|
||||
<p>Sorry, there was an error with the form you submitted.<br />
|
||||
The error(s) detected:<br/>
|
||||
<h3><?php echo htmlentities($e->getHint()); ?></h3>
|
||||
</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>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче