Meld app and infra details into technical-details

gruntwork-io · Jul 23, 2021 · e747422 · e747422
1 parent 25a302d
commit e747422
Show file tree

Hide file tree

Showing 9 changed files with 400 additions and 102 deletions.
diff --git a/_data/hipaa-landing-page-tabs-ref-arch-code.yml b/_data/hipaa-landing-page-tabs-ref-arch-code.yml
@@ -1,9 +1,13 @@
-- id: runapp
+- id: infra-terraform
   title: Terraform
   content: |
-    <figure><figcaption>EKS Cluster Configuration in Terraform</figcaption>
+    <figure>
       <pre>
       <code class="language-hcl">
+        ########################################
+        # EKS Cluster Configuration in Terraform
+        ########################################
+
         # ---------------------------------------------------------------------------------------------------------------------
         # CONFIGURE OUR KUBERNETES CONNECTIONS
         # Note that we can't configure our Kubernetes connection until EKS is up and running, so we try to depend on the
@@ -46,12 +50,15 @@
           </code>
           </pre>
           <figure>
-- id: Docker
+- id: infra-docker
   title: Docker
   content: |
-    <figure><figcaption>Dockerfile</figcaption>
+    <figure>
       <pre>
       <code class="language-docker">
+        #############
+        # Dockerfile
+        #############
 
         FROM python:3.8-alpine AS with-secrets-python
         MAINTAINER Gruntwork <info@gruntwork.io>
@@ -98,12 +105,15 @@
       </code>
       </pre>
       <figure>
-- id: Packer
+- id: infra-packer
   title: Packer
   content: |
-    <figure><figcaption>Packer configurations to create AMIs</figcaption>
+    <figure>
       <pre>
       <code class="language-json">
