website - add appropriately sized assets and adjust styles

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

@@ -3,8 +3,26 @@
   background: $consul-red;
   display: flex;
   justify-content: center;
+  position: relative;
   text-align: center;
 
+  &:after {
+    content: "";
+    background: url("/assets/images/consul-connect/mesh.svg") top center;
+    background-size: cover;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0.2;
+    transform: scale(1.3, 1.3);
+  }
+
+  & > div {
+    z-index: 1;
+  }
+
   h2 {
     color: $white;
     margin-top: 0;

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

@@ -33,12 +33,7 @@
     }
 
     img {
-      max-width: 140%;
+      width: 145%;
-      width: auto;
-
-      @media(min-width: 768px) {
-        max-width: none;
-      }
     }
   }
 

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

@@ -75,10 +75,25 @@
     & > div {
       display: flex;
       justify-content: center;
+      overflow: hidden;
       width: 50%;
 
       &:first-child {
         background: $consul-red;
+        position: relative;
+
+        &:after {
+          content: "";
+          background: url("/assets/images/consul-connect/mesh.svg") top center;
+          background-size: cover;
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          opacity: 0.2;
+          transform: scale(1.3, 1.3);
+        }
       }
 
       &:last-child {
@@ -92,6 +107,7 @@
         padding: 96px 0;
         text-align: center;
         width: 100%;
+        z-index: 1;
 
         div:first-child {
           height: 50px;

website/source/configuration.html.erb

@@ -63,7 +63,7 @@ description: |-
           </div>
         </div>
         <div>
-          <img src='/assets/images/consul-connect/health-checks.png' alt='Service Registry'>
+          <img src='/assets/images/consul-connect/feature.jpg' alt='Service Registry'>
         </div>
       </div>
     </div>

website/source/discovery.html.erb

@@ -63,7 +63,7 @@ description: |-
           </div>
         </div>
         <div>
-          <img src='/assets/images/consul-connect/service-registry.png' alt='Service Registry'>
+          <img src='/assets/images/consul-connect/feature.jpg' alt='Service Registry'>
         </div>
       </div>
     </div>
@@ -181,7 +181,7 @@ description: |-
           </div>
         </div>
         <div>
-          <img src='/assets/images/consul-connect/health-checks.png' alt='Service Registry'>
+          <img src='/assets/images/consul-connect/feature.jpg' alt='Service Registry'>
         </div>
       </div>
     </div>

website/source/index.html.erb

@@ -177,22 +177,22 @@ description: |-
       </div>
       <div class='g-logo-grid'>
         <div>
-          <img src='/assets/images/consul-connect/logos/sap-ariba.png' alt='SAP Ariba'>
+          <img src='/assets/images/consul-connect/logos/logo_sap-ariba.svg' alt='SAP Ariba'>
         </div>
         <div>
-          <img src='/assets/images/consul-connect/logos/citadel.png' alt='Citadel'>
+          <img src='/assets/images/consul-connect/logos/logo_citadel.svg' alt='Citadel'>
         </div>
         <div>
-          <img src='/assets/images/consul-connect/logos/barclays.png' alt='Barclays'>
+          <img src='/assets/images/consul-connect/logos/logo_barclays.svg' alt='Barclays'>
         </div>
         <div>
-          <img src='/assets/images/consul-connect/logos/itv.png' alt='itv'>
+          <img src='/assets/images/consul-connect/logos/logo_itv.svg' alt='itv'>
         </div>
         <div>
-          <img src='/assets/images/consul-connect/logos/spaceflight.png' alt='Spaceflight'>
+          <img src='/assets/images/consul-connect/logos/logo_spaceflight-industries.svg' alt='Spaceflight'>
         </div>
         <div>
-          <img src='/assets/images/consul-connect/logos/lotto.png' alt='MyLotto'>
+          <img src='/assets/images/consul-connect/logos/logo_lotto-nz.svg' alt='MyLotto'>
         </div>
       </div>
     </div>

website/source/segmentation.html.erb

@@ -64,7 +64,7 @@ description: |-
           </div>
         </div>
         <div>
-          <img src='/assets/images/consul-connect/service-access-graph.png' alt='Service Access Graph '>
+          <img src='/assets/images/consul-connect/feature.jpg' alt='Service Access Graph '>
         </div>
       </div>
     </div>