Skip to content

Commit 65852f5

Browse files
thill2323thill2323
committed
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
1 parent 48d592f commit 65852f5

File tree

13 files changed

+1179
-0
lines changed

13 files changed

+1179
-0
lines changed

‎apps/web-roo-code/public/adam-larson.jpg‎

Lines changed: 1 addition & 0 deletions
Loading

‎apps/web-roo-code/public/ai-code-king.jpg‎

Lines changed: 1 addition & 0 deletions
Loading

‎apps/web-roo-code/src/app/icon-test/page.tsx‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
"use client"
2+
3+
import { FaRobot, FaCode, FaBrain, FaGlobe, FaTerminal, FaPuzzlePiece } from "react-icons/fa"
4+
import {
5+
FaRobot as Fa6Robot,
6+
FaCode as Fa6Code,
7+
FaBrain as Fa6Brain,
8+
FaGlobe as Fa6Globe,
9+
FaPuzzlePiece as Fa6PuzzlePiece,
10+
} from "react-icons/fa6"
11+
import { Bot, Code2, Brain, Globe, Terminal, Puzzle } from "lucide-react"
12+
13+
export default function IconTestPage() {
14+
const iconSets = [
15+
{
16+
title: "Font Awesome 5 (react-icons/fa) - Currently Used",
17+
description: "Icons from react-icons/fa - what we're using now",
18+
icons: [
19+
{ icon: <FaRobot className="h-6 w-6" />, label: "FaRobot" },
20+
{ icon: <FaPuzzlePiece className="h-6 w-6" />, label: "FaPuzzlePiece" },
21+
{ icon: <FaBrain className="h-6 w-6" />, label: "FaBrain" },
22+
{ icon: <FaGlobe className="h-6 w-6" />, label: "FaGlobe" },
23+
{ icon: <FaCode className="h-6 w-6" />, label: "FaCode" },
24+
{ icon: <FaTerminal className="h-6 w-6" />, label: "FaTerminal" },
25+
],
26+
wrapperClass:
27+
"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",
28+
innerClass: "rounded-lg bg-gradient-to-r from-blue-500/80 to-cyan-500/80 p-2.5",
29+
iconClass: "text-foreground/90",
30+
},
31+
{
32+
title: "Font Awesome 6 (react-icons/fa6)",
33+
description: "Icons from react-icons/fa6 - newer version",
34+
icons: [
35+
{ icon: <Fa6Robot className="h-6 w-6" />, label: "Fa6Robot" },
36+
{ icon: <Fa6PuzzlePiece className="h-6 w-6" />, label: "Fa6PuzzlePiece" },
37+
{ icon: <Fa6Brain className="h-6 w-6" />, label: "Fa6Brain" },
38+
{ icon: <Fa6Globe className="h-6 w-6" />, label: "Fa6Globe" },
39+
{ icon: <Fa6Code className="h-6 w-6" />, label: "Fa6Code" },
40+
],
41+
wrapperClass:
42+
"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",
43+
innerClass: "rounded-lg bg-gradient-to-r from-blue-500/80 to-cyan-500/80 p-2.5",
44+
iconClass: "text-foreground/90",
45+
},
46+
{
47+
title: "Lucide React Icons",
48+
description: "Alternative icons from lucide-react",
49+
icons: [
50+
{ icon: <Bot className="h-6 w-6" />, label: "Bot" },
51+
{ icon: <Puzzle className="h-6 w-6" />, label: "Puzzle" },
52+
{ icon: <Brain className="h-6 w-6" />, label: "Brain" },
53+
{ icon: <Globe className="h-6 w-6" />, label: "Globe" },
54+
{ icon: <Code2 className="h-6 w-6" />, label: "Code2" },
55+
{ icon: <Terminal className="h-6 w-6" />, label: "Terminal" },
56+
],
57+
wrapperClass:
58+
"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",
59+
innerClass: "rounded-lg bg-gradient-to-r from-blue-500/80 to-cyan-500/80 p-2.5",
60+
iconClass: "text-foreground/90",
61+
},
62+
{
63+
title: "Raw Icons Comparison (No Styling)",
64+
description: "All icon sets without wrapper styling",
65+
icons: [
66+
{ icon: <FaRobot className="h-8 w-8" />, label: "FA5 Robot" },
67+
{ icon: <Fa6Robot className="h-8 w-8" />, label: "FA6 Robot" },
68+
{ icon: <Bot className="h-8 w-8" />, label: "Lucide Bot" },
69+
{ icon: <FaPuzzlePiece className="h-8 w-8" />, label: "FA5 Puzzle" },
70+
{ icon: <Fa6PuzzlePiece className="h-8 w-8" />, label: "FA6 Puzzle" },
71+
{ icon: <Puzzle className="h-8 w-8" />, label: "Lucide Puzzle" },
72+
],
73+
wrapperClass: "",
74+
innerClass: "",
75+
iconClass: "",
76+
},
77+
]
78+
79+
return (
80+
<div className="min-h-screen bg-background p-8">
81+
<div className="mx-auto max-w-7xl">
82+
<h1 className="mb-8 text-3xl font-bold">Icon Library Comparison</h1>
83+
84+
<div className="mb-8 rounded-lg bg-muted p-4">
85+
<p className="text-sm mb-2">
86+
<strong>Current Setup:</strong> React Icons v5.5.0 (from package.json)
87+
</p>
88+
<p className="text-sm mb-2">
89+
This page compares different icon libraries to identify which ones match the production site.
90+
</p>
91+
<p className="text-sm">
92+
The production site at https://roocode.com might be using a different icon set or version.
93+
</p>
94+
</div>
95+
96+
{iconSets.map((set, setIndex) => (
97+
<div key={setIndex} className="mb-12 border-b border-border pb-8">
98+
<h2 className="mb-2 text-xl font-semibold">{set.title}</h2>
99+
<p className="mb-6 text-sm text-muted-foreground">{set.description}</p>
100+
101+
<div className="grid grid-cols-3 gap-8 md:grid-cols-6">
102+
{set.icons.map((item, index) => (
103+
<div key={index} className="text-center">
104+
{set.wrapperClass ? (
105+
<div className={set.wrapperClass}>
106+
<div className={set.innerClass}>
107+
<div className={set.iconClass}>{item.icon}</div>
108+
</div>
109+
</div>
110+
) : (
111+
<div className="mb-5 inline-flex items-center justify-center p-4">
112+
{item.icon}
113+
</div>
114+
)}
115+
<p className="text-xs font-medium">{item.label}</p>
116+
</div>
117+
))}
118+
</div>
119+
</div>
120+
))}
121+
122+
<div className="mt-12 space-y-4 rounded-lg bg-muted p-6">
123+
<h3 className="text-lg font-semibold">Visual Differences to Look For:</h3>
124+
<ul className="space-y-2 text-sm list-disc list-inside">
125+
<li>Font Awesome 5 vs 6: FA6 icons often have slightly different designs and weights</li>
126+
<li>Lucide icons: Generally have a more consistent stroke width and modern design</li>
127+
<li>The robot icon in FA5 vs FA6 has notable differences in design</li>
128+
<li>The puzzle piece icon also varies between versions</li>
129+
</ul>
130+
</div>
131+
132+
<div className="mt-8 flex gap-4">
133+
<a href="/" className="rounded-lg bg-primary px-4 py-2 text-primary-foreground">
134+
Go to Homepage
135+
</a>
136+
<a href="/roomote-control" className="rounded-lg bg-primary px-4 py-2 text-primary-foreground">
137+
Go to Roomote Control
138+
</a>
139+
<a
140+
href="https://roocode.com"
141+
target="_blank"
142+
rel="noopener noreferrer"
143+
className="rounded-lg bg-secondary px-4 py-2 text-secondary-foreground">
144+
View Production Site
145+
</a>
146+
</div>
147+
</div>
148+
</div>
149+
)
150+
}

