site: update landing page layout

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>

assets/css/utilities.css

@@ -16,7 +16,6 @@
   }
 }
 
-
 @utility icon-lg {
   svg {
     font-size: 32px;
@@ -39,28 +38,6 @@
   @apply dark:hue-rotate-180 dark:invert dark:filter;
 }
 
-@utility bg-pattern-blue {
-  background-color: rgba(255, 255, 255, 0.5);
-  background-image: url("/assets/images/bg-pattern-blue.webp");
-  background-blend-mode: overlay;
-  background-size: cover;
-  background-repeat: no-repeat;
-  .dark & {
-    background-color: rgba(0, 0, 0, 0.741);
-  }
-}
-
-@utility bg-pattern-purple {
-  background-color: rgba(255, 255, 255, 0.5);
-  background-image: url("/assets/images/bg-pattern-purple.webp");
-  background-blend-mode: overlay;
-  background-size: cover;
-  background-repeat: no-repeat;
-  .dark & {
-    background-color: rgba(0, 0, 0, 0.741);
-  }
-}
-
 @utility bg-background-toc {
   background-color: var(--color-navbar-bg);
   .dark & {
@@ -68,17 +45,6 @@
   }
 }
 
-@utility bg-pattern-verde {
-  background-color: rgba(255, 255, 255, 0.5);
-  background-image: url("/assets/images/bg-pattern-verde.webp");
-  background-blend-mode: overlay;
-  background-size: cover;
-  background-repeat: no-repeat;
-  .dark & {
-    background-color: rgba(0, 0, 0, 0.741);
-  }
-}
-
 @utility icon-svg {
   svg {
     font-size: 24px;
@@ -151,8 +117,8 @@
   }
 
   /* code in `inline code` style */
-  :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)),
-  a>code {
+  :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)),
+  a > code {
     font-size: 0.875em;
     font-weight: 400 !important;
     border: 1px solid !important;
@@ -263,6 +229,20 @@
   font-size: 90%;
 }
 
