From 561a4e18c612dadb5303fa3211ee77a812881485 Mon Sep 17 00:00:00 2001 From: Craig Allen Date: Wed, 8 Apr 2026 08:02:46 -0500 Subject: [PATCH 1/6] feat(marketing): highlight MCP's zero-context advantage --- src/App.tsx | 4 + src/components/FeatureGrid.tsx | 2 +- src/components/MCPDeepDive.tsx | 12 ++- src/components/StatsBar.tsx | 80 +++++++++++++++ src/components/TokenComparison.tsx | 159 +++++++++++++++++++++++++++++ 5 files changed, 252 insertions(+), 5 deletions(-) create mode 100644 src/components/StatsBar.tsx create mode 100644 src/components/TokenComparison.tsx diff --git a/src/App.tsx b/src/App.tsx index 90100c2..58a3df4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,8 +1,10 @@ import Navbar from './components/Navbar' import Hero from './components/Hero' import ProblemBar from './components/ProblemBar' +import StatsBar from './components/StatsBar' import ProductOverview from './components/ProductOverview' import MCPDeepDive from './components/MCPDeepDive' +import TokenComparison from './components/TokenComparison' import Dogfooding from './components/Dogfooding' import FeatureGrid from './components/FeatureGrid' import PricingPreview from './components/PricingPreview' @@ -14,8 +16,10 @@ export default function App() { + + diff --git a/src/components/FeatureGrid.tsx b/src/components/FeatureGrid.tsx index 5a2b534..5c38a3b 100644 --- a/src/components/FeatureGrid.tsx +++ b/src/components/FeatureGrid.tsx @@ -7,7 +7,7 @@ import type { IconDefinition } from '@fortawesome/fontawesome-svg-core' const features: { title: string; description: string; icon: IconDefinition }[] = [ { title: 'MCP Server', - description: 'Live repo context for any AI agent', + description: 'Live repo context — zero upfront injection, always current, write access included', icon: faServer, }, { diff --git a/src/components/MCPDeepDive.tsx b/src/components/MCPDeepDive.tsx index 7e53159..29311b0 100644 --- a/src/components/MCPDeepDive.tsx +++ b/src/components/MCPDeepDive.tsx @@ -20,10 +20,11 @@ const codeSnippet = `// claude_desktop_config.json > get_learning_context()` const points = [ + 'Zero upfront injection \u2014 agents fetch exactly what they need, when they need it', + 'Every tool call returns live data — not a stale snapshot from session start', + 'Agents don\u2019t just read your project — they create tasks, log decisions, and move cards', 'One config copy per agent — paste it, connect, done', - 'Context scoped to the active repo automatically', 'Works with Claude Code, Codex, Gemini, and any MCP-compatible agent', - 'Drag a card to In Progress — agent launches with full context', ] export default function MCPDeepDive() { @@ -35,9 +36,12 @@ export default function MCPDeepDive() { MCP PROTOCOL -

- Your AI agents finally know what's going on +

+ Zero upfront context. Always current. Write access included.

+

+ Your AI agents finally know what's going on +

