Added support services page & table

diff --git a/content/support/_index.html b/content/support/_index.html
new file mode 100644 (file) index 0000000..9e8e5fb
--- /dev/null
+++ b/content/support/_index.html
@@ -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>
\ No newline at end of file

diff --git a/themes/bookstack/sass/styles.scss b/themes/bookstack/sass/styles.scss
index b8deea4e03116c01f5cc8e818fbb921581a197f4..d158f8d5fc870a88c864b9bb55d99d065ddd0677 100644 (file)
--- a/themes/bookstack/sass/styles.scss
+++ b/themes/bookstack/sass/styles.scss
@@ -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;
 }
\ No newline at end of file