website - cta section and button updates

website/source/assets/stylesheets/application.scss

@@ -33,7 +33,7 @@
 @import "_community";
 @import "_docs";
 @import "_downloads";
-@import "_home";
+// @import "_home";
 
 // Consul Connect
 @import 'consul-connect/_index';

website/source/assets/stylesheets/consul-connect/_index.scss

@@ -4,6 +4,7 @@
 
 @import 'components/_button';
 @import 'components/_container';
+@import 'components/_cta-section';
 @import 'components/_hero';
 @import 'components/_logo-grid';
 @import 'components/_section';

website/source/assets/stylesheets/consul-connect/_variables.scss

@@ -1,3 +1,5 @@
 /* Grid/Layout Settings */
+$consul-black: #252937;
+
 $site-gutter-padding: 15px;
 $site-max-width: 1170px;

website/source/assets/stylesheets/consul-connect/components/_button.scss

@@ -1,11 +1,10 @@
 .g-btn {
-  align-self: center;
   background-color: $consul-red;
   border-radius: 3px;
   box-sizing: border-box;
   color: $white;
   display: inline-block;
-  font-size: 1em;
+  font-size: 1.6rem;
   font-weight: 600;
   letter-spacing: 0;
   line-height: 24px;
@@ -15,38 +14,62 @@
   text-align: center;
   transition: all 0.25s ease;
 
-  &:after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(255, 255, 255, 0.15);
-    opacity: 0;
-    transition: all 0.25s ease;
-  }
-
   &:focus,
   &:hover {
+    background-color: #ce4a86;
     color: $white;
     text-decoration: none;
     transform: translateY(-1px);
+  }
 
-    &:after {
+  &.white {
-      opacity: 1;
+    background: $white;
+    border: 2px solid $white;
+    color: $consul-black;
+    padding: 10px 28px; /* subtracting the border, so sizes are even */
+
+    &:hover {
+      background: $consul-black;
+      border-color: $consul-black;
+      color: $white;
+      
+      path {
+        fill: $white;
+      }
     }
   }
 
   &.dark-outline {
     background: none;
-    border: 2px solid $black;
+    border: 2px solid $consul-black;
     padding: 10px 28px; /* subtracting the border, so sizes are even */
-    color: $black;
+    color: $consul-black;
 
     &:hover {
-      background-color: $black;
+      background: $consul-black;
       color: $white;
     }
   }
+
+  &.white-outline {
+    background: none;
+    border: 2px solid $white;
+    padding: 10px 28px; /* subtracting the border, so sizes are even */
+    color: $white;
+
+    &:hover {
+      background-color: $white;
+      color: $consul-black;
+    }
+  }
+
+  &.download {
+    svg {
+      margin: 0 4px -4px 0;
+
+      path {
+        transition: fill 0.25s ease;
+      }
+    }
+  }
 }

website/source/assets/stylesheets/consul-connect/components/_cta-section.scss

@@ -0,0 +1,21 @@
+.g-cta-section {
+  align-items: center;
+  background: $consul-red;
+  display: flex;
+  justify-content: center;
+  text-align: center;
+
+  h2 {
+    color: $white;
+    margin-top: 0;
+  }
+
+  .g-btn {
+    width: 144px;
+    padding: 10px 0;
+
+    & + .g-btn {
+      margin-left: 18px;
+    }
+  }
+}

website/source/assets/stylesheets/consul-connect/components/_text-asset.scss

@@ -41,6 +41,14 @@
       }
     }
 
+    & > img {
+      width: 100%;
+  
+      &.shadow {
+        box-shadow: 0 40px 48px -20px rgba(63, 68, 85, 0.4);
+      }
+    }
+
     &.code-sample > div {
       box-shadow: 0 40px 48px -20px rgba(63, 68, 85, 0.4);
       color: $white;
@@ -92,12 +100,4 @@
   h3 {
     margin: 16px 0;
   }
-
-  & > img {
-    width: 100%;
-
-    &.shadow {
-      box-shadow: 0 40px 48px -20px rgba(63, 68, 85, 0.4);
-    }
-  }
 }

website/source/assets/stylesheets/consul-connect/pages/_home.scss

@@ -1,3 +1,38 @@
 #page-home {
-    
+  .home-cta-section {
+    color: $white;
+    display: flex;
+
+    & > div {
+      display: flex;
+      justify-content: center;
+      width: 50%;
+
+      &:first-child {
+        background: $consul-red;
+      }
+
+      &:last-child {
+        background: $consul-black;
+      }
+
+      & > div {
+        display: flex;
+        flex-direction: column;
+        max-width: 564px;
+        padding: 96px 0;
+        text-align: center;
+
+        div:first-child {
+          height: 50px;
+          width: auto;
+        }
+
+        p {
+          flex: 1 0 auto;
+          margin: 24px 0 32px;
+        }
+      }
+    }
+  }
 }

website/source/configuration.html.erb

@@ -181,4 +181,23 @@ description: |-
     </div>
   </section>
 
+  <section class='g-section g-carousel-section bg-dark'>
+    <div class="intro">
+      <h3>Case Studies</h3>
+    </div>
+  </section>
+
+  <section class='g-section g-cta-section'>
+    <div>
+      <h2>Ready to get started?</h2>
+      <a href="#" class="g-btn white download">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="22" viewBox="0 0 20 22">
+          <path d="M9.292 15.706a1 1 0 0 0 1.416 0l3.999-3.999a1 1 0 1 0-1.414-1.414L11 12.586V1a1 1 0 1 0-2 0v11.586l-2.293-2.293a1 1 0 1 0-1.414 1.414l3.999 3.999zM20 16v3c0 1.654-1.346 3-3 3H3c-1.654 0-3-1.346-3-3v-3a1 1 0 1 1 2 0v3c0 .551.448 1 1 1h14c.552 0 1-.449 1-1v-3a1 1 0 1 1 2 0z"/>
+      </svg>
+        Download
+      </a>
+      <a href="#" class="g-btn white-outline">Explore docs</a>
+    </div>
+  </section>
+
 </div>

