Skip to content

Commit 5312a06

Browse files
thill2323thill2323
committed
feat: enhance FAQ section with helpful links and improved content
- Add links to VS Code Marketplace, documentation, Discord, Reddit, YouTube, and blog - Improve answer clarity and make content more engaging - Add Link component import for internal navigation - Convert plain text answers to JSX for rich content with links - Fix all ESLint warnings by escaping apostrophes
1 parent 35a9cbd commit 5312a06

File tree

1 file changed

+138
-12
lines changed

1 file changed

+138
-12
lines changed

‎apps/web-roo-code/src/components/homepage/faq-section.tsx‎

Lines changed: 138 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,11 @@ import { useState } from "react"
44
import { motion } from "framer-motion"
55
import { ChevronDown } from "lucide-react"
66
import { cn } from "@/lib/utils"
7+
import Link from "next/link"
78

89
interface FAQItem {
910
question: string
10-
answer: string
11+
answer: string | React.ReactNode
1112
}
1213

1314
const faqs: FAQItem[] = [
@@ -17,7 +18,17 @@ const faqs: FAQItem[] = [
1718
},
1819
{
1920
question: "How does Roo Code differ from Copilot, Cursor, or Windsurf?",
20-
answer: "Open & Customizable: Roo Code is open-source and allows you to integrate any AI model (OpenAI, Anthropic, local LLMs, etc.). Multi-File Edits: It can read, refactor, and update multiple files at once for more holistic changes. Agentic Abilities: Roo Code can run tests, open a browser, or do deeper tasks than a typical AI autocomplete. Permission-Based: You control and approve any file changes or command executions.",
21+
answer: (
22+
<>
23+
Roo Code is <strong>open-source and fully customizable</strong>, letting you integrate any AI model you
24+
choose (e.g, OpenAI, Anthropic, local LLMs, etc.). It&apos;s built for <strong>multi-file edits</strong>
25+
, so it can read, refactor, and update multiple files at once for holistic code changes. Its{" "}
26+
<strong>agentic abilities</strong> go beyond a typical AI autocomplete, enabling it to run tests, open a
27+
browser, and handle deeper tasks. And you&apos;re always in control: Roo Code is{" "}
28+
<strong>permission-based</strong>, meaning you can control and approve any file changes or command
29+
executions.
30+
</>
31+
),
2132
},
2233
{
2334
question: "Is Roo Code really free?",
@@ -29,39 +40,154 @@ const faqs: FAQItem[] = [
2940
},
3041
{
3142
question: "Which AI models does Roo Code support?",
32-
answer: "Roo Code is model-agnostic. It works with: OpenAI models (GPT-3.5, GPT-4, etc.), Anthropic Claude, Local LLMs (through APIs or special plugins), Any other API that follows Roo Code's Model Context Protocol (MCP).",
43+
answer: "Roo Code is fully model-agnostic, giving you the flexibility to work with whatever AI models you prefer. It supports OpenAI models (like GPT-3.5 and GPT-4), Anthropic&apos;s Claude, and local LLMs via APIs or specialized plugins. You can even connect any other model that follows Roo Code&apos;s Model Context Protocol (MCP).",
3344
},
3445
{
3546
question: "Does Roo Code support my programming language?",
3647
answer: "Likely yes! Roo Code supports a wide range of languages—Python, Java, C#, JavaScript/TypeScript, Go, Rust, etc. Since it leverages the AI model's understanding, new or lesser-known languages may also work, depending on model support.",
3748
},
3849
{
3950
question: "How do I install and get started?",
40-
answer: "Install Roo Code from the VS Code Marketplace (or GitHub). Add your AI keys (OpenAI, Anthropic, or other) in the extension settings. Open the Roo panel (the rocket icon) in VS Code, and start typing commands in plain English!",
51+
answer: (
52+
<>
53+
Install Roo Code from the{" "}
54+
<a
55+
href="https://marketplace.visualstudio.com/items?itemName=RooVeterinaryInc.roo-cline"
56+
target="_blank"
57+
rel="noopener noreferrer"
58+
className="text-primary underline-offset-4 hover:underline">
59+
VS Code Marketplace
60+
</a>{" "}
61+
(or GitHub). Add your AI keys (OpenAI, Anthropic, or other) in the extension settings. Open the Roo
62+
panel (the rocket icon) in VS Code, and start typing commands in plain English!{" "}
63+
<a
64+
href="https://docs.roocode.com/tutorial-videos"
65+
target="_blank"
66+
rel="noopener noreferrer"
67+
className="text-primary underline-offset-4 hover:underline">
68+
Watch our tutorial to help you get started.
69+
</a>
70+
</>
71+
),
4172
},
4273
{
4374
question: "Can it handle large, enterprise-scale projects?",
44-
answer: "Absolutely. Roo Code uses efficient strategies (like partial-file analysis, summarization, or user-specified context) to handle large codebases. Enterprises especially appreciate the on-prem or self-hosted model option for compliance and security needs.",
75+
answer: (
76+
<>
77+
Absolutely. Roo Code uses efficient strategies (like partial-file analysis, summarization, or
78+
user-specified context) to handle large codebases. Enterprises especially appreciate the on-prem or
79+
self-hosted model option for compliance and security needs.{" "}
80+
<Link href="/enterprise" className="text-primary underline-offset-4 hover:underline">
81+
Learn more about Roo Code for enterprise.
82+
</Link>
83+
</>
84+
),
4585
},
4686
{
4787
question: "Is it safe for enterprise use?",
48-
answer: "Yes. Roo Code was designed with enterprise in mind: Self-host AI models or choose your own provider. Permission gating on file writes and commands. Auditable: The entire code is open-source, so you know exactly how it operates.",
88+
answer: (
89+
<>
90+
Yes. Roo Code was built for enterprise environments. You can self-host AI models or use your own trusted
91+
provider. All file changes and commands go through permission gating, so nothing runs without your
92+
approval. And because Roo Code is fully open-source, it&apos;s auditable—you can review exactly how it
93+
works before deploying it.{" "}
94+
<a
95+
href="https://roocode.com/enterprise"
96+
target="_blank"
97+
rel="noopener noreferrer"
98+
className="text-primary underline-offset-4 hover:underline">
99+
Learn more about Roo Code for enterprise.
100+
</a>
101+
</>
102+
),
49103
},
50104
{
51105
question: "Can Roo Code run commands and tests automatically?",
52-
answer: "Yes! One of Roo Code's superpowers is command execution (optional and fully permission-based). It can: Run npm install or any terminal command you grant permission for. Execute your test suites. Open a web browser for integration tests.",
106+
answer: "Yes! One of Roo Code&apos;s biggest strengths is its ability to execute commands—always optional and fully permission-based. It can run terminal commands like npm install, execute your test suites, and even open a web browser for integration testing when you approve it.",
53107
},
54108
{
55109
question: "What if I just want a casual coding 'vibe'?",
56-
answer: 'Roo Code shines for both serious enterprise development and casual "vibe coding." You can ask it to quickly prototype ideas, refactor on the fly, or provide design suggestions—without a rigid, step-by-step process.',
110+
answer: "Roo Code shines for both serious enterprise development and casual &apos;vibe coding.&apos; You can ask it to quickly prototype ideas, refactor on the fly, or provide design suggestions—without a rigid, step-by-step process.",
57111
},
58112
{
59113
question: "Can I contribute to Roo Code?",
60-
answer: "Yes, please do! Roo Code is open-source on GitHub. Submit issues, suggest features, or open a pull request. There's also an active community on Discord and Reddit if you want to share feedback or help others.",
114+
answer: (
115+
<>
116+
Yes, please do! Roo Code is open-source on{" "}
117+
<a
118+
href="https://github.com/RooCodeInc/Roo-Code"
119+
target="_blank"
120+
rel="noopener noreferrer"
121+
className="text-primary underline-offset-4 hover:underline">
122+
GitHub
123+
</a>
124+
. Submit issues, suggest features, or open a pull request. There&apos;s also an active community on{" "}
125+
<a
126+
href="https://discord.gg/roocode"
127+
target="_blank"
128+
rel="noopener noreferrer"
129+
className="text-primary underline-offset-4 hover:underline">
130+
Discord
131+
</a>{" "}
132+
and{" "}
133+
<a
134+
href="https://reddit.com/r/RooCode"
135+
target="_blank"
136+
rel="noopener noreferrer"
137+
className="text-primary underline-offset-4 hover:underline">
138+
Reddit
139+
</a>{" "}
140+
if you want to share feedback or help others.
141+
</>
142+
),
61143
},
62144
{
63145
question: "Where can I learn more or get help?",
64-
answer: "Check out: Official Documentation for setup and advanced guides. Discord & Reddit channels for community support. YouTube tutorials and blog posts from fellow developers showcasing real-world usage.",
146+
answer: (
147+
<>
148+
Check out our{" "}
149+
<a
150+
href="https://docs.roocode.com"
151+
target="_blank"
152+
rel="noopener noreferrer"
153+
className="text-primary underline-offset-4 hover:underline">
154+
official documentation
155+
</a>{" "}
156+
for both a quick-start set up and advanced guides. You can also get community support on{" "}
157+
<a
158+
href="https://discord.gg/roocode"
159+
target="_blank"
160+
rel="noopener noreferrer"
161+
className="text-primary underline-offset-4 hover:underline">
162+
Discord
163+
</a>{" "}
164+
and{" "}
165+
<a
166+
href="https://reddit.com/r/RooCode"
167+
target="_blank"
168+
rel="noopener noreferrer"
169+
className="text-primary underline-offset-4 hover:underline">
170+
Reddit
171+
</a>
172+
. You can also check out our{" "}
173+
<a
174+
href="https://www.youtube.com/@RooCodeYT"
175+
target="_blank"
176+
rel="noopener noreferrer"
177+
className="text-primary underline-offset-4 hover:underline">
178+
YouTube
179+
</a>{" "}
180+
tutorials and{" "}
181+
<a
182+
href="https://blog.roocode.com"
183+
target="_blank"
184+
rel="noopener noreferrer"
185+
className="text-primary underline-offset-4 hover:underline">
186+
blog posts
187+
</a>{" "}
188+
from fellow developers showcasing real-world usage.
189+
</>
190+
),
65191
},
66192
]
67193

@@ -85,7 +211,7 @@ export function FAQSection() {
85211
ease: [0.21, 0.45, 0.27, 0.9],
86212
}}>
87213
<h2 className="text-4xl font-bold tracking-tight sm:text-5xl">Frequently Asked Questions</h2>
88-
<p className="mt-6 text-lg text-muted-foreground">
214+
<p className="mt-6 text-lg text-muted-foreground max-w-2xl mx-auto">
89215
Everything you need to know about Roo Code and how it can transform your development
90216
workflow.
91217
</p>
@@ -124,7 +250,7 @@ export function FAQSection() {
124250
openIndex === index ? "max-h-96 pb-6" : "max-h-0",
125251
)}>
126252
<div className="px-6 text-muted-foreground">
127-
<p>{faq.answer}</p>
253+
{typeof faq.answer === "string" ? <p>{faq.answer}</p> : faq.answer}
128254
</div>
129255
</div>
130256
</div>

0 commit comments

Comments
 (0)