vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Start on revamp of the plans page

Browse source 
This PR implements the hosted side; QE side will come in the next PR

First steps in #559
This commit is contained in:
Joseph Schorr 2015-10-22 17:10:25 -04:00
parent f867ac5bfe
commit 9a39859221
5 changed files with 583 additions and 135 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

221
static/css/pages/plans.css Normal file
View file

@ -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;
}

108
static/img/QuayEnterprise_horizontal_color.svg Normal file
View file

@ -0,0 +1,108 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="636.213px" height="79.308px" viewBox="0 0 636.213 79.308" enable-background="new 0 0 636.213 79.308"
xml:space="preserve">
<g>
<path fill="#003764" d="M139.937,74.385c-1.004,0.502-2.33,0.922-3.975,1.257c-1.646,0.335-3.529,0.503-5.649,0.504
c-5.803,0.002-10.7-1.337-14.688-4.014c-3.991-2.676-6.963-6.164-8.917-10.458c-2.902-0.613-5.539-1.686-7.91-3.221
c-2.373-1.533-4.395-3.499-6.07-5.898c-1.674-2.397-2.959-5.174-3.852-8.326c-0.894-3.15-1.341-6.652-1.342-10.502
c-0.001-4.464,0.597-8.439,1.796-11.928c1.198-3.486,2.885-6.416,5.061-8.788s4.782-4.187,7.824-5.443
c3.04-1.256,6.402-1.885,10.084-1.886c3.683-0.001,7.044,0.626,10.086,1.88c3.041,1.255,5.65,3.083,7.827,5.479
c2.177,2.399,3.864,5.343,5.066,8.829c1.2,3.486,1.801,7.435,1.803,11.842c0.002,7.364-1.559,13.419-4.681,18.162
c-3.124,4.743-7.335,7.869-12.635,9.377c1.284,1.896,3.014,3.221,5.19,3.975c2.176,0.752,4.436,1.128,6.779,1.128
c1.172-0.001,2.273-0.1,3.306-0.294c1.032-0.197,1.938-0.434,2.72-0.713L139.937,74.385z M100.171,33.723
c0.002,5.858,1.091,10.406,3.268,13.641c2.177,3.235,5.134,4.852,8.873,4.851c3.737-0.001,6.695-1.619,8.87-4.855
c2.175-3.236,3.262-7.784,3.26-13.643c-0.001-5.468-1.091-9.736-3.268-12.805c-2.177-3.067-5.135-4.602-8.873-4.601
c-3.739,0.001-6.695,1.537-8.87,4.605C101.256,23.986,100.169,28.255,100.171,33.723z"/>
<path fill="#003764" d="M142.594,6.677l12.387-0.003l0.009,30.548c0.001,5.356,0.811,9.094,2.43,11.214
c1.618,2.12,3.962,3.179,7.031,3.178c3.068-0.001,5.439-1.061,7.113-3.182s2.509-5.859,2.507-11.216l-0.009-30.548l11.884-0.004
l0.008,29.292c0.003,9.151-1.823,15.819-5.476,20.005c-3.653,4.186-8.995,6.279-16.025,6.281c-7.086,0.002-12.5-2.088-16.238-6.271
c-3.74-4.184-5.61-10.851-5.613-20.002L142.594,6.677z"/>
<path fill="#003764" d="M218.766,48.25l-16.655,0.005l-3.344,12.974l-12.554,0.003L203.27,6.659l14.813-0.004l17.089,54.562
l-13.056,0.004L218.766,48.25z M216.252,38.626l-1.257-5.021c-0.783-2.733-1.537-5.635-2.262-8.703
c-0.727-3.068-1.454-6.026-2.179-8.871h-0.334c-0.669,2.901-1.352,5.873-2.048,8.914c-0.697,3.041-1.436,5.929-2.215,8.663
l-1.337,5.021L216.252,38.626z"/>
<path fill="#003764" d="M242.867,41.799L226.37,6.652l13.223-0.003l4.857,12.552c0.782,2.065,1.521,4.06,2.22,5.983
c0.697,1.925,1.437,3.948,2.22,6.067h0.334c0.78-2.12,1.547-4.144,2.3-6.068c0.752-1.925,1.519-3.919,2.299-5.985l4.935-12.555
l12.889-0.004L255.17,41.795l0.005,19.417l-12.303,0.004L242.867,41.799z"/>
<path fill="#003764" d="M302.11,6.045l30.213-0.009l0.001,3.348L305.96,9.392l0.006,20.84l22.094-0.007l0.001,3.348l-22.094,0.007
l0.007,24.271l27.2-0.008l0.001,3.348l-31.049,0.009L302.11,6.045z"/>
<path fill="#003764" d="M344.796,21.014l3.181-0.001l0.337,6.193h0.251c2.063-2.064,4.184-3.78,6.359-5.149
c2.175-1.366,4.657-2.052,7.448-2.053c4.185-0.001,7.252,1.254,9.207,3.764c1.953,2.511,2.931,6.389,2.933,11.632l0.007,25.777
l-3.683,0.002l-0.007-25.275c-0.002-4.295-0.714-7.461-2.137-9.499c-1.424-2.035-3.781-3.054-7.073-3.053
c-2.399,0.001-4.575,0.63-6.526,1.886c-1.954,1.256-4.157,3.139-6.611,5.65l0.009,30.297l-3.683,0.001L344.796,21.014z"/>
<path fill="#003764" d="M390.242,24.181l-6.276,0.002l-0.001-2.845l6.36-0.337l0.499-11.634l3.181-0.001L394.008,21l11.633-0.004
l0.001,3.18l-11.633,0.004l0.008,26.196c0,1.284,0.098,2.441,0.294,3.473c0.194,1.033,0.545,1.924,1.047,2.678
c0.502,0.753,1.185,1.339,2.051,1.757c0.864,0.418,1.995,0.627,3.39,0.627c0.781-0.001,1.633-0.126,2.552-0.378
c0.921-0.251,1.743-0.545,2.469-0.879l1.006,3.013c-1.172,0.447-2.344,0.809-3.516,1.089c-1.171,0.278-2.175,0.419-3.012,0.419
c-1.953,0-3.572-0.292-4.854-0.877c-1.284-0.585-2.316-1.408-3.097-2.469c-0.783-1.059-1.327-2.342-1.634-3.849
c-0.308-1.506-0.462-3.151-0.462-4.938L390.242,24.181z"/>
<path fill="#003764" d="M411.253,41.165c-0.001-3.292,0.486-6.25,1.463-8.873c0.975-2.622,2.285-4.841,3.932-6.654
c1.645-1.813,3.515-3.209,5.605-4.187c2.093-0.976,4.254-1.466,6.486-1.467c4.798-0.001,8.563,1.617,11.299,4.852
c2.734,3.235,4.104,7.812,4.106,13.725c0,0.502,0,1.004,0,1.506c0,0.503-0.057,1.005-0.168,1.507l-28.957,0.008
c0.056,2.511,0.448,4.841,1.174,6.988c0.726,2.148,1.745,3.99,3.057,5.522c1.312,1.535,2.889,2.733,4.729,3.598
c1.841,0.865,3.905,1.297,6.194,1.296c2.176-0.001,4.142-0.321,5.899-0.965c1.757-0.641,3.39-1.521,4.895-2.637l1.508,2.844
c-1.618,0.951-3.389,1.843-5.313,2.681c-1.925,0.837-4.365,1.256-7.322,1.257c-2.567,0.001-4.98-0.473-7.24-1.421
c-2.26-0.946-4.228-2.327-5.901-4.141c-1.675-1.812-3.001-4.016-3.978-6.61C411.743,47.399,411.254,44.457,411.253,41.165z
M440.629,38.729c-0.002-5.188-1.063-9.08-3.184-11.674c-2.122-2.595-4.995-3.891-8.621-3.89c-1.73,0.001-3.377,0.364-4.938,1.09
c-1.562,0.726-2.97,1.759-4.226,3.098c-1.254,1.339-2.287,2.972-3.095,4.896c-0.809,1.926-1.324,4.088-1.546,6.486L440.629,38.729z
"/>
<path fill="#003764" d="M455.018,20.983l3.181-0.001l0.337,7.448l0.251-0.001c1.339-2.511,2.97-4.547,4.895-6.11
c1.925-1.562,4.086-2.345,6.485-2.346c0.781,0,1.478,0.057,2.093,0.167c0.613,0.112,1.255,0.335,1.925,0.669l-0.836,3.348
c-0.67-0.278-1.256-0.46-1.758-0.543s-1.145-0.125-1.925-0.125c-1.786,0.001-3.669,0.769-5.648,2.303
c-1.98,1.536-3.752,4.2-5.312,7.994l0.008,27.367l-3.683,0.002L455.018,20.983z"/>
<path fill="#003764" d="M485.242,64.66l0.005,14.646l-3.683,0.001l-0.018-58.333l3.181-0.001l0.337,5.021h0.251
c1.951-1.562,4.086-2.959,6.401-4.187c2.313-1.228,4.728-1.844,7.238-1.844c5.356-0.002,9.375,1.853,12.054,5.562
c2.679,3.711,4.02,8.69,4.021,14.938c0.001,3.404-0.473,6.444-1.42,9.122c-0.948,2.679-2.246,4.953-3.89,6.822
c-1.646,1.871-3.543,3.294-5.69,4.271c-2.148,0.977-4.393,1.465-6.736,1.466c-1.897,0.001-3.851-0.432-5.859-1.295
c-2.009-0.864-4.073-2.077-6.194-3.639L485.242,64.66z M485.239,53.697c2.345,1.896,4.521,3.234,6.529,4.015
c2.009,0.781,3.795,1.171,5.357,1.17c2.009-0.001,3.876-0.447,5.606-1.341c1.729-0.892,3.207-2.148,4.435-3.768
c1.227-1.617,2.188-3.558,2.886-5.817c0.696-2.26,1.045-4.756,1.044-7.49c-0.001-2.454-0.239-4.742-0.714-6.862
c-0.476-2.12-1.214-3.947-2.22-5.481c-1.004-1.534-2.315-2.733-3.935-3.598c-1.618-0.864-3.571-1.296-5.858-1.295
c-2.009,0-4.088,0.573-6.234,1.717c-2.148,1.145-4.449,2.777-6.903,4.898L485.239,53.697z"/>
<path fill="#003764" d="M527.074,20.961l3.181-0.001l0.337,7.448h0.251c1.339-2.511,2.97-4.548,4.895-6.11s4.086-2.346,6.485-2.346
c0.781-0.001,1.478,0.056,2.093,0.167c0.613,0.112,1.255,0.335,1.925,0.668l-0.836,3.349c-0.67-0.278-1.256-0.46-1.758-0.544
c-0.502-0.083-1.145-0.124-1.925-0.124c-1.786,0-3.669,0.769-5.648,2.302c-1.98,1.537-3.752,4.201-5.312,7.995l0.008,27.367
l-3.683,0.001L527.074,20.961z"/>
<path fill="#003764" d="M555.526,11.244c-0.95,0-1.745-0.306-2.386-0.92c-0.642-0.612-0.962-1.394-0.963-2.343
c0-1.06,0.32-1.883,0.962-2.47c0.641-0.586,1.435-0.879,2.385-0.879c0.947-0.001,1.744,0.292,2.386,0.878
c0.641,0.586,0.963,1.409,0.963,2.469c0.001,0.949-0.321,1.73-0.962,2.344C557.27,10.938,556.474,11.243,555.526,11.244z
M553.604,20.953l3.683-0.001l0.012,40.172l-3.683,0.001L553.604,20.953z"/>
<path fill="#003764" d="M569.933,53.839c1.729,1.451,3.57,2.664,5.524,3.64c1.952,0.976,4.38,1.464,7.282,1.463
c3.18-0.001,5.564-0.797,7.154-2.388s2.385-3.445,2.384-5.566c0-1.227-0.293-2.314-0.88-3.264
c-0.586-0.948-1.354-1.758-2.302-2.426c-0.95-0.67-1.996-1.256-3.14-1.757c-1.144-0.502-2.301-0.976-3.473-1.422
c-1.508-0.557-3.028-1.142-4.562-1.757c-1.535-0.612-2.916-1.351-4.144-2.217c-1.229-0.863-2.218-1.895-2.973-3.096
c-0.753-1.199-1.129-2.662-1.13-4.393c0-1.45,0.277-2.832,0.836-4.144c0.557-1.311,1.393-2.455,2.51-3.432
c1.115-0.977,2.468-1.744,4.058-2.304c1.59-0.557,3.444-0.838,5.565-0.838c2.12-0.001,4.198,0.39,6.235,1.17
c2.037,0.781,3.78,1.785,5.231,3.011l-2.008,2.596c-1.339-1.004-2.763-1.854-4.269-2.552c-1.507-0.696-3.293-1.045-5.356-1.044
c-1.562,0-2.902,0.21-4.018,0.629c-1.116,0.418-2.051,0.963-2.803,1.633c-0.753,0.669-1.312,1.451-1.674,2.343
c-0.362,0.894-0.543,1.787-0.543,2.679c0,1.172,0.266,2.163,0.796,2.971c0.53,0.81,1.241,1.521,2.136,2.135
c0.892,0.613,1.91,1.157,3.055,1.631c1.143,0.474,2.301,0.934,3.474,1.38c1.562,0.613,3.124,1.227,4.687,1.839
c1.562,0.615,2.972,1.367,4.228,2.259c1.256,0.894,2.273,1.995,3.056,3.305c0.781,1.312,1.173,2.944,1.173,4.896
c0.001,1.506-0.292,2.943-0.878,4.31c-0.585,1.368-1.463,2.567-2.634,3.601c-1.172,1.032-2.595,1.856-4.269,2.47
s-3.598,0.921-5.773,0.922c-3.013,0.001-5.776-0.543-8.287-1.63s-4.66-2.383-6.445-3.89L569.933,53.839z"/>
<path fill="#003764" d="M603.321,41.109c-0.001-3.292,0.486-6.25,1.463-8.873c0.975-2.622,2.285-4.841,3.932-6.654
c1.645-1.813,3.515-3.209,5.605-4.187c2.093-0.976,4.254-1.466,6.486-1.467c4.798-0.001,8.563,1.617,11.299,4.852
c2.734,3.235,4.104,7.812,4.106,13.725c0,0.502,0,1.004,0,1.506c0,0.503-0.057,1.005-0.168,1.507l-28.957,0.008
c0.056,2.511,0.448,4.841,1.174,6.988c0.726,2.148,1.745,3.99,3.057,5.522c1.312,1.535,2.889,2.733,4.729,3.598
c1.841,0.865,3.905,1.297,6.194,1.296c2.176-0.001,4.142-0.321,5.899-0.965c1.757-0.641,3.39-1.521,4.895-2.637l1.508,2.844
c-1.618,0.951-3.389,1.843-5.313,2.681c-1.925,0.837-4.365,1.256-7.322,1.257c-2.567,0.001-4.98-0.474-7.24-1.421
c-2.26-0.946-4.228-2.327-5.901-4.141c-1.675-1.812-3.001-4.016-3.978-6.61C603.812,47.343,603.322,44.401,603.321,41.109z
M632.697,38.673c-0.002-5.188-1.063-9.08-3.184-11.674c-2.122-2.595-4.995-3.891-8.621-3.89c-1.73,0.001-3.377,0.364-4.938,1.09
c-1.562,0.726-2.97,1.759-4.226,3.098c-1.254,1.339-2.287,2.972-3.095,4.896c-0.809,1.926-1.324,4.088-1.546,6.486L632.697,38.673z
"/>
</g>
<g>
<polygon fill="#68C28D" points="58.633,0 74.909,34.428 58.633,68.857 44.777,68.857 61.053,34.428 44.777,0 "/>
<polygon fill="#003764" points="44.778,68.857 28.502,34.428 44.778,0 58.634,0 42.358,34.428 58.634,68.857 "/>
</g>
<g>
<g>
<polygon fill="#68C28D" points="37.455,15.491 30.131,0 16.275,0 30.527,30.146 "/>
<polygon fill="#68C28D" points="30.527,38.711 16.275,68.857 30.131,68.857 37.455,53.365 "/>
</g>
<polygon fill="#003764" points="16.276,68.857 0,34.428 16.276,0 30.132,0 13.856,34.428 30.132,68.857 "/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 10 KiB

