From 949f611017e9108336428bec63b31142664ba4b6 Mon Sep 17 00:00:00 2001 From: Kiet Ho Date: Mon, 22 Dec 2025 12:12:51 -0800 Subject: [PATCH 01/19] feat(marketing): add Features and FAQ sections to homepage MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add two new sections to the marketing site homepage: - Features section with alternating text/image layout showcasing parallel agents, CLI compatibility, and git worktree isolation - FAQ section with Onlook-style two-column layout, custom accordion with plus icon, and smooth Framer Motion animations 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- .../app/components/FAQSection/FAQSection.tsx | 138 ++++++++++++++++++ .../src/app/components/FAQSection/index.ts | 1 + .../FeaturesSection/FeaturesSection.tsx | 134 +++++++++++++++++ .../app/components/FeaturesSection/index.ts | 1 + apps/marketing/src/app/page.tsx | 4 + 5 files changed, 278 insertions(+) create mode 100644 apps/marketing/src/app/components/FAQSection/FAQSection.tsx create mode 100644 apps/marketing/src/app/components/FAQSection/index.ts create mode 100644 apps/marketing/src/app/components/FeaturesSection/FeaturesSection.tsx create mode 100644 apps/marketing/src/app/components/FeaturesSection/index.ts diff --git a/apps/marketing/src/app/components/FAQSection/FAQSection.tsx b/apps/marketing/src/app/components/FAQSection/FAQSection.tsx new file mode 100644 index 00000000000..ec3ba86a166 --- /dev/null +++ b/apps/marketing/src/app/components/FAQSection/FAQSection.tsx @@ -0,0 +1,138 @@ +"use client"; + +import { AnimatePresence, motion } from "framer-motion"; +import { useState } from "react"; +import { HiPlus } from "react-icons/hi2"; + +interface FAQItem { + question: string; + answer: string; +} + +const FAQ_ITEMS: FAQItem[] = [ + { + question: "Is Superset free to use?", + answer: + "Yes, Superset is completely free and open source. You can self-host it, modify it, and use it however you like. The source code is available on GitHub under a permissive license.", + }, + { + question: "Which AI coding agents are supported?", + answer: + "Superset works with any CLI-based coding agent including Claude Code, OpenAI Codex, Aider, and more. If it runs in a terminal, it runs in Superset. We're agent-agnostic by design.", + }, + { + question: "How does the parallel agent system work?", + answer: + "Each agent runs in its own isolated Git worktree, which means they can work on different branches or features simultaneously without conflicts. You can monitor all agents in real-time and switch between them instantly.", + }, + { + question: "Does my code ever leave my machine?", + answer: + "No. Superset runs entirely on your local machine. Your code, your terminal sessions, and your work never touch our servers. The only network requests are made by the AI agents themselves to their respective APIs.", + }, + { + question: + "How is Superset different from using agents in VS Code or Cursor?", + answer: + "Superset is built specifically for running multiple agents in parallel with full terminal access. Unlike IDE-integrated solutions, you get dedicated worktrees per agent, real-time visibility into all sessions, and the ability to run dozens of agents simultaneously.", + }, + { + question: "Can I use my own API keys?", + answer: + "Absolutely. Superset doesn't proxy any API calls. You use your own API keys directly with whatever AI providers you choose. This means you have full control over costs and usage.", + }, +]; + +function FAQAccordionItem({ + item, + isOpen, + onToggle, +}: { + item: FAQItem; + isOpen: boolean; + onToggle: () => void; +}) { + return ( +
+ + + {isOpen && ( + +

+ {item.answer} +

+ + )} + +
+ ); +} + +export function FAQSection() { + const [openIndex, setOpenIndex] = useState(null); + + const handleToggle = (index: number) => { + setOpenIndex(openIndex === index ? null : index); + }; + + return ( +
+
+
+ {/* Left Column - Title */} + +

+ Frequently +
+ asked questions +

+ + + {/* Right Column - Accordion */} + +
+ {FAQ_ITEMS.map((item, index) => ( + handleToggle(index)} + /> + ))} +
+ +
+
+
+ ); +} diff --git a/apps/marketing/src/app/components/FAQSection/index.ts b/apps/marketing/src/app/components/FAQSection/index.ts new file mode 100644 index 00000000000..dc66ed4c3e2 --- /dev/null +++ b/apps/marketing/src/app/components/FAQSection/index.ts @@ -0,0 +1 @@ +export { FAQSection } from "./FAQSection"; diff --git a/apps/marketing/src/app/components/FeaturesSection/FeaturesSection.tsx b/apps/marketing/src/app/components/FeaturesSection/FeaturesSection.tsx new file mode 100644 index 00000000000..7fa8a488d01 --- /dev/null +++ b/apps/marketing/src/app/components/FeaturesSection/FeaturesSection.tsx @@ -0,0 +1,134 @@ +"use client"; + +import { motion } from "framer-motion"; +import Image from "next/image"; + +interface Feature { + tag: string; + title: string; + description: string; + imageSrc?: string; + imageAlt: string; +} + +const FEATURES: Feature[] = [ + { + tag: "Parallel Execution", + title: "Run dozens of agents at once", + description: + "Launch multiple AI coding agents simultaneously across different tasks. Work on features, fix bugs, and refactor code — all in parallel. Each agent runs independently while you maintain full visibility.", + imageSrc: "/features/parallel-agents.png", + imageAlt: "Multiple AI agents running in parallel in Superset", + }, + { + tag: "Universal Compatibility", + title: "Works with any CLI agent", + description: + "Superset is agent-agnostic. Use Claude Code, Codex, Aider, or any CLI-based coding tool. Switch between agents seamlessly without changing your workflow.", + imageSrc: "/features/cli-agents.png", + imageAlt: "Various CLI agents running in Superset", + }, + { + tag: "Isolation", + title: "Git worktrees keep everything clean", + description: + "Each agent runs in its own isolated Git worktree. No merge conflicts, no stepping on each other's changes. Review and merge work when you're ready.", + imageSrc: "/features/git-worktrees.png", + imageAlt: "Git worktree isolation in Superset", + }, +]; + +function FeatureImage({ src, alt }: { src?: string; alt: string }) { + // Check if image exists by trying to load it - for now show placeholder + // Replace with actual images when available + const showPlaceholder = true; + + return ( +
+ {!showPlaceholder && src ? ( + {alt} + ) : ( +
+
+ Screenshot +
+
+ )} +
+ ); +} + +export function FeaturesSection() { + return ( +
+
+ {/* Section Header */} + +
+

+ Features +

+

+ Everything you need to supercharge your AI-assisted development + workflow. +

+
+ + + {/* Feature Rows */} +
+ {FEATURES.map((feature, index) => { + const isReversed = index % 2 === 1; + + return ( + + {/* Text Content */} +
+
+ + {feature.tag} + +

+ {feature.title} +

+
+

+ {feature.description} +

+
+ + {/* Image */} +
+ +
+ + ); + })} +
+
+
+ ); +} diff --git a/apps/marketing/src/app/components/FeaturesSection/index.ts b/apps/marketing/src/app/components/FeaturesSection/index.ts new file mode 100644 index 00000000000..561353fb3de --- /dev/null +++ b/apps/marketing/src/app/components/FeaturesSection/index.ts @@ -0,0 +1 @@ +export { FeaturesSection } from "./FeaturesSection"; diff --git a/apps/marketing/src/app/page.tsx b/apps/marketing/src/app/page.tsx index 6be67db474b..e93e494645e 100644 --- a/apps/marketing/src/app/page.tsx +++ b/apps/marketing/src/app/page.tsx @@ -1,6 +1,8 @@ "use client"; import { CTASection } from "./components/CTASection"; +import { FAQSection } from "./components/FAQSection"; +import { FeaturesSection } from "./components/FeaturesSection"; import { HeroSection } from "./components/HeroSection"; import { SecuritySection } from "./components/SecuritySection"; import { TrustedBySection } from "./components/TrustedBySection"; @@ -11,8 +13,10 @@ export default function Home() {
+ +
); From e38f784397ab6580a7e83a18ddc17c43f8a59d95 Mon Sep 17 00:00:00 2001 From: Kiet Ho Date: Mon, 22 Dec 2025 12:13:28 -0800 Subject: [PATCH 02/19] fix(marketing): reorder Features section after Video section MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- apps/marketing/src/app/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/marketing/src/app/page.tsx b/apps/marketing/src/app/page.tsx index e93e494645e..170a88cbec9 100644 --- a/apps/marketing/src/app/page.tsx +++ b/apps/marketing/src/app/page.tsx @@ -13,8 +13,8 @@ export default function Home() {
- + From b5ece23c5004a5cd5c0e86ea221eaee37ab7a938 Mon Sep 17 00:00:00 2001 From: Kiet Ho Date: Mon, 22 Dec 2025 12:40:16 -0800 Subject: [PATCH 03/19] lea up --- .../app/components/CTASection/CTASection.tsx | 2 +- .../app/components/FAQSection/FAQSection.tsx | 2 +- .../FeaturesSection/FeaturesSection.tsx | 30 ++++--------------- .../SecuritySection/SecuritySection.tsx | 2 +- .../TrustedBySection/TrustedBySection.tsx | 27 ++++++++--------- .../components/VideoSection/VideoSection.tsx | 18 +++++------ 6 files changed, 29 insertions(+), 52 deletions(-) diff --git a/apps/marketing/src/app/components/CTASection/CTASection.tsx b/apps/marketing/src/app/components/CTASection/CTASection.tsx index 4e978b2b683..ec178672e18 100644 --- a/apps/marketing/src/app/components/CTASection/CTASection.tsx +++ b/apps/marketing/src/app/components/CTASection/CTASection.tsx @@ -11,7 +11,7 @@ export function CTASection() { return ( <>
-
+
-
+
{/* Left Column - Title */} -
- {/* Section Header */} - -
-

- Features -

-

- Everything you need to supercharge your AI-assisted development - workflow. -

-
- - +
{/* Feature Rows */}
{FEATURES.map((feature, index) => { const isReversed = index % 2 === 1; - return ( -
+
{/* Heading */} - - + {/* Left fade overlay */} +
+ +
{CLIENT_LOGOS.map((client) => (
+ + {/* Right fade overlay */} +
diff --git a/apps/marketing/src/app/components/VideoSection/VideoSection.tsx b/apps/marketing/src/app/components/VideoSection/VideoSection.tsx index 0f03ebac55e..0cf89629318 100644 --- a/apps/marketing/src/app/components/VideoSection/VideoSection.tsx +++ b/apps/marketing/src/app/components/VideoSection/VideoSection.tsx @@ -4,35 +4,33 @@ import { motion } from "framer-motion"; export function VideoSection() { return ( -
-
- {/* Heading */} +
+
-
+

A Superset of your favorite tools

-

- Get all the best AI coding tools in one place. We want to support - and stay compatible with whatever CLI agents you already use. +

+ We provides parallelization and better UX to enhance your Cursor, + Claude Code, OpenCode, etc. workflows.

- {/* Video Demo Area */} -
+