Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ Spin up new coding tasks while waiting for your current agent to finish. Quickly
- [ ] Automate reviewing and feedback
- [ ] Create and manage Git pull requests

<img alt="example-min" src="assets/example.png" />
<img alt="example" src="assets/example.gif" />

## Getting Started

Expand Down
1 change: 1 addition & 0 deletions apps/website/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"framer-motion": "^12.23.24",
"geist": "^1.5.1",
"next": "^15.1.6",
"next-themes": "^0.4.6",
"react": "^19.1.1",
"react-dom": "^19.1.1",
"react-fast-marquee": "^1.6.5",
Expand Down
Binary file removed apps/website/public/example.png
Binary file not shown.
Binary file added apps/website/public/hero/change-themes.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed apps/website/public/hero/customize-themes.gif
Binary file not shown.
Binary file added apps/website/public/hero/open-worktrees.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/website/public/hero/use-agents.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
37 changes: 37 additions & 0 deletions apps/website/src/app/components/CTASection/CTASection.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
"use client";

import { motion } from "framer-motion";
import { HiMiniArrowDownTray } from "react-icons/hi2";

export function CTASection() {
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>

<motion.a
href="https://github.com/superset-sh/superset/releases"
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>
);
Comment on lines +6 to +36
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Polish CTA copy and consider centralizing font styling

The component structure and animation props look good. Two small tweaks to consider:

  • Branding nit: Apple styles it as “macOS”, not “MacOS”.
  • To keep styling consistent, you may want to move the fontFamily: "var(--font-ibm-plex-mono)" inline style into a reusable CSS/Tailwind utility class when convenient.

Example copy tweak:

-          <span className="text-lg font-medium text-[#2a2b25]">
-            Download for MacOS
-          </span>
+          <span className="text-lg font-medium text-[#2a2b25]">
+            Download for macOS
+          </span>
🤖 Prompt for AI Agents
In apps/website/src/app/components/CTASection/CTASection.tsx around lines 6 to
36, update the CTA copy to use the correct Apple branding "macOS" instead of
"MacOS", and remove the inline style fontFamily: "var(--font-ibm-plex-mono)";
instead add a reusable Tailwind/CSS utility class (e.g., .font-ibm-plex-mono or
a Tailwind plugin/extend) and apply that class to the element so font styling is
centralized and not inline.

}
1 change: 1 addition & 0 deletions apps/website/src/app/components/CTASection/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { CTASection } from "./CTASection";
36 changes: 26 additions & 10 deletions apps/website/src/app/components/Footer/Footer.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,28 @@
"use client";

import { motion } from "framer-motion";
import Image from "next/image";
import Link from "next/link";
import { SocialLinks } from "../SocialLinks";