40
static/img/Quay_horizontal_color.svg Normal file
View file

@ -0,0 +1,40 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="271.647px" height="76.147px" viewBox="0 0 271.647 76.147" enable-background="new 0 0 271.647 76.147"
xml:space="preserve">
<path fill="#003764" d="M139.937,74.386c-1.004,0.502-2.33,0.922-3.975,1.257c-1.646,0.335-3.529,0.503-5.649,0.504
c-5.803,0.002-10.7-1.337-14.688-4.014c-3.991-2.676-6.963-6.164-8.917-10.458c-2.902-0.613-5.539-1.686-7.91-3.221
c-2.373-1.533-4.395-3.499-6.07-5.898c-1.674-2.397-2.959-5.174-3.852-8.326c-0.894-3.15-1.341-6.652-1.342-10.502
c-0.001-4.464,0.597-8.439,1.796-11.928c1.198-3.486,2.885-6.416,5.061-8.788s4.782-4.187,7.823-5.443
c3.041-1.256,6.402-1.885,10.084-1.886c3.683-0.001,7.044,0.626,10.085,1.88c3.041,1.255,5.65,3.083,7.827,5.479
c2.177,2.399,3.864,5.343,5.066,8.829c1.2,3.486,1.801,7.435,1.803,11.842c0.002,7.364-1.559,13.419-4.681,18.162
c-3.124,4.743-7.336,7.869-12.635,9.377c1.283,1.896,3.014,3.221,5.19,3.975c2.176,0.752,4.436,1.128,6.779,1.128
c1.172-0.001,2.273-0.1,3.306-0.294c1.032-0.197,1.938-0.434,2.72-0.713L139.937,74.386z M100.171,33.724
c0.001,5.858,1.091,10.406,3.268,13.641c2.177,3.235,5.134,4.852,8.873,4.851c3.737-0.001,6.695-1.619,8.87-4.855
c2.175-3.236,3.261-7.784,3.26-13.643c-0.001-5.468-1.091-9.736-3.268-12.805c-2.177-3.067-5.135-4.602-8.873-4.601
c-3.739,0.001-6.695,1.537-8.87,4.605C101.256,23.987,100.17,28.256,100.171,33.724z"/>
<path fill="#003764" d="M142.595,6.678l12.387-0.003l0.009,30.548c0.001,5.356,0.811,9.094,2.43,11.214
c1.618,2.12,3.962,3.179,7.031,3.178c3.068-0.001,5.439-1.061,7.113-3.182c1.673-2.121,2.509-5.859,2.507-11.216l-0.009-30.548
l11.884-0.004l0.008,29.292c0.003,9.151-1.823,15.819-5.476,20.005c-3.653,4.186-8.995,6.279-16.025,6.281
c-7.086,0.002-12.5-2.088-16.238-6.271c-3.74-4.184-5.61-10.851-5.613-20.002L142.595,6.678z"/>
<path fill="#003764" d="M218.767,48.251l-16.655,0.005l-3.344,12.974l-12.554,0.003L203.271,6.66l14.813-0.004l17.089,54.562
l-13.056,0.004L218.767,48.251z M216.253,38.627l-1.257-5.021c-0.783-2.733-1.537-5.635-2.262-8.703
c-0.727-3.068-1.454-6.026-2.179-8.871h-0.334c-0.668,2.901-1.352,5.873-2.048,8.914c-0.697,3.041-1.436,5.929-2.215,8.663
l-1.337,5.021L216.253,38.627z"/>
<path fill="#003764" d="M242.868,41.8L226.37,6.653l13.223-0.003l4.857,12.552c0.782,2.065,1.521,4.06,2.22,5.983
c0.697,1.925,1.437,3.948,2.219,6.067h0.334c0.78-2.12,1.547-4.144,2.3-6.068c0.752-1.925,1.519-3.919,2.299-5.985l4.935-12.555
l12.889-0.004L255.17,41.796l0.005,19.417l-12.303,0.004L242.868,41.8z"/>
<g>
<polygon fill="#40B4E5" points="58.633,0 74.909,34.428 58.633,68.857 44.777,68.857 61.053,34.428 44.777,0 "/>
<polygon fill="#003764" points="44.778,68.857 28.502,34.428 44.778,0 58.634,0 42.358,34.428 58.634,68.857 "/>
</g>
<g>
<g>
<polygon fill="#40B4E5" points="37.455,15.491 30.131,0 16.275,0 30.527,30.146 "/>
<polygon fill="#40B4E5" points="30.527,38.711 16.275,68.857 30.131,68.857 37.455,53.365 "/>
</g>
<polygon fill="#003764" points="16.276,68.857 0,34.428 16.276,0 30.132,0 13.856,34.428 30.132,68.857 "/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.3 KiB

