mirror of
https://github.com/docker/docs.git
synced 2026-03-27 06:18:55 +07:00
90e2cb52fa
- layouts/partials/ → layouts/_partials/ - layouts/shortcodes/ → layouts/_shortcodes/ - layouts/_default/_markup/ → layouts/_markup/ - layouts/_default/*.html → layouts/*.html (flatten _default/) - layouts/index.html → layouts/home.html - layouts/index.*.json/txt → layouts/home.*.json/txt - layouts/_default/index.llms.txt → layouts/home.llms.txt - layouts/tag/ → layouts/tags/ (match /tags/ URL path)
157 lines
7.2 KiB
HTML
157 lines
7.2 KiB
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="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>
|
|
|
|
<!-- 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?"
|
|
"What is a container?"
|
|
"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" "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/get-started/" "title" "Get started with 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>
|