Homepage updates

_includes/homepage-code-tabs.html

@@ -0,0 +1,27 @@
+<div class="tabs">
+  <input type="radio" name="tabs" id="tab1" checked="checked">
+  <label for="tab1">Imperative</label>
+  <div class="tab">
+<pre>
+  <code>
+  function sayHi(fName){
+    var custName = fName;
+    alert('Hi ' + custName);
+  }
+  </code>                       
+</pre>
+  </div>
+
+  <input type="radio" name="tabs" id="tab2">
+  <label for="tab2">Reactive</label>
+  <div class="tab">
+<pre>
+  <code>
+  $ Hello world!
+  $ Hello world!
+  $ Hello world!
+  $ Hello world!
+  </code>                       
+</pre>
+  </div>
+</div>

_includes/homepage-highlights-band.html

@@ -1,16 +1,34 @@
 <div class="full-width-bg component homepage-highlights-band">
-  <div class="grid-wrapper">
-    <div class="grid__item width-8-12 width-12-12-m">
-      <h2>Imperative and Reactive in one programming model</h2>
-      <p>Use the familiar imperative code approach or need the event-driven and non-blocking approach. Quarkus brings both under one roof. Brings serverless to Java.</p>
+  <div class="width-12-12 highlights-alternating-inline-block">
+    <div class="grid-wrapper">
+      <div class="width-7-12 width-12-12-m block-content">
+        <h2>Imperative and Reactive in one programming model</h2>
+        <p>Use the familiar imperative code approach or need the event-driven and non-blocking approach. Quarkus brings both under one roof. Brings serverless to Java.</p>
+      </div>
+      <div class="width-5-12 width-12-12-m block-image">
+        {% include homepage-code-tabs.html %}
+      </div>
     </div>
-    <div class="grid__item width-8-12 width-12-12-m">
-      <h2>Container First</h2>
-      <p>Quarkus is made for optimally running on Graal VM and HotSpot. Low boot time, low RSS memory (not just heap size!) offering stellar boot and memory utilization in containers and container orchestration platforms like Kubernetes. We use a technique we call compile time boot.</p>
+  </div>
+  <div class="width-12-12 highlights-alternating-inline-block">
+
+    <div class="grid-wrapper">
+      <div class="width-4-12 width-12-12-m block-image">
+        <img src="{{site.baseurl}}/assets/images/placeholder.png">
+      </div>
+      <div class="width-8-12 width-12-12-m block-content">
+        <h2>Container First</h2>
+        <p>Quarkus is made for optimally running on Graal VM and HotSpot. Low boot time, low RSS memory (not just heap size!) offering stellar boot and memory utilization in containers and container orchestration platforms like Kubernetes. We use a technique we call compile time boot.</p>
+      </div>
     </div>
-    <div class="grid__item width-8-12 width-12-12-m">
-      <h2>Developer Joy</h2>
-      <p> cohesive platform from config to build.<br />Streamlined code for the 80% common usages, flexible for the 20%. Instant fix the bug and hit reload development loop for all libraries including Hibernate.</p>
+  </div>
+  <div class="width-12-12 highlights-alternating-inline-block">
+
+    <div class="grid-wrapper">
+      <div class="width-8-12 width-12-12-m block-content">
+        <h2>Developer Joy</h2>
+        <p> Cohesive platform from config to build.<br />Streamlined code for the 80% common usages, flexible for the 20%. Instant fix the bug and hit reload development loop for all libraries including Hibernate.</p>
+      </div>
     </div>
   </div>
 </div>

_includes/templates/highlights-alternating-images-band.html

@@ -6,15 +6,15 @@ <h2>Primary feature of this software</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada lobortis justo non accumsan. Quisque quis sagittis risus. Praesent convallis purus nec mi pellentesque scelerisque. Mauris mollis augue id malesuada interdum. Integer pulvinar lobortis nulla, iaculis sodales enim pharetra nec. Fusce quis tempor nibh, pulvinar aliquet lacus. Nam pellentesque fermentum aliquet. Integer in ante nunc. Fusce enim turpis, tristique id scelerisque et, aliquam non nibh.</p>
       </div>
       <div class="width-4-12 width-12-12-m block-image">
