feat(marketing): platform-aware primary CTA

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
 				</a>
 				<a
-					href={DOWNLOAD_URL_MAC_ARM64}
+					href={primaryCtaHref}
 					className="px-4 py-2 text-sm font-normal bg-foreground text-background hover:bg-foreground/90 transition-colors flex items-center justify-center gap-2"
+					target={isMac ? undefined : "_blank"}
+					rel={isMac ? undefined : "noopener noreferrer"}
 				>
-					Download for macOS
-					<Download className="size-4" aria-hidden="true" />
+					{primaryCtaLabel}
+					<PrimaryCtaIcon className="size-4" aria-hidden="true" />
 				</a>
 			</>
 		);
@@ -36,11 +48,13 @@ export async function CTAButtons() {
 				Sign In
 			</a>
 			<a
-				href={DOWNLOAD_URL_MAC_ARM64}
+				href={primaryCtaHref}
 				className="px-4 py-2 text-sm font-normal bg-foreground text-background hover:bg-foreground/90 transition-colors flex items-center justify-center gap-2"
+				target={isMac ? undefined : "_blank"}
+				rel={isMac ? undefined : "noopener noreferrer"}
 			>
-				Download for macOS
-				<Download className="size-4" aria-hidden="true" />
+				{primaryCtaLabel}
+				<PrimaryCtaIcon className="size-4" aria-hidden="true" />
 			</a>
 		</>
 	);

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 = (
 		<svg
 			width="20"
@@ -78,10 +102,7 @@ export function DownloadButton({
 					id: "waitlist",
 					label: "Join waitlist for Windows & Linux",
 					icon: <HiMiniClock className="size-4" />,
-					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 (
+			<button
+				type="button"
+				className={commonButtonClassName}
+				onClick={handleAppleSiliconDownload}
+			>
+				<span className="hidden sm:inline">Download for Mac</span>
+				<span className="sm:hidden">Download</span>
+				<HiMiniArrowDownTray className="size-4" />
+			</button>
+		);
+	}
+
+	if (platform === "other") {
+		return (
+			<button
+				type="button"
+				className={commonButtonClassName}
+				onClick={handleJoinWaitlist}
+			>
+				<span className="hidden sm:inline">Join waitlist</span>
+				<span className="sm:hidden">Waitlist</span>
+				<HiMiniClock className="size-4" />
+			</button>
+		);
+	}
+
 	const trigger = (
-		<button
-			type="button"
-			className={`bg-foreground text-background ${sizeClasses} font-normal hover:bg-foreground/80 transition-colors flex items-center gap-2 ${className}`}
-		>
+		<button type="button" className={commonButtonClassName}>
 			<span className="hidden sm:inline">Download for macOS</span>
 			<span className="sm:hidden">Download</span>
 			<HiMiniArrowDownTray className="size-4" />

apps/marketing/src/app/components/WaitlistModal/WaitlistModal.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { WAITLIST_URL } from "@superset/shared/constants";
 import { useEffect } from "react";
 
 interface WaitlistModalProps {
@@ -61,7 +62,7 @@ export function WaitlistModal({ isOpen, onClose }: WaitlistModalProps) {
 
 					{/* Iframe container with fixed height to cut off branding */}
 					<iframe
-						src="https://tally.so/r/wv7Q0A"
+						src={WAITLIST_URL}
 						width="100%"
 						height="750px"
 						frameBorder="0"

apps/marketing/src/lib/platform.ts

@@ -0,0 +1,6 @@
+export function isMacOSUserAgent(userAgent: string) {
+	const ua = userAgent.toLowerCase();
+	const isIOS =
+		ua.includes("iphone") || ua.includes("ipad") || ua.includes("ipod");
+	return (ua.includes("macintosh") || ua.includes("mac os x")) && !isIOS;
+}

packages/shared/src/constants.ts

@@ -29,6 +29,9 @@ export const THEME_STORAGE_KEY = "superset-theme";
 // Download URLs
 export const DOWNLOAD_URL_MAC_ARM64 = `${COMPANY.GITHUB_URL}/releases/latest/download/Superset-arm64.dmg`;
 
+// Waitlist
+export const WAITLIST_URL = "https://tally.so/r/wv7Q0A";
+
 // Auth token configuration
 export const TOKEN_CONFIG = {
 	/** Access token lifetime in seconds (1 hour) */