Add Partial Back

content/en/continuous_delivery/_index.md

@@ -42,11 +42,13 @@ Deployment Visibility helps you monitor deployments across CI environments by tr
 
 ## Increase efficiency through seamless integrations
 
-Datadog integrates with the following CI providers and CD providers like [ArgoCD][5] to collect metrics and track the execution performance and results of your deployments. 
+Datadog integrates with [CI providers][4] and CD providers like [ArgoCD][5] to collect metrics and track the execution performance and results of your deployments. 
 
-{{< img src="continuous_delivery/supported_integrations.png" alt="CI/CD options for Deployment Visibility" width="100%" >}}
+{{< partial name="continuous_delivery/cd-getting-started.html" >}}
 
-Use the data aggregated over time to identify trends and improve your deployment strategies for enhanced operational efficiency. For more information, see the [CI Providers documentation][4].
+</br>
+
+Use the data aggregated over time to identify trends and improve your deployment strategies for enhanced operational efficiency. 
 
 ## Ready to start?
 

layouts/partials/continuous_delivery/cd-getting-started.html

@@ -0,0 +1,56 @@
+{{ $dot := . }}
+<div class="ci-cd-integrations">
+  <div class="container cards-dd">
+    <div class="row row-cols-4 g-2 g-xl-3 justify-content-sm-center">
+      <div class="col">
+        <a class="card h-100" href="/continuous_delivery/deployments/argocd/">
+          <div class="card-body text-center py-2 px-1">
+            {{ partial "img.html" (dict "root" . "src" "integrations_logos/argocd_small.svg" "class" "img-fluid" "alt" "argocd" "width" "150") }}
+          </div>
+        </a>
+      </div>
+      <div class="col">
+        <a class="card h-100" href="/continuous_delivery/deployments/ciproviders/#mark-github-actions-jobs-as-deployments">
+          <div class="card-body text-center py-2 px-1">
+            {{ partial "img.html" (dict "root" . "src" "integrations_logos/github_small.svg" "class" "img-fluid" "alt" "github" "width" "150") }}
+          </div>
+        </a>
+      </div>
+      <div class="col">
+        <a class="card h-100" href="/continuous_delivery/deployments/ciproviders/">
+          <div class="card-body text-center py-2 px-1">
+            {{ partial "img.html" (dict "root" . "src" "integrations_logos/gitlab_small.svg" "class" "img-fluid" "alt" "gitlab" "width" "150") }}
+          </div>
+        </a>
+      </div>
+      <div class="col">
+        <a class="card h-100" href="/continuous_delivery/deployments/ciproviders/">
+          <div class="card-body text-center py-2 px-1">
+            {{ partial "img.html" (dict "root" . "src" "integrations_logos/jenkins.png" "class" "img-fluid" "alt" "jenkins" "width" "150") }}
+          </div>
+        </a>
+      </div>
+      <div class="col">
+        <a class="card h-100" href="/continuous_delivery/deployments/ciproviders/">
+          <div class="card-body text-center py-2 px-1">
+            {{ partial "img.html" (dict "root" . "src" "integrations_logos/circleci.png" "class" "img-fluid" "alt" "circleci" "width" "150") }}
+          </div>
+        </a>
+      </div>
+      <div class="col">
+        <a class="card h-100" href="/continuous_delivery/deployments/ciproviders/">
+          <div class="card-body text-center py-2 px-1">
+            {{ partial "img.html" (dict "root" . "src" "integrations_logos/aws-codepipeline_small.svg" "class" "img-fluid" "alt" "azure pipelines" "width" "150") }}
+          </div>
+        </a>
+      </div>
+      <div class="col">
+        <a class="card h-100" href="/continuous_delivery/deployments/ciproviders/">
+          <div class="card-body text-center py-2 px-1">
+            {{ partial "img.html" (dict "root" . "src" "integrations_logos/buildkite_small.svg" "class" "img-fluid" "alt" "buildkite" "width" "150") }}
+          </div>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>