+      /*************************************
+      * Packer configurations to create AMIs
+      **************************************/
       {
         "variables": {
           "service_catalog_ref": null,

diff --git a/pages/landing/hipaa/reference-architecture.html b/pages/landing/hipaa/reference-architecture.html
diff --git a/pages/landing/hipaa/_ref-arch-features.html → ...echnical-details/_infra-how-it-works.html b/pages/landing/hipaa/_ref-arch-features.html → ...echnical-details/_infra-how-it-works.html
@@ -1,4 +1,5 @@
-{% for item in page.how_it_works %}
+<h2>HIPAA-compliant Infra at a Glance</h2>
+{% for item in page.infra_how_it_works %}
   <div class="row">
     {% if item.precode %}
       <div class="item_precode row-image-content {% if item.image_side == "left" %}col-xs-12 col-sm-7 col-md-6 col-description{% else %}col-xs-12 col-sm-7 col-sm-pull-5 col-md-6 col-md-pull-6 col-description{% endif %}">
@@ -33,7 +34,7 @@
           {% endfor %}
         </div>
         <div style="height: 450px; overflow-y: scroll;"class="tab_code_content">
-          {% for tab in site.data.hipaa-landing-page-tabs-code %}
+          {% for tab in site.data.hipaa-landing-page-tabs-ref-arch-code %}
           <div id="{{tab.id}}" class="item_precode {% if forloop.first %}first_tabcontent_code tabcontent_code{% else %}tabcontent_code{% endif %}">
               {{ tab.content }}
           </div>
@@ -163,19 +164,3 @@ <h2>{{ item.heading }}</h2>
   }
 
 </style>
-
-<script>
-  function openTab(evt, tabName) {
-    $('.tabcontent').hide(); // hide all tab content
-    $('.tablinks').removeClass('active'); // ensure all links are inactive
-    $('#' + tabName).show();
-    $(evt.currentTarget).addClass('active'); // mark the current tab as active
-  }
-
-  function openCodeTab(evt, tabName) {
-    $('.tabcontent_code').hide(); // hide all tab content
-    $('.tablinks_code').removeClass('active'); // ensure all links are inactive
-    $('#' + tabName).show();
-    $(evt.currentTarget).addClass('active'); // mark the current tab as active
-  }
-</script>
diff --git a/pages/landing/hipaa/technical-details/_infra-more-details.html b/pages/landing/hipaa/technical-details/_infra-more-details.html
@@ -0,0 +1,9 @@
+<h2>Supported Infrastructure features</h2>
+<p>
+  Our Infrastructure as Code (IaC) Library includes over 350,000+ lines of
+  battle-tested code that we deploy into your AWS accounts in about one day.
+</p>
+
+<div class="section-dark">
+  <div class="container">{% include_relative _plans.html %}</div>
+</div>
diff --git a/pages/landing/hipaa/technical-details/_plan-features.html b/pages/landing/hipaa/technical-details/_plan-features.html
@@ -0,0 +1,40 @@
+{% for category in page.categories %}
+  <tr>
+    <td style="text-align: left"><h3 class="margin-bottom-none">{{ category.title }}</h3></td>
+    <td style="border-left: 1px solid #194c5f; border-right: 1px solid #194c5f; background-color: #252e3a"><hr style="margin-bottom: 10px"></td>
+    <td style="border-left: 1px solid #194c5f; border-right: 1px solid #194c5f; background-color: #252e3a"><hr style="margin-bottom: 10px"></td>
+    <td style="border-left: 1px solid #194c5f; border-right: 1px solid #194c5f; background-color: #252e3a"><hr style="margin-bottom: 10px"></td>
+  </tr>
+  {% for feature in category.features %}
+    <tr>
+      <th><span class="help-text light" title="{{ feature.description }}" data-toggle="tooltip">{{ feature.name }}</span></th>
+      <td style="border-left: 1px solid #194c5f; border-right: 1px solid #194c5f; background-color: #252e3a;">
+        {% if feature.values %}
+          <span style="color: white">{{ feature.values["Lite"] }}</span>
+        {% elsif feature.plans contains "Lite" %}
+          <i class="fa fa-check" style="color: #69ff66" aria-hidden="true"></i>
+        {% else %}
+          <i class="fa fa-times" style="color: #f92e64" aria-hidden="true"></i>
+        {% endif %}
+      </td>
+      <td style="border-left: 1px solid #194c5f; border-right: 1px solid #194c5f; background-color: #252e3a;">
+        {% if feature.values %}
+          <span style="color: white">{{ feature.values["Pro"] }}</span>
+        {% elsif feature.plans contains "Pro" %}
+          <i class="fa fa-check" style="color: #69ff66" aria-hidden="true"></i>
+        {% else %}
+          <i class="fa fa-times" style="color: #f92e64" aria-hidden="true"></i>
+        {% endif %}
+      </td>
+      <td style="border-left: 1px solid #194c5f; border-right: 1px solid #194c5f; background-color: #252e3a;">
+        {% if feature.values %}
+          <span style="color: white">{{ feature.values["Enterprise"] }}</span>
+        {% elsif feature.plans contains "Enterprise" %}
+          <i class="fa fa-check" style="color: #69ff66" aria-hidden="true"></i>
+        {% else %}
+          <i class="fa fa-times" style="color: #f92e64" aria-hidden="true"></i>
+        {% endif %}
+      </td>
+    </tr>
+  {% endfor %}
+{% endfor %}
diff --git a/pages/landing/hipaa/technical-details/_plans.html b/pages/landing/hipaa/technical-details/_plans.html
@@ -0,0 +1,8 @@
+<table class="table table-condensed table-center" style="margin-top: 100px">
+  <thead>
+    {% include_relative _pricing-header.html %}
+  </thead>
+  <tbody>
+    {% include_relative _plan-features.html %}
+  </tbody>
+</table>
diff --git a/pages/landing/hipaa/technical-details/_price-rows.html b/pages/landing/hipaa/technical-details/_price-rows.html
@@ -0,0 +1,47 @@
+<tr>
+  <td style="width: 25%">&nbsp;</td>
+  {% for pricing in page.pricing %}
+    <td style="width: 25%; border-left: 1px solid #194c5f; border-right: 1px solid #194c5f; background-color: #252e3a" class="text-center">
+      <hr>
+      {% if pricing.price == "Contact Us" %}
+        <p class="h1 enterprise-h1">Contact Us</p>
+      {% elsif pricing.price == "Free" %}
+        <p class="h1 enterprise-h1">Free</p>
+      {% else %}
+        <p class="big-price"><span>$</span>{{ pricing.price }}</p>
+        <p class="help-block" style="margin-top:-9px;">per month</p>
+      {% endif %}
+    </td>
+  {% endfor %}
+</tr>
+<tr>
+  <td style="width: 25%">&nbsp;</td>
+  {% for pricing in page.pricing %}
+    <td style="width: 25%; border-left: 1px solid #194c5f; border-right: 1px solid #194c5f; background-color: #252e3a;{% if include.bottom_border %} border-bottom: 1px solid #194c5f{% endif %}" class="text-center">
+      {% if pricing.price == "Contact Us" %}
+        <p><a class="btn btn-primary" href="{{ page.permalink }}contact/?selection={{ pricing.title | slugify }}" ga-on="click" ga-event-category="{{ page.path | slugify }}" ga-event-action="select-cta">Contact Us</a></p>
+        <p class="text-muted small">
+          <em>
+            Currently in private beta.<br>
+            Annual subscription.
+          </em>
+        </p>
+      {% elsif pricing.price == "Free" %}
+        <p><a id="pricing-cta-aws" class="btn btn-info pricing-ctas" href="{{ page.permalink }}contact/?selection={{ pricing.title | slugify }}" ga-on="click" ga-event-category="{{ page.path | slugify }}" ga-event-action="select-cta">Request Access</a></p>
+        <p class="text-muted small">
+          <em>
+            Currently in private beta.
+          </em>
+        </p>
+      {% else %}
+        <p><a id="pricing-cta-aws" class="btn btn-info pricing-ctas" href="{{ page.permalink }}contact/?selection={{ pricing.title | slugify }}" ga-on="click" ga-event-category="{{ page.path | slugify }}" ga-event-action="select-cta">Request Access</a></p>
+        <p class="text-muted small">
+          <em>
+            Currently in private beta.<br>
+            Annual subscription.
+          </em>
+        </p>
+      {% endif %}
+    </td>
+  {% endfor %}
+</tr>
diff --git a/pages/landing/hipaa/technical-details/_pricing-header.html b/pages/landing/hipaa/technical-details/_pricing-header.html
@@ -0,0 +1,37 @@
+<tr>
+  <th style="width: 25%">&nbsp;</th>
+</tr>
+<tr>
+  <th style="width: 25%">&nbsp;</th>
+  {% for pricing in page.pricing %}
+  <th
+    style="
+      width: 25%;
+      border-top: 1px solid #194c5f;
+      border-left: 1px solid #194c5f;
+      border-right: 1px solid #194c5f;
+      background-color: #252e3a;
+    "
+  >
+    <h3 class="h2 no-anchor margin-bottom-none">{{ pricing.title }}</h3>
+  </th>
+  {% endfor %}
+</tr>
+<tr>
+  <td style="width: 25%">&nbsp;</td>
+  {% for pricing in page.pricing %}
+  <td
+    style="
+      width: 25%;
+      border-left: 1px solid #194c5f;
+      border-right: 1px solid #194c5f;
+      background-color: #252e3a;
+      font-size: 1.7rem;
+      color: #bfbfbf;
+    "
+    class="text-center"
+  >
+    {{ pricing.description }}
+  </td>
+  {% endfor %}
+</tr>