Added support page

_includes/community-help-band.html → _includes/community-contrib-band.html

@@ -1,27 +1,4 @@
 <div class="component-wrapper contributions-band">
-  <div class="width-12-12 contrib-block">
-    <h3>Getting Help</h3>
-  </div>
-  <div class="width-3-12 width-12-12-m contrib-block">
-    <img src="{{site.baseurl}}/assets/images/community/icon-guides.png">
-    <h4>Documentation</h4>
-    <p>We have a lot of documentation. Be sure to check our <a href="{{site.baseurl}}/get-started/">getting started page</a>, and all our <a href="{{site.baseurl}}/guides/">guides</a>. Also check out our <a href="{{site.baseurl}}/faq/">FAQ section</a> and <a href="https://www.youtube.com/playlist?list=PLsM3ZE5tGAVbMz1LJqc8L5LpnfxPPKloO">Quarkus Tips Playlist.</a></p>
-  </div>
-  <div class="width-3-12 width-12-12-m contrib-block">
-    <img src="{{site.baseurl}}/assets/images/community/icon-stackoverflow.png">
-    <h4>Stack Overflow</h4>
-    <p>Ask your questions on <a href="https://stackoverflow.com/questions/tagged/quarkus">Stack Overflow</a>. After the documentation, it’s probably the best place to look for answers. We actively monitor the <a href="https://stackoverflow.com/questions/tagged/quarkus">Quarkus tag</a>.</p>
-  </div>
-  <div class="width-3-12 width-12-12-m contrib-block">
-    <img src="{{site.baseurl}}/assets/images/community/icon-chat.png">
-    <h4>Live Chat</h4>
-    <p>If you prefer live chat with the developers, we have a <a href="https://quarkusio.zulipchat.com/">Zulip chat</a> where we all hang out.</p>
-  </div>
-  <div class="width-3-12 width-12-12-m contrib-block">
-    <img src="{{site.baseurl}}/assets/images/community/icon-email.png">
-    <h4>Mailing List</h4>
-    <p>You can also ask questions on our mailing list. Join the group via <a href="mailto:[email protected]">email</a> or by visiting the <a href="https://groups.google.com/d/forum/quarkus-dev">Google Groups page</a>.</p>
-  </div>
   <div class="width-12-12 contrib-block">
     <h3>Contributing</h3>
   </div>

_includes/header-navigation.html

@@ -21,6 +21,9 @@
             <li>
               <a href="{{site.baseurl}}/community/" class="{% if page.url contains '/community/' %}active{% endif %}">Community</a>
             </li>
+            <li>
+              <a href="{{site.baseurl}}/support/" class="{% if page.url contains '/support/' %}active{% endif %}">Support</a>
+            </li>
             <li>
               <a href="{{site.baseurl}}/blog/" class="{% if page.url contains '/blog/' %}active{% endif %}">Blog</a>
             </li>

_includes/support-help-band.html

@@ -0,0 +1,25 @@
+<div class="component-wrapper help-band">
+  <div class="width-12-12 help-block">
+    <h3>Getting Help from the Community</h3>
+  </div>
+  <div class="width-3-12 width-12-12-m help-block">
+    <img src="{{site.baseurl}}/assets/images/community/icon-guides.png">
+    <h4>Documentation</h4>
+    <p>We have a lot of documentation. Be sure to check our <a href="{{site.baseurl}}/get-started/">getting started page</a>, and all our <a href="{{site.baseurl}}/guides/">guides</a>. Also check out our <a href="{{site.baseurl}}/faq/">FAQ section</a> and <a href="https://www.youtube.com/playlist?list=PLsM3ZE5tGAVbMz1LJqc8L5LpnfxPPKloO">Quarkus Tips Playlist.</a></p>
+  </div>
+  <div class="width-3-12 width-12-12-m help-block">
+    <img src="{{site.baseurl}}/assets/images/community/icon-stackoverflow.png">
+    <h4>Stack Overflow</h4>
+    <p>Ask your questions on <a href="https://stackoverflow.com/questions/tagged/quarkus">Stack Overflow</a>. After the documentation, it’s probably the best place to look for answers. We actively monitor the <a href="https://stackoverflow.com/questions/tagged/quarkus">Quarkus tag</a>.</p>
+  </div>
+  <div class="width-3-12 width-12-12-m help-block">
+    <img src="{{site.baseurl}}/assets/images/community/icon-chat.png">
+    <h4>Live Chat</h4>
+    <p>If you prefer live chat with the developers, we have a <a href="https://quarkusio.zulipchat.com/">Zulip chat</a> where we all hang out.</p>
+  </div>
+  <div class="width-3-12 width-12-12-m help-block">
+    <img src="{{site.baseurl}}/assets/images/community/icon-email.png">
+    <h4>Mailing List</h4>
+    <p>You can also ask questions on our mailing list. Join the group via <a href="mailto:[email protected]">email</a> or by visiting the <a href="https://groups.google.com/d/forum/quarkus-dev">Google Groups page</a>.</p>
+  </div>
+</div>