11
static/js/pages/plans.js
View file

@ -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']);
}

338
static/partials/plans.html
View file

@ -1,148 +1,218 @@
<div class="cor-container plans content-container">
<div class="row plans-list">
<div class="col-sm-2">
<div class="features-bar hidden-xs">
<div class="visible-lg" style="height: 50px"></div>
<div class="visible-md visible-sm" style="height: 70px"></div>
<div class="co-main-content-panel plans-panel">
<!-- Header -->
<div class="plans-header">Use Quay in the cloud or hosted on your servers:</div>
<div class="feature">
<span class="context-tooltip" bs-tooltip="tooltip.title" data-container="body" data-placement="right"
data-title="All plans have unlimited public repositories">
<span class="hidden-sm-inline">Public Repositories</span>
<span class="visible-sm-inline">Public Repos</span>
</span>
<i class="fa fa-hdd-o visible-lg"></i>
</div>
<div class="feature">
<span class="context-tooltip" bs-tooltip="tooltip.title" data-container="body" data-placement="right"
data-title="SSL encryption is enabled end-to-end for all operations">
SSL Encryption
</span>
<i class="fa fa-lock visible-lg"></i>
</div>
<div class="feature">
<span class="context-tooltip" bs-tooltip="tooltip.title" data-container="body" data-placement="right"
data-title="Allows users or organizations to grant permissions in multiple repositories to the same non-login-capable account">
Robot accounts
</span>
<i class="fa ci-robot visible-lg"></i>
</div>
<div class="feature">
<span class="context-tooltip" bs-tooltip="tooltip.title" data-container="body" data-placement="right"
data-title="Repository images can be built directly from Dockerfiles">
Dockerfile Build
</span>
<i class="fa fa-upload visible-lg"></i>
</div>
<div class="feature">
<span class="context-tooltip" bs-tooltip="tooltip.title" data-container="body" data-placement="right"
data-title="Administrators can view and download the full invoice history for their organization">
Invoice History
</span>
<i class="fa fa-calendar visible-lg"></i>
</div>
<div class="feature">
<span class="context-tooltip" bs-tooltip="tooltip.title" data-container="body" data-placement="right"
data-title="Every action take within an organization is logged in detail, with the ability to visualize logs and download them">
Logging
</span>
<i class="fa fa-bar-chart-o visible-lg"></i>
</div>
<div class="feature">
<span class="context-tooltip" bs-tooltip="tooltip.title" data-container="body" data-placement="right"
data-title="Grant subsets of users in an organization their own permissions, either on a global basis or a per-repository basis">
Teams
</span>
<i class="fa fa-group visible-lg"></i>
</div>
<div class="feature">
<span class="context-tooltip" bs-tooltip="tooltip.title" data-container="body" data-placement="right"
data-title="All plans have a free trial">
<span class="hidden-sm-inline">Free Trial Days</span>
<span class="visible-sm-inline">Free Trial Days</span>
</span>
<i class="fa fa-clock-o visible-lg"></i>
<!-- Tabs -->
<ul class="nav nav-tabs plan-tabs" role="tablist">
<li role="presentation" class="active">
<a href="javascript:void(0)" role="tab" data-toggle="tab" data-target="#hosted">
<div class="tab-logo">
<img src="/static/img/Quay_horizontal_color.svg">
</div>
<div class="tab-title">Hosted in the cloud and scales with you.</div>
<div class="tab-title">Priced by the number of private repositories.</div>
</a>
</li>
<li role="presentation">
<a href="javascript:void(0)" role="tab" data-toggle="tab" data-target="#enterprise">
<div class="tab-logo">
<img src="/static/img/QuayEnterprise_horizontal_color.svg">
</div>
<div class="tab-title">Runs privately anywhere you can run a Docker container.</div>
<div class="tab-title">Fixed price for unlimited users and repositories</div>
</a>
</li>
</ul>
<div class="tab-content">
<!-- Hosted -->
<div class="tab-pane active" id="hosted">
<!-- Plan columns -->
<div class="row-container">
<div class="row">
<!-- Personal Plan -->
<div class="col-md-3 plan-col">
<div class="plan-box">
<div class="plan-header">
<span class="plan-box-price">$12</span>
<b>Personal</b>
</div>
<ul>
<li>5 private repositories</li>
<li>Unlimited public repos</li>
</ul>
<div class="plan-description">Great for individuals</div>
<button class="btn btn-primary trial-button" ng-click="buyNow('personal-30')">Start Free Trial</button>
</div>
<ul class="plan-features">
<li><i class="fa fa-clock-o"></i>30-day free trial</li>
</ul>
</div>
<!-- Skiff Plan -->
<div class="col-md-3 plan-col">
<div class="plan-box">
<div class="plan-header">
<span class="plan-box-price">$25</span>
<b>Skiff</b>
</div>
<ul>
<li>10 private repositories</li>
<li>Unlimited public repos</li>
<li>Team-based permissions</li>
</ul>
<div class="plan-description">Great for startups</div>
<button class="btn btn-primary trial-button" ng-click="buyNow('bus-micro-30')">Start Free Trial</button>
</div>
<ul class="plan-features">
<li><i class="fa fa-clock-o"></i>30-day free trial</li>
</ul>
</div>
<!-- Yacht Plan -->
<div class="col-md-3 plan-col popular">
<div class="plan-box">
<div class="plan-header">
<span class="plan-box-price">$50</span>
<b>Yacht</b>
</div>
<ul>
<li>20 private repositories</li>
<li>Unlimited public repos</li>
<li>Team-based permissions</li>
</ul>
<div class="plan-description">Great for small businesses</div>
<button class="btn btn-primary trial-button" ng-click="buyNow('bus-small-30')">Start Free Trial</button>
</div>
<ul class="plan-features">
<li><i class="fa fa-clock-o"></i>30-day free trial</li>
</ul>
</div>
<!-- Larger Plans -->
<div class="col-md-3 plan-col">
<div class="plan-box">
<div class="plan-header">
<b>Larger Plans</b>
</div>
<select ng-model="dropdownPlan" class="form-control">
<option ng-repeat="plan in plans" ng-if="plan.privateRepos > 20 && !plan.plans_page_hidden"
value="{{ plan.stripeId }}">
{{ plan.privateRepos }} private repositories
</option>
</select>
<ul>
<li>Unlimited public repos</li>
<li>Team-based permissions</li>
</ul>
<div class="plan-description">Great for enterprises</div>
<button class="btn btn-primary trial-button" ng-click="buyNow(dropdownPlan)">Start Free Trial</button>
</div>
<ul class="plan-features">
<li><i class="fa fa-clock-o"></i>30-day free trial</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-2 plan-container" ng-repeat="plan in plans" ng-show="plan.price > 0 && !plan.deprecated && !plan.plans_page_hidden">
<div class="plan" ng-class="plan.stripeId + ' ' + (plan.bus_features ? 'business-plan' : '')">
<div class="plan-box">
<div class="plan-title">{{ plan.title }}</div>
<div class="plan-price">${{ plan.price/100 }}</div>
<div class="description">{{ plan.audience }}</div>
<!-- FAQ and features -->
<div class="faq-features">
<div class="row-container-no-margin">
<div class="row">
<!-- Features -->
<div class="col-md-3 col-md-push-9 features-col">
<div class="features-title">All plans include:</div>
<ul class="features-list">
<li><i class="fa fa-refresh"></i>
<b>Continuous Integration</b>
Build your containers in response to git pushes: GitHub, BitBucket, Gitlab and others
</li>
<li><i class="fa fa-clock-o"></i>
<b>30-Day Free Trial</b>
Your first 30 days are free on Quay.io. Test it out and start building containers!
</li>
<li><i class="fa fa-hdd-o"></i>
<b>Public Repositories</b>
Provide a public download page for your container. The best part, they’re free!
</li>
<li><i class="fa ci-robot"></i>
<b>Robot Accounts</b>
Create credentials designed for deploying software automatically.
</li>
<li><i class="fa fa-group"></i>
<b>Teams</b>
Teams can collectively have access to manage specific repositories on your account.
</li>
<li><i class="fa fa-lock"></i>
<b>SSL Encryption</b>
Transit between Quay.io and your servers is secured automatically.
</li>
<li><i class="fa fa-bar-chart"></i>
<b>Logging &amp; Auditing</b>
Auditing is essential for everything in your CI pipeline. Actions via API and UI are tracked.
</li>
<li><i class="fa fa-calendar"></i>
<b>Invoice History</b>
Download past invoices for your billing team or purchasing departement.
</li>
</ul>
</div>
<!-- FAQ -->
<div class="col-md-9 col-md-pull-3 faq-col">
<h4>How do I use Quay with my servers and code?</h4>
<p>Using Quay with your infrastructure is separated into two main actions: <b>building containers</b> and <b>distributing them to your servers</b>.</p>
<p>You can configure Quay to automatically build containers of your code on each commit. Integrations with GitHub, Bitbucket, GitLab and self-hosted Git repositories are supported. Each built container is stored on Quay and is available to be pulled down onto your servers.</p>
<p>To distribute your private containers onto your servers, Docker or rkt must be configured with the correct credientials. Quay has sophisticated access controls – organizations, teams, robot accounts, and more – to give you full control over which servers can pull down your containers. An API can be used to automate the creation and management of these credentials.</p>
<h4>How is Quay optimized for a team environment?</h4>
<p>Quay’s permission model is designed for teams. Each new user can be assigned to one or more teams, with specific permissions. Robot accounts, used for automated deployments, can be managed per team as well. This system allows for each development team to manage their own credentials.</p>
<p>Full logging and auditing is integrated into every part of the application and API. Quay helps you dig into every action for more details.</p>
<h4>Additional FAQs</h4>
<b>Can I change my plan?</b>
<p>Yes, you can change your plan at any time and your account will be pro-rated for the difference. For large organizations, Quay Enterprise offers unlimited users and repos.</p>
<b>Do you offer special plans for business or academic institutions?</b>
<p>Please contact us at our support email address to discuss the details of your organization and intended usage.</p>
<b>Can I use Quay for free?</b>
<p>Yes! We offer unlimited storage and serving of public repositories. We strongly believe in the open source community and will do what we can to help!</p>
<b>What types of payment do you accept?</b>
<p>Quay uses Stripe as our payment processor, so we can accept any of the payment options they offer, which are currently: Visa, MasterCard, American Express, JCB, Discover and Diners Club.</p>
</div>
</div>
<div class="features hidden-xs">
<div class="count count-panel"><b>{{ plan.privateRepos }}</b> private repositories</div>
<div class="feature present"></div>
<div class="feature present"></div>
<div class="feature present"></div>
<div class="feature present"></div>
<div class="feature present"></div>
<div class="feature present"></div>
<div class="feature" ng-class="plan.bus_features ? 'present' : ''"></div>
<div class="count-feature count"><b>{{ plan.free_trial_days }}</b></div>
</div>
<div class="features visible-xs">
<div class="count count-panel"><b>{{ plan.privateRepos }}</b> private repositories</div>
<div class="feature present">Unlimited Public Repositories</div>
<div class="feature present">SSL Encryption</div>
<div class="feature present">Robot accounts</div>
<div class="feature present">Dockerfile Build</div>
<div class="feature present">Invoice History</div>
<div class="feature present">Logging</div>
<div class="feature" ng-class="plan.bus_features ? 'present' : 'notpresent'">Teams</div>
<div class="count-feature count"><b>{{ plan.free_trial_days }}</b> Days Free</div>
</div>
<button class="btn btn-block" ng-class="plan.bus_features ? 'btn-success' : 'btn-primary'"
ng-click="buyNow(plan.stripeId)">Start <span class="hidden-sm-inline">Free</span> Trial</button>
</div>
</div>
</div>
<div class="row plan-faq">
<div class="col-md-6">
<dl>
<dt>Can I use Quay for free?</dt>
<dd>Yes! We offer unlimited storage and serving of public repositories. We strongly believe in the open source community and will do what we can to help!</dd>
<dt>Does my plan have secure communication?</dt>
<dd>Yes! All plans provide <b>secure</b> communication to and from Quay via <b>SSL</b>.</dd>
<dt>What types of payment do you accept?</dt>
<dd>Quay uses Stripe as our payment processor, so we can accept any of the payment options they offer, which are currently: Visa, MasterCard, American Express, JCB, Discover and Diners Club.</dd>
</dl>
</div>
<div class="col-md-6">
<dl>
<dt>Can I change my plan?</dt>
<dd>Yes, you can change your plan at any time and your account will be pro-rated for the difference.</dd>
<dt>Do you offer special plans for business or academic institutions?</dt>
<dd>Please contact us at our <a href="mailto:support@quay.io">support email address</a> to discuss the details of your organization and intended usage.</dd>
</dl>
</div>
</div>
<div class="row enterprise-plan">
<div class="col-md-6">
<h2>Run Quay.io Behind Your Firewall</h2>
<div class="plan-combine">
<img src="/static/img/quay-logo.png">
<span class="plus">+</span>
<img src="/static/img/coreos.svg" style="height: 50px">
</div>
<div>Quay.io has partnered with CoreOS to offer Enterprise Registry, a version
of Quay.io that can be hosted behind your firewall. More information
can be found on the <a href="https://coreos.com/products/enterprise-registry">CoreOS website</a>.</div>
<a href="https://coreos.com/products/enterprise-registry" class="btn btn-default">Learn more about Enterprise Registry</a>
</div>
</div>
<!-- Enterprise -->
<div class="tab-pane" id="enterprise">...</div>
</div>
<!-- Modal message dialog -->