diff --git a/apps/web-roo-code/src/app/page.tsx b/apps/web-roo-code/src/app/page.tsx index f7ac47cf93e..8803857345e 100644 --- a/apps/web-roo-code/src/app/page.tsx +++ b/apps/web-roo-code/src/app/page.tsx @@ -1,15 +1,10 @@ -import { Button } from "@/components/ui" +import { Testimonials, FAQSection } from "@/components/homepage" import { - CompanyLogos, - FAQSection, - Testimonials, - CTASection, - OptionOverviewSection, - PillarsSection, - UseExamplesSection, -} from "@/components/homepage" -import { EXTERNAL_LINKS } from "@/lib/constants" -import { ArrowRight } from "lucide-react" + OpenClawHero, + OpenClawIntegrationSection, + OpenClawDeveloperSection, + OpenClawCTASection, +} from "@/components/homepage/openclaw" import { StructuredData } from "@/components/structured-data" // Invalidate cache when a request comes in, at most once every hour. @@ -19,64 +14,12 @@ export default async function Home() { return ( <> -
-
-
-
-
-

- Your AI Software Engineering Team is here. -
- Interactive in the IDE, autonomous in the cloud. -

-
-

- Use the Roo Code Extension on your computer for - full control, or delegate work to your{" "} - Roo Code Cloud Agents from the web, Slack, Github - or wherever your team is. -