DevFlow runs a local MCP server that exposes your entire project — tasks, notes, learning entries, repo context, PR history — to any diff --git a/src/components/StatsBar.tsx b/src/components/StatsBar.tsx new file mode 100644 index 0000000..6466231 --- /dev/null +++ b/src/components/StatsBar.tsx @@ -0,0 +1,80 @@ +import { motion, useInView } from 'framer-motion' +import { useRef, useEffect, useState, useCallback } from 'react' +import AnimatedSection from './AnimatedSection' + +function easeOutExpo(t: number): number { + return t === 1 ? 1 : 1 - Math.pow(2, -10 * t) +} + +function AnimatedCounter({ target, suffix = '' }: { target: number; suffix?: string }) { + const ref = useRef(null) + const isInView = useInView(ref, { once: true, margin: '-60px' }) + const [count, setCount] = useState(0) + + const animate = useCallback(() => { + const duration = 1800 + let start: number | null = null + function step(timestamp: number) { + if (!start) start = timestamp + const elapsed = timestamp - start + const progress = Math.min(elapsed / duration, 1) + setCount(Math.floor(easeOutExpo(progress) * target)) + if (progress < 1) requestAnimationFrame(step) + } + requestAnimationFrame(step) + }, [target]) + + useEffect(() => { + if (isInView) animate() + }, [isInView, animate]) + + return {count}{suffix} +} + +const stats = [ + { value: 0, suffix: '', label: 'tokens injected by MCP server', animated: false, hero: true }, + { value: 54, suffix: '', label: 'tools agents can call on demand', animated: true, hero: false }, + { value: 5, label: 'auto-learning triggers', animated: false, hero: false }, + { value: '4+', label: 'AI agents supported', animated: false, hero: false }, +] + +export default function StatsBar() { + return ( + +

+
+ {stats.map((stat, i) => ( + + {stat.hero && ( +
+ )} +
+ {stat.animated ? ( + + ) : ( + <>{stat.value} + )} +
+

{stat.label}

+ + ))} +
+
+ + ) +} diff --git a/src/components/TokenComparison.tsx b/src/components/TokenComparison.tsx new file mode 100644 index 0000000..712dbf4 --- /dev/null +++ b/src/components/TokenComparison.tsx @@ -0,0 +1,159 @@ +import { motion } from 'framer-motion' +import AnimatedSection from './AnimatedSection' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faCircleXmark, faCircleCheck } from '@fortawesome/pro-regular-svg-icons' + +const fadeUp = (delay: number) => ({ + initial: { opacity: 0, y: 16 } as const, + whileInView: { opacity: 1, y: 0 } as const, + viewport: { once: true } as const, + transition: { duration: 0.5, delay }, +}) + +const staticLines = [ + { label: 'All open tasks (30+ items)', width: '95%' }, + { label: 'Learning Center (10 entries)', width: '82%' }, + { label: 'Git log (5 commits)', width: '68%' }, + { label: 'Full repo metadata', width: '55%' }, +] + +export default function TokenComparison() { + return ( + +
+
+ + THE DIFFERENCE + +

+ Static injection burns tokens before your agent says hello +

+

+ DevFlow’s MCP server injects zero upfront context. Agents fetch exactly what they need, when they need it. +

+
+ +
+ {/* Static / Before */} + +
+ + Static injection +
+ +
+
+
Session start prompt
+ + {staticLines.map((line, i) => ( +
+
{line.label}
+
+
+ ))} + +
3,000–8,000+ tokens
+
+ +
+
+ + Slow first response +
+
+ + Context goes stale mid-session +
+
+ + Burns 4–8% of context window upfront +
+
+
+ + + {/* MCP / After */} + +
+ + MCP lazy load +
+ +
+
+
Session start prompt
+ +
+
Nothing — agents call tools on demand
+
+
+ +
0 tokens injected
+
+ +
+
+ + Instant first response +
+
+ + Live data on every tool call +
+
+ + Write access — agents create tasks, move cards +
+
+
+ +
+ + {/* Three-tier comparison table */} + + + + + + + + + + + + + + + + + + + + + + + + + + +
ApproachTokensWhat’s included
Before optimization3,000–8,000+All tasks, 10 LC entries, commits, metadata
Hard limits800–1,500Top 5 tasks, 3 LC entries, branch name
MCP on-demand0Nothing injected — 54 tools available on demand
+ +
+ + ) +} From 8dab7dc7f1c6c167e1a348d5e04bea4147a8a73f Mon Sep 17 00:00:00 2001 From: Craig Allen Date: Wed, 8 Apr 2026 14:22:17 -0500 Subject: [PATCH 2/6] style(marketing): sharpen pain-point storytelling and section flow --- src/components/Dogfooding.tsx | 2 +- src/components/PricingPreview.tsx | 2 +- src/components/ProblemBar.tsx | 76 ++++++++++++++++++++++++++---- src/components/ProductOverview.tsx | 2 +- src/components/StatsBar.tsx | 2 +- src/components/TokenComparison.tsx | 2 +- 6 files changed, 72 insertions(+), 14 deletions(-) diff --git a/src/components/Dogfooding.tsx b/src/components/Dogfooding.tsx index 9cf91b0..da0adf1 100644 --- a/src/components/Dogfooding.tsx +++ b/src/components/Dogfooding.tsx @@ -2,7 +2,7 @@ import AnimatedSection from './AnimatedSection' export default function Dogfooding() { return ( - +
DOGFOODING diff --git a/src/components/PricingPreview.tsx b/src/components/PricingPreview.tsx index 8144338..7e62e71 100644 --- a/src/components/PricingPreview.tsx +++ b/src/components/PricingPreview.tsx @@ -34,7 +34,7 @@ const plans = [ export default function PricingPreview() { return ( - +
diff --git a/src/components/ProblemBar.tsx b/src/components/ProblemBar.tsx index 74e23c7..c691624 100644 --- a/src/components/ProblemBar.tsx +++ b/src/components/ProblemBar.tsx @@ -1,35 +1,93 @@ +import { motion } from 'framer-motion' import AnimatedSection from './AnimatedSection' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faEyeSlash, faArrowRightArrowLeft, faLightbulb } from '@fortawesome/pro-regular-svg-icons' import type { IconDefinition } from '@fortawesome/fontawesome-svg-core' -const problems: { icon: IconDefinition; text: string }[] = [ +const problems: { icon: IconDefinition; text: string; detail: string }[] = [ { icon: faEyeSlash, text: 'Your AI agents start every session blind', + detail: 'No memory of past decisions, tasks, or context — every conversation starts from zero.', }, { icon: faArrowRightArrowLeft, text: 'Your context lives across 5 different tools', + detail: 'Notes in Notion, tasks in Linear, docs in Confluence — none of it reaches your AI.', }, { icon: faLightbulb, text: 'Your best decisions disappear after the PR merges', + detail: 'Hard-won knowledge evaporates. Next sprint, you rediscover the same lessons.', }, ] +const cardVariants = { + hidden: { opacity: 0, y: 20 }, + visible: (i: number) => ({ + opacity: 1, + y: 0, + transition: { duration: 0.5, delay: i * 0.15, ease: [0.25, 0.1, 0.25, 1] }, + }), +} + export default function ProblemBar() { return ( - -
-
+ + {/* Subtle red-tinted atmospheric glow */} +
+
+ +
+ {/* Section label */} + + + + The problem + +

+ Sound familiar? +

+ + + {/* Problem cards */} +
{problems.map((p, i) => ( -
-
- + + {/* Danger-zone icon badge */} +
+ +
+ +

+ {p.text} +

+

+ {p.detail} +

+ + {/* Subtle corner accent */} +
+
-

{p.text}

-
+ ))}
diff --git a/src/components/ProductOverview.tsx b/src/components/ProductOverview.tsx index 04f24cc..69abecc 100644 --- a/src/components/ProductOverview.tsx +++ b/src/components/ProductOverview.tsx @@ -51,7 +51,7 @@ const surfaces: { title: string; label: string; description: string; icon: IconD export default function ProductOverview() { return ( - +
diff --git a/src/components/StatsBar.tsx b/src/components/StatsBar.tsx index 6466231..1988b62 100644 --- a/src/components/StatsBar.tsx +++ b/src/components/StatsBar.tsx @@ -40,7 +40,7 @@ const stats = [ export default function StatsBar() { return ( - +
{stats.map((stat, i) => ( diff --git a/src/components/TokenComparison.tsx b/src/components/TokenComparison.tsx index 712dbf4..174562c 100644 --- a/src/components/TokenComparison.tsx +++ b/src/components/TokenComparison.tsx @@ -19,7 +19,7 @@ const staticLines = [ export default function TokenComparison() { return ( - +
From e0e5726fd5e0ce97fb55c91f8ba77f1622b223cd Mon Sep 17 00:00:00 2001 From: Craig Allen Date: Wed, 8 Apr 2026 14:23:56 -0500 Subject: [PATCH 3/6] style(marketing): reduce section borders to smooth page transitions --- src/components/FeatureGrid.tsx | 2 +- src/components/MCPDeepDive.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/FeatureGrid.tsx b/src/components/FeatureGrid.tsx index 5c38a3b..65d7896 100644 --- a/src/components/FeatureGrid.tsx +++ b/src/components/FeatureGrid.tsx @@ -59,7 +59,7 @@ const features: { title: string; description: string; icon: IconDefinition }[] = export default function FeatureGrid() { return ( - +
diff --git a/src/components/MCPDeepDive.tsx b/src/components/MCPDeepDive.tsx index 29311b0..077771b 100644 --- a/src/components/MCPDeepDive.tsx +++ b/src/components/MCPDeepDive.tsx @@ -29,7 +29,7 @@ const points = [ export default function MCPDeepDive() { return ( - +
From 9b065adcfb2f7f3c72c218e267eed6e2acc34dde Mon Sep 17 00:00:00 2001 From: Craig Allen Date: Wed, 8 Apr 2026 14:47:08 -0500 Subject: [PATCH 4/6] feat(marketing): make DevFlow workflow and skills feel tangible --- src/App.tsx | 4 + src/components/AppMockup.tsx | 184 +++++++++++++++++++++++++ src/components/FeatureGrid.tsx | 14 +- src/components/Hero.tsx | 15 +- src/components/ProductOverview.tsx | 18 ++- src/components/SkillsShowcase.tsx | 156 +++++++++++++++++++++ src/components/WorkflowShowcase.tsx | 206 ++++++++++++++++++++++++++++ src/index.css | 5 + 8 files changed, 587 insertions(+), 15 deletions(-) create mode 100644 src/components/AppMockup.tsx create mode 100644 src/components/SkillsShowcase.tsx create mode 100644 src/components/WorkflowShowcase.tsx diff --git a/src/App.tsx b/src/App.tsx index 58a3df4..1d83d4b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,7 +3,9 @@ import Hero from './components/Hero' import ProblemBar from './components/ProblemBar' import StatsBar from './components/StatsBar' import ProductOverview from './components/ProductOverview' +import WorkflowShowcase from './components/WorkflowShowcase' import MCPDeepDive from './components/MCPDeepDive' +import SkillsShowcase from './components/SkillsShowcase' import TokenComparison from './components/TokenComparison' import Dogfooding from './components/Dogfooding' import FeatureGrid from './components/FeatureGrid' @@ -18,7 +20,9 @@ export default function App() { + + diff --git a/src/components/AppMockup.tsx b/src/components/AppMockup.tsx new file mode 100644 index 0000000..ea963bc --- /dev/null +++ b/src/components/AppMockup.tsx @@ -0,0 +1,184 @@ +import { motion } from 'framer-motion' + +/* ──────────────────────────────────────────── + Stylised app mockup — suggests the DevFlow + workspace without revealing the actual UI. + Pure CSS shapes, no screenshots. + ──────────────────────────────────────────── */ + +const shimmer = + 'bg-gradient-to-r from-transparent via-white/[0.03] to-transparent bg-[length:200%_100%] animate-[shimmer_3s_ease-in-out_infinite]' + +function Bar({ w, color = 'bg-text-muted/15' }: { w: string; color?: string }) { + return
+} + +function KanbanCard({ delay }: { delay: number }) { + return ( + + + +
+
+ +
+ + ) +} + +function KanbanColumn({ + label, + accent, + cards, + delay, +}: { + label: string + accent: string + cards: number + delay: number +}) { + return ( +
+
+
+ + {label} + + {cards} +
+ {Array.from({ length: cards }).map((_, i) => ( + + ))} +
+ ) +} + +function TerminalLine({ prompt, text, delay }: { prompt: string; text: string; delay: number }) { + return ( + + {prompt} + {text} + + ) +} + +export default function AppMockup() { + return ( +
+ {/* Chrome bar */} +
+
+
+
+ DevFlow +
+ + {/* App body */} +
+ {/* Sidebar */} +
+ {/* Repo selector */} +
+
+ +
+ + {/* Nav items */} + {[ + { active: true, label: 'Kanban' }, + { active: false, label: 'Notes' }, + { active: false, label: 'Learning' }, + { active: false, label: 'Ideas' }, + { active: false, label: 'Workflows' }, + { active: false, label: 'PRs' }, + ].map((item) => ( +
+
+ + {item.label} + +
+ ))} + + {/* Spacer */} +
+ + {/* Agent status */} +
+
+
+ Claude Code +
+ +
+
+ + {/* Main content area */} +
+ {/* Kanban area */} +
+
+ + + + +
+
+ + {/* Terminal strip */} +
+
+
+ {['Claude Code', 'Terminal'].map((tab, i) => ( + + {tab} + + ))} +
+
+ + + +
+
+
+
+ ) +} diff --git a/src/components/FeatureGrid.tsx b/src/components/FeatureGrid.tsx index 65d7896..03739df 100644 --- a/src/components/FeatureGrid.tsx +++ b/src/components/FeatureGrid.tsx @@ -1,7 +1,7 @@ import { motion } from 'framer-motion' import AnimatedSection from './AnimatedSection' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { faServer, faArrowRightArrowLeft, faLightbulb, faGraduationCap, faCodePullRequest, faPlay, faMagnifyingGlass, faClipboardList, faMoon, faCircleCheck } from '@fortawesome/pro-regular-svg-icons' +import { faServer, faArrowRightArrowLeft, faLightbulb, faGraduationCap, faCodePullRequest, faPlay, faMagnifyingGlass, faClipboardList, faMoon, faCircleCheck, faRoute, faWandMagicSparkles } from '@fortawesome/pro-regular-svg-icons' import type { IconDefinition } from '@fortawesome/fontawesome-svg-core' const features: { title: string; description: string; icon: IconDefinition }[] = [ @@ -55,6 +55,16 @@ const features: { title: string; description: string; icon: IconDefinition }[] = description: "We use it. That's the proof.", icon: faCircleCheck, }, + { + title: 'Workflows', + description: 'Goal → AI discussion → phased roadmap', + icon: faRoute, + }, + { + title: 'Skills', + description: 'Auto-discovered slash commands for every agent', + icon: faWandMagicSparkles, + }, ] export default function FeatureGrid() { @@ -66,7 +76,7 @@ export default function FeatureGrid() { FEATURES

- 10 power features + 12 power features

Everything technical leads and small teams need to ship with AI agents. diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx index 299124e..a8aab6f 100644 --- a/src/components/Hero.tsx +++ b/src/components/Hero.tsx @@ -1,5 +1,6 @@ import { motion } from 'framer-motion' import EmailCapture from './EmailCapture' +import AppMockup from './AppMockup' export default function Hero() { return ( @@ -72,22 +73,14 @@ export default function Hero() { Built inside DevFlow. Every feature you see was designed, tracked, and shipped here. - {/* App screenshot placeholder */} + {/* Stylised app mockup */} -

-
-
-
- DevFlow — devflowcode.com -
-
- -
+
diff --git a/src/components/ProductOverview.tsx b/src/components/ProductOverview.tsx index 69abecc..9037b7a 100644 --- a/src/components/ProductOverview.tsx +++ b/src/components/ProductOverview.tsx @@ -1,7 +1,7 @@ import { motion } from 'framer-motion' import AnimatedSection from './AnimatedSection' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { faChartKanban, faServer, faGraduationCap, faLightbulb, faCodePullRequest, faRectangleTerminal } from '@fortawesome/pro-regular-svg-icons' +import { faChartKanban, faServer, faGraduationCap, faLightbulb, faCodePullRequest, faRectangleTerminal, faRoute, faWandMagicSparkles } from '@fortawesome/pro-regular-svg-icons' import type { IconDefinition } from '@fortawesome/fontawesome-svg-core' const surfaces: { title: string; label: string; description: string; icon: IconDefinition }[] = [ @@ -47,6 +47,20 @@ const surfaces: { title: string; label: string; description: string; icon: IconD 'Launch Claude Code, Codex, or Gemini from the terminal tab bar. Sessions auto-detect which agent is running.', icon: faRectangleTerminal, }, + { + title: 'From goal to phased roadmap', + label: 'Workflows', + description: + 'Define a goal. AI surfaces the hard questions. Get a structured, phased plan linked to your kanban.', + icon: faRoute, + }, + { + title: 'Agents that configure themselves', + label: 'Skills', + description: + 'Every MCP tool packaged as a slash command. Agents discover capabilities automatically — zero prompt engineering.', + icon: faWandMagicSparkles, + }, ] export default function ProductOverview() { @@ -58,7 +72,7 @@ export default function ProductOverview() { THE WORKSPACE

- Six surfaces. One workspace. + Eight surfaces. One workspace.

Everything your AI agents need to ship — without you explaining it again. diff --git a/src/components/SkillsShowcase.tsx b/src/components/SkillsShowcase.tsx new file mode 100644 index 0000000..c70fc0a --- /dev/null +++ b/src/components/SkillsShowcase.tsx @@ -0,0 +1,156 @@ +import { motion } from 'framer-motion' +import AnimatedSection from './AnimatedSection' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { + faChartKanban, + faStickyNote, + faGraduationCap, + faLightbulb, + faMagnifyingGlass, + faCodeBranch, + faServer, +} from '@fortawesome/pro-regular-svg-icons' +import type { IconDefinition } from '@fortawesome/fontawesome-svg-core' + +/* ──────────────────────────────────────────── + Skills showcase — shows how DevFlow exposes + structured slash-command skills to AI agents + via MCP, with a stylised mockup of the + agent setup panel. + ──────────────────────────────────────────── */ + +const skills: { cmd: string; label: string; tools: number; icon: IconDefinition }[] = [ + { cmd: '/devflow:tasks', label: 'Tasks', tools: 9, icon: faChartKanban }, + { cmd: '/devflow:notes', label: 'Notes', tools: 6, icon: faStickyNote }, + { cmd: '/devflow:learning', label: 'Learning', tools: 3, icon: faGraduationCap }, + { cmd: '/devflow:ideas', label: 'Ideas', tools: 5, icon: faLightbulb }, + { cmd: '/devflow:search', label: 'Search', tools: 1, icon: faMagnifyingGlass }, + { cmd: '/devflow:git', label: 'Git', tools: 6, icon: faCodeBranch }, + { cmd: '/devflow:context', label: 'Context', tools: 4, icon: faServer }, +] + +function SkillsMockup() { + return ( +

+ {/* Chrome */} +
+
+
+
+ Agent Setup +
+ +
+ {/* Section label */} +
+
+
+ Available Skills +
+ + {skills.reduce((a, s) => a + s.tools, 0)} tools + +
+ + {/* Skill rows */} + {skills.map((skill, i) => ( + +
+ +
+ {skill.cmd} + {skill.tools} tools + + ))} + + {/* Copy button */} +
+
+ + Copy full skill reference + +
+
+
+
+ ) +} + +export default function SkillsShowcase() { + return ( + +
+
+ + SKILLS + +

+ Your agents already know what to call +

+

+ DevFlow packages every MCP tool into slash-command skills that agents discover + automatically. No prompt engineering. No manual config. Just capabilities, ready to use. +

+
+ +
+ {/* Left: explanation */} +
+
+
+

+ Zero-config agent setup +

+

+ Skills group related tools under a single slash command. When an agent connects + via MCP, it sees /devflow:tasks and + instantly knows how to create cards, move them across columns, and add notes — + without you writing a single system prompt. +

+
+ +
+

+ One copy, every agent +

+

+ Claude Code, Codex, Gemini, Windsurf — each gets the same skill reference. + Copy the config once, paste it into your agent's setup, done. When DevFlow + adds new tools, every agent sees them automatically. +

+
+ +
+

+ Not read-only — write access included +

+

+ Agents don't just query your project. They create tasks, log decisions to + the Learning Center, promote ideas to notes, and move kanban cards — all + through the same skill interface. +

+
+
+
+ + {/* Right: stylised mockup */} + + + +
+
+ + ) +} diff --git a/src/components/WorkflowShowcase.tsx b/src/components/WorkflowShowcase.tsx new file mode 100644 index 0000000..ad2e44f --- /dev/null +++ b/src/components/WorkflowShowcase.tsx @@ -0,0 +1,206 @@ +import { motion } from 'framer-motion' +import AnimatedSection from './AnimatedSection' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faPenToSquare, faComments, faListTree, faPlay } from '@fortawesome/pro-regular-svg-icons' +import type { IconDefinition } from '@fortawesome/fontawesome-svg-core' + +/* ──────────────────────────────────────────── + Workflow showcase — explains the GSD flow + with a stylised step visualisation and an + abstract mockup of the workflow UI. + ──────────────────────────────────────────── */ + +const steps: { icon: IconDefinition; label: string; title: string; detail: string }[] = [ + { + icon: faPenToSquare, + label: '01', + title: 'Define', + detail: 'Name your goal and paste an existing plan — or start from scratch.', + }, + { + icon: faComments, + label: '02', + title: 'Discuss', + detail: 'AI surfaces 3–5 targeted questions that expose scope gaps before you write a line of code.', + }, + { + icon: faListTree, + label: '03', + title: 'Structure', + detail: 'Answers become a phased roadmap — each phase linked to kanban cards and design notes.', + }, + { + icon: faPlay, + label: '04', + title: 'Execute', + detail: 'Work the phases. Agents read the plan, pick up context, and ship.', + }, +] + +function WorkflowMockup() { + return ( +
+ {/* Chrome */} +
+
+
+
+ Workflows +
+ +
+ {/* Workflow sidebar */} +
+ {[ + { name: 'Auth rewrite', status: 'bg-[#28c840]', progress: '5/5' }, + { name: 'MCP skills', status: 'bg-indigo', progress: '3/7' }, + { name: 'Onboarding flow', status: 'bg-peach', progress: '0/4' }, + ].map((wf, i) => ( +
+
+ + {wf.name} + + {wf.progress} +
+ ))} +
+ + {/* Phase list */} +
+ {/* Workflow header */} +
+
+
+
+ + {/* Phases */} + {[ + { title: 'Add workflow database tables', status: 'complete' as const }, + { title: 'Build GSD discussion engine', status: 'complete' as const }, + { title: 'Implement phase generation', status: 'active' as const }, + { title: 'Wire up kanban linking', status: 'pending' as const }, + { title: 'Add drag-to-reorder phases', status: 'pending' as const }, + ].map((phase, i) => ( + +
+ {phase.status === 'complete' ? '✓' : i + 1} +
+ + {phase.title} + + {phase.status === 'active' && ( + + IN PROGRESS + + )} + + ))} +
+
+
+ ) +} + +export default function WorkflowShowcase() { + return ( + +
+
+ + WORKFLOWS + +

+ From vague goal to phased roadmap in minutes +

+

+ Workflows turn "I want to build X" into structured phases — with AI surfacing + the questions you'd forget to ask until week two. +

+
+ +
+ {/* Left: 4-step GSD flow */} +
+ {steps.map((step, i) => ( + + {/* Step number + icon */} +
+
+ +
+ {/* Connector line */} + {i < steps.length - 1 && ( +
+ )} +
+ + {/* Text */} +
+
+ {step.label} +

{step.title}

+
+

{step.detail}

+
+ + ))} +
+ + {/* Right: stylised workflow mockup */} + + + +
+
+ + ) +} diff --git a/src/index.css b/src/index.css index bc31f7c..98445e6 100644 --- a/src/index.css +++ b/src/index.css @@ -37,3 +37,8 @@ body { background-color: var(--color-indigo); color: white; } + +@keyframes shimmer { + 0% { background-position: 200% 0; } + 100% { background-position: -200% 0; } +} From 6a3cace5476e8fe5e83f9de3e7ab64d276f6c3d1 Mon Sep 17 00:00:00 2001 From: Craig Allen Date: Wed, 8 Apr 2026 14:48:21 -0500 Subject: [PATCH 5/6] feat(marketing): point GitHub nav links to the product README --- src/components/FooterCTA.tsx | 8 ++++++-- src/components/Navbar.tsx | 8 ++++++-- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/components/FooterCTA.tsx b/src/components/FooterCTA.tsx index 474bce9..c081efa 100644 --- a/src/components/FooterCTA.tsx +++ b/src/components/FooterCTA.tsx @@ -23,7 +23,11 @@ export default function FooterCTA() {