site: update landing page layout

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

Author: dvdksn

assets/css/utilities.css

@@ -16,7 +16,6 @@
   }
 }
 
-
 @utility icon-lg {
   svg {
     font-size: 32px;
@@ -151,8 +150,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;
@@ -258,56 +257,113 @@
 }
 
 @utility topbar-button {
-  @apply text-center max-w-40 text-white font-semibold min-h-10 px-2 bg-(--topnav-button-bg) rounded-md border-1 border-blue-300;
-  @apply inline-flex justify-center items-center gap-1.5 hover:bg-blue-400 hover:border-blue-300 transition-colors;
+  @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;
+    font-size: 19px;
   }
 }
 @utility topbar-button-clear {
-  @apply text-center text-white/95 font-semibold min-h-9 px-0   hover:text-white/85 transition-colors;
+  @apply min-h-9 px-0 text-center font-semibold text-white/95 transition-colors hover:text-white/85;
   svg {
-   font-size: 19px;
+    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;
+  @apply ml-auto hidden flex-row justify-between gap-6 px-4 pt-6 pb-2 md:flex;
+  @apply border-t border-gray-200 bg-gray-100 dark:border-gray-700 dark:bg-gray-900;
   @apply text-gray-600 dark:text-gray-400;
-  a:hover{
+  a:hover {
     @apply underline underline-offset-4;
   }
 }
 
 .social {
-  @apply items-center gap-1 flex-wrap min-w-20 flex;
+  @apply flex min-w-20 flex-wrap items-center gap-1;
 }
 
 .links {
   @apply flex items-center gap-3;
 }
 
 .links a {
-  @apply inline-flex whitespace-normal truncate min-w-15;
+  @apply inline-flex min-w-15 truncate whitespace-normal;
 }
 
 .secondaryLinks {
-  @apply  flex items-center;
-  a, button{
+  @apply flex items-center;
+  a,
+  button {
     @apply whitespace-normal md:truncate;
   }
 }
 
 .secondaryLinks > *:not(:last-child)::after {
   content: "|";
-  @apply text-gray-400 mx-1;
+  @apply mx-1 text-gray-400;
 }
 
 .ot-sdk-show-settings {
-  @apply !text-gray-600 dark:!text-gray-400 hover:!text-gray-800 dark:hover:!text-gray-200;
-  @apply !text-sm !border-none !p-0 !m-0 !truncate !min-w-15;
+  @apply !text-gray-600 hover:!text-gray-800 dark:!text-gray-400 dark:hover:!text-gray-200;
+  @apply !m-0 !min-w-15 !truncate !border-none !p-0 !text-sm;
+}
+#ot-sdk-btn.ot-sdk-show-settings:hover,
+#ot-sdk-btn.optanon-show-settings:hover {
+  @apply !text-gray-600 underline decoration-1 underline-offset-4 hover:!bg-transparent dark:!text-gray-400;
 }
-#ot-sdk-btn.ot-sdk-show-settings:hover, #ot-sdk-btn.optanon-show-settings:hover{
-  @apply hover:!bg-transparent !text-gray-600 dark:!text-gray-400 underline underline-offset-4 decoration-1;
+
+/* Landing page AI components */
+.dotted-pattern {
+  pointer-events: none;
+}
+
+.ai-glow {
+  position: relative;
+}
+
+.ai-glow::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 1rem;
+  opacity: 0;
+  transition: opacity 300ms;
+  background: radial-gradient(
+    ellipse at center,
+    rgba(37, 96, 255, 0.15),
+    transparent 70%
+  );
+  pointer-events: none;
+}
+
+.dark .ai-glow::before {
+  background: radial-gradient(
+    ellipse at center,
+    rgba(75, 131, 241, 0.2),
+    transparent 70%
+  );
+}
+
+.ai-glow:has(:focus)::before {
+  opacity: 1;
+}
+
+.card-hover {
+  transition: all 200ms;
+}
+
+.card-hover:hover {
+  border-color: var(--color-blue-400);
+  transform: translateY(-2px);
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.15),
+    0 4px 6px -2px rgba(0, 0, 0, 0.1);
+}
+
+.dark .card-hover:hover {
+  border-color: var(--color-blue-500);
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.6),
+    0 4px 6px -2px rgba(0, 0, 0, 0.4);
 }

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: "/build/release-notes/"
-  - 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: "/compose/releases/release-notes/"
-  - 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: "/subscription/details/"
-      - 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/"
 ---