function SupersetLogo() {
return (
<svg
width="98"
height="16"
viewBox="0 0 392 64"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-label="Superset"
>
<title>Superset</title>
<path
d="M25.2727 -0.00017944H37.9091V12.6362H25.2727V-0.00017944ZM12.6364 -0.00017944H25.2727V12.6362H12.6364V-0.00017944ZM0 12.6362H12.6364V25.2725H0V12.6362ZM0 25.2725H12.6364V37.9089H0V25.2725ZM12.6364 25.2725H25.2727V37.9089H12.6364V25.2725ZM25.2727 25.2725H37.9091V37.9089H25.2727V25.2725ZM25.2727 37.9089H37.9091V50.5453H25.2727V37.9089ZM25.2727 50.5453H37.9091V63.1816H25.2727V50.5453ZM12.6364 50.5453H25.2727V63.1816H12.6364V50.5453ZM0 50.5453H12.6364V63.1816H0V50.5453ZM0 -0.00017944H12.6364V12.6362H0V-0.00017944ZM50.4961 -0.00017944H63.1325V12.6362H50.4961V-0.00017944ZM50.4961 12.6362H63.1325V25.2725H50.4961V12.6362ZM50.4961 25.2725H63.1325V37.9089H50.4961V25.2725ZM50.4961 37.9089H63.1325V50.5453H50.4961V37.9089ZM50.4961 50.5453H63.1325V63.1816H50.4961V50.5453ZM63.1325 50.5453H75.7688V63.1816H63.1325V50.5453ZM75.7688 50.5453H88.4052V63.1816H75.7688V50.5453ZM75.7688 37.9089H88.4052V50.5453H75.7688V37.9089ZM75.7688 25.2725H88.4052V37.9089H75.7688V25.2725ZM75.7688 12.6362H88.4052V25.2725H75.7688V12.6362ZM75.7688 -0.00017944H88.4052V12.6362H75.7688V-0.00017944ZM100.992 -0.00017944H113.629V12.6362H100.992V-0.00017944ZM100.992 12.6362H113.629V25.2725H100.992V12.6362ZM100.992 25.2725H113.629V37.9089H100.992V25.2725ZM100.992 37.9089H113.629V50.5453H100.992V37.9089ZM100.992 50.5453H113.629V63.1816H100.992V50.5453ZM113.629 -0.00017944H126.265V12.6362H113.629V-0.00017944ZM126.265 -0.00017944H138.901V12.6362H126.265V-0.00017944ZM126.265 12.6362H138.901V25.2725H126.265V12.6362ZM126.265 25.2725H138.901V37.9089H126.265V25.2725ZM113.629 25.2725H126.265V37.9089H113.629V25.2725ZM151.488 -0.00017944H164.125V12.6362H151.488V-0.00017944ZM151.488 12.6362H164.125V25.2725H151.488V12.6362ZM151.488 25.2725H164.125V37.9089H151.488V25.2725ZM151.488 37.9089H164.125V50.5453H151.488V37.9089ZM151.488 50.5453H164.125V63.1816H151.488V50.5453ZM164.125 -0.00017944H176.761V12.6362H164.125V-0.00017944ZM164.125 50.5453H176.761V63.1816H164.125V50.5453ZM164.125 25.2725H176.761V37.9089H164.125V25.2725ZM176.761 -0.00017944H189.397V12.6362H176.761V-0.00017944ZM176.761 50.5453H189.397V63.1816H176.761V50.5453ZM201.984 50.5453H214.621V63.1816H201.984V50.5453ZM201.984 37.9089H214.621V50.5453H201.984V37.9089ZM201.984 25.2725H214.621V37.9089H201.984V25.2725ZM201.984 12.6362H214.621V25.2725H201.984V12.6362ZM201.984 -0.00017944H214.621V12.6362H201.984V-0.00017944ZM214.621 -0.00017944H227.257V12.6362H214.621V-0.00017944ZM227.257 -0.00017944H239.893V12.6362H227.257V-0.00017944ZM227.257 12.6362H239.893V25.2725H227.257V12.6362ZM214.621 25.2725H227.257V37.9089H214.621V25.2725ZM227.257 37.9089H239.893V50.5453H227.257V37.9089ZM227.257 50.5453H239.893V63.1816H227.257V50.5453ZM277.753 -0.00017944H290.39V12.6362H277.753V-0.00017944ZM265.117 -0.00017944H277.753V12.6362H265.117V-0.00017944ZM252.48 12.6362H265.117V25.2725H252.48V12.6362ZM252.48 25.2725H265.117V37.9089H252.48V25.2725ZM265.117 25.2725H277.753V37.9089H265.117V25.2725ZM277.753 25.2725H290.39V37.9089H277.753V25.2725ZM277.753 37.9089H290.39V50.5453H277.753V37.9089ZM277.753 50.5453H290.39V63.1816H277.753V50.5453ZM265.117 50.5453H277.753V63.1816H265.117V50.5453ZM252.48 50.5453H265.117V63.1816H252.48V50.5453ZM252.48 -0.00017944H265.117V12.6362H252.48V-0.00017944ZM302.977 -0.00017944H315.613V12.6362H302.977V-0.00017944ZM302.977 12.6362H315.613V25.2725H302.977V12.6362ZM302.977 25.2725H315.613V37.9089H302.977V25.2725ZM302.977 37.9089H315.613V50.5453H302.977V37.9089ZM302.977 50.5453H315.613V63.1816H302.977V50.5453ZM315.613 -0.00017944H328.249V12.6362H315.613V-0.00017944ZM315.613 50.5453H328.249V63.1816H315.613V50.5453ZM315.613 25.2725H328.249V37.9089H315.613V25.2725ZM328.249 -0.00017944H340.886V12.6362H328.249V-0.00017944ZM328.249 50.5453H340.886V63.1816H328.249V50.5453ZM353.473 -0.00017944H366.109V12.6362H353.473V-0.00017944ZM366.109 -0.00017944H378.745V12.6362H366.109V-0.00017944ZM378.745 -0.00017944H391.382V12.6362H378.745V-0.00017944ZM366.109 12.6362H378.745V25.2725H366.109V12.6362ZM366.109 25.2725H378.745V37.9089H366.109V25.2725ZM366.109 37.9089H378.745V50.5453H366.109V37.9089ZM366.109 50.5453H378.745V63.1816H366.109V50.5453Z"
fill="currentColor"
/>
</svg>
);
}

