diff --git a/apps/marketing/src/app/components/CTAButtons/CTAButtons.tsx b/apps/marketing/src/app/components/CTAButtons/CTAButtons.tsx
index 53f41fa7d..03d425242 100644
--- a/apps/marketing/src/app/components/CTAButtons/CTAButtons.tsx
+++ b/apps/marketing/src/app/components/CTAButtons/CTAButtons.tsx
@@ -1,11 +1,21 @@
import { auth } from "@clerk/nextjs/server";
-import { DOWNLOAD_URL_MAC_ARM64 } from "@superset/shared/constants";
-import { Download } from "lucide-react";
+import {
+ DOWNLOAD_URL_MAC_ARM64,
+ WAITLIST_URL,
+} from "@superset/shared/constants";
+import { Clock, Download } from "lucide-react";
+import { headers } from "next/headers";
import { env } from "@/env";
+import { isMacOSUserAgent } from "@/lib/platform";
export async function CTAButtons() {
const { userId } = await auth();
+ const requestHeaders = await headers();
+ const isMac = isMacOSUserAgent(requestHeaders.get("user-agent") ?? "");
+ const primaryCtaHref = isMac ? DOWNLOAD_URL_MAC_ARM64 : WAITLIST_URL;
+ const primaryCtaLabel = isMac ? "Download for macOS" : "Join waitlist";
+ const PrimaryCtaIcon = isMac ? Download : Clock;
if (userId) {
return (
@@ -17,11 +27,13 @@ export async function CTAButtons() {
Dashboard
- Download for macOS
-
+ {primaryCtaLabel}
+
>
);
@@ -36,11 +48,13 @@ export async function CTAButtons() {
Sign In
- Download for macOS
-
+ {primaryCtaLabel}
+
>
);
diff --git a/apps/marketing/src/app/components/DownloadButton/DownloadButton.tsx b/apps/marketing/src/app/components/DownloadButton/DownloadButton.tsx
index 7cea54197..d20cd5392 100644
--- a/apps/marketing/src/app/components/DownloadButton/DownloadButton.tsx
+++ b/apps/marketing/src/app/components/DownloadButton/DownloadButton.tsx
@@ -1,8 +1,14 @@
"use client";
-import { COMPANY, DOWNLOAD_URL_MAC_ARM64 } from "@superset/shared/constants";
+import {
+ COMPANY,
+ DOWNLOAD_URL_MAC_ARM64,
+ WAITLIST_URL,
+} from "@superset/shared/constants";
import posthog from "posthog-js";
+import { useEffect, useState } from "react";
import { HiMiniArrowDownTray, HiMiniClock } from "react-icons/hi2";
+import { isMacOSUserAgent } from "@/lib/platform";
import { type DropdownSection, PlatformDropdown } from "../PlatformDropdown";
interface DownloadButtonProps {
@@ -16,6 +22,14 @@ export function DownloadButton({
className = "",
onJoinWaitlist,
}: DownloadButtonProps) {
+ const [platform, setPlatform] = useState<"unknown" | "mac" | "other">(
+ "unknown",
+ );
+
+ useEffect(() => {
+ setPlatform(isMacOSUserAgent(navigator.userAgent) ? "mac" : "other");
+ }, []);
+
const sizeClasses =
size === "sm"
? "px-2 sm:px-4 py-2 text-sm"
@@ -30,6 +44,16 @@ export function DownloadButton({
window.open(COMPANY.GITHUB_URL, "_blank");
};
+ const handleJoinWaitlist = () => {
+ posthog.capture("waitlist_clicked");
+ if (onJoinWaitlist) {
+ onJoinWaitlist();
+ return;
+ }
+
+ window.open(WAITLIST_URL, "_blank", "noopener,noreferrer");
+ };
+
const appleIcon = (
,
- onClick: () => {
- posthog.capture("waitlist_clicked");
- onJoinWaitlist?.();
- },
+ onClick: handleJoinWaitlist,
},
{
id: "build-from-source",
@@ -93,11 +114,38 @@ export function DownloadButton({
},
];
+ const commonButtonClassName = `bg-foreground text-background ${sizeClasses} font-normal hover:bg-foreground/80 transition-colors flex items-center gap-2 ${className}`;
+
+ if (platform === "mac") {
+ return (
+
+ );
+ }
+
+ if (platform === "other") {
+ return (
+
+ );
+ }
+
const trigger = (
-