diff --git a/apps/website/src/app/components/CTASection/CTASection.tsx b/apps/website/src/app/components/CTASection/CTASection.tsx index cdcedcddaeb..4ec1964d31c 100644 --- a/apps/website/src/app/components/CTASection/CTASection.tsx +++ b/apps/website/src/app/components/CTASection/CTASection.tsx @@ -1,38 +1,42 @@ "use client"; import { motion } from "framer-motion"; -import { HiMiniArrowDownTray } from "react-icons/hi2"; -import { DOWNLOAD_URL_MAC_ARM64 } from "@/constants"; +import { useState } from "react"; +import { DownloadButton } from "../DownloadButton"; +import { WaitlistModal } from "../WaitlistModal"; export function CTASection() { + const [isWaitlistOpen, setIsWaitlistOpen] = useState(false); + return ( -
-
- - Give us a try - + <> +
+
+ + Give us a try + - - - Download for MacOS - - - -
-
+ + setIsWaitlistOpen(true)} /> + +
+
+ setIsWaitlistOpen(false)} + /> + ); } diff --git a/apps/website/src/app/components/DownloadButton/DownloadButton.tsx b/apps/website/src/app/components/DownloadButton/DownloadButton.tsx index 7e26bf65789..57dd4a1920e 100644 --- a/apps/website/src/app/components/DownloadButton/DownloadButton.tsx +++ b/apps/website/src/app/components/DownloadButton/DownloadButton.tsx @@ -1,25 +1,19 @@ "use client"; -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuSeparator, - DropdownMenuTrigger, -} from "@superset/ui/dropdown-menu"; -import { HiMiniArrowDownTray } from "react-icons/hi2"; -import { DOWNLOAD_URL_MAC_ARM64 } from "@/constants"; +import { HiMiniArrowDownTray, HiMiniClock } from "react-icons/hi2"; +import { DOWNLOAD_URL_MAC_ARM64, GITHUB_REPO_URL } from "@/constants"; +import { type DropdownSection, PlatformDropdown } from "../PlatformDropdown"; interface DownloadButtonProps { size?: "sm" | "md"; className?: string; - onJoinWindowsWaitlist?: () => void; + onJoinWaitlist?: () => void; } export function DownloadButton({ size = "md", className = "", - onJoinWindowsWaitlist, + onJoinWaitlist, }: DownloadButtonProps) { const sizeClasses = size === "sm" ? "px-4 py-2 text-sm" : "px-6 py-3 text-base"; @@ -28,99 +22,79 @@ export function DownloadButton({ window.open(DOWNLOAD_URL_MAC_ARM64, "_blank"); }; - const handleIntelDownload = () => { - // TODO: Add actual download link for Intel-based Macs - console.log("Downloading for Intel-based Macs"); + const handleBuildFromSource = () => { + window.open(GITHUB_REPO_URL, "_blank"); }; - return ( - - - - - - {/* Download for Apple Silicon Macs */} - - - + const appleIcon = ( + + Apple logo + + + ); - {/* Join Windows Waitlist */} - - - + const githubIcon = ( + + GitHub logo + + + ); - + const sections: DropdownSection[] = [ + { + items: [ + { + id: "mac-download", + label: "Download for Mac", + description: "APPLE SILICON", + icon: appleIcon, + onClick: handleAppleSiliconDownload, + variant: "primary", + }, + ], + }, + { + title: "Other platforms", + items: [ + { + id: "waitlist", + label: "Join waitlist for Windows & Linux", + icon: , + onClick: onJoinWaitlist || (() => {}), + }, + { + id: "build-from-source", + label: "Build from source on GitHub", + icon: githubIcon, + onClick: handleBuildFromSource, + }, + ], + }, + ]; - {/* Download for Intel-based Macs */} - -
-

- Mac older than November 2020? -

- -
- - - + const trigger = ( + ); + + return ; } diff --git a/apps/website/src/app/components/Header/Header.tsx b/apps/website/src/app/components/Header/Header.tsx index 335f2c2d8fc..f8f8d285290 100644 --- a/apps/website/src/app/components/Header/Header.tsx +++ b/apps/website/src/app/components/Header/Header.tsx @@ -4,7 +4,6 @@ import { motion } from "framer-motion"; import Image from "next/image"; import { useState } from "react"; import { DownloadButton } from "../DownloadButton"; -import { JoinWaitlistButton } from "../JoinWaitlistButton"; import { SocialLinks } from "../SocialLinks"; import { WaitlistModal } from "../WaitlistModal"; @@ -50,12 +49,7 @@ export function Header() { setIsWaitlistOpen(true)} - /> - setIsWaitlistOpen(true)} - size="sm" + onJoinWaitlist={() => setIsWaitlistOpen(true)} /> diff --git a/apps/website/src/app/components/HeroSection/HeroSection.tsx b/apps/website/src/app/components/HeroSection/HeroSection.tsx index 9fb08d68725..e8219f1a353 100644 --- a/apps/website/src/app/components/HeroSection/HeroSection.tsx +++ b/apps/website/src/app/components/HeroSection/HeroSection.tsx @@ -3,112 +3,119 @@ import { motion } from "framer-motion"; import Image from "next/image"; import { useEffect, useState } from "react"; -import { HiMiniArrowDownTray } from "react-icons/hi2"; -import { DOWNLOAD_URL_MAC_ARM64 } from "@/constants"; +import { FaGithub } from "react-icons/fa"; +import { GITHUB_REPO_URL } from "@/constants"; +import { DownloadButton } from "../DownloadButton"; +import { WaitlistModal } from "../WaitlistModal"; export function HeroSection() { + const [isWaitlistOpen, setIsWaitlistOpen] = useState(false); + return ( -
- {/* Grid background */} - - +
+ {/* Grid background */} + - grid - - - - - - - - - - - - - - - - - -
- -
-
- {/* Left column - Text content */} - - {/* Heading */} -
-

grid + + - The terminal app for parallel cli agents. -

-

- Run dozens of Claude Code, Codex, or any other cli agents you - love. -

-
+ + + + + + + + + + + + + + + + + +
+
+ {/* Left column - Text content */} + + {/* Heading */} +
+

+ The terminal app for parallel cli agents. +

+

+ Run dozens of Claude Code, Codex, or any other cli agents you + love. +

+
-
- -
- +
+ setIsWaitlistOpen(true)} + /> + +
+ - {/* Right column - Product Demo */} - - - + {/* Right column - Product Demo */} + + + +
-
-
- ); -} - -function DownloadButton() { - return ( - - - Download for MacOS - - - + + setIsWaitlistOpen(false)} + /> + ); } diff --git a/apps/website/src/app/components/PlatformDropdown/PlatformDropdown.tsx b/apps/website/src/app/components/PlatformDropdown/PlatformDropdown.tsx new file mode 100644 index 00000000000..3a95f7f0859 --- /dev/null +++ b/apps/website/src/app/components/PlatformDropdown/PlatformDropdown.tsx @@ -0,0 +1,94 @@ +"use client"; + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@superset/ui/dropdown-menu"; +import type { ReactNode } from "react"; + +export interface DropdownItem { + id: string; + label: string; + description?: string; + icon?: ReactNode; + onClick: () => void; + variant?: "primary" | "secondary"; +} + +export interface DropdownSection { + title?: string; + items: DropdownItem[]; +} + +interface PlatformDropdownProps { + trigger: ReactNode; + sections: DropdownSection[]; + align?: "start" | "end" | "center"; + className?: string; +} + +export function PlatformDropdown({ + trigger, + sections, + align = "end", + className = "", +}: PlatformDropdownProps) { + return ( + + {trigger} + + {sections.map((section, sectionIndex) => ( +
+ {sectionIndex > 0 && ( +
+ )} + {section.title && ( +

+ {section.title} +

+ )} +
+ {section.items.map((item) => ( + + {item.variant === "primary" ? ( + + ) : ( + + )} + + ))} +
+
+ ))} + + + ); +} diff --git a/apps/website/src/app/components/PlatformDropdown/index.ts b/apps/website/src/app/components/PlatformDropdown/index.ts new file mode 100644 index 00000000000..536c93b9ef6 --- /dev/null +++ b/apps/website/src/app/components/PlatformDropdown/index.ts @@ -0,0 +1,2 @@ +export type { DropdownItem, DropdownSection } from "./PlatformDropdown"; +export { PlatformDropdown } from "./PlatformDropdown"; diff --git a/apps/website/src/constants.ts b/apps/website/src/constants.ts index a1870c2ef14..6add04b6f87 100644 --- a/apps/website/src/constants.ts +++ b/apps/website/src/constants.ts @@ -1,2 +1,4 @@ export const DOWNLOAD_URL_MAC_ARM64 = "https://github.com/superset-sh/superset/releases/download/v0.0.1/Superset-0.0.1-arm64-mac.zip"; + +export const GITHUB_REPO_URL = "https://github.com/superset-sh/superset";