layouts/index.html

<!doctype html>
<html lang="en">

<head>
  {{ partial "head.html" . }}
</head>

<body class="flex h-max flex-col bg-background-light text-base dark:bg-background-dark 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" . }}
  <main class="flex min-h-screen w-full flex-col items-stretch self-center">
    <div class="flex xl:w-[1200px] flex-col items-stretch gap-20 self-center py-20 w-full px-4">
      <div class="bg-pattern-blue relative overflow-hidden rounded drop-shadow">
        <div class="flex h-full flex-col items-start justify-between gap-4 p-8">
          <div class="flex items-center gap-6">
            <span class="icon-svg text-violet-light dark:text-violet-dark">
              {{ partial "icon" "play_circle" }}</span>
            <h1 class="text-2xl">Get Docker</h1>
          </div>
          <p>
            Learn how to install Docker for Mac, Windows, or Linux and explore
            our developer tools.
          </p>
          <a href="/get-started/get-docker/"
            class="mt-20 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">
            <span class="icon-svg">{{ partial "icon" "download"}}</span>
            Get Docker
          </a>
        </div>
        <div class="absolute bottom-0 right-0 origin-bottom-right scale-50 lg:scale-100">
          <img class="dark:hidden" alt="Low-fi desktop app" src="/assets/images/app-wf-light-1.svg" />
          <img class="hidden dark:block" alt="Low-fi desktop app" src="/assets/images/app-wf-dark-1.svg" />
        </div>
      </div>

      <div>
        <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
                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" "developer_guide" }}
                  </span>
                  <div>
                    <div class="text-xl leading-snug text-gray-light-800 dark:text-white">
                      Guides
                    </div>
                  </div>
                </div>
                <div class="leading-snug text-gray-light-500 dark:text-gray-dark-700">
                  Learn how Docker can optimize your development workflows.
                </div>
              </div>
            </a>
          </div>

          <div>
            <a class="h-full" href="/manuals/">
              <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" "description" }}
                  </span>
                  <div>
                    <div class="text-xl leading-snug text-gray-light-800 dark:text-white">
                      Manuals
                    </div>
                  </div>
                </div>
                <div class="leading-snug text-gray-light-500 dark:text-gray-dark-700">
                  Learn how to install, set up, configure, and use Docker
                  products.
                </div>
              </div>
            </a>
          </div>

          <div>
            <a class="h-full" href="/reference/">
              <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" "terminal" }}
                  </span>
                  <div>
                    <div class="text-xl leading-snug text-gray-light-800 dark:text-white">
                      Reference
                    </div>
                  </div>
                </div>
                <div class="leading-snug text-gray-light-500 dark:text-gray-dark-700">
                  Browse the CLI and API documentation.
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>

      <div class="z-10 grid grid-cols-1 gap-20 lg:grid-cols-2">
        <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">Gen AI catalog {{ partial
              "components/badge.html" (dict "color" "blue" "content" "New")
              }}</h2>
              <p class="text-xl">
                Integrate AI solutions into your apps with minimal effort
              </p>
            </div>
            <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">
                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>
          <div class="absolute bottom-0 right-0 origin-bottom-right scale-75 md:scale-100">
            <img class="dark:hidden" alt="Low-fi desktop app" src="/assets/images/app-wf-light-2.svg" />
            <img class="hidden dark:block" alt="Low-fi desktop app" src="/assets/images/app-wf-dark-2.svg" />
          </div>
        </div>
        <div class="rounded-[6px] bg-gradient-to-br from-blue-light-400 to-magenta-light-400 dark:from-blue-dark-400 dark:to-magenta-dark-400 p-[2px] drop-shadow">
          <div class="bg-pattern-purple rounded p-6">
            <div class="flex flex-col gap-12">
              <div class="flex flex-col gap-4">
                <h2 class="font-medium">
                  Docker Model Runner
                  {{ partial "components/badge.html" (dict "color" "blue" "content" "Beta") }}
                </h2>
                <p class="text-xl">
                  Run, test, and serve AI models locally in seconds — no setup, no hassle.
                </p>
                <p>
                  Whether you’re experimenting with the latest LLMs or deploying to production, 
                  Docker Model Runner brings the performance and control you need, without the friction.

                </p>
              </div>
              <div class="flex flex-col xl:flex-row gap-4 items-start">
                <a href="/desktop/features/model-runner/"
                  class="max-w-fit cursor-pointer rounded bg-blue-light px-4 py-2 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>
          </div>
        </div>
      </div>

      <div>
        <h2 class="mb-4 text-xl">Browse by section</h2>
        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          {{ range .Params.grid }}
          <div>
            <div
              class="flex h-full flex-col gap-2 rounded border border-gray-light-100 bg-white p-4 drop-shadow-sm dark:border-gray-dark-400 dark:bg-gray-dark-200">
              <div class="flex items-center gap-4">
                <span class="icon-svg text-gray-light dark:text-gray-dark">{{ partial "icon" .icon }}</span>
                <div>
                  <div class="text-xl">{{ .title }}</div>
                </div>
              </div>
              <div class="flex h-full flex-col justify-between gap-4">
                <p>{{ .description | markdownify }}</p>
                <nav class="flex flex-col gap-2">
                  {{ range .links }}
                  <div>
                    <span class="icon-svg text-gray-light dark:text-gray-dark">{{ partial "icon" "arrow_right" }}</span>
                    <a class="link" href="{{ .url }}">{{ .text }}</a>
                  </div>
                  {{ end }}
                </nav>
              </div>
            </div>
          </div>
          {{ end }}
        </div>
      </div>
      <div class="flex flex-col gap-4">
        <h2 class="mb-4 text-xl">Browse by tag</h2>
        <div class="flex flex-wrap gap-4">
          {{ $tags := slice }}
          {{- range site.Taxonomies.tags }}
            {{ $tags = $tags | append .Page }}
          {{ end }}
          {{ partial "tags.html" $tags }}
        </div>
      </div>
    </div>

    <div
      class="relative flex md:h-[334px] items-center justify-center overflow-hidden bg-gray-light-100 dark:bg-gray-dark-200 h-full py-8">
      <div class="w-[1200px] px-4">
        <div class="flex md:max-w-[66%] flex-col gap-8 max-w-full">
          <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 gap-4 flex-col md:flex-row">
            <a href="https://forums.docker.com/"
              class="cursor-pointer rounded bg-white px-4 py-2 text-blue-light hover:bg-gray-light-100 dark:bg-gray-dark-400 dark:text-white dark:hover:bg-gray-dark-500">
              Visit Docker Forum
            </a>
            <a href="https://dockr.ly/comm-slack"
              class="cursor-pointer rounded bg-white px-4 py-2 text-blue-light hover:bg-gray-light-100 dark:bg-gray-dark-400 dark:text-white dark:hover:bg-gray-dark-500">
              Join Docker Slack
            </a>
            <a href="https://www.docker.com/community/captains/"
              class="cursor-pointer rounded bg-white px-4 py-2 text-blue-light hover:bg-gray-light-100 dark:bg-gray-dark-400 dark:text-white dark:hover:bg-gray-dark-500">
              Find your Docker Captain
            </a>
          </div>
        </div>
      </div>
      <div class="absolute right-0 top-0 hidden md:block">
        {{- (resources.Get "images/home-abstract-faint.svg").Content | safe.HTML -}}
      </div>
    </div>
  </main>
  <footer>{{ partialCached "footer.html" . }}</footer>
</body>

</html>