Skip to content

feat(web): Roo Code x OpenClaw homepage takeover mockup #11266

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
roomote wants to merge 2 commits into
base: main
Choose a base branch
from
+647 −67
Draft

feat(web): Roo Code x OpenClaw homepage takeover mockup #11266

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8d42663
feat(web): homepage takeover for Roo Code x OpenClaw integration
roomote Feb 6, 2026
1149f26
feat(web): use kangaroo and lobster emoji for brand logos
roomote Feb 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 10 additions & 67 deletions apps/web-roo-code/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -19,64 +14,12 @@ export default async function Home() {
return (
<>
<StructuredData />
<section className="relative flex flex-col items-center overflow-hidden pt-20 pb-12 md:pt-32 md:pb-16">
<div className="absolute inset-y-0 left-1/2 h-full w-full max-w-[1200px] -translate-x-1/2 z-1">
<div className="absolute left-1/2 top-1/2 h-[400px] w-full -translate-x-1/2 -translate-y-1/2 rounded-full bg-violet-500/10 dark:bg-violet-700/20 blur-[140px]" />
</div>
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center text-center">
<h1 className="text-3xl md:text-4xl font-bold tracking-tight text-foreground max-w-4xl mb-6">
Your AI Software Engineering Team is here.
<br />
<span className="text-muted-foreground">Interactive in the IDE, autonomous in the cloud.</span>
</h1>
<div className="mt-2 max-w-3xl text-lg text-muted-foreground mb-10 space-y-3">
<p>
Use the <strong className="text-nowrap">Roo Code Extension</strong> on your computer for
full control, or delegate work to your{" "}
<strong className="text-nowrap">Roo Code Cloud Agents</strong> from the web, Slack, Github
or wherever your team is.
</p>
</div>
<div className="flex flex-col sm:flex-row gap-4 mb-16">
<div className="flex flex-col items-center gap-2">
<Button size="xl" className="w-full">
<a
href={EXTERNAL_LINKS.MARKETPLACE}
target="_blank"
rel="noreferrer"
className="flex items-center justify-center">
Install VS Code Extension
<ArrowRight className="ml-2 size-5" />
</a>
</Button>
<span className="text-xs text-muted-foreground">Free and Open Source</span>
</div>

<div className="flex flex-col items-center gap-2">
<Button size="xl" className="w-full">
<a
href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP_HOME}
className="flex items-center justify-center">
Try Cloud for Free
<ArrowRight className="ml-2 size-5" />
</a>
</Button>
<span className="text-xs text-muted-foreground">No credit card needed</span>
</div>
</div>

<div className="mb-12 px-4">
<CompanyLogos />
</div>
</div>
</section>

<PillarsSection />
<OptionOverviewSection />
<UseExamplesSection />
<OpenClawHero />
<OpenClawIntegrationSection />
<OpenClawDeveloperSection />
<Testimonials />
<FAQSection />
<CTASection />
<OpenClawCTASection />
</>
)
}
4 changes: 4 additions & 0 deletions apps/web-roo-code/src/components/homepage/openclaw/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
89 changes: 89 additions & 0 deletions apps/web-roo-code/src/components/homepage/openclaw/openclaw-cta-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<section className="py-24 relative overflow-hidden">
{/* Background gradient */}
<div className="absolute inset-0">
<div className="absolute left-1/3 top-1/2 h-[500px] w-[400px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-violet-500/10 dark:bg-violet-600/15 blur-[140px]" />
<div className="absolute right-1/3 top-1/2 h-[500px] w-[400px] translate-x-1/2 -translate-y-1/2 rounded-full bg-amber-500/10 dark:bg-amber-600/15 blur-[140px]" />
</div>

<div className="container px-4 mx-auto sm:px-6 lg:px-8 text-center relative z-10">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6 }}>
<h2 className="text-3xl font-bold tracking-tight sm:text-5xl mb-4">
The AI stack that{" "}
<span className="bg-gradient-to-r from-violet-600 to-amber-500 bg-clip-text text-transparent">
does it all
</span>
</h2>
<p className="text-xl text-muted-foreground max-w-2xl mx-auto mb-10">
Start coding with Roo. Start automating with OpenClaw. Start shipping with both.
</p>
</motion.div>

