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 - ); @@ -36,11 +48,13 @@ export async function CTAButtons() { Sign In - Download for macOS - ); 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 = ( -