From f04b5f44dd852d429103b6d6fe18578d55f40342 Mon Sep 17 00:00:00 2001 From: thill2323 Date: Tue, 22 Jul 2025 18:49:14 -0400 Subject: [PATCH] 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 --- .../src/components/homepage/faq-section.tsx | 150 ++++++++++++++++-- 1 file changed, 138 insertions(+), 12 deletions(-) diff --git a/apps/web-roo-code/src/components/homepage/faq-section.tsx b/apps/web-roo-code/src/components/homepage/faq-section.tsx index 807327cdad..2590ffd701 100644 --- a/apps/web-roo-code/src/components/homepage/faq-section.tsx +++ b/apps/web-roo-code/src/components/homepage/faq-section.tsx @@ -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 open-source and fully customizable, letting you integrate any AI model you + choose (e.g, OpenAI, Anthropic, local LLMs, etc.). It's built for multi-file edits + , so it can read, refactor, and update multiple files at once for holistic code changes. Its{" "} + agentic abilities go beyond a typical AI autocomplete, enabling it to run tests, open a + browser, and handle deeper tasks. And you're always in control: Roo Code is{" "} + permission-based, 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's Claude, and local LLMs via APIs or specialized plugins. You can even connect any other model that follows Roo Code'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{" "} + + 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!{" "} + + Watch our tutorial to help you get started. + + + ), }, { 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.{" "} + + Learn more about Roo Code for enterprise. + + + ), }, { 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's auditable—you can review exactly how it + works before deploying it.{" "} + + Learn more about Roo Code for enterprise. + + + ), }, { 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'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 '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.", }, { 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{" "} + + 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. + + ), }, { 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{" "} + + official documentation + {" "} + for both a quick-start set up and advanced guides. You can also get community support on{" "} + + Discord + {" "} + and{" "} + + Reddit + + . You can also check out our{" "} + + YouTube + {" "} + tutorials and{" "} + + blog posts + {" "} + from fellow developers showcasing real-world usage. + + ), }, ] @@ -85,7 +211,7 @@ export function FAQSection() { ease: [0.21, 0.45, 0.27, 0.9], }}>

Frequently Asked Questions

-

+

Everything you need to know about Roo Code and how it can transform your development workflow.

@@ -124,7 +250,7 @@ export function FAQSection() { openIndex === index ? "max-h-96 pb-6" : "max-h-0", )}>
-

{faq.answer}

+ {typeof faq.answer === "string" ?

{faq.answer}

: faq.answer}