Skip to content

Update website download #208

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Kitenite merged 4 commits into from
Dec 1, 2025
Merged

Update website download #208

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
39de26c
refactor download
Kitenite Dec 1, 2025
1866f5e
update download link
Kitenite Dec 1, 2025
adfbb2b
save
Kitenite Dec 1, 2025
20696a8
save
Kitenite Dec 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 33 additions & 29 deletions apps/website/src/app/components/CTASection/CTASection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<section className="relative py-32 px-8 lg:px-[30px]">
<div className="max-w-[1200px] mx-auto flex flex-col items-center text-center">
<motion.h2
className="text-[32px] lg:text-[40px] font-normal tracking-normal leading-[1.3em] text-white mb-8"
style={{ fontFamily: "var(--font-ibm-plex-mono)" }}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5 }}
>
Give us a try
</motion.h2>
<>
<section className="relative py-32 px-8 lg:px-[30px]">
<div className="max-w-[1200px] mx-auto flex flex-col items-center text-center">
<motion.h2
className="text-[32px] lg:text-[40px] font-normal tracking-normal leading-[1.3em] text-white mb-8"
style={{ fontFamily: "var(--font-ibm-plex-mono)" }}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5 }}
>
Give us a try
</motion.h2>

<motion.a
href={DOWNLOAD_URL_MAC_ARM64}
className="inline-flex items-center bg-[#f9f9f5] hover:bg-[#f0efeb] rounded-[5px] px-8 py-4 transition-colors"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: 0.1 }}
>
<span className="text-lg font-medium text-[#2a2b25]">
Download for MacOS
</span>
<HiMiniArrowDownTray className="ml-3 size-5 text-[#2a2b25]" />
</motion.a>
</div>
</section>
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: 0.1 }}
>
<DownloadButton onJoinWaitlist={() => setIsWaitlistOpen(true)} />
</motion.div>
</div>
</section>
<WaitlistModal
isOpen={isWaitlistOpen}
onClose={() => setIsWaitlistOpen(false)}
/>
</>
);
}
174 changes: 74 additions & 100 deletions apps/website/src/app/components/DownloadButton/DownloadButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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 (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button
type="button"
className={`bg-white text-black ${sizeClasses} rounded-lg font-medium hover:bg-zinc-200 transition-colors flex items-center gap-2 ${className}`}
>
Download
<HiMiniArrowDownTray className="size-4" />
</button>
</DropdownMenuTrigger>
<DropdownMenuContent
align="end"
className="w-80 bg-white border border-zinc-200 rounded-lg shadow-lg p-2"
>
{/* Download for Apple Silicon Macs */}
<DropdownMenuItem
onClick={handleAppleSiliconDownload}
className="p-0 focus:bg-transparent"
>
<button
type="button"
className="w-full bg-zinc-900 text-white rounded-lg px-4 py-3 flex items-center justify-between hover:bg-zinc-800 transition-colors gap-4"
>
<div className="flex items-center gap-3">
<svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
aria-label="Apple logo"
>
<title>Apple logo</title>
<path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
</svg>
<span className="font-medium">Download for Mac</span>
</div>
<span className="text-xs text-zinc-400">APPLE SILICON</span>
</button>
</DropdownMenuItem>
const appleIcon = (
<svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
aria-label="Apple logo"
>
<title>Apple logo</title>
<path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
</svg>
);

{/* Join Windows Waitlist */}
<DropdownMenuItem
onClick={onJoinWindowsWaitlist}
className="p-0 mt-2 focus:bg-transparent"
>
<button
type="button"
className="w-full bg-zinc-100 text-black rounded-lg px-4 py-3 flex items-center hover:bg-zinc-200 transition-colors"
>
<div className="flex items-center gap-3">
<svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
aria-label="Windows logo"
>
<title>Windows logo</title>
<path d="M3 12V6.75l6-1.32v6.48L3 12zm17-9v8.75l-10 .15V5.21L20 3zM3 13l6 .09v6.81l-6-1.15V13zm17 .25V22l-10-1.8v-7.55l10 .15z" />
</svg>
<span className="font-medium">Join Windows waitlist</span>
</div>
</button>
</DropdownMenuItem>
const githubIcon = (
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
aria-label="GitHub logo"
>
<title>GitHub logo</title>
<path d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.167 22 16.418 22 12c0-5.523-4.477-10-10-10z" />
</svg>
);

<DropdownMenuSeparator className="my-2 bg-zinc-200 hidden" />
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: <HiMiniClock className="size-4" />,
onClick: onJoinWaitlist || (() => {}),
},
{
id: "build-from-source",
label: "Build from source on GitHub",
icon: githubIcon,
onClick: handleBuildFromSource,
},
],
},
];

{/* Download for Intel-based Macs */}
<DropdownMenuItem
onClick={handleIntelDownload}
className="p-0 focus:bg-transparent hidden"
>
<div className="w-full px-2 py-2">
<p className="text-sm text-zinc-500 mb-1">
Mac older than November 2020?
</p>
<button
type="button"
className="text-sm text-black font-medium hover:text-zinc-700 transition-colors"
>
Download for Intel-based Macs
</button>
</div>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
const trigger = (
<button
type="button"
className={`bg-white text-black ${sizeClasses} rounded-[5px] font-medium hover:bg-zinc-200 transition-colors flex items-center gap-2 ${className}`}
>
Download
<HiMiniArrowDownTray className="size-4" />
</button>
);

return <PlatformDropdown trigger={trigger} sections={sections} align="end" />;
}
8 changes: 1 addition & 7 deletions apps/website/src/app/components/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -50,12 +49,7 @@ export function Header() {
<SocialLinks />
<DownloadButton
size="sm"
className="hidden"
onJoinWindowsWaitlist={() => setIsWaitlistOpen(true)}
/>
<JoinWaitlistButton
onClick={() => setIsWaitlistOpen(true)}
size="sm"
onJoinWaitlist={() => setIsWaitlistOpen(true)}
/>
</motion.div>
</div>
Expand Down
Loading
Loading