Merge pull request #2011 from redis/DOC-5608

update Redis Insight pages with consistent image-card layout

Author: mich-elle-luna

content/develop/tools/insight/_index.md

@@ -25,9 +25,11 @@ Redis Insight is a powerful tool for visualizing and optimizing data in Redis, m
 
 ### Installation and release notes
 
-| | | |
-|---|---|---|
-| {{<image filename="images/redisinsight-desktop.svg" alt="Install Redis Insight icon.">}}[Installation guides]({{< relref "/operate/redisinsight/install" >}})<br/>See installation guides for all platforms | {{<image filename="images/redisinsight-download.svg" alt="Download Redis Insight icon.">}}[Download Redis Insight](https://redis.io/downloads/#insight)<br/>Download Redis Insight directly from redis.io | {{<image filename="images/redisinsight-aws.svg" alt="Release Notes Redis Insight icon.">}}[Release Notes]({{< relref "/develop/tools/insight/release-notes/" >}})<br/>View Redis Insight release notes and changelog |
+<div class="grid grid-cols-1 md:grid-cols-3 gap-6 my-8">
+  {{< image-card image="images/redisinsight-desktop.svg" alt="Install Redis Insight icon" title="Installation guides" url="/operate/redisinsight/install" description="See installation guides for all platforms" >}}
+  {{< image-card image="images/redisinsight-download.svg" alt="Download Redis Insight icon" title="Download Redis Insight" url="https://redis.io/downloads/#insight" description="Download Redis Insight directly from redis.io" >}}
+  {{< image-card image="images/redisinsight-aws.svg" alt="Release Notes Redis Insight icon" title="Release Notes" url="/develop/tools/insight/release-notes/" description="View Redis Insight release notes and changelog" >}}
+</div>
 
 ## Overview
 

content/operate/redisinsight/_index.md

@@ -9,7 +9,9 @@ categories:
 weight: 50
 ---
 
-{{<image filename="images/redisinsight-download.svg" alt="Download Redis Insight icon.">}}[Download Redis Insight](https://redis.io/downloads/#insight)
+<div class="grid grid-cols-1 md:grid-cols-2 gap-6 my-8 max-w-2xl">
+  {{< image-card image="images/redisinsight-download.svg" alt="Download Redis Insight icon" title="Download Redis Insight" url="https://redis.io/downloads/#insight" >}}
+</div>
 
 For information on using Redis Insight, see [these pages]({{< relref "/develop/tools/insight" >}}).
 

content/operate/redisinsight/install/_index.md

@@ -10,12 +10,16 @@ weight: 3
 hideListLinks: true
 ---
 
-[Download Redis Insight](https://redis.io/downloads/#insight)
+<div class="grid grid-cols-1 md:grid-cols-2 gap-6 my-8 max-w-2xl">
+  {{< image-card image="images/redisinsight-download.svg" alt="Download Redis Insight icon" title="Download Redis Insight" url="https://redis.io/downloads/#insight" >}}
+</div>
 
 ## Installation options
 Learn how to install Redis Insight on your desktop, Amazon Web Services (AWS), Docker, and Kubernetes.
 
-| | |
-|---|---|
-| {{<image filename="images/redisinsight-aws.svg" alt="AWS Redis Insight icon.">}}[Install on AWS]({{< relref "/operate/redisinsight/install/install-on-aws" >}})<br/>Install Redis Insight on Amazon Web Services | {{<image filename="images/redisinsight-desktop.svg" alt="Desktop Redis Insight icon.">}}[Install on Desktop]({{< relref "/operate/redisinsight/install/install-on-desktop" >}})<br/>Install Redis Insight on Windows, macOS, or Linux desktop |
-| {{<image filename="images/redisinsight-kubernetes.svg" alt="Kubernetes Redis Insight icon.">}}[Install on Kubernetes]({{< relref "/operate/redisinsight/install/install-on-k8s" >}})<br/>Install Redis Insight on Kubernetes clusters | {{<image filename="images/redisinsight-docker.svg" alt="Docker Redis Insight icon.">}}[Install on Docker]({{< relref "/operate/redisinsight/install/install-on-docker" >}})<br/>Install Redis Insight using Docker containers |
+<div class="grid grid-cols-1 md:grid-cols-2 gap-6 my-8">
+  {{< image-card image="images/redisinsight-aws.svg" alt="AWS Redis Insight icon" title="Install on AWS" url="/operate/redisinsight/install/install-on-aws" description="Install Redis Insight on Amazon Web Services" >}}
+  {{< image-card image="images/redisinsight-desktop.svg" alt="Desktop Redis Insight icon" title="Install on Desktop" url="/operate/redisinsight/install/install-on-desktop" description="Install Redis Insight on Windows, macOS, or Linux desktop" >}}
+  {{< image-card image="images/redisinsight-kubernetes.svg" alt="Kubernetes Redis Insight icon" title="Install on Kubernetes" url="/operate/redisinsight/install/install-on-k8s" description="Install Redis Insight on Kubernetes clusters" >}}
+  {{< image-card image="images/redisinsight-docker.svg" alt="Docker Redis Insight icon" title="Install on Docker" url="/operate/redisinsight/install/install-on-docker" description="Install Redis Insight using Docker containers" >}}
+</div>

content/operate/redisinsight/install/install-on-desktop.md

@@ -9,7 +9,9 @@ title: Install on desktop
 weight: 1
 ---
 
-[Download Redis Insight](https://redis.io/downloads/#insight)
+<div class="grid grid-cols-1 md:grid-cols-2 gap-6 my-8 max-w-2xl">
+  {{< image-card image="images/redisinsight-download.svg" alt="Download Redis Insight icon" title="Download Redis Insight" url="https://redis.io/downloads/#insight" >}}
+</div>
 
 ## Supported operating systems