+@utility topbar-button {
+  @apply min-h-10 max-w-40 rounded-md border-1 border-blue-300 bg-(--topnav-button-bg) px-2 text-center font-semibold text-white;
+  @apply inline-flex items-center justify-center gap-1.5 transition-colors hover:border-blue-300 hover:bg-blue-400;
+  svg {
+    font-size: 19px;
+  }
+}
+@utility topbar-button-clear {
+  @apply min-h-9 px-0 text-center font-semibold text-white/95 transition-colors hover:text-white/85;
+  svg {
+    font-size: 19px;
+  }
+}
+
 .footer {
   @apply hidden md:flex flex-row ml-auto justify-between px-4 pt-6 pb-2 gap-6;
   @apply bg-gray-100 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700;

assets/js/src/alpine.js

@@ -92,12 +92,16 @@ Alpine.store("showSidebar", false)
 Alpine.store('gordon', {
   isOpen: false,
   query: '',
+  autoSubmit: false,
   toggle() {
     this.isOpen = !this.isOpen
   },
-  open(query) {
+  open(query, autoSubmit = false) {
     this.isOpen = true
-    if (query) this.query = query
+    if (query) {
+      this.query = query
+      this.autoSubmit = autoSubmit
+    }
   },
   close() {
     this.isOpen = false

content/_index.md

@@ -2,170 +2,4 @@
 title: Home
 description: Docker Documentation is the official Docker library of resources, manuals, and guides to help you containerize applications.
 keywords: Docker, documentation, manual, guide, reference, api, samples
-grid:
-  - title: Docker Desktop
-    icon: computer
-    description: |
-      Manage containers, applications, and images directly from your machine.
-    links:
-      - text: "Overview"
-        url: "/desktop/"
-      - text: "Explore Docker Desktop"
-        url: "/desktop/use-desktop/"
-      - text: "Release notes"
-        url: "/desktop/release-notes/"
-  - title: Docker Hardened Images
-    icon: /icons/dhi.svg
-    description: |
-      Secure, minimal images for trusted software delivery.
-    links:
-      - text: "Overview"
-        url: "/dhi/"
-      - text: "Quickstart"
-        url: "/dhi/get-started/"
-      - text: "Use an image"
-        url: "/dhi/how-to/use/"
-  - title: Docker MCP Catalog and Toolkit
-    icon: /icons/toolkit.svg
-    description: |
-      Augment your AI workflows with MCP servers.
-    links:
-      - text: "Overview"
-        url: "/ai/mcp-catalog-and-toolkit/"
-      - text: "Quickstart"
-        url: "/ai/mcp-catalog-and-toolkit/get-started/"
-      - text: "Explore the MCP Toolkit"
-        url: "/ai/mcp-catalog-and-toolkit/toolkit/"
-  - title: Docker Engine
-    icon: developer_board
-    description: |
-      The definitive open source container client and runtime.
-    links:
-      - text: "Overview"
-        url: "/engine/"
-      - text: "Install"
-        url: "/engine/install/"
-      - text: "Release notes"
-        url: "/engine/release-notes/"
-  - title: Docker Build
-    icon: build
-    description: |
-      Package, test, and ship your applications.
-    links:
-      - text: "Overview"
-        url: "/build/"
-      - text: "Packaging your software"
-        url: "/build/building/packaging/"
-      - text: "Release notes"
-        url: "https://github.com/docker/buildx/releases"
-  - title: Docker Build Cloud
-    icon: cloud
-    description: |
-      Run your builds in the cloud.
-    links:
-      - text: "Overview"
-        url: "/build-cloud/"
-      - text: "Setup"
-        url: "/build-cloud/setup/"
-      - text: "Release notes"
-        url: "/build-cloud/release-notes/"
-  - title: Docker Compose
-    icon: polyline
-    description: |
-      Define and run multi-container applications with Docker.
-    links:
-      - text: "Overview"
-        url: "/compose/"
-      - text: "Try Docker Compose"
-        url: "/compose/gettingstarted/"
-      - text: "Release notes"
-        url: "https://github.com/docker/compose/releases"
-  - title: Docker Hub
-    icon: device_hub
-    description: |
-      Find and share container images and other artifacts.
-    links:
-      - text: "Overview"
-        url: "/docker-hub/"
-      - text: "Create an account"
-        url: "/accounts/create-account/"
-      - text: "Create a repository"
-        url: "/docker-hub/repos/create/"
-  - title: Docker Scout
-    icon: query_stats
-    description: |
-      Strengthen your software supply chain with Docker Scout.
-    links:
-      - text: "Overview"
-        url: "/scout/"
-      - text: "Quickstart"
-        url: "/scout/quickstart/"
-      - text: "Image analysis"
-        url: "/scout/image-analysis/"
-  - title: Subscription
-    icon: card_membership
-    description: |
-      Licensing for commercial use of Docker components.
-    links:
-      - text: "Overview"
-        url: "/subscription/"
-      - text: "Subscriptions and features"
-        url: "https://www.docker.com/pricing/"
-      - text: "Change subscription"
-        url: "/subscription/change/"
-  - title: Billing
-    icon: payments
-    description: |
-      Manage your billing and payment settings for your subscription.
-    links:
-      - text: "Overview"
-        url: "/billing/"
-      - text: "Update payment method"
-        url: "/billing/payment-method/"
-      - text: "View billing history"
-        url: "/billing/history/"
-  - title: Administration
-    icon: admin_panel_settings
-    description: |
-      Manage company and organization users, permissions, and more.
-    links:
-      - text: "Overview"
-        url: "/admin/company/"
-      - text: "Organization administration"
-        url: "/admin/organization/"
-      - text: "Company administration"
-        url: "/admin/company/"
-  - title: Security
-    icon: shield
-    description: |
-      Security guardrails for both administrators and developers.
-    links:
-      - text: "Overview"
-        url: "/security/"
-      - text: "SSO"
-        url: "/security/for-admins/single-sign-on/"
-      - text: "SCIM"
-        url: "/security/for-admins/provisioning/scim/"
-  - title: Testcontainers Cloud
-    icon: cloud
-    description: |
-      Testcontainers Cloud lets you run heavy test workloads remotely.
-    links:
-      - text: "Overview"
-        url: "https://testcontainers.com/cloud/docs/"
-      - text: "Getting started"
-        url: "https://testcontainers.com/cloud/docs/#getting-started"
-      - text: "TCC for CI"
-        url: "https://testcontainers.com/cloud/docs/#tcc-for-ci"
-  - title: Docker Offload
-    icon: cloud
-    description: |
-      Build and run containers in the cloud.
-    links:
-      - text: "Overview"
-        url: "/offload/"
-      - text: "Quickstart"
-        url: "/offload/quickstart/"
-      - text: "About Docker Offload"
-        url: "/offload/about/"
 ---

layouts/index.html

@@ -1,249 +1,156 @@
 <!doctype html>
 <html lang="en">
+  <head>
+    {{ partial "head.html" . }}
+  </head>
 
-<head>
-	{{ partial "head.html" . }}
-</head>
+  <body
+    class="flex min-h-screen flex-col bg-gray-50 text-base dark:bg-gray-950 dark:text-white"
+  >
+    {{ partial "header.html" . }}
+    {{ partial "gordon-chat.html" . }}
+    <main class="flex-1">
+      <!-- AI Hero Section -->
+      <section class="relative overflow-hidden py-16 md:py-20">
+        <!-- Wavy plus pattern background from Docker.com -->
+        <div
+          class="absolute inset-0 bg-[center_top] bg-no-repeat opacity-100 [mix-blend-mode:multiply] dark:opacity-60 dark:[mix-blend-mode:normal] dark:[filter:invert(1)_brightness(1.5)]"
+          style="background-image: url('/assets/images/dot-pattern.svg');"
+        ></div>
+        <div class="relative z-10 container mx-auto max-w-4xl px-4 text-center">
+          <h1
+            class="mb-4 text-3xl font-semibold text-balance text-gray-900 md:text-4xl dark:text-white"
+          >
+            How can we help?
+          </h1>
+          <!-- AI Search Input -->
+          <div class="py-6 mx-auto max-w-2xl" x-data="{ query: '' }">
+            <div
+              class="flex items-center gap-3 rounded-2xl border-2 border-gray-200 bg-white p-4 shadow-lg transition focus-within:scale-[1.02] focus-within:border-blue-500 hover:border-blue-500 dark:border-gray-700 dark:bg-gray-900"
+            >
+              <div class="shrink-0 rounded-xl bg-blue-500 p-2 text-white">
+                <span class="icon-svg-stroke">
+                  {{ partial "icon" "icons/sparkle.svg" }}
+                </span>
+              </div>
+              <input
+                x-model="query"
+                type="text"
+                placeholder="Ask anything about Docker and get instant answers…"
+                @keydown.enter="if (query.trim()) { $store.gordon.open(query.trim(), true); query = ''; }"
+                class="flex-1 bg-transparent text-lg text-gray-900 placeholder-gray-500 focus:outline-none dark:text-white dark:placeholder-gray-400"
+              />
+              <button
+                @click="if (query.trim()) { $store.gordon.open(query.trim(), true); query = ''; }"
+                :disabled="!query.trim()"
+                class="shrink-0 rounded-xl bg-blue-500 p-2 text-white transition hover:bg-blue-600 disabled:cursor-not-allowed disabled:bg-gray-300 dark:disabled:bg-gray-700"
+              >
+                <span class="icon-svg">
+                  {{ partialCached "icon" "arrow_forward" "arrow_forward" }}
+                </span>
+              </button>
+            </div>
+          </div>
 
-<body class="flex min-h-screen flex-col bg-gray-50 text-base dark:bg-gray-950 dark:text-white">
-	<div class="absolute -z-10 w-full">
-		<svg class="dark:hidden" viewBox="0 0 1616 797" fill="none" xmlns="http://www.w3.org/2000/svg">
-			<path d="M1066.69 797L0 136.789V0H1616V488.038L1066.69 797Z" fill="#EFEFF2" />
-		</svg>
-		<svg class="hidden dark:block" viewBox="0 0 1616 797" fill="none" xmlns="http://www.w3.org/2000/svg">
-			<path d="M1066.69 797L0 136.789V0H1616V488.038L1066.69 797Z" fill="#080B0E" fill-opacity="0.3" />
-		</svg>
-	</div>
-	{{ partial "header.html" . }}
-	{{ partial "gordon-chat.html" . }}
-	<main class="flex w-full flex-col items-stretch gap-20 self-center pt-20">
-		<div class="grid w-full grid-cols-1 items-center gap-20 px-4 lg:grid-cols-2 xl:w-[1200px] self-center">
-			<div class="bg-pattern-blue relative rounded-sm drop-shadow z-10"
-				x-data="{
-					open: false,
-					os: 'unknown',
-					arch: 'unknown',
-					init() {
-						const platform = navigator.platform.toLowerCase();
-						const userAgent = navigator.userAgent.toLowerCase();
+          <!-- Suggestion Pills -->
+          <div class="mt-6 flex flex-wrap justify-center gap-3" x-data>
+            {{ range slice
+              "How do I get started with Docker?"
+              "What is a container?"
+              "How do I write a Dockerfile?"
+              "Why should I use Docker Compose?"
+              "Migrate from Wolfi to DHI"
+            }}
+              <button
+                @click="$store.gordon.open($el.textContent.trim(), true);"
+                class="ai-suggestion cursor-pointer rounded-full border border-gray-200 bg-white px-4 py-2 text-sm text-gray-600 transition hover:border-blue-400 hover:bg-blue-50 hover:text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-blue-500 dark:hover:bg-gray-700 dark:hover:text-white"
+              >
+                {{ . }}
+              </button>
+            {{ end }}
+          </div>
+        </div>
+      </section>
 
-						if (platform.includes('mac') || platform.includes('darwin')) {
-							this.os = 'mac';
-							// Default to Apple Silicon (arm64) as it's now the standard
-							// Modern browsers on Apple Silicon report MacIntel for compatibility
-							this.arch = 'arm64';
-						} else if (platform.includes('win')) {
-							this.os = 'windows';
-							// Default to x86_64 - Windows ARM is rare and detection is unreliable
-							this.arch = 'amd64';
-						} else if (platform.includes('linux')) {
-							this.os = 'linux';
-						}
-					},
-					getDownloadUrl(os, arch = 'amd64') {
-						const baseUtm = 'utm_source=docker&utm_medium=webreferral';
-						const urls = {
-							'mac-arm64': `https://desktop.docker.com/mac/main/arm64/Docker.dmg?${baseUtm}&utm_campaign=docs-driven-download-mac-arm64`,
-							'mac-amd64': `https://desktop.docker.com/mac/main/amd64/Docker.dmg?${baseUtm}&utm_campaign=docs-driven-download-mac-amd64`,
-							'windows-arm64': `https://desktop.docker.com/win/main/arm64/Docker%20Desktop%20Installer.exe?${baseUtm}&utm_campaign=docs-driven-download-win-arm64`,
-							'windows-amd64': `https://desktop.docker.com/win/main/amd64/Docker%20Desktop%20Installer.exe?${baseUtm}&utm_campaign=docs-driven-download-win-amd64`,
-							'linux': '/desktop/linux/install/'
-						};
-						return urls[os === 'linux' ? 'linux' : `${os}-${arch}`] || '/desktop/setup/install/linux/';
-					},
-					getOsLabel(os, arch = 'amd64') {
-						const labels = {
-							'mac-arm64': 'Docker Desktop for Mac (Apple Silicon)',
-							'mac-amd64': 'Docker Desktop for Mac (Intel)',
-							'windows-arm64': 'Docker Desktop for Windows (ARM)',
-							'windows-amd64': 'Docker Desktop for Windows',
-							'linux': 'Docker Desktop for Linux'
-						};
-						return labels[os === 'linux' ? 'linux' : `${os}-${arch}`] || 'Docker Desktop';
-					}
-				}"
-				@click.outside="open = false">
-				<div class="flex h-full flex-col items-start justify-between gap-4 px-8 py-4">
-					<div class="flex items-center gap-2">
-						<span class="icon-svg text-blue dark:text-blue">
-							{{ partial "icon" "play_circle" }}</span>
-						<h1 class="text-xl">Get Docker</h1>
-					</div>
-					<p>
-						Download Docker Desktop for your platform or
-						<a href="/get-started/get-docker/" class="text-blue dark:text-blue-400 hover:underline">view getting started guides</a>.
-					</p>
-					<div class="mt-20">
-						<div class="relative inline-block">
-							<div class="flex shadow rounded-sm overflow-hidden">
-								<a :href="getDownloadUrl(os, arch)"
-									class="bg-blue flex cursor-pointer items-center gap-2 p-2 px-4 text-white transition duration-300 hover:bg-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400 whitespace-nowrap">
-									<span class="icon-svg icon-sm">{{ partial "icon" "download" }}</span>
-									<span>Download Docker Desktop</span>
-								</a>
-								<button @click="open = !open" type="button"
-									class="bg-blue flex items-center justify-center px-3 text-white border-l border-blue-400 hover:bg-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400 transition duration-300"
-									aria-label="More download options">
-									<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
-									</svg>
-								</button>
-							</div>
-							<div x-show="open" x-collapse x-cloak
-								class="absolute top-full left-0 mt-1 min-w-full bg-white dark:bg-gray-800 rounded-sm shadow-lg overflow-hidden z-50">
-								<a href="https://desktop.docker.com/mac/main/arm64/Docker.dmg?utm_source=docker&utm_medium=webreferral&utm_campaign=docs-driven-download-mac-arm64"
-									class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 whitespace-nowrap">
-									Docker Desktop for Mac (Apple Silicon)
-								</a>
-								<a href="https://desktop.docker.com/mac/main/amd64/Docker.dmg?utm_source=docker&utm_medium=webreferral&utm_campaign=docs-driven-download-mac-amd64"
-									class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 whitespace-nowrap">
-									Docker Desktop for Mac (Intel)
-								</a>
-								<a href="https://desktop.docker.com/win/main/amd64/Docker%20Desktop%20Installer.exe?utm_source=docker&utm_medium=webreferral&utm_campaign=docs-driven-download-win-amd64"
-									class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 whitespace-nowrap">
-									Docker Desktop for Windows
-								</a>
-								<a href="https://desktop.docker.com/win/main/arm64/Docker%20Desktop%20Installer.exe?utm_source=docker&utm_medium=webreferral&utm_campaign=docs-driven-download-win-arm64"
-									class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 whitespace-nowrap">
-									Docker Desktop for Windows (ARM)
-								</a>
-								<a href="/desktop/linux/install/"
-									class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 whitespace-nowrap">
-									Docker Desktop for Linux
-								</a>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="h-full bg-pattern-purple rounded-sm drop-shadow">
-				<div class="flex h-full flex-col items-start gap-4 px-6 py-4">
-					<div class="flex flex-col gap-2">
-						<h2 class="text-xl">Docker Hardened Images, now free to use</h1>
-					</div>
-					<p>
-						Minimal, hardened base images with full transparency:
-						signed SBOMs, SLSA Level 3 provenance, and complete CVE
-						data.
-					</p>
-					<a href="/dhi/"
-						class="shadow bg-blue flex mt-auto cursor-pointer items-center gap-2 rounded-sm p-2 px-4 text-white transition duration-300 hover:bg-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400">
-						Get started for free
-					</a>
-				</div>
-			</div>
-		</div>
-
-		<div>
-			<div class="grid grid-cols-1 gap-4 lg:grid-cols-4 mx-auto px-4 xl:w-[1200px]">
-				<div>
-					<a class="h-full" href="/get-started/">
-						<div class="section-card">
-							<div class="flex items-center gap-4">
-								<span class="icon-svg text-blue dark:text-blue">
-									{{ partial "icon" "rocket" }}
-								</span>
-								<div>
-									<div class="section-card-title">Get started</div>
-								</div>
-							</div>
-							<div class="section-card-text">
-								Learn Docker basics and the benefits of containerization.
-							</div>
-						</div>
-					</a>
-				</div>
-
-				<div>
-					<a class="h-full" href="/guides/">
-						<div class="section-card">
-							<div class="flex items-center gap-4">
-								<span class="icon-svg text-blue dark:text-blue">
-									{{ partial "icon" "developer_guide" }}
-								</span>
-								<div>
-									<div class="section-card-title">Guides</div>
-								</div>
-							</div>
-							<div class="section-card-text">
-								Learn how Docker can optimize your development workflows.
-							</div>
-						</div>
-					</a>
-				</div>
-
-				<div>
-					<a class="h-full" href="/manuals/">
-						<div class="section-card">
-							<div class="flex items-center gap-4">
-								<span class="icon-svg text-blue dark:text-blue">
-									{{ partial "icon" "description" }}
-								</span>
-								<div>
-									<div class="section-card-title">Manuals</div>
-								</div>
-							</div>
-							<div class="section-card-text">
-								Learn how to install, set up, configure, and use Docker
-								products.
-							</div>
-						</div>
-					</a>
-				</div>
-
-				<div>
-					<a class="h-full" href="/reference/">
-						<div class="section-card">
-							<div class="flex items-center gap-4">
-								<span class="icon-svg text-blue dark:text-blue">
-									{{ partial "icon" "terminal" }}
-								</span>
-								<div>
-									<div class="section-card-title">Reference</div>
-								</div>
-							</div>
-							<div class="section-card-text">
-								Browse the CLI and API documentation.
-							</div>
-						</div>
-					</a>
-				</div>
-			</div>
-		</div>
-
-		<div
-			class="relative flex h-full items-center justify-center overflow-hidden bg-gray-100 py-8 md:h-[334px] dark:bg-gray-900">
-			<div class="w-[1200px] px-4">
-				<div class="flex max-w-full flex-col gap-8 md:max-w-[66%]">
-					<h2 class="text-2xl">Community resources</h2>
-					<p>
-						Find fellow Docker enthusiasts, engage in insightful discussions,
-						share knowledge, and collaborate on projects. Our communities
-						offer a rich online experience for developers to create valuable
-						connections that challenge and inspire!
-					</p>
-					<div class="flex flex-col gap-4 md:flex-row">
-						<a href="https://forums.docker.com/"
-							class="cursor-pointer rounded-sm bg-white px-4 py-2 hover:bg-gray-50 dark:bg-gray-500 dark:text-white dark:hover:bg-gray-600">
-							Visit Docker Forum
-						</a>
-						<a href="https://dockr.ly/comm-slack"
-							class="cursor-pointer rounded-sm bg-white px-4 py-2 hover:bg-gray-50 dark:bg-gray-500 dark:text-white dark:hover:bg-gray-600">
-							Join Docker Slack
-						</a>
-						<a href="https://www.docker.com/community/captains/"
-							class="cursor-pointer rounded-sm bg-white px-4 py-2 hover:bg-gray-50 dark:bg-gray-500 dark:text-white dark:hover:bg-gray-600">
-							Find your Docker Captain
-						</a>
-					</div>
-				</div>
-			</div>
-			<div class="absolute top-0 right-0 hidden md:block">
-				{{- (resources.Get "images/home-abstract-faint.svg").Content | safe.HTML -}}
-			</div>
-		</div>
-	</main>
-	<footer class="mt-auto">{{ partialCached "footer.html" . }}</footer>
-</body>
+      <!-- Quick Links Section -->
+      <section class="py-8">
+        <div class="container mx-auto px-4 xl:max-w-[1200px]">
+          <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+            {{ range slice
+              (dict "url" "/get-started/" "icon" "rocket" "title" "Get started" "description" "Learn Docker basics.")
+              (dict "url" "/guides/" "icon" "menu_book" "title" "Guides" "description" "Optimize your development workflows with Docker.")
+              (dict "url" "/manuals/" "icon" "description" "title" "Manuals" "description" "Install, set up, configure, and use Docker products.")
+              (dict "url" "/reference/" "icon" "terminal" "title" "Reference" "description" "Browse the CLI and API documentation.")
+            }}
+              <a
+                href="{{ .url }}"
+                class="group block rounded-xl border border-gray-200 bg-white p-6 transition hover:scale-[1.02] hover:border-blue-500 dark:border-gray-700 dark:bg-gray-900 dark:hover:border-blue-500"
+              >
+                <div class="flex items-start gap-4">
+                  <div
+                    class="shrink-0 rounded-lg bg-blue-100 p-3 text-blue-500 dark:bg-gray-700 dark:text-blue-400"
+                  >
+                    <span class="icon-svg">
+                      {{ partialCached "icon" .icon .icon }}
+                    </span>
+                  </div>
+                  <div>
+                    <h3
+                      class="mb-1 text-lg font-semibold text-gray-900 transition group-hover:text-blue-500 dark:text-white dark:group-hover:text-blue-400"
+                    >
+                      {{ .title }}
+                    </h3>
+                    <p
+                      class="text-sm leading-relaxed text-gray-600 dark:text-gray-300"
+                    >
+                      {{ .description }}
+                    </p>
+                  </div>
+                </div>
+              </a>
+            {{ end }}
+          </div>
+        </div>
+      </section>
 
+      <!-- Popular Topics Section -->
+      <section class="py-8">
+        <div class="container mx-auto max-w-3xl px-4">
+          <h2
+            class="mb-8 text-center text-2xl font-semibold text-gray-900 dark:text-white"
+          >
+            Featured topics
+          </h2>
+          <div
+            class="divide-y divide-gray-200 rounded-xl border border-gray-200 bg-white dark:divide-gray-700 dark:border-gray-700 dark:bg-gray-900"
+          >
+            {{ range slice
+              (dict "url" "/dhi/" "title" "Docker Hardened Images")
+              (dict "url" "/ai/sandboxes/" "title" "Docker Sandboxes")
+              (dict "url" "/desktop/" "title" "Docker Desktop overview")
+              (dict "url" "/engine/install/" "title" "Install Docker Engine")
+              (dict "url" "/reference/dockerfile/" "title" "Dockerfile reference")
+              (dict "url" "/build/" "title" "Docker Build overview")
+            }}
+              <a
+                href="{{ .url }}"
+                class="group flex items-center justify-between px-4 py-3 transition hover:bg-blue-50 dark:hover:bg-gray-700"
+              >
+                <span
+                  class="text-gray-900 transition group-hover:text-blue-500 dark:text-white dark:group-hover:text-blue-400"
+                  >{{ .title }}</span
+                >
+                <span
+                  class="icon-svg text-gray-400 transition group-hover:translate-x-1 dark:text-gray-500"
+                >
+                  {{ partialCached "icon" "arrow_forward" "arrow_forward" }}
+                </span>
+              </a>
+            {{ end }}
+          </div>
+        </div>
+      </section>
+    </main>
+    <footer>{{ partialCached "footer.html" . }}</footer>
+  </body>
 </html>

layouts/partials/gordon-chat.html

@@ -35,12 +35,18 @@
       this.$watch('$store.gordon.query', (query) => {
         if (query) {
           this.currentQuestion = query
+          const shouldAutoSubmit = this.$store.gordon.autoSubmit
           this.$nextTick(() => {
-            this.$refs.input?.focus()
-            this.$refs.input?.select()
+            if (shouldAutoSubmit) {
+              this.askQuestion()
+            } else {
+              this.$refs.input?.focus()
+              this.$refs.input?.select()
+            }
           })
-          // Clear the store query after using it
+          // Clear the store query and autoSubmit flag after using them
           this.$store.gordon.query = ''
+          this.$store.gordon.autoSubmit = false
         }
       })
     },