hub: add catalog callout on homepage (#21613)

<!--Delete sections as needed -->

## Description

Increase visibility of Gen AI catalog.

- Moved get started card on homepage up by the nav cards to align with
nav
- Added gen ai in place of the old get started card

## Related issues or tickets

<!-- Related issues, pull requests, or Jira tickets -->

## Reviews

<!-- Notes for reviewers here -->
<!-- List applicable reviews (optionally @tag reviewers) -->

- [ ] Editorial review
- [ ] Product review


![image](https://github.com/user-attachments/assets/bc758326-3ce0-4e0a-aa38-257051d35b21)

---------

Signed-off-by: Craig <[email protected]>
Co-authored-by: David Karlsson <[email protected]>

Author: craig-osterhout

layouts/index.html

@@ -41,7 +41,29 @@ <h1 class="text-2xl">Get Docker</h1>
       </div>
 
       <div>
-        <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
+        <div class="grid grid-cols-1 gap-4 lg:grid-cols-4">
+
+          <div>
+            <a class="h-full" href="/get-started/">
+              <div
+                class="flex h-full flex-col gap-2 rounded border border-gray-light-100 bg-white p-4 drop-shadow-sm hover:border-gray-light-200 hover:drop-shadow-lg dark:border-gray-dark-400 dark:bg-gray-dark-200 hover:dark:border-gray-dark">
+                <div class="flex items-center gap-4">
+                  <span class="icon-svg text-violet-light dark:text-violet-dark">
+                    {{ partial "icon" "rocket" }}
+                  </span>
+                  <div>
+                    <div class="text-xl leading-snug text-gray-light-800 dark:text-white">
+                      Get started
+                    </div>
+                  </div>
+                </div>
+                <div class="leading-snug text-gray-light-500 dark:text-gray-dark-700">
+                  Learn Docker basics and the benefits of containerization.
+                </div>
+              </div>
+            </a>
+          </div>
+
           <div>
             <a class="h-full" href="/guides/">
               <div
@@ -57,7 +79,7 @@ <h1 class="text-2xl">Get Docker</h1>
                   </div>
                 </div>
                 <div class="leading-snug text-gray-light-500 dark:text-gray-dark-700">
-                  Get started and learn how Docker can optimize your development workflows.
+                  Learn how Docker can optimize your development workflows.
                 </div>
               </div>
             </a>
@@ -112,16 +134,21 @@ <h1 class="text-2xl">Get Docker</h1>
         <div class="bg-pattern-verde relative rounded p-6 drop-shadow">
           <div class="flex h-full flex-col items-start justify-between gap-12">
             <div class="flex flex-col gap-4">
-              <h2 class="font-medium">Getting started</h2>
+              <h2 class="font-medium">Gen AI catalog {{ partial
+              "components/badge.html" (dict "color" "blue" "content" "New")
+              }}</h2>
               <p class="text-xl">
-                Learn Docker basics and the benefits of containerizing your
-                applications
+                Integrate AI solutions into your apps with minimal effort
               </p>
             </div>
-            <div>
-              <a href="/get-started/"
+            <div class="flex flex-col xl:flex-row gap-4 items-start">
+              <a href="https://hub.docker.com/catalogs/gen-ai"
                 class="flex cursor-pointer items-center gap-2 rounded bg-blue-light p-2 px-4 text-white transition duration-300 hover:bg-blue-light-400 dark:bg-blue-dark-400 dark:hover:bg-blue-dark">
-                Get started
+                Explore on Docker Hub
+              </a>
+              <a href="/docker-hub/image-library/catalogs/"
+                class="flex-grow-0 flex cursor-pointer items-center gap-2 rounded bg-blue-light p-2 px-4 text-white transition duration-300 hover:bg-blue-light-400 dark:bg-blue-dark-400 dark:hover:bg-blue-dark">
+                Read the docs
               </a>
             </div>
           </div>