‎apps/web-roo-code/src/app/roomote-control/page.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import type { Metadata } from "next"
2+
import { RoomoteHero } from "@/components/roomote-control/hero"
3+
import { NarrativeBand } from "@/components/roomote-control/narrative-band"
4+
import { HowItWorks } from "@/components/roomote-control/how-it-works"
5+
import { FeatureGrid } from "@/components/roomote-control/feature-grid"
6+
import { RoomoteTestimonials } from "@/components/roomote-control/testimonials"
7+
import { RoomoteFAQ } from "@/components/roomote-control/faq"
8+
import { FinalCTA } from "@/components/roomote-control/final-cta"
9+
10+
export const metadata: Metadata = {
11+
title: "Roo Code Cloud | Roomote Control – Manage coding tasks from mobile & web browser in addition to the IDE",
12+
description:
13+
"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.",
14+
alternates: {
15+
canonical: "https://roocode.com/roomote-control",
16+
},
17+
openGraph: {
18+
title: "Roo Code Cloud | Roomote Control",
19+
description:
20+
"Manage coding tasks from mobile & web browser in addition to the IDE. Your first truly hybrid coding teammate.",
21+
url: "https://roocode.com/roomote-control",
22+
siteName: "Roo Code",
23+
images: [
24+
{
25+
url: "https://roocode.com/og-roomote-control.png",
26+
width: 1200,
27+
height: 630,
28+
alt: "Roomote Control - Hybrid coding across IDE, cloud, and mobile",
29+
},
30+
],
31+
locale: "en_US",
32+
type: "website",
33+
},
34+
twitter: {
35+
card: "summary_large_image",
36+
title: "Roo Code Cloud | Roomote Control",
37+
description: "Manage coding tasks from mobile & web browser in addition to the IDE",
38+
images: ["https://roocode.com/og-roomote-control.png"],
39+
},
40+
}
41+
42+
export default function RoomoteControlPage() {
43+
return (
44+
<>
45+
<RoomoteHero />
46+
<NarrativeBand />
47+
<HowItWorks />
48+
<FeatureGrid />
49+
<RoomoteTestimonials />
50+
<RoomoteFAQ />
51+
<FinalCTA />
52+
</>
53+
)
54+
}