<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.2 }}
className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-8">
<Button
size="lg"
className="w-full sm:w-auto h-12 px-8 text-base bg-violet-600 hover:bg-violet-600/80">
<a
href={EXTERNAL_LINKS.MARKETPLACE}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2">
<Download className="h-4 w-4" />
Install Roo Code
</a>
</Button>

<Button
size="lg"
className="w-full sm:w-auto h-12 px-8 text-base bg-gradient-to-r from-amber-500 to-orange-600 hover:from-amber-500/90 hover:to-orange-600/90 text-white border-0">
<a
href="https://openclaw.ai"
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2">
Try OpenClaw
<ArrowRight className="h-4 w-4" />
</a>
</Button>

<Button variant="outline" size="lg" className="w-full sm:w-auto h-12 px-8 text-base">
<a
href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2">
Roo Code Cloud
<ArrowRight className="h-4 w-4" />
</a>
</Button>
</motion.div>

<motion.p
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.4 }}
className="text-sm text-muted-foreground">
Roo Code is free and open source. OpenClaw offers a generous free tier. No credit card needed.
</motion.p>
</div>
</section>
)
}
154 changes: 154 additions & 0 deletions apps/web-roo-code/src/components/homepage/openclaw/openclaw-developer-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 className="py-24 bg-background relative overflow-hidden">
<div className="container px-4 mx-auto sm:px-6 lg:px-8">
{/* Section header */}
<motion.div {...fadeInUp} transition={{ duration: 0.6 }} className="text-center mb-16">
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl mb-4">
How developers use them together
</h2>
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
Build OpenClaw automations with Roo Code. Ship AI-powered workflows that go beyond the terminal.
</p>
</motion.div>

{/* Steps */}
<div className="max-w-3xl mx-auto mb-20">
{STEPS.map((step, index) => {
const Icon = step.icon
const colors = colorMap[step.color]
return (
<motion.div
key={step.step}
{...fadeInUp}
transition={{ duration: 0.5, delay: 0.1 * index }}
className="relative">
{/* Connector line */}
{index < STEPS.length - 1 && (
<div className="absolute left-6 top-16 bottom-0 w-0.5">
<div className={`w-full h-full ${colors.line} opacity-20`} />
</div>
)}

<div className="flex gap-5 pb-12">
<div
className={`size-12 rounded-xl ${colors.bg} flex items-center justify-center shrink-0 border ${colors.border}`}>
<Icon className={`size-6 ${colors.text}`} />
</div>
<div>
<span className={`text-xs font-bold uppercase tracking-wider ${colors.text}`}>
Step {step.step}
</span>
<h3 className="text-xl font-bold mt-1 mb-2">{step.title}</h3>
<p className="text-muted-foreground leading-relaxed">{step.description}</p>
</div>
</div>
</motion.div>
)
})}
</div>

{/* Quick use cases */}
<motion.div {...fadeInUp} transition={{ duration: 0.6 }} className="text-center mb-10">
<h3 className="text-xl font-bold">Things you can build today</h3>
</motion.div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
{USE_CASES.map((useCase, index) => {
const Icon = useCase.icon
return (
<motion.div
key={useCase.title}
{...fadeInUp}
transition={{ duration: 0.5, delay: 0.1 * index }}
className="rounded-xl bg-card outline outline-border/50 p-6 hover:shadow-lg transition-shadow text-center">
<div className="size-12 rounded-xl bg-gradient-to-br from-violet-500/10 to-amber-500/10 dark:from-violet-500/20 dark:to-amber-500/20 flex items-center justify-center mx-auto mb-4">
<Icon className="size-6 text-foreground/70" />
</div>
<h4 className="font-semibold text-sm mb-2">{useCase.title}</h4>
<p className="text-sm text-muted-foreground">{useCase.description}</p>
</motion.div>
)
})}
</div>
</div>
</section>
)
}
Loading
Loading