From db4ea019ef6b10cf9d0abb8473dff72a483c401b Mon Sep 17 00:00:00 2001 From: Roo Code Date: Tue, 27 Jan 2026 21:58:32 +0000 Subject: [PATCH 1/4] feat(marketing): add Linear integration page - Create /linear marketing page mirroring /slack patterns - Add LinearIssueDemo animated component showing issue-to-PR workflow - Add "Roo Code for Linear" to Product dropdown in nav-bar (desktop + mobile) - Use @Roo Code terminology (not @Roomote) - Include SEO metadata, OpenGraph, and Twitter card support - Demo section has id="demo" with video placeholder for when YouTube ID is available - CTAs link to CLOUD_APP_SIGNUP_HOME (hero) and CLOUD_APP_TEAM_TRIAL (final CTA) Closes MKT-4 --- apps/web-roo-code/src/app/linear/page.tsx | 430 +++++++++++++++ .../src/components/chromes/nav-bar.tsx | 25 + .../components/linear/linear-issue-demo.tsx | 517 ++++++++++++++++++ 3 files changed, 972 insertions(+) create mode 100644 apps/web-roo-code/src/app/linear/page.tsx create mode 100644 apps/web-roo-code/src/components/linear/linear-issue-demo.tsx diff --git a/apps/web-roo-code/src/app/linear/page.tsx b/apps/web-roo-code/src/app/linear/page.tsx new file mode 100644 index 00000000000..e163edb7cd9 --- /dev/null +++ b/apps/web-roo-code/src/app/linear/page.tsx @@ -0,0 +1,430 @@ +import { + ArrowRight, + CheckCircle, + CreditCard, + Eye, + GitBranch, + GitPullRequest, + Link2, + MessageSquare, + Settings, + Shield, + Users, + Zap, +} from "lucide-react" +import type { LucideIcon } from "lucide-react" +import type { Metadata } from "next" + +import { AnimatedBackground } from "@/components/homepage" +import { LinearIssueDemo } from "@/components/linear/linear-issue-demo" +import { Button } from "@/components/ui" +import { EXTERNAL_LINKS } from "@/lib/constants" +import { SEO } from "@/lib/seo" +import { ogImageUrl } from "@/lib/og" + +const TITLE = "Roo Code for Linear" +const DESCRIPTION = "Assign development work to @Roo Code directly from Linear. Get PRs back without switching tools." +const OG_DESCRIPTION = "Turn Linear Issues into Pull Requests" +const PATH = "/linear" + +// Leave empty until video is ready - shows placeholder instead of broken iframe +const LINEAR_DEMO_YOUTUBE_ID = "" + +export const metadata: Metadata = { + title: TITLE, + description: DESCRIPTION, + alternates: { + canonical: `${SEO.url}${PATH}`, + }, + openGraph: { + title: TITLE, + description: DESCRIPTION, + url: `${SEO.url}${PATH}`, + siteName: SEO.name, + images: [ + { + url: ogImageUrl(TITLE, OG_DESCRIPTION), + width: 1200, + height: 630, + alt: TITLE, + }, + ], + locale: SEO.locale, + type: "website", + }, + twitter: { + card: SEO.twitterCard, + title: TITLE, + description: DESCRIPTION, + images: [ogImageUrl(TITLE, OG_DESCRIPTION)], + }, + keywords: [ + ...SEO.keywords, + "linear integration", + "issue to PR", + "AI in Linear", + "engineering workflow automation", + "Roo Code Cloud", + ], +} + +// Invalidate cache when a request comes in, at most once every hour. +export const revalidate = 3600 + +type ValueProp = { + icon: LucideIcon + title: string + description: string +} + +const VALUE_PROPS: ValueProp[] = [ + { + icon: GitBranch, + title: "Work where you already work.", + description: + "Assign development work to @Roo Code directly from Linear. No new tools to learn, no context switching required.", + }, + { + icon: Eye, + title: "Progress is visible.", + description: + "Watch progress unfold in real-time. Roo Code posts updates as comments, so your whole team stays in the loop.", + }, + { + icon: MessageSquare, + title: "Mention for refinement.", + description: + 'Need changes? Just comment "@Roo Code also add dark mode support" and the agent picks up where it left off.', + }, + { + icon: Users, + title: "Consultation mode.", + description: + "Not every issue needs code. Ask @Roo Code to analyze, explain, or recommend approaches without opening a PR.", + }, + { + icon: Link2, + title: "Full traceability.", + description: + "Every PR links back to the originating issue. Every issue shows its linked PR. Your audit trail stays clean.", + }, + { + icon: Settings, + title: "Organization-level setup.", + description: + "Connect once, use everywhere. Your team members can assign issues to @Roo Code without individual configuration.", + }, + { + icon: Shield, + title: "Safe by design.", + description: + "Agents never touch main/master directly. They produce branches and PRs. You review and approve before merge.", + }, +] + +type WorkflowStep = { + step: number + title: string + description: string +} + +const WORKFLOW_STEPS: WorkflowStep[] = [ + { + step: 1, + title: "Create an issue", + description: "Write your issue with acceptance criteria. Be as detailed as you like.", + }, + { + step: 2, + title: "Assign to Roo Code", + description: "Set the assignee to Roo Code. The agent starts working immediately.", + }, + { + step: 3, + title: "Watch progress", + description: "Roo Code posts status updates as comments. Refine with @-mentions if needed.", + }, + { + step: 4, + title: "Review the PR", + description: "When ready, the PR link appears in the issue. Review, iterate, and ship.", + }, +] + +type OnboardingStep = { + icon: LucideIcon + title: string + description: string + link?: { + href: string + text: string + } +} + +const ONBOARDING_STEPS: OnboardingStep[] = [ + { + icon: CreditCard, + title: "1. Team Plan", + description: "Linear integration requires a Team plan.", + link: { + href: EXTERNAL_LINKS.CLOUD_APP_TEAM_TRIAL, + text: "Start a free trial", + }, + }, + { + icon: GitPullRequest, + title: "2. Connect GitHub", + description: "Link your repositories so Roo Code can open PRs on your behalf.", + }, + { + icon: Settings, + title: "3. Connect Linear", + description: "Authorize via OAuth. No API keys to manage or rotate.", + }, + { + icon: CheckCircle, + title: "4. Link & Start", + description: "Map your Linear project to a repo, then assign or mention @Roo Code.", + }, +] + +function LinearIcon({ className }: { className?: string }) { + return ( + + + + + + + + + ) +} + +export default function LinearPage(): JSX.Element { + return ( + <> + {/* Hero Section */} +
+ +
+
+
+
+ + Powered by Roo Code Cloud +
+

+ Turn Linear Issues into Pull Requests +

+

+ Assign development work to @Roo Code directly from Linear. Get PRs back without + switching tools. +

+ +
+ +
+ +
+
+
+
+ + {/* Value Props Section */} +
+
+
+
+
+
+

+ Why your team will love using Roo Code in Linear +

+

+ AI agents that understand context, keep your team in the loop, and deliver PRs you can + review. +

+
+
+ {VALUE_PROPS.map((prop, index) => { + const Icon = prop.icon + return ( +
+
+ +
+

{prop.title}

+

{prop.description}

+
+ ) + })} +
+
+
+ + {/* Featured Workflow Section */} +
+
+
+
+
+ +
+
+ + Featured Workflow +
+

Issue to Shipped Feature

+

+ Stay in Linear from assignment to review. Roo Code keeps the issue updated and links the PR + when it's ready. +

+
+ +
+
+ {/* YouTube Video Embed or Placeholder */} +
+ {LINEAR_DEMO_YOUTUBE_ID ? ( +