From ea8fd47119305e1318da5a8ccaee7545fd4735b7 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 4 Jul 2026 12:55:47 +0000 Subject: [PATCH 1/2] Refactor landing page UX for clarity and conversion MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The landing page buried its value proposition under competing elements and asked visitors for a technical action before showing value. This restructures it as a single conversion funnel: Hero: - Replace the rotating typewriter headline with a static, benefit-led one. The animation caused text overflow and overlap on mobile (the rotating word collided with the next line) and rotated the value prop away before visitors could read it. - One clear primary CTA (Connect your agent — free) with a subordinate secondary (Browse the skills), instead of three competing next steps. - Demote the raw MCP URL + 4-tab tool picker to a compact "Already use MCP?" row; the step-by-step flow lives at /connect. - Replace the four heavy stat cards with a quiet single-line strip. Funnel order: - Move IndustryDemo (show-don't-tell, the most persuasive section) before the technical Proof deep-dive; re-alternate section backgrounds to match. Copy and consistency: - De-jargonize: "Four primitives" → "Four building blocks", plain- language explainer next to each SKILLS/PLAYBOOKS/SOULS/GUARDRAILS tag, "Forge live" → "Try this live". - Unify CTA labels across Hero, HowItWorks and CtaSection so every primary action reads "Connect your agent — free". - Add a continuation CTA at the end of HowItWorks. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01N7dTHxstEYRiesfjssG1Mf --- src/components/site/home/CoreConcepts.tsx | 13 +- src/components/site/home/CtaSection.tsx | 6 +- src/components/site/home/Hero.tsx | 181 +++++++--------------- src/components/site/home/HowItWorks.tsx | 12 +- src/components/site/home/IndustryDemo.tsx | 2 +- src/components/site/home/PlansTeaser.tsx | 2 +- src/components/site/home/Proof.tsx | 2 +- src/routes/index.tsx | 9 +- 8 files changed, 90 insertions(+), 137 deletions(-) diff --git a/src/components/site/home/CoreConcepts.tsx b/src/components/site/home/CoreConcepts.tsx index 37d61f78..84575f43 100644 --- a/src/components/site/home/CoreConcepts.tsx +++ b/src/components/site/home/CoreConcepts.tsx @@ -4,24 +4,28 @@ export function CoreConcepts() { const items = [ { tag: "SKILLS", + plain: "What your agent can do", title: "Capabilities, installable.", body: "Cardiology Diagnostics. Growth Hacking. Legal Due Diligence. Discrete units of expertise an agent can install on demand.", sample: ["cardiology-diagnostics", "growth-hacking-pro", "legal-due-diligence"], }, { tag: "PLAYBOOKS", + plain: "How it runs a process end-to-end", title: "Workflows that ship results.", body: "Complete operational logic for real-world processes — from enterprise sales motions to medical consultations.", sample: ["enterprise-sales-flow", "medical-consultation-v2", "startup-validation"], }, { tag: "SOULS", + plain: "How it sounds and decides", title: "Personality as code.", body: "Tone, style, principles, decision-making. Give your agent a Challenger-rep soul, a McKinsey soul, or a humanized doctor soul.", sample: ["challenger-rep-soul", "mckinsey-consultant", "humanized-doctor"], }, { tag: "GUARDRAILS", + plain: "What it must never do", title: "Safety, by default.", body: "Block hallucinations, regulatory violations, out-of-domain behavior and unsafe actions before they reach your users.", sample: ["medical-guardrails", "finance-compliance", "no-hallucination"], @@ -36,7 +40,7 @@ export function CoreConcepts() { The Stack

- Four primitives. Infinite agents. + Four building blocks. Infinite agents.

-
- {it.tag} +
+ + {it.tag} + + {it.plain}

{it.title}

{it.body}

diff --git a/src/components/site/home/CtaSection.tsx b/src/components/site/home/CtaSection.tsx index 092ba8fd..6c09618c 100644 --- a/src/components/site/home/CtaSection.tsx +++ b/src/components/site/home/CtaSection.tsx @@ -22,15 +22,15 @@ export function CtaSection() {
- Connect your agent → + Connect your agent — free → - Browse the registry + Browse the skills
diff --git a/src/components/site/home/Hero.tsx b/src/components/site/home/Hero.tsx index abe5253f..6221d3bb 100644 --- a/src/components/site/home/Hero.tsx +++ b/src/components/site/home/Hero.tsx @@ -1,7 +1,5 @@ import { Link } from "@tanstack/react-router"; -import { lazy, Suspense, useState } from "react"; -import { BadgeCheck, Landmark, ShieldAlert, Clock } from "lucide-react"; -import { Typewriter } from "@/components/site/Typewriter"; +import { lazy, Suspense } from "react"; import { CopyButton } from "@/components/site/CopyButton"; import { CountUp } from "@/components/site/CountUp"; import { SITE_STATS, SKILLS_LABEL } from "@/lib/site-stats"; @@ -10,25 +8,15 @@ const McpInstallAnimation = lazy(() => import("@/components/site/McpInstallAnimation").then((m) => ({ default: m.McpInstallAnimation })), ); -const CONNECT_TOOLS: { id: string; label: string; steps: string }[] = [ - { id: "claude", label: "Claude", steps: "Paste into Claude → Settings → Connectors." }, - { id: "cursor", label: "Cursor", steps: "Paste into Cursor → Settings → MCP → Add server." }, - { - id: "chatgpt", - label: "ChatGPT", - steps: "Add as a connector in ChatGPT (Settings → Connectors / GPTs).", - }, - { - id: "other", - label: "Other", - steps: "Add the URL as an MCP server in any MCP-compatible client.", - }, -]; +const MCP_URL = "https://superagentskill.com/api/mcp"; +/** + * Conversion-first hero: one static headline (no rotating text — it caused + * overflow, layout shift and comprehension problems), one primary CTA, and + * the raw MCP URL demoted to a compact secondary path for people who already + * know what MCP is. The step-by-step connect flow lives at /connect. + */ export function Hero() { - const mcpUrl = "https://superagentskill.com/api/mcp"; - const [toolId, setToolId] = useState("claude"); - const tool = CONNECT_TOOLS.find((t) => t.id === toolId) ?? CONNECT_TOOLS[0]; return (
@@ -37,111 +25,64 @@ export function Hero() {
{/* LEFT — message + primary action */}
-
+
- {SKILLS_LABEL} signed skills · Works with Claude, Cursor & ChatGPT + {SKILLS_LABEL} signed skills · Free to start
-

- Turn Claude or Cursor into a{" "} - - - - In 30 seconds. No code. +

+ Turn Claude, Cursor or ChatGPT into{" "} + an expert in your field — in 30 seconds.

-

- Paste one link. Your agent gains{" "} +

+ Paste one link and your agent gains{" "} {SKILLS_LABEL} expert skills — every one - signed, tested against jailbreaks, and scored in public. No code. No fine-tuning. Free - to start. + signed, tested against jailbreaks and scored in public. No code. No fine-tuning.

- {/* Benefit cues — why it's worth the 30 seconds */} -
    - {["Works in 30 seconds", "No code or fine-tuning", "Tested against jailbreaks"].map( - (b) => ( -
  • - - {b} -
    • - ), - )} -
+ {/* One primary action, one visually subordinate alternative */} +
+ + Connect your agent — free → + + + Browse the skills + +
+

+ Free forever · No credit card · No signup to browse · Open source (Apache 2.0) +

- {/* MCP URL — the primary above-the-fold action */} -
- {/* Tool picker — swaps the connect instructions */} -
- - Connecting - - {CONNECT_TOOLS.map((t) => ( - - ))} -
-
-
+ {/* Secondary path for people who already know MCP */} +
+

+ Already use MCP? Paste this URL + into your client — it works instantly, no restart. +

+
+
MCP - {mcpUrl} + {MCP_URL}
-

- {tool.steps} Works immediately — no restart. -

- - {/* Single primary CTA; secondary is a quiet text link */} -
- - Browse the skills → - - - Or walk me through connecting step by step → - -
-

- Free forever · No signup to browse · No credit card · Open source (Apache 2.0) -

{/* RIGHT — live install demo */} @@ -159,30 +100,24 @@ export function Hero() {
- {/* Trust metrics — slim band spanning full width */} -
+ {/* Trust metrics — one quiet line, not four competing cards */} +
{[ - { Icon: BadgeCheck, v: SITE_STATS.skills, suffix: "+", label: "Skills shipped" }, - { Icon: Landmark, v: SITE_STATS.souls, suffix: "+", label: "Souls available" }, - { Icon: ShieldAlert, v: SITE_STATS.playbooks, suffix: "+", label: "Playbooks ready" }, - { Icon: Clock, v: SITE_STATS.mcpSetupSeconds, suffix: "s", label: "MCP setup" }, + { v: SITE_STATS.skills, suffix: "+", label: "Expert skills" }, + { v: SITE_STATS.playbooks, suffix: "+", label: "Playbooks" }, + { v: SITE_STATS.souls, suffix: "+", label: "Souls" }, + { v: SITE_STATS.mcpSetupSeconds, suffix: "s", label: "Setup time" }, ].map((m) => ( -
- -
-
- -
-
- {m.label} -
-
+
+
+ {m.label} +
+
+ +
))} -
+
); diff --git a/src/components/site/home/HowItWorks.tsx b/src/components/site/home/HowItWorks.tsx index 578eba07..0f6b7fc4 100644 --- a/src/components/site/home/HowItWorks.tsx +++ b/src/components/site/home/HowItWorks.tsx @@ -1,3 +1,5 @@ +import { Link } from "@tanstack/react-router"; + export function HowItWorks() { const steps = [ { @@ -8,7 +10,7 @@ export function HowItWorks() { { n: "02", title: "Pick a skill — or describe one", - body: "Browse ready-made experts, or just say what you do: “I run a cardiology clinic.” SkillForge installs the right skills, playbooks and guardrails — or forges a custom one from your own context.", + body: "Browse ready-made experts, or just say what you do: “I run a cardiology clinic.” The right skills and guardrails get installed — or a custom one is built from your own context.", }, { n: "03", @@ -42,6 +44,14 @@ export function HowItWorks() {

One endpoint · Claude Code · Cursor · ChatGPT · Continue · Cline · Any MCP client

+
+ + Start with step 1 — connect free → + +
); diff --git a/src/components/site/home/IndustryDemo.tsx b/src/components/site/home/IndustryDemo.tsx index 9ddf029c..60d1fac3 100644 --- a/src/components/site/home/IndustryDemo.tsx +++ b/src/components/site/home/IndustryDemo.tsx @@ -302,7 +302,7 @@ export function IndustryDemo() { search={{ prompt: e.prompt }} className="group mt-1 inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:opacity-95" > - Forge live + Try this live → diff --git a/src/components/site/home/PlansTeaser.tsx b/src/components/site/home/PlansTeaser.tsx index feb437fb..dba6e576 100644 --- a/src/components/site/home/PlansTeaser.tsx +++ b/src/components/site/home/PlansTeaser.tsx @@ -16,7 +16,7 @@ export function PlansTeaser() { "All marketplace packages included", ]; return ( -
+
Pricing diff --git a/src/components/site/home/Proof.tsx b/src/components/site/home/Proof.tsx index 161cedcc..6e83e2b2 100644 --- a/src/components/site/home/Proof.tsx +++ b/src/components/site/home/Proof.tsx @@ -29,7 +29,7 @@ export function Proof() { }, ]; return ( -
+
diff --git a/src/routes/index.tsx b/src/routes/index.tsx index c35f99ca..9921f0c0 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -98,9 +98,10 @@ const FAQ_LD = { }; /** - * One narrative, seven sections: - * hook (Hero) → ease (HowItWorks) → differentiation (Proof) → - * show-don't-tell (IndustryDemo) → vocabulary (CoreConcepts) → + * One narrative, seven sections, ordered as a conversion funnel: + * hook (Hero) → ease (HowItWorks) → show-don't-tell (IndustryDemo, the + * most persuasive section, before any technical deep-dive) → + * differentiation/trust (Proof) → vocabulary (CoreConcepts) → * monetization (PlansTeaser) → objections + close (Faq, CtaSection). */ function Home() { @@ -110,8 +111,8 @@ function Home() {