_includes/support-options-band.html

@@ -0,0 +1,13 @@
+<div class="component-wrapper options-band">
+  <div class="width-12-12">
+    <h1>Need More Than Community Support?</h1>
+    <h3>If you require a higher level of support, you have options.</h3>
+  </div>
+  <div class="width-4-12 width-12-12-m options-block text-centered">
+    <h4>Red Hat Build of Quarkus</h4>
+    <p>Enterprise support provided by Red Hat for the product.</p>
+    <p>
+      <a href="https://www.redhat.com/en/topics/cloud-native-apps/why-choose-red-hat-quarkus" class="button-cta btn-sm">Red Hat Support</a>
+    </p>
+  </div>
+</div>

_layouts/community.html

@@ -3,5 +3,5 @@
 ---
 
 <div>
-    {% include community-help-band.html %}
+    {% include community-contrib-band.html %}
 </div>

_layouts/support.html

@@ -0,0 +1,8 @@
+---
+layout: vision
+---
+
+<div>
+  {% include support-help-band.html %}
+  {% include support-options-band.html %}
+</div>

_sass/layouts/support.scss

@@ -0,0 +1,60 @@
+.support {
+  .help-band {
+    margin: 0;
+    padding-bottom: 6rem;
+    .help-block {
+      text-align: center;
+
+      h3, p {
+        text-align: left;
+      }
+
+      h3 {
+        text-transform: uppercase;
+      }
+      h4 {
+        font-weight: 600;
+        margin: 1rem 0;
+      }
+
+    }
+  }
+
+  .options-band {
+    margin-top: 0;
+
+    h1, h2, h3 {
+      text-align: left;
+      text-transform: uppercase;
+    }
+
+    .options-block {
+      border: 1px solid $quarkus-blue;
+      padding: 2rem;
+
+      h4 {
+        margin-top: 0;
+      }
+
+      > p:last-child {
+        margin-bottom: 0;
+      }
+
+      > a:only-child {
+        text-align: left;
+        font-size: 1.25rem;
+        line-height: 1.5rem;
+      }
+      a > i {
+        color: inherit;
+        margin-left: 5px;
+      }
+     @media screen and (max-width: 1170px) {
+        grid-column: span 6;
+      }
+      @media screen and (max-width: $breakpoint-m) {
+        grid-column: span 12;
+      }   
+    }
+  }
+}

_sass/quarkus.scss

@@ -104,6 +104,9 @@ input[type="submit"] {
   line-height: 2.5;
   transition: background .2s ease-in 0s;
   text-decoration: none;
+  padding: 0 3rem;
+  display: inline-block;
+  white-space: normal;
   &:hover, &:active, &:focus {
     background-color: $cta-hover;
     border-color: $cta-hover;
@@ -117,6 +120,13 @@ input[type="submit"] {
     line-height: 1rem;
     padding: .75rem 0;
   }
+
+  &.btn-sm {
+    font-size: 1rem;
+    line-height: 1.2rem;
+    font-weight: 400;
+    padding: .5rem 2rem;
+  }
 }
 
 a.button-cta.secondary {

assets/css/main.scss

@@ -38,6 +38,7 @@ $baseurl: "{{ site.baseurl }}";
 @import "layouts/extensions";
 @import "layouts/community";
 @import "layouts/blog";
+@import "layouts/support";
 @import "includes/header-navigation";
 @import "includes/libraries-standards-band";
 @import "includes/homepage-hero-band";

support.md

@@ -0,0 +1,5 @@
+---
+layout: support
+title: Support When You Need It
+permalink: /support/
+---