export function Footer() {
return (
<footer className="border-t border-zinc-800">
Expand All @@ -15,15 +34,12 @@ export function Footer() {
transition={{ duration: 0.5 }}
className="flex flex-col sm:flex-row justify-between items-center gap-4"
>
<div className="flex items-center gap-2">
<Image
src="/title.svg"
alt="Superset"
width={200}
height={61}
className="h-8 sm:h-10 w-auto"
/>
</div>
<Link
href="/"
className="text-zinc-400 hover:text-zinc-200 transition-colors"
>
<SupersetLogo />
</Link>
<div className="flex items-center gap-6">
<SocialLinks />
<p className="text-zinc-400 text-sm">
Expand Down
115 changes: 69 additions & 46 deletions apps/website/src/app/components/HeroSection/HeroSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,58 @@
import { motion } from "framer-motion";
import Image from "next/image";
import { useEffect, useState } from "react";
import { HiMiniArrowDownTray } from "react-icons/hi2";

export function HeroSection() {
return (
<section className="relative min-h-[calc(100vh-64px)] flex items-center">
<div className="w-full max-w-[1600px] mx-auto px-8 lg:px-[30px] py-16">
<section className="relative min-h-[calc(100vh-64px)] flex items-center overflow-hidden">
{/* Grid background */}
<motion.div
className="absolute inset-0 pointer-events-none"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.8, ease: "easeOut" }}
>
<svg
className="absolute inset-0 w-full h-full"
xmlns="http://www.w3.org/2000/svg"
>
<title>grid</title>
<defs>
<pattern
id="hero-grid"
width="60"
height="60"
patternUnits="userSpaceOnUse"
>
<path
d="M 60 0 L 0 0 0 60"
fill="none"
stroke="rgba(255,255,255,0.06)"
strokeWidth="1"
/>
</pattern>
<radialGradient id="grid-fade" cx="50%" cy="50%" r="50%">
<stop offset="0%" stopColor="white" stopOpacity="1" />
<stop offset="75%" stopColor="white" stopOpacity="0.95" />
<stop offset="85%" stopColor="white" stopOpacity="0.7" />
<stop offset="92%" stopColor="white" stopOpacity="0.3" />
<stop offset="96%" stopColor="white" stopOpacity="0.1" />
<stop offset="100%" stopColor="white" stopOpacity="0" />
</radialGradient>
<mask id="grid-mask">
<rect width="100%" height="100%" fill="url(#grid-fade)" />
</mask>
</defs>
<rect
width="100%"
height="100%"
fill="url(#hero-grid)"
mask="url(#grid-mask)"
/>
</svg>
</motion.div>
<div className="relative w-full max-w-[1600px] mx-auto px-8 lg:px-[30px] py-16">
<div className="grid grid-cols-1 lg:grid-cols-[42%_58%] gap-8 lg:gap-12 items-center">
{/* Left column - Text content */}
<motion.div
Expand All @@ -18,14 +65,15 @@ export function HeroSection() {
>
{/* Heading */}
<div className="space-y-6">
<h1 className="text-[36px] sm:text-[40px] lg:text-[45px] font-normal tracking-[-0.03em] leading-[1em] text-white">
The intelligent
<br />
coding environment
<h1
className="text-[28px] sm:text-[32px] lg:text-[38px] font-normal tracking-normal leading-[1.3em] text-white"
style={{ fontFamily: "var(--font-ibm-plex-mono)" }}
>
The terminal app for parallel cli agents.
</h1>
<p className="text-lg lg:text-xl tracking-[-0.03em] text-white/50 max-w-[400px]">
From prompt to production, Superset is where developers build
enduring software.
<p className="text-lg text-muted-foreground max-w-[400px]">
Run dozens of Claude Code, Codex, or any other cli agents you
love.
</p>
</div>

Expand Down Expand Up @@ -53,56 +101,32 @@ function DownloadButton() {
return (
<a
href="https://github.com/superset-sh/superset/releases"
className="group inline-flex items-center bg-[#f9f9f5] hover:bg-[#f0efeb] rounded-[5px] pl-4 pr-1 py-1 transition-colors"
className="group inline-flex items-center bg-[#f9f9f5] hover:bg-[#f0efeb] rounded-[5px] pl-4 pr-3 py-2 transition-colors"
>
<div className="flex items-center gap-1">
<span className="text-base font-medium leading-4 text-[#2a2b25]">
Download
</span>
<span className="text-base font-medium leading-4 text-[#2a2b25]">
{" "}
for Mac
</span>
</div>
<div className="ml-2 rounded-sm p-1.5 transition-colors">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<title>Download</title>
<path
d="M15.125 9.844L15.125 14.51C15.125 14.833 14.864 15.094 14.542 15.094L1.708 15.094C1.386 15.094 1.125 14.833 1.125 14.51L1.125 9.844C1.125 9.522 1.386 9.26 1.708 9.26C2.03 9.26 2.292 9.522 2.292 9.844L2.292 13.927L13.958 13.927L13.958 9.844C13.958 9.522 14.22 9.26 14.542 9.26C14.864 9.26 15.125 9.522 15.125 9.844ZM7.712 10.256C7.822 10.366 7.97 10.428 8.125 10.428C8.28 10.428 8.428 10.366 8.538 10.256L11.454 7.34C11.682 7.112 11.682 6.742 11.454 6.514C11.226 6.286 10.857 6.286 10.629 6.514L8.708 8.436L8.708 1.677C8.708 1.355 8.447 1.094 8.125 1.094C7.803 1.094 7.542 1.355 7.542 1.677L7.542 8.436L5.621 6.514C5.393 6.286 5.024 6.286 4.796 6.514C4.568 6.742 4.568 7.112 4.796 7.34Z"
fill="#2a2b25"
/>
</svg>
</div>
<span className="text-base font-medium leading-4 text-[#2a2b25]">
Download for MacOS
</span>
<HiMiniArrowDownTray className="ml-2 size-4 text-[#2a2b25]" />
</a>
);
}

const SELECTOR_OPTIONS = [
"Build features",
"Fix bugs",
"Debug prod",
"Use Agents",
"Open Worktrees",
"Customize Themes",
] as const;

const BACKGROUND_GRADIENTS: Record<string, string> = {
"Build features": "from-amber-900/80 via-orange-950/70 to-amber-950/80",
"Fix bugs": "from-rose-900/80 via-pink-950/70 to-rose-950/80",
"Debug prod": "from-violet-900/80 via-purple-950/70 to-violet-950/80",
"Use Agents": "from-rose-900/80 via-pink-950/70 to-rose-950/80",
"Open Worktrees": "from-blue-900/80 via-blue-950/70 to-blue-950/80",
"Customize Themes": "from-emerald-900/80 via-teal-950/70 to-emerald-950/80",
};

// Using customize.gif as placeholder for all screens until other GIFs are ready
const DEMO_GIFS: Record<string, string> = {
"Build features": "/hero/customize-themes.gif",
"Fix bugs": "/hero/customize-themes.gif",
"Debug prod": "/hero/customize-themes.gif",
"Customize Themes": "/hero/customize-themes.gif",
"Use Agents": "/hero/use-agents.gif",
"Open Worktrees": "/hero/open-worktrees.gif",
"Customize Themes": "/hero/change-themes.gif",
};

function ProductDemo() {
Expand Down Expand Up @@ -161,7 +185,6 @@ function ProductDemo() {
</motion.div>
))}

{/* Selector pills at bottom */}
<div className="absolute bottom-3 left-3 right-3 flex items-center gap-2 overflow-x-auto pb-1">
{SELECTOR_OPTIONS.map((option) => (
<SelectorPill
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
"use client";

import { motion } from "framer-motion";
import type { ReactNode } from "react";
import {
HiOutlineCodeBracket,
HiOutlineServerStack,
HiOutlineSignal,
} from "react-icons/hi2";

const SECURITY_FEATURES: {
icon: ReactNode;
title: string;
description: string;
}[] = [
{
icon: <HiOutlineCodeBracket className="w-5 h-5 text-white/70" />,
title: "Open Source",
description:
"Fully open source codebase. Inspect, audit, and contribute to the code. No black boxes, no hidden functionality.",
},
{
icon: <HiOutlineServerStack className="w-5 h-5 text-white/70" />,
title: "Offline First",
description:
"Your code stays on your machine. Work without an internet connection. All processing happens locally.",
},
{
icon: <HiOutlineSignal className="w-5 h-5 text-white/70" />,
title: "No Network Required",
description:
"Zero telemetry by default. No data leaves your machine unless you explicitly connect to external services.",
},
];

export function SecuritySection() {
return (
<section className="relative py-24 px-8 lg:px-[30px]">
<div className="max-w-[1200px] mx-auto">
{/* Heading */}
<motion.div
className="mb-16"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5 }}
>
<div className="space-y-1">
<h2 className="text-[32px] lg:text-[40px] font-normal tracking-[-0.01em] text-neutral-500">
Private by default
</h2>
<h2 className="text-[32px] lg:text-[40px] font-normal tracking-[-0.01em] text-white/90">
Your code never leaves your machine.
</h2>
</div>
</motion.div>

{/* Features Grid */}
<motion.div
className="grid grid-cols-1 md:grid-cols-3 gap-6"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: 0.2 }}
>
{SECURITY_FEATURES.map((feature, index) => (
<motion.div
key={feature.title}
className="relative p-6 rounded-2xl border border-white/10 bg-white/[0.02] backdrop-blur-sm"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: 0.1 * index }}
>
<div className="mb-4 inline-flex items-center justify-center w-10 h-10 rounded-lg bg-white/5 border border-white/10">
{feature.icon}
</div>
<h3 className="text-lg font-medium text-white/90 mb-2">
{feature.title}
</h3>
<p className="text-sm leading-relaxed text-white/50">
{feature.description}
</p>
</motion.div>
))}
</motion.div>
</div>
</section>
);
}
1 change: 1 addition & 0 deletions apps/website/src/app/components/SecuritySection/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { SecuritySection } from "./SecuritySection";
Loading
Loading