mirror of
https://github.com/RooVetGit/Roo-Code.git
synced 2026-09-07 08:26:51 +00:00
feat(web): homepage takeover for Roo Code x OpenClaw integration
This commit is contained in:
Roo Code
parent
78e64115e8
commit
8d4266315c
6 changed files with 647 additions and 67 deletions
|
|
@ -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 (
|
||||
<>
|
||||
<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 />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<section className="relative flex flex-col items-center overflow-hidden pt-20 pb-16 md:pt-32 md:pb-24">
|
||||
{/* Dual gradient glow - violet for Roo, amber for OpenClaw */}
|
||||
<div className="absolute inset-y-0 left-1/2 h-full w-full max-w-[1400px] -translate-x-1/2 z-1">
|
||||
<div className="absolute left-1/3 top-1/2 h-[500px] w-[600px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-violet-500/15 dark:bg-violet-600/25 blur-[160px]" />
|
||||
<div className="absolute right-1/3 top-1/2 h-[500px] w-[600px] translate-x-1/2 -translate-y-1/2 rounded-full bg-amber-500/15 dark:bg-amber-600/20 blur-[160px]" />
|
||||
<div className="absolute left-1/2 top-1/2 h-[300px] w-[400px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-orange-400/10 dark:bg-orange-500/15 blur-[120px]" />
|
||||
</div>
|
||||
|
||||
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center text-center">
|
||||
{/* Partnership badge */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, ease: "easeOut" }}
|
||||
className="mb-8">
|
||||
<div className="inline-flex items-center gap-2 rounded-full border border-amber-500/30 bg-amber-500/5 dark:bg-amber-500/10 px-4 py-2 text-sm font-medium text-amber-700 dark:text-amber-400">
|
||||
<Zap className="size-4" />
|
||||
<span>New Integration</span>
|
||||
<span className="mx-1 text-amber-500/40">|</span>
|
||||
<span>Roo Code + OpenClaw</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Co-branded logos */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.6, delay: 0.1, ease: "easeOut" }}
|
||||
className="flex items-center gap-4 mb-8">
|
||||
<div className="flex items-center gap-3 rounded-2xl bg-card/80 backdrop-blur-sm border border-border/50 shadow-lg px-5 py-3">
|
||||
<div className="size-10 rounded-xl bg-violet-600 flex items-center justify-center text-white font-bold text-lg shadow-md">
|
||||
R
|
||||
</div>
|
||||
<span className="text-lg font-semibold">Roo Code</span>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
animate={{ rotate: [0, 5, -5, 0] }}
|
||||
transition={{ duration: 2, repeat: Infinity, repeatDelay: 3 }}
|
||||
className="text-2xl font-bold text-muted-foreground/60">
|
||||
+
|
||||
</motion.div>
|
||||
|
||||
<div className="flex items-center gap-3 rounded-2xl bg-card/80 backdrop-blur-sm border border-border/50 shadow-lg px-5 py-3">
|
||||
<div className="size-10 rounded-xl bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center text-white font-bold text-lg shadow-md">
|
||||
O
|
||||
</div>
|
||||
<span className="text-lg font-semibold">OpenClaw</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Main headline */}
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2, ease: "easeOut" }}
|
||||
className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-foreground max-w-5xl mb-6 leading-tight">
|
||||
Code it.{" "}
|
||||
<span className="bg-gradient-to-r from-violet-600 to-violet-500 bg-clip-text text-transparent">
|
||||
Ship it.
|
||||
</span>{" "}
|
||||
<span className="bg-gradient-to-r from-amber-500 to-orange-500 bg-clip-text text-transparent">
|
||||
Automate it.
|
||||
</span>
|
||||
</motion.h1>
|
||||
|
||||
{/* Sub-headline */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.3, ease: "easeOut" }}
|
||||
className="mt-2 max-w-3xl text-lg md:text-xl text-muted-foreground mb-10 space-y-3">
|
||||
<p>
|
||||
<strong className="text-foreground">Roo Code</strong> builds your software.{" "}
|
||||
<strong className="text-foreground">OpenClaw</strong> automates everything else. Together,
|
||||
they're the AI stack that handles{" "}
|
||||
<span className="text-foreground font-medium">code to calendar</span>.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* CTAs */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.4, ease: "easeOut" }}
|
||||
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 bg-gradient-to-r from-violet-600 to-amber-500 hover:from-violet-600/90 hover:to-amber-500/90 text-white border-0 shadow-lg shadow-violet-500/20">
|
||||
<a href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP_HOME} className="flex items-center justify-center">
|
||||
Explore the Integration
|
||||
<ArrowRight className="ml-2 size-5" />
|
||||
</a>
|
||||
</Button>
|
||||
<span className="text-xs text-muted-foreground">See how they work together</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<Button size="xl" variant="outline" className="w-full">
|
||||
<a
|
||||
href="https://openclaw.ai"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="flex items-center justify-center">
|
||||
Meet OpenClaw
|
||||
<ArrowRight className="ml-2 size-5" />
|
||||
</a>
|
||||
</Button>
|
||||
<span className="text-xs text-muted-foreground">The AI that actually does things</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Stats bar */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.5, ease: "easeOut" }}
|
||||
className="flex flex-wrap items-center justify-center gap-8 text-sm text-muted-foreground">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="size-2 rounded-full bg-violet-500" />
|
||||
<span>
|
||||
<strong className="text-foreground">Roo Code</strong> — AI coding in IDE & Cloud
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="size-2 rounded-full bg-amber-500" />
|
||||
<span>
|
||||
<strong className="text-foreground">OpenClaw</strong> — AI actions via any chat app
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="size-2 rounded-full bg-gradient-to-r from-violet-500 to-amber-500" />
|
||||
<span>
|
||||
<strong className="text-foreground">Together</strong> — from code to real-world action
|
||||
</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<section className="py-24 bg-muted/30 relative overflow-hidden">
|
||||
{/* Background glow */}
|
||||
<div className="absolute inset-y-0 left-1/2 h-full w-full max-w-[1200px] -translate-x-1/2">
|
||||
<div className="absolute left-1/4 top-1/3 h-[600px] w-[400px] rounded-full bg-violet-500/5 dark:bg-violet-600/10 blur-[140px]" />
|
||||
<div className="absolute right-1/4 bottom-1/3 h-[600px] w-[400px] rounded-full bg-amber-500/5 dark:bg-amber-600/10 blur-[140px]" />
|
||||
</div>
|
||||
|
||||
<div className="container px-4 mx-auto sm:px-6 lg:px-8 relative z-10">
|
||||
{/* Section header */}
|
||||
<motion.div {...fadeInUp} transition={{ duration: 0.6 }} className="text-center mb-20">
|
||||
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl mb-4">
|
||||
Two AIs. One workflow.{" "}
|
||||
<span className="bg-gradient-to-r from-violet-600 to-amber-500 bg-clip-text text-transparent">
|
||||
Zero gaps.
|
||||
</span>
|
||||
</h2>
|
||||
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
|
||||
Roo Code handles the engineering. OpenClaw handles the everything else. Connected through MCP,
|
||||
they keep your whole operation moving.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Side-by-side capabilities */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-6xl mx-auto mb-24">
|
||||
{/* Roo Code side */}
|
||||
<motion.div
|
||||
{...fadeInUp}
|
||||
transition={{ duration: 0.6, delay: 0.1 }}
|
||||
className="rounded-2xl bg-card outline outline-border/50 shadow-lg p-8 relative group hover:shadow-xl transition-shadow">
|
||||
<div className="absolute -top-3 left-8">
|
||||
<span className="inline-flex items-center gap-1.5 rounded-full bg-violet-600 text-white px-3 py-1 text-xs font-semibold shadow-md">
|
||||
<Code className="size-3" />
|
||||
Roo Code
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mt-3 mb-2">The coding half</h3>
|
||||
<p className="text-muted-foreground mb-6">
|
||||
Your AI software engineering team, in the IDE and the cloud.
|
||||
</p>
|
||||
<div className="space-y-4">
|
||||
{ROO_CAPABILITIES.map((cap) => {
|
||||
const Icon = cap.icon
|
||||
return (
|
||||
<div key={cap.title} className="flex gap-3">
|
||||
<div className="size-10 rounded-lg bg-violet-500/10 dark:bg-violet-500/20 flex items-center justify-center shrink-0">
|
||||
<Icon className="size-5 text-violet-600 dark:text-violet-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold text-sm">{cap.title}</p>
|
||||
<p className="text-sm text-muted-foreground">{cap.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* OpenClaw side */}
|
||||
<motion.div
|
||||
{...fadeInUp}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="rounded-2xl bg-card outline outline-border/50 shadow-lg p-8 relative group hover:shadow-xl transition-shadow">
|
||||
<div className="absolute -top-3 left-8">
|
||||
<span className="inline-flex items-center gap-1.5 rounded-full bg-gradient-to-r from-amber-500 to-orange-600 text-white px-3 py-1 text-xs font-semibold shadow-md">
|
||||
<Smartphone className="size-3" />
|
||||
OpenClaw
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mt-3 mb-2">The action half</h3>
|
||||
<p className="text-muted-foreground mb-6">
|
||||
The AI that actually does things, from any chat app you already use.
|
||||
</p>
|
||||
<div className="space-y-4">
|
||||
{OPENCLAW_CAPABILITIES.map((cap) => {
|
||||
const Icon = cap.icon
|
||||
return (
|
||||
<div key={cap.title} className="flex gap-3">
|
||||
<div className="size-10 rounded-lg bg-amber-500/10 dark:bg-amber-500/20 flex items-center justify-center shrink-0">
|
||||
<Icon className="size-5 text-amber-600 dark:text-amber-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold text-sm">{cap.title}</p>
|
||||
<p className="text-sm text-muted-foreground">{cap.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Integration flow - "When they work together" */}
|
||||
<motion.div {...fadeInUp} transition={{ duration: 0.6, delay: 0.3 }} className="text-center mb-12">
|
||||
<h3 className="text-2xl font-bold tracking-tight sm:text-3xl mb-4">When they work together</h3>
|
||||
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
Real scenarios where the integration saves you hours.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="max-w-4xl mx-auto space-y-6">
|
||||
{INTEGRATION_SCENARIOS.map((scenario, index) => {
|
||||
const Icon = scenario.icon
|
||||
return (
|
||||
<motion.div
|
||||
key={scenario.trigger}
|
||||
{...fadeInUp}
|
||||
transition={{ duration: 0.5, delay: 0.1 * index }}
|
||||
className="rounded-2xl bg-card outline outline-border/50 shadow-lg p-6 md:p-8 hover:shadow-xl transition-shadow">
|
||||
{/* Trigger */}
|
||||
<div className="flex items-start gap-3 mb-6">
|
||||
<div className="size-10 rounded-full bg-foreground/5 flex items-center justify-center shrink-0">
|
||||
<Icon className="size-5 text-foreground/70" />
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
|
||||
Trigger
|
||||
</span>
|
||||
<p className="font-semibold text-lg">{scenario.trigger}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="rounded-xl bg-violet-500/5 dark:bg-violet-500/10 border border-violet-500/10 dark:border-violet-500/20 p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<div className="size-6 rounded-md bg-violet-600 flex items-center justify-center">
|
||||
<span className="text-white text-xs font-bold">R</span>
|
||||
</div>
|
||||
<span className="text-xs font-semibold text-violet-700 dark:text-violet-400">
|
||||
Roo Code
|
||||
</span>
|
||||
<ArrowRight className="size-3 text-violet-500/50 ml-auto" />
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">{scenario.rooAction}</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl bg-amber-500/5 dark:bg-amber-500/10 border border-amber-500/10 dark:border-amber-500/20 p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<div className="size-6 rounded-md bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center">
|
||||
<span className="text-white text-xs font-bold">O</span>
|
||||
</div>
|
||||
<span className="text-xs font-semibold text-amber-700 dark:text-amber-400">
|
||||
OpenClaw
|
||||
</span>
|
||||
<ArrowRight className="size-3 text-amber-500/50 ml-auto" />
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">{scenario.openclawAction}</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue