From a93c9d2fe2ec26ea1d29226837c76c57f5560905 Mon Sep 17 00:00:00 2001
From: Jos Poortvliet <jospoortvliet@gmail.com>
Date: Fri, 18 Dec 2020 20:04:52 +0100
Subject: [PATCH] implement pricing page feedback

Signed-off-by: Jos Poortvliet <jospoortvliet@gmail.com>
---
 assets/css/custom.css              | 29 ++++++------
 assets/css/modules/secondmenu.scss | 28 +++++------
 assets/css/pages/order.css         | 11 +++++
 assets/css/pages/order.scss        |  1 +
 assets/css/pages/pricing.css       | 75 ++++++++++++++++--------------
 assets/css/pages/pricing.scss      | 22 +++++----
 page-pricing.php                   | 62 ++++++++++++------------
 page-whitepaper-submit.php         |  9 ++--
 8 files changed, 128 insertions(+), 109 deletions(-)

diff --git a/assets/css/custom.css b/assets/css/custom.css
index e669118f..c2af3959 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -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; } }
diff --git a/assets/css/modules/secondmenu.scss b/assets/css/modules/secondmenu.scss
index a428e6d1..ed93922f 100644
--- a/assets/css/modules/secondmenu.scss
+++ b/assets/css/modules/secondmenu.scss
@@ -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;
diff --git a/assets/css/pages/order.css b/assets/css/pages/order.css
index 445198c6..df1bd02a 100644
--- a/assets/css/pages/order.css
+++ b/assets/css/pages/order.css
@@ -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;
diff --git a/assets/css/pages/order.scss b/assets/css/pages/order.scss
index fa1fdcca..5a8c8b19 100644
--- a/assets/css/pages/order.scss
+++ b/assets/css/pages/order.scss
@@ -1,5 +1,6 @@
 @import '../variables';
 @import '../modules/transparent-navbar';
+@import '../modules/transparent-gradient';
 
 .buy-background {
   background-image: url("../../img/headers/enterprise.jpg");
diff --git a/assets/css/pages/pricing.css b/assets/css/pages/pricing.css
index dee0f79a..9100bbee 100644
--- a/assets/css/pages/pricing.css
+++ b/assets/css/pages/pricing.css
@@ -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;
diff --git a/assets/css/pages/pricing.scss b/assets/css/pages/pricing.scss
index 4f13f58c..05a62a68 100644
--- a/assets/css/pages/pricing.scss
+++ b/assets/css/pages/pricing.scss
@@ -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 {
diff --git a/page-pricing.php b/page-pricing.php
index f69cfa14..affd2fd2 100644
--- a/page-pricing.php
+++ b/page-pricing.php
@@ -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">
diff --git a/page-whitepaper-submit.php b/page-whitepaper-submit.php
index 1ba5621e..69d60e0d 100644
--- a/page-whitepaper-submit.php
+++ b/page-whitepaper-submit.php
@@ -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>