Merge pull request #375 from Altalogy/pipelines

[WWW-92] Pipelines subpage

Author: eak12913

_data/pipelines-features.yml

@@ -0,0 +1,28 @@
+- title: Set up a Terraform pipeline based on best practices
+  description: |
+    Gruntwork engineers carefully designed a Terraform pipeline code framework and approach based on best practices for workflow, long-term infrastructure code maintainability, and security. Adopt those best practices for your own Terraform team.
+  icon: "/assets/img/gruntwork-pipelines/features-1@3x.png"
+
+- title: Adopt a security-first approach
+  description: It's all too common to give your CI server admin-level permissions needed to launch arbitrary infrastructure, a dangerous security posture. Gruntwork Pipelines enables a secure infrastructure pipeline by granting the sensitive permissions solely to a Fargate Task that exposes a limited, locked down interface and only allows running pre-defined commands such as <code>terraform apply</code> in pre-defined git repos/branches/folders that require peer review to change.
+  icon: "/assets/img/gruntwork-pipelines/features-2@3x.png"
+
+- title: Run your pipeline on any CI tool
+  description: Run Gruntwork pipelines on any CI tool you want, including both managed and self-hosted varieties. There's no need to set up a new tool, or share sensitive cloud credentials with another third party.
+  icon: "/assets/img/gruntwork-pipelines/features-3@3x.png"
+
+- title: Run an infrastructure code pipeline for Terragrunt or Terraform
+  description: Gruntwork Pipelines is designed to give a first-class experience with either Terragrunt or Terraform. In addition, you have full control over the build environment by selecting any Docker image of your choice. 
+  icon: "/assets/img/gruntwork-pipelines/features-4@3x.png"
+
+- title: Notify Slack when key events occur
+  description: Slack users can receive notifications when a <code>terraform plan</code> is ready for review, when a human needs to approve a <code>terraform apply</code>, or in other scenarios you configure.
+  icon: "/assets/img/gruntwork-pipelines/features-5@3x.png"
+
+- title: Use the same pipeline for infra and app code
+  description: Gruntwork Pipelines has first-class support for application deployments, allowing you to use the same pipeline configuration for both infrastructure and application code. 
+  icon: "/assets/img/gruntwork-pipelines/features-6@3x.png"
+
+- title: Add your own features. Or benefit from our new ones.
+  description: Gruntwork Pipelines is a code framework and approach. Like all Gruntwork products, we take primary responsibility for updates and new features, and you get access to 100% of the code, leaving you free to add any customizations you want or contribute them back to our mainline branch.
+  icon: "/assets/img/gruntwork-pipelines/features-7@3x.png"

_data/sitemap.yml

@@ -5,6 +5,9 @@
 
     - title: Gruntwork Landing Zone
       url: /landing-zone-for-aws/
+
+    - title: Gruntwork Pipelines
+      url: /pipelines/
 
     - title: Reference Architecture
       url: /reference-architecture/

_includes/navbar.html

@@ -56,6 +56,14 @@
                   >Gruntwork Landing Zone</a
                 >
               </li>
+              <li>
+                <a
+                  href="/pipelines/"
+                  ga-event-category="nav-{{ page.path | slugify }}"
+                  ga-event-action="pipelines"
+                  >Gruntwork Pipelines</a
+                >
+              </li>
               <li>
                 <a
                   href="/training/"

assets/css/app.less

@@ -23,6 +23,7 @@
 @import "pages/pricing";
 @import "pages/checkout";
 @import "pages/landing-zone";
+@import "pages/pipelines";
 
 // Import print styles
 @import "print";

assets/css/pages/pipelines.less

@@ -0,0 +1,80 @@
+.gruntwork-pipelines {
+  .row-features-group {
+    display: flex;
+    margin-top: 10px;
+    margin-bottom: 10px;
+
+    .feature-description-assets {
+      margin: 40px 0;
+    }
+
+    .feature-techstack {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+
+      img {
+        margin-right: 8px;
+      }
+
+      .feature-more-icons {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        letter-spacing: 1px;
+        font-size: 14px;
+        text-transform: uppercase;
+        padding: 0 10px;
+        max-width: 100%;
+        height: 42px;
+        border-radius: 4px;
+        border: solid 0.7px rgba(106, 110, 115, 0.15);
+        background-color: #191f29;
+      }
+    }
+    
+    .highlighted{
+      color: #ee4f5d;
+      margin: 0 2px;   
+      font-weight: normal;
+      letter-spacing: 1.8px;
+    }
+
+    .feature-image {
+      width: 100%;
+      max-width: 120px;
+      margin-top: 30px;
+      margin-left: -25px;
+    }
+  }
+}
+
+@media only screen and (max-width: 767px) {
+  .gruntwork-pipelines {
+    .row-features-group {
+      flex-direction: column;
+      margin-top: 30px;
+      margin-bottom: 50px;
+      padding-top: 30px;
+      border-top: 2px solid rgba(15, 192, 239, 0.25);
+      .feature-techstack {
+        img {
+          margin-right: 2px;
+        }
+  
+        .feature-more-icons {
+          padding: 0 5px;
+        }
+      }
+    }
+
+    .row-features-group:first-of-type {
+      border-top: none;
+      padding-top: 0;
+
+      img {
+        margin-top: 0;
+      }
+    }
+  }
+}