‎apps/web-roo-code/src/components/roomote-control/faq.tsx‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
"use client"
2+
3+
import { useState } from "react"
4+
import { motion } from "framer-motion"
5+
import { ChevronDown } from "lucide-react"
6+
import { cn } from "@/lib/utils"
7+
8+
interface FAQItem {
9+
question: string
10+
answer: string
11+
}
12+
13+
const faqs: FAQItem[] = [
14+
{
15+
question: "What is Roo Code Cloud?",
16+
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).",
17+
},
18+
{
19+
question: "What is Roomote Control?",
20+
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).",
21+
},
22+
{
23+
question: "How do I enable Roomote Control?",
24+
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).",
25+
},
26+
{
27+
question: "Can I disable it?",
28+
answer: "Yes. Toggle off anytime or log out of Roo Cloud.",
29+
},
30+
{
31+
question: "Is my code safe?",
32+
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.",
33+
},
34+
{
35+
question: "What is free vs. paid?",
36+
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).",
37+
},
38+
{
39+
question: "How does billing work?",
40+
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).",
41+
},
42+
{
43+
question: 'What does "priority support" include?',
44+
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).",
45+
},
46+
{
47+
question: "Are there any limits in the free plan?",
48+
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).",
49+
},
50+
{
51+
question: "Which builds are supported?",
52+
answer: "Latest Roo Code extension and a connected Git provider.",
53+
},
54+
{
55+
question: "What about notifications?",
56+
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.',
57+
},
58+
{
59+
question: "Can I share tasks with teammates?",
60+
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).",
61+
},
62+
]
63+
64+
export function RoomoteFAQ() {
65+
const [openIndex, setOpenIndex] = useState<number | null>(null)
66+
67+
const toggleFAQ = (index: number) => {
68+
setOpenIndex(openIndex === index ? null : index)
69+
}
70+
71+
return (
72+
<section className="border-t border-border py-20 md:py-32">
73+
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
74+
<motion.div
75+
initial={{ opacity: 0, y: 20 }}
76+
whileInView={{ opacity: 1, y: 0 }}
77+
viewport={{ once: true }}
78+
transition={{ duration: 0.6, ease: [0.21, 0.45, 0.27, 0.9] }}
79+
className="mx-auto mb-16 max-w-3xl text-center">
80+
<h2 className="mb-6 text-3xl font-bold tracking-tight sm:text-4xl">FAQ</h2>
81+
</motion.div>
82+
83+
<div className="mx-auto max-w-3xl">
84+
<div className="space-y-4">
85+
{faqs.map((faq, index) => (
86+
<motion.div
87+
key={index}
88+
initial={{ opacity: 0, y: 20 }}
89+
whileInView={{ opacity: 1, y: 0 }}
90+
viewport={{ once: true }}
91+
transition={{
92+
duration: 0.5,
93+
delay: index * 0.1,
94+
ease: [0.21, 0.45, 0.27, 0.9],
95+
}}>
96+
<div className="group relative rounded-lg border border-border/50 bg-background/30 backdrop-blur-xl transition-all duration-300 hover:border-border">
97+
<button
98+
onClick={() => toggleFAQ(index)}
99+
className="flex w-full items-center justify-between p-6 text-left"
100+
aria-expanded={openIndex === index}>
101+
<h3 className="pr-4 text-lg font-medium text-foreground/90">{faq.question}</h3>
102+
<ChevronDown
103+
className={cn(
104+
"h-5 w-5 flex-shrink-0 text-muted-foreground transition-transform duration-200",
105+
openIndex === index ? "rotate-180" : "",
106+
)}
107+
/>
108+
</button>
109+
<div
110+
className={cn(
111+
"overflow-hidden transition-all duration-300 ease-in-out",
112+
openIndex === index ? "max-h-96 pb-6" : "max-h-0",
113+
)}>
114+
<div className="px-6 text-muted-foreground">
115+
<p>
116+
{faq.answer.split(/(\[.*?\]\(.*?\))/).map((part, i) => {
117+
// Handle markdown-style links
118+
const linkMatch = part.match(/\[(.*?)\]\((.*?)\)/)
119+
if (linkMatch) {
120+
return (
121+
<a
122+
key={i}
123+
href={linkMatch[2]}
124+
target="_blank"
125+
rel="noopener noreferrer"
126+
className="text-blue-500 underline-offset-4 hover:underline">
127+
{linkMatch[1]}
128+
</a>
129+
)
130+
}
131+
return part
132+
})}
133+
</p>
134+
</div>
135+
</div>
136+
</div>
137+
</motion.div>
138+
))}
139+
</div>
140+
</div>
141+
</div>
142+
</section>
143+
)
144+
}

0 commit comments

Comments
 (0)