website/source/discovery.html.erb

@@ -41,12 +41,6 @@ description: |-
     </div>
   </section>
 
-  <section class='g-section g-carousel-section bg-dark'>
-    <div class="intro">
-      <h3>Case Studies</h3>
-    </div>
-  </section>
-
   <section class='g-section border-top'>
     <div class='g-container'>
       <div class='intro'>
@@ -187,4 +181,23 @@ description: |-
     </div>
   </section>
 
+  <section class='g-section g-carousel-section bg-dark'>
+    <div class="intro">
+      <h3>Case Studies</h3>
+    </div>
+  </section>
+
+  <section class='g-section g-cta-section'>
+    <div>
+      <h2>Ready to get started?</h2>
+      <a href="#" class="g-btn white download">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="22" viewBox="0 0 20 22">
+          <path d="M9.292 15.706a1 1 0 0 0 1.416 0l3.999-3.999a1 1 0 1 0-1.414-1.414L11 12.586V1a1 1 0 1 0-2 0v11.586l-2.293-2.293a1 1 0 1 0-1.414 1.414l3.999 3.999zM20 16v3c0 1.654-1.346 3-3 3H3c-1.654 0-3-1.346-3-3v-3a1 1 0 1 1 2 0v3c0 .551.448 1 1 1h14c.552 0 1-.449 1-1v-3a1 1 0 1 1 2 0z"/>
+      </svg>
+        Download
+      </a>
+      <a href="#" class="g-btn white-outline">Explore docs</a>
+    </div>
+  </section>
+
 </div>

website/source/index.html.erb

@@ -47,7 +47,9 @@ description: |-
             <h3>Service Discovery <span>for connectivity</h3>
             <p>Service Registry enables services to register and discover each other.</p>
           </div>
-          <a href='#' class='g-btn dark-outline'>Learn more</a>
+          <div>
+            <a href='#' class='g-btn dark-outline'>Learn more</a>
+          </div>
         </div>
         <div>
           <div>
@@ -55,7 +57,9 @@ description: |-
             <h3>Service Segmentation <span>for security</h3>
             <p>Secure service-to-service communication with automatic TLS encryption and identity-based authorization.</p>
           </div>
-          <a href='#' class='g-btn dark-outline'>Learn more</a>
+          <div>
+            <a href='#' class='g-btn dark-outline'>Learn more</a>
+          </div>
         </div>
         <div>
           <div>
@@ -63,7 +67,9 @@ description: |-
             <h3>Service Configuration <span>for runtime configuration</h3>
             <p>Feature rich Key/Value store lets you easily configure services.</p>
           </div>
-          <a href='#' class='g-btn dark-outline'>Learn more</a>
+          <div>
+            <a href='#' class='g-btn dark-outline'>Learn more</a>
+          </div>
         </div>
       </div>
     </div>
@@ -166,4 +172,34 @@ description: |-
     </div>
   </section>
 
+  <section class='home-cta-section'>
+    <div>
+      <div>
+        <div>
+          <img src='/assets/images/consul-connect/logos/consul.png' alt='Consul'>
+        </div>
+        <p>Consul Open Source addresses the technical complexity of connecting services across distributed infrastructure.</p>
+        <div>
+          <a href="#" class="g-btn white download">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="22" viewBox="0 0 20 22">
+              <path d="M9.292 15.706a1 1 0 0 0 1.416 0l3.999-3.999a1 1 0 1 0-1.414-1.414L11 12.586V1a1 1 0 1 0-2 0v11.586l-2.293-2.293a1 1 0 1 0-1.414 1.414l3.999 3.999zM20 16v3c0 1.654-1.346 3-3 3H3c-1.654 0-3-1.346-3-3v-3a1 1 0 1 1 2 0v3c0 .551.448 1 1 1h14c.552 0 1-.449 1-1v-3a1 1 0 1 1 2 0z"/>
+          </svg>
+            Download
+          </a>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div>
+        <div>
+          <img src='/assets/images/consul-connect/logos/consul-enterprise.png' alt='Consul Enterprise'>
+        </div>
+        <p>Consul Enterprise addresses the organizational complexity of large user bases and compliance requirements with collaboration and governance features.</p>
+        <div>
+          <a href="https://www.hashicorp.com/products/consul" class="g-btn white-outline">Learn More</a>
+        </div>
+      </div>
+    </div>
+  </section>
+
 </div>

website/source/segmentation.html.erb

@@ -152,4 +152,17 @@ description: |-
     </div>
   </section>
 
+  <section class='g-section g-cta-section'>
+    <div>
+      <h2>Ready to get started?</h2>
+      <a href="#" class="g-btn white download">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="22" viewBox="0 0 20 22">
+          <path d="M9.292 15.706a1 1 0 0 0 1.416 0l3.999-3.999a1 1 0 1 0-1.414-1.414L11 12.586V1a1 1 0 1 0-2 0v11.586l-2.293-2.293a1 1 0 1 0-1.414 1.414l3.999 3.999zM20 16v3c0 1.654-1.346 3-3 3H3c-1.654 0-3-1.346-3-3v-3a1 1 0 1 1 2 0v3c0 .551.448 1 1 1h14c.552 0 1-.449 1-1v-3a1 1 0 1 1 2 0z"/>
+      </svg>
+        Download
+      </a>
+      <a href="#" class="g-btn white-outline">Explore docs</a>
+    </div>
+  </section>
+
 </div>