DEV: fix image links on AI landing page (#1923)

* DEV: fix image links on AI landing page

* 1st attempt to fix URL issues

* 2nd attempt to fix URL issues

Author: dwdougherty

content/develop/ai/_index.md

@@ -13,9 +13,11 @@ hideListLinks: true
 ---
 Redis stores and indexes vector embeddings that semantically represent unstructured data including text passages, images, videos, or audio. Store vectors and the associated metadata within [hashes]({{< relref "/develop/data-types/hashes" >}}) or [JSON]({{< relref "/develop/data-types/json" >}}) documents for [indexing]({{< relref "/develop/ai/search-and-query/indexing" >}}) and [querying]({{< relref "/develop/ai/search-and-query/query" >}}).
 
-| Vector | RAG | RedisVL |
-| :-- | :-- | :-- |
-| {{<image filename="images/ai-cube.svg" alt="AI Redis icon.">}}[Redis vector database quick start guide]({{< relref "/develop/get-started/vector-database" >}}) |{{<image filename="images/ai-brain.svg" alt="AI Redis icon.">}} [Retrieval-Augmented Generation quick start guide]({{< relref "/develop/get-started/rag" >}}) | {{<image filename="images/ai-lib.svg" alt="AI Redis icon.">}}[Redis vector Python client library documentation]({{< relref "/develop/ai/redisvl/" >}}) |
+<div class="grid grid-cols-1 md:grid-cols-3 gap-6 my-8">
+  {{< image-card image="images/ai-cube.svg" alt="AI Redis icon" title="Redis vector database quick start guide" url="/develop/get-started/vector-database" >}}
+  {{< image-card image="images/ai-brain.svg" alt="AI Redis icon" title="Retrieval-Augmented Generation quick start guide" url="/develop/get-started/rag" >}}
+  {{< image-card image="images/ai-lib.svg" alt="AI Redis icon" title="Redis vector Python client library documentation" url="/develop/ai/redisvl/" >}}
+</div>
 
 #### Overview
 
@@ -46,9 +48,13 @@ This page is organized into a few sections depending on what you're trying to do
 
 Learn to perform vector search and use gateways and semantic caching in your AI/ML projects.
 
-| Search | LLM memory | Semantic caching | Semantic routing | AI Gateways |
-| :-- | :-- | :-- | :-- | :-- |
-| {{<image filename="images/ai-search.svg" alt="AI Redis icon.">}}[Vector search guide]({{< relref "/develop/ai/search-and-query/query/vector-search" >}}) | {{<image filename="images/ai-LLM-memory.svg" alt="LLM memory icon.">}}[Store memory for LLMs](https://redis.io/blog/level-up-rag-apps-with-redis-vector-library/) | {{<image filename="images/ai-brain-2.svg" alt="AI Redis icon.">}}[Semantic caching for faster, smarter LLM apps](https://redis.io/blog/what-is-semantic-caching) | {{<image filename="images/ai-semantic-routing.svg" alt="Semantic routing icon.">}}[Semantic routing chooses the best tool](https://redis.io/blog/level-up-rag-apps-with-redis-vector-library/) | {{<image filename="images/ai-model.svg" alt="AI Redis icon.">}}[Deploy an enhanced gateway with Redis](https://redis.io/blog/ai-gateways-what-are-they-how-can-you-deploy-an-enhanced-gateway-with-redis/) |
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 my-8">
+  {{< image-card image="images/ai-search.svg" alt="AI Redis icon" title="Vector search guide" url="/develop/ai/search-and-query/query/vector-search" >}}
+  {{< image-card image="images/ai-LLM-memory.svg" alt="LLM memory icon" title="Store memory for LLMs" url="https://redis.io/blog/level-up-rag-apps-with-redis-vector-library/" >}}
+  {{< image-card image="images/ai-brain-2.svg" alt="AI Redis icon" title="Semantic caching for faster, smarter LLM apps" url="https://redis.io/blog/what-is-semantic-caching" >}}
+  {{< image-card image="images/ai-semantic-routing.svg" alt="Semantic routing icon" title="Semantic routing chooses the best tool" url="https://redis.io/blog/level-up-rag-apps-with-redis-vector-library/" >}}
+  {{< image-card image="images/ai-model.svg" alt="AI Redis icon" title="Deploy an enhanced gateway with Redis" url="https://redis.io/blog/ai-gateways-what-are-they-how-can-you-deploy-an-enhanced-gateway-with-redis/" >}}
+</div>
 
 ## Quickstarts
 

layouts/shortcodes/image-card.html

@@ -0,0 +1,34 @@
+{{/*
+  Image card shortcode - creates a clickable card with image and title
+  
+  Usage:
+  {{< image-card image="images/ai-cube.svg" alt="AI Redis icon" title="Redis vector database quick start guide" url="/develop/get-started/vector-database" >}}
+  
+  Parameters:
+  - image: Path to the image file (required)
+  - alt: Alt text for the image (required)
+  - title: Title text to display below the image (required)
+  - url: URL to link to when clicked (required)
+  - class: Optional CSS class for the card container
+*/}}
+
+{{ $image := .Get "image" }}
+{{ $alt := .Get "alt" }}
+{{ $title := .Get "title" }}
+{{ $url := .Get "url" }}
+{{ $class := .Get "class" | default "" }}
+
+{{/* Handle internal vs external URLs */}}
+{{ $finalUrl := $url }}
+{{ if and (not (hasPrefix $url "http")) (not (hasPrefix $url "//")) }}
+  {{ $finalUrl = relref . $url }}
+{{ end }}
+
+<a href="{{ $finalUrl }}" class="image-card-link block no-underline hover:no-underline text-inherit hover:text-inherit h-full">
+  <div class="image-card flex flex-col items-center text-center p-4 border border-redis-pen-300 rounded-lg hover:border-redis-red-500 hover:shadow-md transition-all duration-200 h-full {{ $class }}">
+    <div class="image-card-img-container mb-4 flex-shrink-0">
+      <img src="{{ relURL $image }}" alt="{{ $alt }}" class="image-card-img w-28 h-28 object-contain">
+    </div>
+    <span class="image-card-title text-sm font-medium text-redis-ink-900 hover:text-redis-red-500 transition-colors flex-grow flex items-end">{{ $title }}</span>
+  </div>
+</a>