-
-
-
- - Free and Open Source -
- -
- - No credit card needed -
-
- -
- -
-
-
- - - - + + + - + ) } diff --git a/apps/web-roo-code/src/components/homepage/openclaw/index.ts b/apps/web-roo-code/src/components/homepage/openclaw/index.ts new file mode 100644 index 00000000000..b37e0c41ba6 --- /dev/null +++ b/apps/web-roo-code/src/components/homepage/openclaw/index.ts @@ -0,0 +1,4 @@ +export { OpenClawHero } from "./openclaw-hero" +export { OpenClawIntegrationSection } from "./openclaw-integration-section" +export { OpenClawDeveloperSection } from "./openclaw-developer-section" +export { OpenClawCTASection } from "./openclaw-cta-section" diff --git a/apps/web-roo-code/src/components/homepage/openclaw/openclaw-cta-section.tsx b/apps/web-roo-code/src/components/homepage/openclaw/openclaw-cta-section.tsx new file mode 100644 index 00000000000..f93b399d967 --- /dev/null +++ b/apps/web-roo-code/src/components/homepage/openclaw/openclaw-cta-section.tsx @@ -0,0 +1,89 @@ +"use client" + +import { motion } from "framer-motion" +import { ArrowRight, Download } from "lucide-react" +import { Button } from "@/components/ui" +import { EXTERNAL_LINKS } from "@/lib/constants" + +export function OpenClawCTASection() { + return ( +
+ {/* Background gradient */} +
+
+
+
+ +
+ +

+ The AI stack that{" "} + + does it all + +

+

+ Start coding with Roo. Start automating with OpenClaw. Start shipping with both. +

+ + + + + + + + + + + + Roo Code is free and open source. OpenClaw offers a generous free tier. No credit card needed. + +
+
+ ) +} diff --git a/apps/web-roo-code/src/components/homepage/openclaw/openclaw-developer-section.tsx b/apps/web-roo-code/src/components/homepage/openclaw/openclaw-developer-section.tsx new file mode 100644 index 00000000000..e2edae6b43d --- /dev/null +++ b/apps/web-roo-code/src/components/homepage/openclaw/openclaw-developer-section.tsx @@ -0,0 +1,154 @@ +"use client" + +import { motion } from "framer-motion" +import { Terminal, Puzzle, Rocket, Globe, MessageSquare, Sparkles } from "lucide-react" + +const STEPS = [ + { + step: "01", + icon: Terminal, + title: "Build with Roo Code", + description: + "Use Roo Code in your IDE or Cloud to build custom OpenClaw skills, automations, and integrations. Roo understands your codebase and OpenClaw's API.", + color: "violet" as const, + }, + { + step: "02", + icon: Puzzle, + title: "Connect via MCP", + description: + "Roo Code's Model Context Protocol bridges both platforms. Your OpenClaw automations get access to your dev tools, repos, and infrastructure context.", + color: "mixed" as const, + }, + { + step: "03", + icon: Rocket, + title: "Deploy & Automate", + description: + "Ship your custom skills to OpenClaw. Now your team can trigger complex dev workflows from WhatsApp, Telegram, or any chat app they already use.", + color: "amber" as const, + }, +] + +const USE_CASES = [ + { + icon: MessageSquare, + title: '"Deploy staging" from WhatsApp', + description: "Type a message, OpenClaw triggers Roo Code Cloud, staging goes live.", + }, + { + icon: Globe, + title: "Auto-localize on merge", + description: "When a PR merges, Roo translates strings and OpenClaw notifies translators.", + }, + { + icon: Sparkles, + title: "Bug triage from Telegram", + description: "Paste a stack trace in chat. OpenClaw routes it, Roo Code diagnoses it.", + }, +] + +const fadeInUp = { + initial: { opacity: 0, y: 20 }, + whileInView: { opacity: 1, y: 0 }, + viewport: { once: true, margin: "-50px" }, +} + +const colorMap = { + violet: { + bg: "bg-violet-500/10 dark:bg-violet-500/20", + text: "text-violet-600 dark:text-violet-400", + border: "border-violet-500/20", + line: "bg-violet-500", + }, + amber: { + bg: "bg-amber-500/10 dark:bg-amber-500/20", + text: "text-amber-600 dark:text-amber-400", + border: "border-amber-500/20", + line: "bg-amber-500", + }, + mixed: { + bg: "bg-gradient-to-br from-violet-500/10 to-amber-500/10 dark:from-violet-500/20 dark:to-amber-500/20", + text: "text-foreground", + border: "border-foreground/10", + line: "bg-gradient-to-b from-violet-500 to-amber-500", + }, +} + +export function OpenClawDeveloperSection() { + return ( +
+
+ {/* Section header */} + +

+ How developers use them together +

+

+ Build OpenClaw automations with Roo Code. Ship AI-powered workflows that go beyond the terminal. +

+ + + {/* Steps */} +
+ {STEPS.map((step, index) => { + const Icon = step.icon + const colors = colorMap[step.color] + return ( + + {/* Connector line */} + {index < STEPS.length - 1 && ( +
+
+
+ )} + +
+
+ +
+
+ + Step {step.step} + +

{step.title}

+

{step.description}

+
+
+ + ) + })} +
+ + {/* Quick use cases */} + +

Things you can build today

+ + +
+ {USE_CASES.map((useCase, index) => { + const Icon = useCase.icon + return ( + +
+ +
+

{useCase.title}

+

{useCase.description}

+ + ) + })} +
+
+
+ ) +} diff --git a/apps/web-roo-code/src/components/homepage/openclaw/openclaw-hero.tsx b/apps/web-roo-code/src/components/homepage/openclaw/openclaw-hero.tsx new file mode 100644 index 00000000000..4b3aed82ca8 --- /dev/null +++ b/apps/web-roo-code/src/components/homepage/openclaw/openclaw-hero.tsx @@ -0,0 +1,151 @@ +"use client" + +import { motion } from "framer-motion" +import { ArrowRight, Zap } from "lucide-react" +import { Button } from "@/components/ui" +import { EXTERNAL_LINKS } from "@/lib/constants" + +export function OpenClawHero() { + return ( +
+ {/* Dual gradient glow - violet for Roo, amber for OpenClaw */} +
+
+
+
+
+ +
+ {/* Partnership badge */} + +
+ + New Integration + | + Roo Code + OpenClaw +
+ + + {/* Co-branded logos */} + +
+
+ 🦘 +
+ Roo Code +
+ + + + + + +
+
+ 🦞 +
+ OpenClaw +
+ + + {/* Main headline */} + + Code it.{" "} + + Ship it. + {" "} + + Automate it. + + + + {/* Sub-headline */} + +

+ Roo Code builds your software.{" "} + OpenClaw automates everything else. Together, + they're the AI stack that handles{" "} + code to calendar. +

+ + + {/* CTAs */} + +
+ + See how they work together +
+ +
+ + The AI that actually does things +
+ + + {/* Stats bar */} + +
+
+ + Roo Code — AI coding in IDE & Cloud + +
+
+
+ + OpenClaw — AI actions via any chat app + +
+
+
+ + Together — from code to real-world action + +
+ +
+
+ ) +} diff --git a/apps/web-roo-code/src/components/homepage/openclaw/openclaw-integration-section.tsx b/apps/web-roo-code/src/components/homepage/openclaw/openclaw-integration-section.tsx new file mode 100644 index 00000000000..e9c0f1b4fee --- /dev/null +++ b/apps/web-roo-code/src/components/homepage/openclaw/openclaw-integration-section.tsx @@ -0,0 +1,239 @@ +"use client" + +import { motion } from "framer-motion" +import { + Code, + MessageSquare, + GitPullRequest, + Smartphone, + Mail, + Calendar, + Plane, + ArrowRight, + Zap, + Bot, + Workflow, +} from "lucide-react" + +const ROO_CAPABILITIES = [ + { + icon: Code, + title: "Build & Ship Code", + description: "Write features, fix bugs, and deploy from your IDE or Cloud", + }, + { + icon: GitPullRequest, + title: "Automate PRs & Reviews", + description: "AI agents that review, fix, and merge pull requests", + }, + { + icon: Bot, + title: "Cloud Agent Teams", + description: "Delegate coding tasks from Slack, GitHub, or the web", + }, +] + +const OPENCLAW_CAPABILITIES = [ + { + icon: Mail, + title: "Manage Email & Inbox", + description: "Clears your inbox, drafts replies, sends follow-ups", + }, + { + icon: Calendar, + title: "Handle Scheduling", + description: "Manages your calendar, books meetings, resolves conflicts", + }, + { + icon: Plane, + title: "Real-World Actions", + description: "Checks you in for flights, orders food, handles errands", + }, +] + +const INTEGRATION_SCENARIOS = [ + { + trigger: "A bug report lands in Slack", + rooAction: "Roo Code investigates the codebase, identifies the fix, and opens a PR", + openclawAction: "OpenClaw notifies the reporter on WhatsApp and reschedules the affected demo", + icon: MessageSquare, + }, + { + trigger: "You ship a new feature", + rooAction: "Roo Code Cloud agents handle the review, testing, and merge", + openclawAction: "OpenClaw emails the changelog to stakeholders and updates the project tracker", + icon: Workflow, + }, + { + trigger: "A deploy fails at 2am", + rooAction: "Roo Code diagnoses the failure, applies the fix, and re-deploys", + openclawAction: "OpenClaw texts the on-call engineer and reschedules the morning standup", + icon: Zap, + }, +] + +const fadeInUp = { + initial: { opacity: 0, y: 20 }, + whileInView: { opacity: 1, y: 0 }, + viewport: { once: true, margin: "-50px" }, +} + +export function OpenClawIntegrationSection() { + return ( +
+ {/* Background glow */} +
+
+
+
+ +
+ {/* Section header */} + +

+ Two AIs. One workflow.{" "} + + Zero gaps. + +

+

+ Roo Code handles the engineering. OpenClaw handles the everything else. Connected through MCP, + they keep your whole operation moving. +

+ + + {/* Side-by-side capabilities */} +
+ {/* Roo Code side */} + +
+ + + Roo Code + +
+

The coding half

+

+ Your AI software engineering team, in the IDE and the cloud. +

+
+ {ROO_CAPABILITIES.map((cap) => { + const Icon = cap.icon + return ( +
+
+ +
+
+

{cap.title}

+

{cap.description}

+
+
+ ) + })} +
+ + + {/* OpenClaw side */} + +
+ + + OpenClaw + +
+

The action half

+

+ The AI that actually does things, from any chat app you already use. +

+
+ {OPENCLAW_CAPABILITIES.map((cap) => { + const Icon = cap.icon + return ( +
+
+ +
+
+

{cap.title}

+

{cap.description}

+
+
+ ) + })} +
+ +
+ + {/* Integration flow - "When they work together" */} + +

When they work together

+

+ Real scenarios where the integration saves you hours. +

+ + +
+ {INTEGRATION_SCENARIOS.map((scenario, index) => { + const Icon = scenario.icon + return ( + + {/* Trigger */} +
+
+ +
+
+ + Trigger + +

{scenario.trigger}

+
+
+ + {/* Actions */} +
+
+
+
+ 🦘 +
+ + Roo Code + + +
+

{scenario.rooAction}

+
+ +
+
+
+ 🦞 +
+ + OpenClaw + + +
+

{scenario.openclawAction}

+
+
+ + ) + })} +
+
+
+ ) +}