From 65852f5e1f3ffe5fea4a2744b611ec0f52eaf876 Mon Sep 17 00:00:00 2001 From: thill2323 Date: Wed, 10 Sep 2025 03:22:02 -0400 Subject: [PATCH] feat: implement Roomote Control feature page - Add complete Roomote Control landing page with all sections - Implement hero section with video embed - Create narrative band with 3-card layout - Add 5-step 'How it works' section with visual flow - Build 3x3 feature grid with updated icons - Add testimonials section with avatar images - Implement comprehensive FAQ with documentation links - Create final CTA section matching site design - Add responsive design and animations throughout - Include SEO metadata and OpenGraph tags --- apps/web-roo-code/public/adam-larson.jpg | 1 + apps/web-roo-code/public/ai-code-king.jpg | 1 + apps/web-roo-code/src/app/icon-test/page.tsx | 150 +++++++++++ .../src/app/roomote-control/page.tsx | 54 ++++ .../src/components/roomote-control/faq.tsx | 144 ++++++++++ .../roomote-control/feature-grid.tsx | 140 ++++++++++ .../components/roomote-control/final-cta.tsx | 82 ++++++ .../src/components/roomote-control/hero.tsx | 92 +++++++ .../roomote-control/how-it-works.tsx | 251 ++++++++++++++++++ .../src/components/roomote-control/index.ts | 7 + .../roomote-control/narrative-band.tsx | 122 +++++++++ .../roomote-control/testimonials.tsx | 131 +++++++++ apps/web-roo-code/tailwind.config.ts | 4 + 13 files changed, 1179 insertions(+) create mode 100644 apps/web-roo-code/public/adam-larson.jpg create mode 100644 apps/web-roo-code/public/ai-code-king.jpg create mode 100644 apps/web-roo-code/src/app/icon-test/page.tsx create mode 100644 apps/web-roo-code/src/app/roomote-control/page.tsx create mode 100644 apps/web-roo-code/src/components/roomote-control/faq.tsx create mode 100644 apps/web-roo-code/src/components/roomote-control/feature-grid.tsx create mode 100644 apps/web-roo-code/src/components/roomote-control/final-cta.tsx create mode 100644 apps/web-roo-code/src/components/roomote-control/hero.tsx create mode 100644 apps/web-roo-code/src/components/roomote-control/how-it-works.tsx create mode 100644 apps/web-roo-code/src/components/roomote-control/index.ts create mode 100644 apps/web-roo-code/src/components/roomote-control/narrative-band.tsx create mode 100644 apps/web-roo-code/src/components/roomote-control/testimonials.tsx diff --git a/apps/web-roo-code/public/adam-larson.jpg b/apps/web-roo-code/public/adam-larson.jpg new file mode 100644 index 0000000000..b3a425249b --- /dev/null +++ b/apps/web-roo-code/public/adam-larson.jpg @@ -0,0 +1 @@ +placeholder \ No newline at end of file diff --git a/apps/web-roo-code/public/ai-code-king.jpg b/apps/web-roo-code/public/ai-code-king.jpg new file mode 100644 index 0000000000..b3a425249b --- /dev/null +++ b/apps/web-roo-code/public/ai-code-king.jpg @@ -0,0 +1 @@ +placeholder \ No newline at end of file diff --git a/apps/web-roo-code/src/app/icon-test/page.tsx b/apps/web-roo-code/src/app/icon-test/page.tsx new file mode 100644 index 0000000000..445159ef25 --- /dev/null +++ b/apps/web-roo-code/src/app/icon-test/page.tsx @@ -0,0 +1,150 @@ +"use client" + +import { FaRobot, FaCode, FaBrain, FaGlobe, FaTerminal, FaPuzzlePiece } from "react-icons/fa" +import { + FaRobot as Fa6Robot, + FaCode as Fa6Code, + FaBrain as Fa6Brain, + FaGlobe as Fa6Globe, + FaPuzzlePiece as Fa6PuzzlePiece, +} from "react-icons/fa6" +import { Bot, Code2, Brain, Globe, Terminal, Puzzle } from "lucide-react" + +export default function IconTestPage() { + const iconSets = [ + { + title: "Font Awesome 5 (react-icons/fa) - Currently Used", + description: "Icons from react-icons/fa - what we're using now", + icons: [ + { icon: , label: "FaRobot" }, + { icon: , label: "FaPuzzlePiece" }, + { icon: , label: "FaBrain" }, + { icon: , label: "FaGlobe" }, + { icon: , label: "FaCode" }, + { icon: , label: "FaTerminal" }, + ], + wrapperClass: + "mb-5 inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-blue-500/5 to-cyan-500/5 p-2.5", + innerClass: "rounded-lg bg-gradient-to-r from-blue-500/80 to-cyan-500/80 p-2.5", + iconClass: "text-foreground/90", + }, + { + title: "Font Awesome 6 (react-icons/fa6)", + description: "Icons from react-icons/fa6 - newer version", + icons: [ + { icon: , label: "Fa6Robot" }, + { icon: , label: "Fa6PuzzlePiece" }, + { icon: , label: "Fa6Brain" }, + { icon: , label: "Fa6Globe" }, + { icon: , label: "Fa6Code" }, + ], + wrapperClass: + "mb-5 inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-blue-500/5 to-cyan-500/5 p-2.5", + innerClass: "rounded-lg bg-gradient-to-r from-blue-500/80 to-cyan-500/80 p-2.5", + iconClass: "text-foreground/90", + }, + { + title: "Lucide React Icons", + description: "Alternative icons from lucide-react", + icons: [ + { icon: , label: "Bot" }, + { icon: , label: "Puzzle" }, + { icon: , label: "Brain" }, + { icon: , label: "Globe" }, + { icon: , label: "Code2" }, + { icon: , label: "Terminal" }, + ], + wrapperClass: + "mb-5 inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-blue-500/5 to-cyan-500/5 p-2.5", + innerClass: "rounded-lg bg-gradient-to-r from-blue-500/80 to-cyan-500/80 p-2.5", + iconClass: "text-foreground/90", + }, + { + title: "Raw Icons Comparison (No Styling)", + description: "All icon sets without wrapper styling", + icons: [ + { icon: , label: "FA5 Robot" }, + { icon: , label: "FA6 Robot" }, + { icon: , label: "Lucide Bot" }, + { icon: , label: "FA5 Puzzle" }, + { icon: , label: "FA6 Puzzle" }, + { icon: , label: "Lucide Puzzle" }, + ], + wrapperClass: "", + innerClass: "", + iconClass: "", + }, + ] + + return ( +
+
+

Icon Library Comparison

+ +
+

+ Current Setup: React Icons v5.5.0 (from package.json) +

+

+ This page compares different icon libraries to identify which ones match the production site. +

+

+ The production site at https://roocode.com might be using a different icon set or version. +

+
+ + {iconSets.map((set, setIndex) => ( +
+

{set.title}

+

{set.description}

+ +
+ {set.icons.map((item, index) => ( +
+ {set.wrapperClass ? ( +
+
+
{item.icon}
+
+
+ ) : ( +
+ {item.icon} +
+ )} +

{item.label}

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

Visual Differences to Look For:

+
    +
  • Font Awesome 5 vs 6: FA6 icons often have slightly different designs and weights
    • +
  • Lucide icons: Generally have a more consistent stroke width and modern design
    • +
  • The robot icon in FA5 vs FA6 has notable differences in design
    • +
  • The puzzle piece icon also varies between versions
    • +
+
+ + +
+
+ ) +} diff --git a/apps/web-roo-code/src/app/roomote-control/page.tsx b/apps/web-roo-code/src/app/roomote-control/page.tsx new file mode 100644 index 0000000000..bed152a504 --- /dev/null +++ b/apps/web-roo-code/src/app/roomote-control/page.tsx @@ -0,0 +1,54 @@ +import type { Metadata } from "next" +import { RoomoteHero } from "@/components/roomote-control/hero" +import { NarrativeBand } from "@/components/roomote-control/narrative-band" +import { HowItWorks } from "@/components/roomote-control/how-it-works" +import { FeatureGrid } from "@/components/roomote-control/feature-grid" +import { RoomoteTestimonials } from "@/components/roomote-control/testimonials" +import { RoomoteFAQ } from "@/components/roomote-control/faq" +import { FinalCTA } from "@/components/roomote-control/final-cta" + +export const metadata: Metadata = { + title: "Roo Code Cloud | Roomote Control – Manage coding tasks from mobile & web browser in addition to the IDE", + description: + "Roomote Control keeps coding moving, wherever you are. Start tasks in your editor, manage them from your phone or browser, and watch your workspace mirror into the cloud.", + alternates: { + canonical: "https://roocode.com/roomote-control", + }, + openGraph: { + title: "Roo Code Cloud | Roomote Control", + description: + "Manage coding tasks from mobile & web browser in addition to the IDE. Your first truly hybrid coding teammate.", + url: "https://roocode.com/roomote-control", + siteName: "Roo Code", + images: [ + { + url: "https://roocode.com/og-roomote-control.png", + width: 1200, + height: 630, + alt: "Roomote Control - Hybrid coding across IDE, cloud, and mobile", + }, + ], + locale: "en_US", + type: "website", + }, + twitter: { + card: "summary_large_image", + title: "Roo Code Cloud | Roomote Control", + description: "Manage coding tasks from mobile & web browser in addition to the IDE", + images: ["https://roocode.com/og-roomote-control.png"], + }, +} + +export default function RoomoteControlPage() { + return ( + <> + + + + + + + + + ) +} diff --git a/apps/web-roo-code/src/components/roomote-control/faq.tsx b/apps/web-roo-code/src/components/roomote-control/faq.tsx new file mode 100644 index 0000000000..0fef50cbe0 --- /dev/null +++ b/apps/web-roo-code/src/components/roomote-control/faq.tsx @@ -0,0 +1,144 @@ +"use client" + +import { useState } from "react" +import { motion } from "framer-motion" +import { ChevronDown } from "lucide-react" +import { cn } from "@/lib/utils" + +interface FAQItem { + question: string + answer: string +} + +const faqs: FAQItem[] = [ + { + question: "What is Roo Code Cloud?", + answer: "Roo Code Cloud is a web-based platform that extends your Roo Code extension with cloud-powered features. By connecting your local VS Code extension to the cloud, you unlock task sharing, usage analytics, and remote control options that enhance your AI-assisted development workflow. [Learn more](https://docs.roocode.com/roo-code-cloud/what-is-roo-code-cloud).", + }, + { + question: "What is Roomote Control?", + answer: "Roomote Control creates a bidirectional connection between your local extension and Roo Code Cloud, enabling real-time monitoring and control of Roo Code tasks running in your extension directly from the Roo Code Cloud mobile or web interface. [Learn more](https://docs.roocode.com/roo-code-cloud/roomote-control).", + }, + { + question: "How do I enable Roomote Control?", + answer: "Open the Roo Code extension, go to the Account tab, and toggle on Roomote Control. Sign in with GitHub, Google, or email to connect your extension to Roo Code Cloud. Once connected, your workspace appears under Connected Workspaces and your tasks automatically sync across devices and sessions. Learn more about [Login/Signup](https://docs.roocode.com/roo-code-cloud/login).", + }, + { + question: "Can I disable it?", + answer: "Yes. Toggle off anytime or log out of Roo Cloud.", + }, + { + question: "Is my code safe?", + answer: "Roo only shares the context needed for tasks, not your full repo. Run Roo in your own infrastructure with confidence. See our [Roo Code Cloud docs](https://docs.roocode.com/roo-code-cloud/what-is-roo-code-cloud) and [Roo Code Trust Center](https://trust.roocode.com/) for additional security details.", + }, + { + question: "What is free vs. paid?", + answer: "Free users can monitor tasks in real time and view previously logged work in Roo Code Cloud. Pro ($20/mo after free 14-day trial) unlocks full Roomote Control — start, stop, create, edit, and manage tasks remotely. Cancel anytime, no commitment. Learn more about [Free vs. Paid Features](https://docs.roocode.com/roo-code-cloud/billing-subscriptions#pro-plan-20month).", + }, + { + question: "How does billing work?", + answer: "Pro is billed at $20 per user, per month. Plans are month-to-month, and you can cancel anytime. Billing is handled through Stripe, and no credit card is required to start with the free plan. Learn more about [Billing & Subscriptions](https://docs.roocode.com/roo-code-cloud/billing-subscriptions).", + }, + { + question: 'What does "priority support" include?', + answer: "Pro subscribers get faster responses from the Roo Code team on Discord and email, as well as early access to new features and roadmap previews. Learn more about [Plan Tiers](https://docs.roocode.com/roo-code-cloud/billing-subscriptions).", + }, + { + question: "Are there any limits in the free plan?", + answer: "Free users can monitor and view logged tasks, but cannot start new tasks from the web or exercise full edit controls. Learn more about [Plan Tiers](https://docs.roocode.com/roo-code-cloud/billing-subscriptions).", + }, + { + question: "Which builds are supported?", + answer: "Latest Roo Code extension and a connected Git provider.", + }, + { + question: "What about notifications?", + answer: 'Completion notifications are rolling out shortly. Features marked "coming soon" are actively in development and will be available to all users as they launch.', + }, + { + question: "Can I share tasks with teammates?", + answer: "Yes. You can share individual tasks with colleagues or the community through secure, expiring links. Control what you share and when, with links that automatically expire after 30 days for enhanced security. Learn more about [Task Sharing](https://docs.roocode.com/roo-code-cloud/task-sharing).", + }, +] + +export function RoomoteFAQ() { + const [openIndex, setOpenIndex] = useState(null) + + const toggleFAQ = (index: number) => { + setOpenIndex(openIndex === index ? null : index) + } + + return ( +
+
+ +

FAQ

+ + +
+
+ {faqs.map((faq, index) => ( + +
+ +
+
+

+ {faq.answer.split(/(\[.*?\]\(.*?\))/).map((part, i) => { + // Handle markdown-style links + const linkMatch = part.match(/\[(.*?)\]\((.*?)\)/) + if (linkMatch) { + return ( + + {linkMatch[1]} + + ) + } + return part + })} +

+
+
+
+ + ))} +
+
+
+
+ ) +} diff --git a/apps/web-roo-code/src/components/roomote-control/feature-grid.tsx b/apps/web-roo-code/src/components/roomote-control/feature-grid.tsx new file mode 100644 index 0000000000..8e30a13b2f --- /dev/null +++ b/apps/web-roo-code/src/components/roomote-control/feature-grid.tsx @@ -0,0 +1,140 @@ +"use client" + +import { motion } from "framer-motion" +import { Users, RefreshCw, Bell, Shield, Smartphone, Lock, Sparkles, Globe, Rocket } from "lucide-react" + +const features = [ + // Row 1 + { + icon: , + title: "Stay in control", + description: "Accept, reject, refine, and cancel tasks. Queue messages and switch modes in real time.", + }, + { + icon: , + title: "Work anywhere", + description: "Start from your IDE, then continue seamlessly from your phone or browser.", + }, + { + icon: , + title: "Secure by design", + description: "Roo tasks run with minimal context and full visibility, in your IDE or the cloud.", + }, + // Row 2 + { + icon: , + title: "Unified dashboard", + description: "One hub across IDE, cloud, and mobile to view tasks, usage analytics, and workspaces.", + }, + { + icon: , + title: "Start tasks on web", + description: "Spin up new tasks directly in Roo Code Cloud and track them from end-to-end.", + }, + { + icon: , + title: "Kick off a Roomote", + description: "Launch dedicated Roomotes for longer-running, continuous work.", + }, + // Row 3 + { + icon: , + title: "Share with teammates", + description: "Easily share secure task links, so your teammates have visibility and stay aligned.", + }, + { + icon: , + title: "Continuous progress", + description: "Tasks keep running in the background, even when you step away.", + }, + { + icon: , + title: "Stay informed", + description: "Get notifications the moment tasks complete, right on web or mobile.", + comingSoon: true, + }, +] + +export function FeatureGrid() { + const containerVariants = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { + staggerChildren: 0.1, + delayChildren: 0.2, + }, + }, + } + + const itemVariants = { + hidden: { + opacity: 0, + y: 20, + }, + visible: { + opacity: 1, + y: 0, + transition: { + duration: 0.5, + ease: [0.21, 0.45, 0.27, 0.9], + }, + }, + } + + return ( +
+
+
+
+
+
+ +
+ +

+ Built for real-world dev workflows +

+ + + +
+ {features.map((feature, index) => ( + +
+
+
+
+
+
{feature.icon}
+
+
+
+

{feature.title}

+ {feature.comingSoon && ( + + Coming Soon + + )} +
+

{feature.description}

+
+
+ + ))} +
+ +
+
+ ) +} diff --git a/apps/web-roo-code/src/components/roomote-control/final-cta.tsx b/apps/web-roo-code/src/components/roomote-control/final-cta.tsx new file mode 100644 index 0000000000..1fcea87b89 --- /dev/null +++ b/apps/web-roo-code/src/components/roomote-control/final-cta.tsx @@ -0,0 +1,82 @@ +"use client" + +import { motion } from "framer-motion" +import Link from "next/link" +import { Button } from "@/components/ui" + +export function FinalCTA() { + const backgroundVariants = { + hidden: { + opacity: 0, + }, + visible: { + opacity: 1, + transition: { + duration: 1.2, + ease: "easeOut", + }, + }, + } + + return ( +
+ +
+
+
+ + +
+ +

+ Stay in flow with Roomote Control +

+

+ Build on your terms, wherever you work. Start free or upgrade to Pro for full control. +

+ + + + + +
+
+ ) +} diff --git a/apps/web-roo-code/src/components/roomote-control/hero.tsx b/apps/web-roo-code/src/components/roomote-control/hero.tsx new file mode 100644 index 0000000000..9420eb4012 --- /dev/null +++ b/apps/web-roo-code/src/components/roomote-control/hero.tsx @@ -0,0 +1,92 @@ +"use client" + +import { motion } from "framer-motion" +import Link from "next/link" +import { Play } from "lucide-react" +import { Button } from "@/components/ui" + +export function RoomoteHero() { + return ( +
+
+
+
+
+
+ +
+
+ +
+ + Early Access + + {/* Glint effect */} +
+
+

+ Roomote Control keeps your +
+ workflow going. +

+
+

+ Start tasks in your editor, manage them from mobile or web, and stay connected through + the Roo Code Cloud dashboard with your first truly{" "} + hybrid coding teammate, wherever you are. +

+
+ +
+ + +
+ + + + Mobile Ready • Free to Try{" "} + • Pro Features $20/month + + + +
+
+
+ ) +} diff --git a/apps/web-roo-code/src/components/roomote-control/how-it-works.tsx b/apps/web-roo-code/src/components/roomote-control/how-it-works.tsx new file mode 100644 index 0000000000..ff7b4b16d6 --- /dev/null +++ b/apps/web-roo-code/src/components/roomote-control/how-it-works.tsx @@ -0,0 +1,251 @@ +"use client" + +import { motion } from "framer-motion" +import Link from "next/link" +import { Monitor, Cloud, Smartphone, ArrowRight } from "lucide-react" + +const steps = [ + { + number: "1", + title: "Enable in your extension", + description: + "Open the Roo Code extension, go to the Account tab, and toggle on Roomote Control to get started.", + }, + { + number: "2", + title: "Connect to Roo Code Cloud", + description: + "Sign up at app.roocode.com to sync prompts, enable collaboration, and access online task history across devices.", + link: { text: "app.roocode.com", href: "https://app.roocode.com/" }, + }, + { + number: "3", + title: "View your cloud dashboard", + description: + "Your Roo Code Cloud dashboard is the central hub to view task history, monitor usage, and manage remote workspaces.", + link: { text: "Roo Code Cloud dashboard", href: "https://app.roocode.com/" }, + }, + { + number: "4", + title: "Follow from mobile or web", + description: + "See your task list, usage analytics, and real-time updates in Roo Code Cloud — no need to reopen your IDE.", + }, + { + number: "5", + title: "Unlock Pro for full control", + description: + "Upgrade to Pro ($20/mo) to start, stop, approve, and refine tasks remotely, with priority support and early access to features.", + link: { text: "Upgrade to Pro", href: "https://app.roocode.com/billing" }, + }, +] + +export function HowItWorks() { + const containerVariants = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { + staggerChildren: 0.1, + delayChildren: 0.2, + }, + }, + } + + const itemVariants = { + hidden: { + opacity: 0, + x: -20, + }, + visible: { + opacity: 1, + x: 0, + transition: { + duration: 0.5, + ease: [0.21, 0.45, 0.27, 0.9], + }, + }, + } + + return ( +
+
+
+
+
+
+ +
+ +

How it works

+ + + +
+ {steps.map((step, index) => { + return ( + +
+
+
+ {/* Number icon with gradient background matching other sections */} +
+
+ + {step.number} + +
+
+

{step.title}

+

+ {step.description.split(step.link?.text || "").map((part, i) => { + if (i === 0) return part + if (step.link) { + return ( + + + {step.link.text} + + {part} + + ) + } + return part + })} +

+
+
+ {index < steps.length - 1 && ( +
+ +
+ + +
+ )} + + ) + })} +
+ + {/* Visual Flow Diagram */} + +
+
+
+ {/* Horizontal Flow */} +
+ {/* Editor */} + +
+
+
+ +
+
+

Your Editor

+

+ Start tasks from your editor +

+ + + {/* Arrow 1 */} + +
+
+ +
+ + + {/* Cloud Dashboard */} + +
+
+
+ +
+
+

Cloud Dashboard

+

Monitor & manage remotely

+ + + {/* Arrow 2 */} + +
+
+ +
+ + + {/* Mobile */} + +
+
+
+ +
+
+

Mobile Approval

+

Approve & refine on the go

+ +
+
+
+ + +
+
+ ) +} diff --git a/apps/web-roo-code/src/components/roomote-control/index.ts b/apps/web-roo-code/src/components/roomote-control/index.ts new file mode 100644 index 0000000000..d9c29fc001 --- /dev/null +++ b/apps/web-roo-code/src/components/roomote-control/index.ts @@ -0,0 +1,7 @@ +export * from "./hero" +export * from "./narrative-band" +export * from "./how-it-works" +export * from "./feature-grid" +export * from "./testimonials" +export * from "./faq" +export * from "./final-cta" diff --git a/apps/web-roo-code/src/components/roomote-control/narrative-band.tsx b/apps/web-roo-code/src/components/roomote-control/narrative-band.tsx new file mode 100644 index 0000000000..798620d21d --- /dev/null +++ b/apps/web-roo-code/src/components/roomote-control/narrative-band.tsx @@ -0,0 +1,122 @@ +"use client" + +import { motion } from "framer-motion" +import { Zap, Shield, Smartphone } from "lucide-react" + +export function NarrativeBand() { + const containerVariants = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { + staggerChildren: 0.15, + delayChildren: 0.3, + }, + }, + } + + const itemVariants = { + hidden: { + opacity: 0, + y: 20, + }, + visible: { + opacity: 1, + y: 0, + transition: { + duration: 0.6, + ease: [0.21, 0.45, 0.27, 0.9], + }, + }, + } + + return ( +
+
+
+
+
+
+ +
+ +

+ Coding doesn't have to stop when you do +

+ + + +
+ {/* Card 1 - Work anywhere */} + +
+
+
+
+
+ +
+
+

Work anywhere

+

+ Start tasks in your editor, then check progress during a meeting, refine while + waiting for lunch, or approve changes from your phone. +

+
+
+ + + {/* Card 2 - Transparent control */} + +
+
+
+
+
+ +
+
+

Transparent control

+

+ Traditional IDE plugins stop when your laptop closes, and other cloud agents can + feel opaque. Roomote Control keeps you productive with full oversight. +

+
+
+ + + {/* Card 3 - True hybrid coding */} + +
+
+
+
+
+ +
+
+

True hybrid coding

+

+ This is the first step in our vision for Roo Code Cloud, extending Roo Code + beyond the editor and making it your true teammate across IDE, cloud, and + mobile. +

+
+
+ +
+ +
+
+ ) +} diff --git a/apps/web-roo-code/src/components/roomote-control/testimonials.tsx b/apps/web-roo-code/src/components/roomote-control/testimonials.tsx new file mode 100644 index 0000000000..47263bc310 --- /dev/null +++ b/apps/web-roo-code/src/components/roomote-control/testimonials.tsx @@ -0,0 +1,131 @@ +"use client" + +import { useState } from "react" +import { motion } from "framer-motion" +import Image from "next/image" + +const testimonials = [ + { + quote: "You can do almost anything that you can do in your local instance... It's a pretty sleek interface. The interaction works amazingly well — almost like the local Roo Code. And I haven't seen any issues... Another thing that is more of a cloud feature, is you can see the tasks that you have made here. I really like this because you can start some tasks, let them run in the background if you're outside or busy, and then come back and plug right back into the same Roo Code that you already love without compromising on any of the features, because it's literally just Roo Code being interfaced via a web UI.", + author: "AI Code King", + avatar: "/ai-code-king.jpg", + fallback: "/placeholder_pfp.png", + }, + { + quote: "What Roo Code has done is they've actually come out and created a cloud-based version of this where theoretically, you can do what I was doing here, have a computer set up with multiple instances of your IDE, and basically run it in your own infrastructure and you're controlling it through this orchestrator that Roo Code has called Roomote. Maybe I'm out to lunch somewhere and I want to think through something, I can do that remotely with my computer. It's pretty sweet to be honest.", + author: "Adam Larson, GosuCoder", + avatar: "/adam-larson.jpg", + fallback: "/placeholder_pfp.png", + }, +] + +export function RoomoteTestimonials() { + const [imageErrors, setImageErrors] = useState<{ [key: number]: boolean }>({}) + const [imagesLoaded, setImagesLoaded] = useState<{ [key: number]: boolean }>({}) + + const containerVariants = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { + staggerChildren: 0.2, + delayChildren: 0.3, + }, + }, + } + + const itemVariants = { + hidden: { + opacity: 0, + y: 20, + }, + visible: { + opacity: 1, + y: 0, + transition: { + duration: 0.6, + ease: [0.21, 0.45, 0.27, 0.9], + }, + }, + } + + const handleImageError = (index: number) => { + setImageErrors((prev) => ({ ...prev, [index]: true })) + setImagesLoaded((prev) => ({ ...prev, [index]: true })) + } + + const handleImageLoad = (index: number) => { + setImagesLoaded((prev) => ({ ...prev, [index]: true })) + } + + return ( +
+
+ +

What developers are saying

+

+ Real feedback from early adopters using Roomote Control in the wild. +

+ + + +
+ {testimonials.map((testimonial, index) => ( + +
+
+
+ + + +
+ {testimonial.quote} +
+
+
+ {/* Placeholder shown until image loads */} + {!imagesLoaded[index] && ( +
+
+
+ )} + {testimonial.author} handleImageError(index)} + onLoad={() => handleImageLoad(index)} + priority + sizes="48px" + /> +
+
+
{testimonial.author}
+
+
+
+
+ + ))} +
+ +
+
+ ) +} diff --git a/apps/web-roo-code/tailwind.config.ts b/apps/web-roo-code/tailwind.config.ts index 870371f32f..53b06533d9 100644 --- a/apps/web-roo-code/tailwind.config.ts +++ b/apps/web-roo-code/tailwind.config.ts @@ -99,6 +99,10 @@ const config: Config = { "0%, 100%": { opacity: "0.6" }, "50%": { opacity: "0.8" }, }, + shimmer: { + "0%": { transform: "translateX(-100%)" }, + "100%": { transform: "translateX(200%)" }, + }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out",