-        <img src="{{site.baseurl}}/assets/images/square-placeholder.png">
+        <img src="{{site.baseurl}}/assets/images/placeholder.png">
       </div>
     </div>
   </div>
   <div class="width-12-12 highlights-alternating-inline-block">
 
     <div class="grid-wrapper">
       <div class="width-4-12 width-12-12-m block-image">
-        <img src="{{site.baseurl}}/assets/images/square-placeholder.png">
+        <img src="{{site.baseurl}}/assets/images/placeholder.png">
       </div>
       <div class="width-8-12 width-12-12-m block-content">
         <h2>Secondary feature of this software</h2>
@@ -30,7 +30,7 @@ <h2>Tertiary feature of this software</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada lobortis justo non accumsan. Quisque quis sagittis risus. Praesent convallis purus nec mi pellentesque scelerisque. Mauris mollis augue id malesuada interdum. Integer pulvinar lobortis nulla, iaculis sodales enim pharetra nec. Fusce quis tempor nibh, pulvinar aliquet lacus. Nam pellentesque fermentum aliquet. Integer in ante nunc. Fusce enim turpis, tristique id scelerisque et, aliquam non nibh.</p>
       </div>
       <div class="width-4-12 width-12-12-m block-image">
-        <img src="{{site.baseurl}}/assets/images/square-placeholder.png">
+        <img src="{{site.baseurl}}/assets/images/placeholder.png">
       </div>
     </div>
   </div>

_includes/templates/tabs.html

@@ -0,0 +1,22 @@
+<div class="tabs">
+  <input type="radio" name="tabs" id="tab1" checked="checked">
+  <label for="tab1">Tab 1</label>
+  <div class="tab">
+    <h3>Tab 1 Content</h3>
+    <p>Hello World....</p>
+  </div>
+
+  <input type="radio" name="tabs" id="tab2">
+  <label for="tab2">Tab 2</label>
+  <div class="tab">
+    <h3>Tab 2 Content</h3>
+    <p>Hello World....</p>
+  </div>
+
+  <input type="radio" name="tabs" id="tab3">
+  <label for="tab3">Tab 3</label>
+  <div class="tab">
+    <h3>Tab 3 Content</h3>
+    <p>Hello World....</p>
+  </div>
+</div>

_sass/core/includes/highlights-alternating-images-band.scss

@@ -1,4 +1,7 @@
 .highlights-alternating-images-band {
+  .highlights-alternating-inline-block {
+    padding: 2rem 0 4rem 0;
+  }
   .block-content{
     align-self: center;
     justify-self: center;

_sass/includes/homepage-highlights-band.scss

@@ -4,4 +4,11 @@
   h2 {
     color: $cyan;
   }
+  .highlights-alternating-inline-block {
+    padding: 2rem 0 4rem 0;
+  }
+  .block-content{
+    align-self: center;
+    justify-self: center;
+  }
 }

_sass/includes/tabs.scss

@@ -0,0 +1,44 @@
+/** Styles for _includes/templates/tabs.html */
+.tabs {
+  display: flex;
+  flex-wrap: wrap;
+}
+.tabs label {
+  order: 1;
+  display: block;
+  padding: 1rem 2rem;
+  margin-right: 0.2rem;
+  cursor: pointer;
+  background-color: #407096;
+  font-weight: 700;
+  transition: background ease 0.2s;
+}
+.tabs .tab {
+  order: 99;
+  flex-grow: 1;
+  width: 100%;
+  display: none;
+  padding: 1rem;
+  background-color: #1f415d;
+}
+.tabs input[type="radio"] {
+  display: none;
+  &:checked + label {
+    background-color: #1f415d;
+  }
+  &:checked + label + .tab {
+    display: block;
+  }
+}
+
+@media (max-width: 45em) {
+  .tabs .tab,
+  .tabs label {
+    order: initial;
+  }
+  .tabs label {
+    width: 100%;
+    margin-right: 0;
+    margin-top: 0.2rem;
+  }
+}

assets/css/main.scss

@@ -41,3 +41,4 @@ $baseurl: "{{ site.baseurl }}";
 @import "includes/feedback-community-band";
 @import "includes/project-footer";
 @import "includes/redhat-footer";
+@import "includes/tabs";