diff --git a/static/css/pages/plans.css b/static/css/pages/plans.css new file mode 100644 index 000000000..d715606c3 --- /dev/null +++ b/static/css/pages/plans.css @@ -0,0 +1,221 @@ +.plans-panel { + padding: 0px; + padding-top: 50px; +} + +.plans-panel .plans-header { + font-size: 22px; + color: #888; + margin-bottom: 40px; + text-align: center; +} + +.plans-panel .plan-tabs { + text-align: center; + margin-left: 30px; + margin-right: 30px; + margin-bottom: 40px; +} + +.plans-panel .plan-tabs li { + float: none; + display: inline-block; + width: 49%; +} + +.plans-panel .plans-tab a { + padding-bottom: 25px; +} + +.plans-panel .plan-tabs a .tab-logo { + display: block; + margin-bottom: 25px; + text-align: center; + margin-top: 25px; +} + +.plans-panel .plan-tabs a .tab-logo img { + height: 40px; +} + +.plans-panel .plan-tabs a .tab-title { + display: block; + text-align: center; + font-size: 16px; + color: #888; +} + +@media (max-width: 767px) { + .plans-panel .plan-tabs a .tab-title { + display: none; + } + + .plans-panel .plan-tabs a .tab-logo img { + height: 20px; + max-width: 100%; + } +} + +.plans-panel .tab-pane .plan-col { + padding-left: 12px; + padding-right: 12px; +} + +.plans-panel .plan-col:before { + display: block; + text-align: center; + content: "-"; + text-transform: uppercase; + color: white; +} + +.plans-panel .plan-col.popular:before { + content: "Most Popular"; + color: #2276ad; + background-color: #c1dff3; +} + +.plans-panel .plan-box { + background-color: #1d3447; + color: #ddd; + padding: 20px; +} + +.plans-panel .plan-box .plan-header { + margin-bottom: 20px; + padding-bottom: 20px; + border-bottom: 1px dashed #495b6a; +} + +.plans-panel .plan-box .plan-description { + margin-top: 20px; + padding-top: 20px; + border-top: 1px dashed #495b6a; + + text-align: center; + font-size: 16px; + margin-bottom: 20px; +} + +.plans-panel .plan-box .plan-header b { + font-size: 18px; + color: white; +} + +.plans-panel .plan-box .plan-header .plan-box-price { + float: right; + width: 60px; + font-size: 22px; + position: relative; +} + +.plans-panel .plan-box .trial-button { + display: block; + text-align: center; + width: 100%; +} + +.plans-panel .plan-box select { + margin-bottom: 10px; +} + +.plans-panel .plan-box ul { + padding: 0px; + padding-left: 16px; +} + +.plans-panel .plan-box .plan-header .plan-box-price:after { + content: "/ mo"; + position: absolute; + top: 9px; + right: 0px; + font-size: 12px; + color: #aaa; +} + +.plans-panel .plan-features { + margin: 0px; + margin-top: 10px; + list-style: none; + color: #6aab56; + text-align: center; + padding: 0px; +} + +.plans-panel .plan-features i.fa { + margin-right: 10px; +} + +.plans-panel .faq-features { + margin-top: 60px; + border-top: 1px solid #ddd; +} + +.plans-panel .features-col { + background-color: #f9f9f9; + padding: 30px; + border: 1px solid #ddd; + border-top: 0px; +} + +.plans-panel .row-container { + margin-left: 30px; + margin-right: 30px; +} + +.plans-panel .row-container-no-margin { + margin-right: 15px; + margin-left: 15px; +} + +.plans-panel .tab-content { + margin-bottom: 30px; +} + +.plans-panel .features-col .features-title { + text-align: center; + font-size: 18px; + margin-bottom: 20px; + color: #1d3447; + font-weight: bold; +} + +.plans-panel .features-col .features-list { + padding: 0px; + list-style: none; +} + +.plans-panel .features-col .features-list li { + position: relative; + padding-left: 36px; + margin-bottom: 20px; +} + +.plans-panel .features-col .features-list li i { + position: absolute; + font-size: 25px; + color: #2e79b9; + left: 0px; +} + +.plans-panel .features-col .features-list li b { + display: block; + color: #2e79b9; + font-size: 16px; + margin-bottom: 12px; +} + +.plans-panel .faq-col { + padding: 50px; + padding-top: 30px; + padding-left: 30px; +} + +.plans-panel .faq-col h4 { + color: #2e79b9; + margin-top: 50px; +} + +.plans-panel .faq-col h4:first-child { + margin-top: 0px; +} diff --git a/static/img/QuayEnterprise_horizontal_color.svg b/static/img/QuayEnterprise_horizontal_color.svg new file mode 100644 index 000000000..8b6c0cb3a --- /dev/null +++ b/static/img/QuayEnterprise_horizontal_color.svg @@ -0,0 +1,108 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/img/Quay_horizontal_color.svg b/static/img/Quay_horizontal_color.svg new file mode 100644 index 000000000..d8ccc161f --- /dev/null +++ b/static/img/Quay_horizontal_color.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/static/js/pages/plans.js b/static/js/pages/plans.js index 22b73d1bd..1c05bbadf 100644 --- a/static/js/pages/plans.js +++ b/static/js/pages/plans.js @@ -4,7 +4,8 @@ */ angular.module('quayPages').config(['pages', function(pages) { pages.create('plans', 'plans.html', PlansCtrl, { - 'title': 'Plans and Pricing' + 'title': 'Plans and Pricing', + 'newLayout': true }); }]); @@ -30,6 +31,14 @@ PlanService.getPlans(function(plans) { $scope.plans = plans; + for (var i = 0; i < $scope.plans.length; ++i) { + var plan = plans[i]; + if (plan.privateRepos > 20 && !plan.plans_page_hidden) { + $scope.dropdownPlan = plan.stripeId; + break + } + } + if ($scope && $routeParams['trial-plan']) { $scope.buyNow($routeParams['trial-plan']); } diff --git a/static/partials/plans.html b/static/partials/plans.html index a9ad82c6b..9a861881a 100644 --- a/static/partials/plans.html +++ b/static/partials/plans.html @@ -1,148 +1,218 @@ -
-
-
-