diff --git a/README.md b/README.md index a3f8b48f1b8..47f32f22379 100644 --- a/README.md +++ b/README.md @@ -16,15 +16,6 @@ Run 10+ CLI coding agents like Claude Code, Codex, etc. in parallel on your machine. Spin up new coding tasks while waiting for your current agent to finish. Quickly switch between tasks as they need your attention. -## What you can do with Superset: - -- [X] Create and organize parallel coding environment -- [X] Get notified when an agent needs your review -- [ ] Share context between agents -- [ ] Code on the go with a cloud environment -- [ ] Automate reviewing and feedback -- [ ] Create and manage Git pull requests - example ## Getting Started @@ -59,7 +50,7 @@ open apps/desktop/release ### Usage -For each parallel tasks, Superset uses git worktree to clone a new branch on your machine. Automate copying env variables, installing dependencies, etc. through a setup script `./superset/setup.json` +For each parallel tasks, Superset uses git worktrees to clone a new branch on your machine. Automate copying env variables, installing dependencies, etc. through a setup script (`./superset/setup.json`)
Creating a worktree diff --git a/apps/website/public/hero/manage-terminals.gif b/apps/website/public/hero/manage-terminals.gif new file mode 100644 index 00000000000..c16a0aefa72 Binary files /dev/null and b/apps/website/public/hero/manage-terminals.gif differ diff --git a/apps/website/src/app/BRAND_GUIDELINES.md b/apps/website/src/app/BRAND_GUIDELINES.md deleted file mode 100644 index 2f1e5959466..00000000000 --- a/apps/website/src/app/BRAND_GUIDELINES.md +++ /dev/null @@ -1,241 +0,0 @@ -# Brand Guidelines ---- - -## Fonts - -### Font Families - -| Name | Font Family | Usage | -| ----------- | --------------------------------------------------------------------- | ------------------- | -| Sans | `"Matter Regular", "Matter Regular Placeholder", sans-serif` | Body text, headings | -| Sans Medium | `"Matter Medium", "Matter Medium Placeholder", sans-serif` | Buttons, emphasis | -| Mono | `"Matter Mono Regular", "Matter Mono Regular Placeholder", monospace` | Code, commands | -| Mono Alt | `"Geist Mono", monospace` | Terminal UI | - -- `Inter` as sans-serif fallback -- `Geist Mono` for monospace - ---- - -## Color Palette - -### Background Colors - -| Name | Value | Tailwind Approx | Usage | -| ----------------- | -------------------------------- | --------------- | ------------------ | -| Page Background | `#1a1a1a` (warm dark) | `neutral-900` | Main background | -| Button Dark | `rgb(53, 53, 52)` / `#353534` | `neutral-700` | Terminal button bg | -| Card/Button Light | `rgb(249, 250, 245)` / `#f9f9f5` | `stone-50` | Primary CTA bg | -| Button Hover | `rgb(238, 237, 234)` / `#eeeded` | `stone-200` | Icon container | -| Pressed State | `rgb(64, 64, 63)` / `#40403f` | `neutral-700` | Button pressed | - -### Text Colors - -| Name | Value | Tailwind Approx | Usage | -| ------------------ | -------------------------------- | --------------- | ------------------------- | -| Primary White | `rgb(255, 255, 255)` | `white` | Headings | -| Subtitle | `rgba(250, 249, 246, 0.5)` | `white/50` | Subheadings, descriptions | -| Muted | `rgb(175, 174, 172)` / `#afaeac` | `stone-400` | Terminal text, icons | -| Light Text | `rgb(227, 226, 224)` / `#e3e2e0` | `stone-200` | Code text | -| Button Dark Text | `rgb(42, 43, 37)` / `#2a2b25` | `neutral-800` | Text on light buttons | -| Button Light Text | `rgba(0, 0, 0, 0.8)` | `black/80` | Active pill text | -| Inactive Pill Text | `rgba(255, 255, 255, 0.8)` | `white/80` | Inactive selector text | - -### Border Colors - -| Name | Value | Usage | -| --------------- | -------------------------- | ---------------------- | -| Active Border | `rgb(255, 255, 255)` | Active selector pill | -| Inactive Border | `rgba(255, 255, 255, 0.2)` | Inactive selector pill | -| Subtle Border | `rgba(255, 255, 255, 0.1)` | Cards, dividers | - ---- - -## Typography - -### Hero Heading (H1) - -```css -font-family: "Matter Regular", sans-serif; -font-size: 45px; -letter-spacing: -0.03em; -line-height: 1em; -color: rgb(255, 255, 255); -``` - -**Tailwind**: `text-[45px] font-normal tracking-[-0.03em] leading-none text-white` - -### Subtitle/Description - -```css -font-family: "Matter Regular", sans-serif; -font-size: 20px; -letter-spacing: -0.03em; -color: rgba(250, 249, 246, 0.5); -``` - -**Tailwind**: `text-xl tracking-[-0.03em] text-white/50` - -### Button Text - -```css -font-family: "Matter Medium", sans-serif; -font-size: 16px; -letter-spacing: 0px; -line-height: 16px; -color: rgb(42, 43, 37); -``` - -**Tailwind**: `text-base font-medium leading-4 text-neutral-800` - -### Code/Terminal Text - -```css -font-family: "Matter Mono Regular", monospace; -/* or */ font-family: "Geist Mono", monospace; -font-size: 16px; -letter-spacing: -0.2px; -line-height: 1em; -color: rgb(227, 226, 224); -``` - -**Tailwind**: `font-mono text-base tracking-tight leading-none text-stone-200` - -### Small Labels (Nav, Pills) - -```css -font-family: "Matter Medium", sans-serif; -font-size: 12px; -font-weight: 500; -color: rgb(255, 255, 255); -``` - -**Tailwind**: `text-xs font-medium text-white` - -### Selector Pill Text - -```css -font-family: "Matter Regular", sans-serif; -font-size: 14px; -line-height: 140%; -color: rgba(0, 0, 0, 0.8); /* active */ -color: rgba(255, 255, 255, 0.8); /* inactive */ -``` - ---- - -## Border Radius - -| Name | Value | Usage | -| --------- | ---------------- | --------------------------------- | -| Small | `2px` | Icon containers | -| Default | `4px` | Inner button elements | -| Medium | `5px` | Buttons | -| Large | `8px` | Cards, videos, images | -| Full/Pill | `40px` or `50px` | Pills, selectors, terminal button | - ---- - -## Buttons - -### Primary CTA Button ("Download for Mac") - -```css -background-color: rgb(249, 250, 245); /* warm off-white */ -border-radius: 5px; -padding: 4px 4px 4px 16px; /* asymmetric - more left padding */ -``` - -Inner structure: -- Text: `"Matter Medium"`, 16px, `rgb(42, 43, 37)` -- Icon container: `rgb(238, 237, 234)`, 2px radius -- Has pressed/hover states - -**Tailwind approximation**: -```tsx -className="bg-stone-50 text-neutral-800 rounded-[5px] pl-4 pr-1 py-1 font-medium hover:bg-stone-100" -``` - -### Terminal/Brew Button - -```css -background-color: rgb(53, 53, 52); -border-radius: 50px; -padding: 10px; -font-family: "Geist Mono", monospace; -color: rgb(175, 174, 172); -``` - -**Tailwind**: -```tsx -className="bg-neutral-700 text-stone-400 rounded-full px-3 py-2.5 font-mono" -``` - -### Selector Pills - -**Active state**: -```css -background-color: rgba(255, 255, 255, 0.8); -border: 1px solid rgb(255, 255, 255); -border-radius: 40px; -color: rgba(0, 0, 0, 0.8); -``` - -**Inactive state**: -```css -background-color: rgba(255, 255, 255, 0.01); -border: 1px solid rgba(255, 255, 255, 0.2); -border-radius: 40px; -color: rgba(255, 255, 255, 0.8); -``` - ---- - -## Layout - -### Container -- Max width: `1600px` -- Horizontal padding: `30px` (each side, 60px total) - -### Hero Section -- Two-column layout on desktop -- Left: ~42% (text content) -- Right: ~58% (product demo) - -### Spacing -- Section padding: Large, generous whitespace -- Element gaps: `10-16px` typical - ---- - -## Component Examples - - - -### Selector Pill (Active) - -```tsx - -``` - -### Selector Pill (Inactive) - -```tsx - -``` - ---- - -## Key Differences from Previous Guidelines - -1. **Warmer tones**: Background is warm dark (`neutral-900`), not cold `zinc-950` -2. **Off-white buttons**: Primary CTA is `stone-50` (#f9f9f5), not pure white -3. **Custom font**: "Matter" family (we use Inter as fallback) -4. **Tight letter-spacing**: `-0.03em` on headings -5. **Asymmetric button padding**: Download button has more left padding -6. **Warm grays**: Use `stone-*` and `neutral-*`, not `zinc-*` diff --git a/apps/website/src/app/components/HeroSection/HeroSection.tsx b/apps/website/src/app/components/HeroSection/HeroSection.tsx index e8219f1a353..5f621ab8a32 100644 --- a/apps/website/src/app/components/HeroSection/HeroSection.tsx +++ b/apps/website/src/app/components/HeroSection/HeroSection.tsx @@ -121,18 +121,21 @@ export function HeroSection() { const SELECTOR_OPTIONS = [ "Use Agents", + "Manage Terminals", "Open Worktrees", "Customize Themes", ] as const; const BACKGROUND_GRADIENTS: Record = { "Use Agents": "from-rose-900/80 via-pink-950/70 to-rose-950/80", + "Manage Terminals": "from-amber-900/80 via-yellow-950/70 to-orange-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", }; const DEMO_GIFS: Record = { "Use Agents": "/hero/use-agents.gif", + "Manage Terminals": "/hero/manage-terminals.gif", "Open Worktrees": "/hero/open-worktrees.gif", "Customize Themes": "/hero/change-themes.gif", }; diff --git a/assets/change-themes.gif b/assets/change-themes.gif new file mode 100644 index 00000000000..cc444cf7bb8 Binary files /dev/null and b/assets/change-themes.gif differ diff --git a/assets/create-tabs.gif b/assets/create-tabs.gif index a2f1983996c..3da37fe5ab5 100644 Binary files a/assets/create-tabs.gif and b/assets/create-tabs.gif differ diff --git a/assets/create-worktree.gif b/assets/create-worktree.gif index b15e08c74af..45ef63ffa24 100644 Binary files a/assets/create-worktree.gif and b/assets/create-worktree.gif differ diff --git a/assets/example.gif b/assets/example.gif index 9c3e84886fe..07a0cf347cc 100644 Binary files a/assets/example.gif and b/assets/example.gif differ