docs/layouts/home.html

<!doctype html>
<html lang="en">
  <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="mx-auto max-w-2xl py-6" x-data="{ query: '' }">
            <div
              class="group 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 text-blue-500">
                <span class="icon-svg group-hover:hidden">
                  {{ partialCached "icon" "gordon" "gordon" }}
                </span>
                <span class="icon-svg hidden group-hover:block">
                  {{ partialCached "icon" "gordon-happy" "gordon-happy" }}
                </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-right" "arrow-right" }}
                </span>
              </button>
            </div>
          </div>

          <!-- Suggestion Pills -->
          <div class="mt-6 flex flex-wrap justify-center gap-3" x-data>
            {{ range slice
              "How do I get started with Docker?"
              "Can I run my AI agent in a sandbox?"
              "How do I containerize an application?"
              "What are Docker Hardened Images?"
              "Why should I use Docker Compose?"
            }}
              <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>

      <!-- 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-launch" "title" "Get started" "description" "Containerize an app, sandbox an agent, or pilot Docker for your organization.")
              (dict "url" "/guides/" "icon" "book-open" "title" "Guides" "description" "Optimize your development workflows with Docker.")
              (dict "url" "/manuals/" "icon" "document-text" "title" "Manuals" "description" "Install, set up, configure, and use Docker products.")
              (dict "url" "/reference/" "icon" "command-line" "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>

      {{ partial "whats-new.html" . }}
    </main>
    <footer>{{ partialCached "footer.html" . }}</footer>
  </body>
</html>