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
This commit is contained in:
thill2323 2025-07-22 18:49:14 -04:00 committed by Daniel Riccio
parent b165143768
commit f04b5f44dd
No known key found for this signature in database
GPG key ID: FFD5FD825F8E8209

View file

@ -4,10 +4,11 @@ import { useState } from "react"
import { motion } from "framer-motion"
import { ChevronDown } from "lucide-react"
import { cn } from "@/lib/utils"
import Link from "next/link"
interface FAQItem {
question: string
answer: string
answer: string | React.ReactNode
}
const faqs: FAQItem[] = [
@ -17,7 +18,17 @@ const faqs: FAQItem[] = [
},
{
question: "How does Roo Code differ from Copilot, Cursor, or Windsurf?",
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.",
answer: (
<>
Roo Code is <strong>open-source and fully customizable</strong>, letting you integrate any AI model you
choose (e.g, OpenAI, Anthropic, local LLMs, etc.). It&apos;s built for <strong>multi-file edits</strong>
, so it can read, refactor, and update multiple files at once for holistic code changes. Its{" "}
<strong>agentic abilities</strong> go beyond a typical AI autocomplete, enabling it to run tests, open a
browser, and handle deeper tasks. And you&apos;re always in control: Roo Code is{" "}
<strong>permission-based</strong>, meaning you can control and approve any file changes or command
executions.
</>
),
},
{
question: "Is Roo Code really free?",
@ -29,7 +40,7 @@ const faqs: FAQItem[] = [
},
{
question: "Which AI models does Roo Code support?",
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).",
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).",
},
{
question: "Does Roo Code support my programming language?",
@ -37,31 +48,146 @@ const faqs: FAQItem[] = [
},
{
question: "How do I install and get started?",
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!",
answer: (
<>
Install Roo Code from the{" "}
<a
href="https://marketplace.visualstudio.com/items?itemName=RooVeterinaryInc.roo-cline"
target="_blank"
rel="noopener noreferrer"
className="text-primary underline-offset-4 hover:underline">
VS Code Marketplace
</a>{" "}
(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!{" "}
<a
href="https://docs.roocode.com/tutorial-videos"
target="_blank"
rel="noopener noreferrer"
className="text-primary underline-offset-4 hover:underline">
Watch our tutorial to help you get started.
</a>
</>
),
},
{
question: "Can it handle large, enterprise-scale projects?",
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.",
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.{" "}
<Link href="/enterprise" className="text-primary underline-offset-4 hover:underline">
Learn more about Roo Code for enterprise.
</Link>
</>
),
},
{
question: "Is it safe for enterprise use?",
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.",
answer: (
<>
Yes. Roo Code was built for enterprise environments. You can self-host AI models or use your own trusted
provider. All file changes and commands go through permission gating, so nothing runs without your
approval. And because Roo Code is fully open-source, it&apos;s auditableyou can review exactly how it
works before deploying it.{" "}
<a
href="https://roocode.com/enterprise"
target="_blank"
rel="noopener noreferrer"
className="text-primary underline-offset-4 hover:underline">
Learn more about Roo Code for enterprise.
</a>
</>
),
},
{
question: "Can Roo Code run commands and tests automatically?",
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.",
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.",
},
{
question: "What if I just want a casual coding 'vibe'?",
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.',
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.",
},
{
question: "Can I contribute to Roo Code?",
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.",
answer: (
<>
Yes, please do! Roo Code is open-source on{" "}
<a
href="https://github.com/RooCodeInc/Roo-Code"
target="_blank"
rel="noopener noreferrer"
className="text-primary underline-offset-4 hover:underline">
GitHub
</a>
. Submit issues, suggest features, or open a pull request. There&apos;s also an active community on{" "}
<a
href="https://discord.gg/roocode"
target="_blank"
rel="noopener noreferrer"
className="text-primary underline-offset-4 hover:underline">
Discord
</a>{" "}
and{" "}
<a
href="https://reddit.com/r/RooCode"
target="_blank"
rel="noopener noreferrer"
className="text-primary underline-offset-4 hover:underline">
Reddit
</a>{" "}
if you want to share feedback or help others.
</>
),
},
{
question: "Where can I learn more or get help?",
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.",
answer: (
<>
Check out our{" "}
<a
href="https://docs.roocode.com"
target="_blank"
rel="noopener noreferrer"
className="text-primary underline-offset-4 hover:underline">
official documentation
</a>{" "}
for both a quick-start set up and advanced guides. You can also get community support on{" "}
<a
href="https://discord.gg/roocode"
target="_blank"
rel="noopener noreferrer"
className="text-primary underline-offset-4 hover:underline">
Discord
</a>{" "}
and{" "}
<a
href="https://reddit.com/r/RooCode"
target="_blank"
rel="noopener noreferrer"
className="text-primary underline-offset-4 hover:underline">
Reddit
</a>
. You can also check out our{" "}
<a
href="https://www.youtube.com/@RooCodeYT"
target="_blank"
rel="noopener noreferrer"
className="text-primary underline-offset-4 hover:underline">
YouTube
</a>{" "}
tutorials and{" "}
<a
href="https://blog.roocode.com"
target="_blank"
rel="noopener noreferrer"
className="text-primary underline-offset-4 hover:underline">
blog posts
</a>{" "}
from fellow developers showcasing real-world usage.
</>
),
},
]
@ -85,7 +211,7 @@ export function FAQSection() {
ease: [0.21, 0.45, 0.27, 0.9],
}}>
<h2 className="text-4xl font-bold tracking-tight sm:text-5xl">Frequently Asked Questions</h2>
<p className="mt-6 text-lg text-muted-foreground">
<p className="mt-6 text-lg text-muted-foreground max-w-2xl mx-auto">
Everything you need to know about Roo Code and how it can transform your development
workflow.
</p>
@ -124,7 +250,7 @@ export function FAQSection() {
openIndex === index ? "max-h-96 pb-6" : "max-h-0",
)}>
<div className="px-6 text-muted-foreground">
<p>{faq.answer}</p>
{typeof faq.answer === "string" ? <p>{faq.answer}</p> : faq.answer}
</div>
</div>
</div>