site: add dd download links to homepage

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

layouts/index.html

@@ -17,7 +17,55 @@
 	{{ partial "header.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 overflow-hidden rounded-sm drop-shadow">
+			<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();
+
+						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';
+					},
+					getPrimaryLabel() {
+						if (this.os === 'unknown') return 'Download Docker Desktop';
+						return this.getOsLabel(this.os, this.arch);
+					}
+				}"
+				@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">
@@ -25,18 +73,50 @@
 						<h1 class="text-xl">Get Docker</h1>
 					</div>
 					<p>
-						Learn how to install Docker for Mac, Windows, or Linux and explore
-						our developer tools.
+						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>
-					<a href="/get-started/get-docker/"
-						class="shadow bg-blue mt-20 flex 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">
-						<span class="icon-svg icon-sm">{{ partial "icon" "download" }}</span>
-						Get Docker
-					</a>
-				</div>
-				<div class="absolute right-0 bottom-0 origin-bottom-right scale-50">
-					<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 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 x-text="getPrimaryLabel()">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
+								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">

static/assets/images/app-wf-dark-1.svg

@@ -1,11 +0,0 @@
-<svg width="336" height="202" viewBox="0 0 336 202" fill="none"
-  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <path d="M0 0H336V198C336 200.209 334.209 202 332 202H0V0Z" fill="url(#dark-wf-1)" />
-  <defs>
-    <pattern id="dark-wf-1" patternContentUnits="objectBoundingBox" width="1" height="1">
-      <use xlink:href="#image0_129_29473" transform="matrix(0.00212777 0 0 0.00353927 0.0297619 0.0453854)" />
-    </pattern>
-    <image id="image0_129_29473" width="442" height="274"
-      xlink:href="data:image/png;base64,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" />
-  </defs>
-</svg>