bookstack/website
Fork 4
Code Issues 5 Pull requests Activity

Added support services page & table

Browse source
This commit is contained in:
Dan Brown 2022-03-10 13:47:59 +00:00
commit 8fb8ca15f0
Signed by: danb
GPG key ID: 46D9F943C24A2EF9
2 changed files with 171 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

96
content/support/_index.html Normal file
View file

@ -0,0 +1,96 @@
---
title: "Support for BookStack"
url: "/support"
layout: "single"
type: "about"
---
<p class="text-center padded-vertical">
BookStack support is provided at few different tiers depending on
what might suit you or your business. <br>
Our official paid support services are provided by <a href="#">HTTP Functions Ltd</a>.
</p>
<div class="price-table">
</div>
<div class="price-table">
<div class="price-table-offer">
<div class="price-table-header">
<h3>Community Support</h3>
<div class="price">Free</div>
</div>
<div class="price-table-item">
Available via
<a href="https://github.com/BookStackApp/BookStack/issues" target="_blank">GitHub</a>,
<a href="https://discord.com/invite/ztkBqR2" target="_blank">Discord</a>
or
<a href="https://www.reddit.com/r/BookStack/" target="_blank">Reddit</a>
</div>
<div class="price-table-item">
Open use of <a href="/docs">documentation</a> and
<a href="https://www.youtube.com/channel/UCH66RFWfw6CSm2T1EM4ik1g" target="_blank">YouTube</a>
guidance
</div>
<div class="price-table-item price-table-item-negative">
No assurance of response, support or resolution
</div>
</div>
<div class="price-table-offer">
<div class="price-table-header">
<h3>Professional Support Plan</h3>
<div class="price">£450 /year</div>
</div>
<div class="price-table-item">
Email / Help-desk based support
</div>
<div class="price-table-item">
Covers installation and updating issues
</div>
<div class="price-table-item">
High priority triage and handling of bug and issue reports
</div>
<div class="price-table-item">
Supports development & maintenance of the open source platform
</div>
<div class="price-table-action">
<a href="#">Proceed &raquo;</a>
</div>
</div>
<div class="price-table-offer">
<div class="price-table-header">
<h3>Enterprise Support Plan</h3>
<div class="price">£4,500 /year</div>
</div>
<div class="price-table-item">
Includes everything in the Professional Support Plan
</div>
<div class="price-table-item price-table-item-highlight">
Highest priority handling of support&nbsp;requests
</div>
<div class="price-table-item price-table-item-highlight">
Active assistance for API integrations & platform extension
</div>
<div class="price-table-item price-table-item-highlight">
Feature and road-map discussion with the core project maintainer
</div>
<div class="price-table-item price-table-item-highlight">
Zoom/Teams/Meet/Discord based video support & advice <br>
<small><i>(Up to 10 hours per year)</i></small>
</div>
<div class="price-table-action">
<a href="#">Proceed &raquo;</a>
</div>
</div>
</div>
<p class="text-center small padded-vertical">
Support is provided only in the English language at this time. <br>
Typical support hours are, but not fixed to, between 10:00 and 18:00 UTC/BST. <br>
Feature and road-map discussion do not guarantee inclusion or prioritization of requested features.
</p>

75
themes/bookstack/sass/styles.scss
View file

@ -471,4 +471,79 @@ input[type="text"].blog-search-input {
.meilisearch-autocomplete .docs-searchbar-suggestion--subcategory-column {
color: #53555a !important;
}
.price-table {
display: flex;
flex-wrap: wrap;
gap: 2rem;
margin-bottom: $-xl;
justify-content: center;
margin-left: -20vw;
margin-right: -20vw;
// align-items: flex-start;
}
@include smaller-than(1200px) {
.price-table {
margin-left: 0;
margin-right: 0;
}
}
.price-table-offer {
box-shadow: 0 1px 4px 0 rgba(94, 94, 94, 0.26);
border-radius: 3px;
min-width: 280px;
flex-basis: 360px;
display: flex;
flex-direction: column;
}
.price-table-item, .price-table-header, .price-table-action {
padding: .5rem 1rem;
}
.price-table-item {
border-bottom: 1px solid #EEE;
position: relative;
padding-left: 3rem;
}
.price-table-item:before {
content: '';
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23329f71"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
width: 16px;
height: 16px;
display: block;
position: absolute;
left: 1rem;
top: .8rem;
}
.price-table-item.price-table-item-negative:before {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23888888"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z"/></svg>');
}
.price-table-item-highlight {
font-weight: 700;
}
.price-table-item-highlight small {
font-weight: 400;
}
.price-table-header {
background-color: rgba($primary, 0.1);
}
.price-table-header h3 {
font-size: 1.2rem;
font-weight: 700;
margin-bottom: .2em;
}
.price-table-header .price {
font-weight: 700;
color: #666;
margin-bottom: .5rem;
}
.price-table-action {
font-weight: 700;
background-color: rgba($primary, 0.1);
text-align: center;
margin-top: auto;
}
.price-table-action a {
display: block;
}